/* ==========================================================================
   Landeseiten (Ads) — Stand 12.09.2026

   Nur die Abweichungen vom normalen Seitentyp. Kopf und Fuss benutzen
   dieselben Klassen wie sonst (.site-head, .head-bar, .site-foot, .foot-nap),
   damit Farben, Abstaende und Zeichen ohne zweite Definition stimmen. Hier
   steht ausschliesslich, was WEGFAELLT und was an seine Stelle tritt.
   ========================================================================== */

/* Kopf: zwei Elemente, sonst nichts. Das Raster der normalen Leiste ist auf
   Wortmarke + Navigation + Aktionen ausgelegt und wuerde hier eine Luecke in
   die Mitte reissen. */
.site-head--lp .head-bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(0.75rem, 3vw, 2rem);
}

/* Telefon als vollwertiger zweiter Weg, nicht als Notloesung fuer schmale
   Schirme. Mindestens 44 px hoch — Fingerkuppe, nicht Mauszeiger. */
.lp-tel{
  display:inline-flex; align-items:center; gap:0.55rem;
  min-height:44px; padding:0.6rem 1.1rem; border-radius:14px;
  font:600 0.95rem/1 var(--fb); letter-spacing:0.01em;
  color:var(--paper); text-decoration:none;
  border:1px solid oklch(0.975 0.006 190 / 0.28);
  transition:background-color var(--dur-base) var(--eq), border-color var(--dur-base) var(--eq);
}
.lp-tel svg{ flex:none; }
.lp-tel:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; }
@media (hover:hover){
  .lp-tel:hover{ background:oklch(0.975 0.006 190 / 0.10); border-color:var(--mint-hell); }
}
/* Unter 600 px bleibt das Zeichen, damit die Wortmarke nicht gequetscht wird.
   Das Ziel bleibt 44 px gross — die Beschriftung faellt weg, die Flaeche nicht. */
@media (max-width:599px){
  .lp-tel-t{ position:absolute; width:1px; height:1px; overflow:hidden;
    clip-path:inset(50%); white-space:nowrap; }
  .lp-tel{ padding:0.6rem 0.75rem; }
}

/* Fuss: Anschrift und Pflichtangaben, keine Linkspalten. */
.site-foot--lp{ padding-block:clamp(2.5rem, 5vw, 3.75rem); }
.site-foot--lp .foot-nap{ margin-bottom:clamp(1.75rem, 4vw, 2.5rem); }
.site-foot--lp .foot-end{
  display:flex; flex-wrap:wrap; gap:0.9rem clamp(1rem, 4vw, 2.5rem);
  align-items:center; justify-content:space-between;
  border-top:1px solid oklch(0.975 0.006 190 / 0.14); padding-top:1.35rem;
}
@media (min-width:768px){
  .site-foot--lp .foot-nap{
    display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:0.55rem clamp(2rem, 6vw, 4rem); align-items:start;
  }
  .site-foot--lp .nap-name{ grid-column:1 / -1; }
}

/* Buehne: flacher als auf den Leistungsseiten. */
/* Auf einer bezahlten Seite entscheidet die erste Bildschirmhoehe, ob der
   Klick etwas wert war. Auf einem 900 px hohen Schirm bleiben nach Browser-
   leiste und Einwilligungsleiste keine 700 px uebrig — mit der Zeilengroesse
   der Leistungsseiten stuende der Amber-Weg darunter. Der Selektor haengt am
   Landeseiten-Kopf, damit die uebrigen 33 Seiten unberuehrt bleiben. */
.site-head--lp + main .page-hero-grid{
  padding-block:clamp(1.6rem, 3vw, 2.4rem) clamp(1.9rem, 3.4vw, 2.7rem);
  gap:clamp(1.75rem, 3.4vw, 2.75rem);
}
.site-head--lp + main .page-hero-copy{ gap:1.15rem; }
.site-head--lp + main .page-hero h1{
  font-size:clamp(2rem, 4.2vw, 3.15rem);
  max-width:15em;
}
.site-head--lp + main .page-hero-sub{ max-width:34rem; }

/* Ablauf-Raster: Schaubilder duerfen nicht beschnitten werden. */
/* Das Raster wechselt die Seitenverhaeltnisse 3/2 und 4/5 — gedacht fuer
   Projektfotos. Die Ablauf-Kacheln zeigen aber zur Haelfte Schaubilder und
   Bildschirmaufnahmen, und die sind alle exakt 3:2. In einer 4:5-Kachel
   schneidet object-fit genau die Aussage weg. Feste 3:2 fuer alles mit
   Bildschirm-Ton: dann passt das Motiv ohne Beschnitt hinein. Der Selektor
   haengt am Landeseiten-Kopf, die elf Projekt-Raster der uebrigen Seiten
   bleiben unberuehrt. */
.site-head--lp + main .proj.is-screen .proj__fig{ aspect-ratio:3 / 2; }

/* Die vier Kacheln sind anklickbar gross, aber nicht verlinkt — sie sollen
   trotzdem auf den Zeiger reagieren, sonst wirkt das Raster wie ein Aushang.
   Nur transform, und nur wo es einen Zeiger gibt. */
@media (hover:hover) and (prefers-reduced-motion: no-preference){
  .site-head--lp + main .proj__fig img{
    transition:transform 0.5s var(--eq);
  }
  .site-head--lp + main .proj:hover .proj__fig img{ transform:scale(1.03); }
}
/* ---------------------------------------------------------------------------
   Aufbau: naeher und kuerzer

   Der Aufbau der uebrigen Seiten faehrt 26 px weit und 750 ms lang. Das ist
   auf einer Leistungsseite in Ordnung, auf einer bezahlten Landeseite nicht:
   Dort liest jemand bereits, waehrend der naechste Absatz noch unterwegs ist.
   Sichtbare Bewegung ist hier kein Gewinn, sondern eine Verzoegerung.
   10 px und 480 ms bleiben spuerbar, ohne sich zu melden.

   Beide Bloecke haengen in prefers-reduced-motion: no-preference. Damit
   entsteht der Unschaerfe-Startwert gar nicht erst, wenn jemand wenig
   Bewegung eingestellt hat — ein !important-Ruecksetzer koennte ihn sonst
   uebersehen und der Text bliebe fuer immer unscharf.
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference){
  .js .site-head--lp + main .rv{
    transform:translateY(10px);
    transition-duration:0.48s;
  }

  /* Die Buehne wird scharf, statt nur aufzutauchen. Nur hier, nicht im
     ganzen Dokument: Es sind wenige, kleine Elemente, sie laufen genau
     einmal, und es ist der erste Eindruck nach einem bezahlten Klick. */
  .js .site-head--lp + main .page-hero-copy > *,
  .js .site-head--lp + main .page-hero-media{
    transform:translateY(12px);
    filter:blur(7px);
    animation-name:bmdSchaerfen;
    animation-duration:0.55s;
  }
  @keyframes bmdSchaerfen{
    to{ opacity:1; transform:none; filter:blur(0px); }
  }
}