/* =================================================================
   SCHLIFF — Design-Runden ab 2026-08-29
   Laedt als letzte CSS, nach mobil.css. Jede Runde steht als
   eigener Block mit dem Befund, der sie ausgeloest hat.
   ================================================================= */

/* --- R1.1 Prinzipien: Loch zwischen Name und Erklaerung -------------
   Das Raster stand auf .92fr | 1.08fr. Die Namen sind aber Einzel-
   woerter ("Persoenlich", "Ehrlich", "Diskret") und bekamen 463px
   fuer 130px Text — dazwischen klaffte eine tote Spalte. Der Name
   braucht knapp, die Erklaerung darf breit. */
@media(min-width:900px){
  .pr-row{grid-template-columns:4.4rem minmax(0,.6fr) minmax(0,1.4fr)}
  .pr-main span{max-width:64ch}
}

/* --- R1.2 Manifesto: die Buehne hatte keinen Auftakt ----------------
   Die Sektion ist ein Vollbild-Statement (min-height:100svh) und
   steht direkt hinter der ebenfalls schwarzen Vorgehen-Sektion. Ohne
   Kante dazwischen liest sich der zentrierende Leerraum nicht als
   Buehne, sondern als Loch — rund 400px, in denen nichts passiert.
   Eine Haarlinie plus ein Hauch Licht darueber setzt den Auftakt. */
.section.manifesto{position:relative;border-top:1px solid rgba(147,178,237,.14)}
.section.manifesto::before{
  content:"";position:absolute;left:0;right:0;top:0;height:clamp(6rem,22vh,13rem);
  pointer-events:none;z-index:0;
  background:radial-gradient(72% 100% at 50% 0%,rgba(147,178,237,.09),transparent 72%)}
.section.manifesto > *{position:relative;z-index:1}

/* --- R1.3 „Web, Marketing + KI" brach 2 + 1 um ----------------------
   .facts stand auf flex-wrap mit 2rem Abstand. In der 617px breiten
   Spalte passten zwei Bloecke nebeneinander, der dritte fiel in eine
   eigene Zeile und liess daneben eine leere Haelfte stehen. Drei
   gleiche Spalten setzen sie in eine Reihe. */
@media(min-width:900px){
  .about .facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1.6rem;align-items:start}
  .about .facts .f b{font-size:1.16rem;line-height:1.25}
  .about .facts .f span{display:block;margin-top:.25rem}
}

/* --- R1.4 449px Leere unter dem Portraet ----------------------------
   Der Text rechts ist laenger als das Foto links, darunter blieb fast
   ein halber Bildschirm nichts. Das Foto laeuft jetzt mit, statt am
   oberen Rand zu kleben und zuzusehen. */
/* (Das Sticky ist mit R2.2 auf .about-side umgezogen — dort haengt
   jetzt auch die Signatur dran.) */

/* --- R2.1 Laufband schnitt durch den Manifesto-Satz -----------------
   Das Band setzt 187px Schrift in eine 168px hohe Zeile: die Glyphen
   ragen oben wie unten 36px aus ihrer Zeile heraus und schnitten die
   erste Textzeile auf 66px. Als Textur gedacht, als Stoerung gelesen.
   Der Abstand haengt an vw, weil die Bandschrift das auch tut. */
.manifesto .mf-band{margin-bottom:clamp(3rem,10vw,11rem)}
/* Abstand allein reicht nicht: die Sektion zentriert ihren Inhalt, jeder
   zugegebene Millimeter verteilt sich also zur Haelfte nach oben. Das
   Band ist reine Textur — es kommt aus dem Fluss und legt sich in den
   freien Raum ueber dem Satz. */
@media(min-width:900px){
  .section.manifesto > .mf-band{
    position:absolute;left:0;right:0;top:clamp(2.5rem,11vh,7rem);
    margin:0;z-index:0}
}

/* --- R2.2 Signatur unter das Portraet -------------------------------
   Sie stand als vierte Zelle neben den drei Fakten und las sich wie
   eine weitere Eigenschaft. Unter dem Foto ist sie das, was sie ist:
   die Unterschrift zum Bild. Foto und Signatur teilen sich dafuer die
   linke Spalte (.about-side) und schieben sich an deren Enden — das
   fuellt die Leere, die der laengere Text rechts hinterlaesst. */
.about-side{display:flex;flex-direction:column;gap:2rem}
@media(min-width:981px){
  .about-grid{align-items:stretch}
  .about-side{height:100%;justify-content:space-between;
    position:sticky;top:clamp(5.5rem,9vh,7rem);align-self:start}
  .about-side .sign--foto{padding-top:1.6rem;border-top:1px solid var(--line)}
}

@media(max-width:980px){
  /* Einspaltig wuerde die Signatur zwischen Foto und Ueberschrift
     rutschen und den Text unterschreiben, bevor er anfaengt. Der
     Wrapper loest sich auf, die Signatur geht ans Ende. */
  .about-side{display:contents}
  .about-grid .sign--foto{order:3;margin:1.8rem 0 0}
}

/* --- R3.1 Manifesto auf dem Handy ----------------------------------
   Im Fluss bleibt das Band dort, wo min-height:0 nicht greift — die
   Sektion ist auch auf 390px ein voller Bildschirm. Zwei Zeilen Text
   auf 844px sind in der Hand aber kein Statement mehr, sondern
   Scrollarbeit. Etwas flacher, und der Abstand so, dass die Glyphen
   die erste Zeile nicht mehr streifen. */
@media(max-width:899px){
  .section.manifesto{min-height:64svh}
  /* Auf 390px zeigt das Laufband nur noch „o — Webdesig" — ein
     angeschnittenes Wortfragment quer durch den Satz. Als Textur
     traegt es dort nichts, es stoert nur. */
  .manifesto .mf-band{display:none}
}

/* --- R4.1 Geoeffnete Aufklapper zeigten einen Strich hochkant -------
   Betrifft das FAQ auf allen Seiten und den KI-Aufklapper der Startseite.
   Das Zeichen dreht sich beim Oeffnen um 90 Grad UND blendet den
   senkrechten Strich aus. Beides zusammen hebt sich auf: uebrig blieb
   der waagerechte Strich, von der Drehung wieder aufgestellt. Es muss
   der senkrechte stehen bleiben, dann legt ihn die Drehung flach. */
.faq-item.open .faq-q .pm::before,
.ki-toggle[aria-expanded="true"] .pm::before{opacity:0}
.faq-item.open .faq-q .pm::after,
.ki-toggle[aria-expanded="true"] .pm::after{opacity:1}

/* --- R5.1 Fokusring war auf dunklen Flaechen unsichtbar -------------
   Der Ring nimmt --accent. Auf hellem Grund ist das richtig, auf dem
   Hero und im Branchen-Ticker steht dann aber Tintenblau auf Fast-
   Schwarz: Kontrast 1,9 — wer die Seite per Tastatur bedient, sieht
   nicht, wo er ist. Der Fokus bekommt einen eigenen Ton, der dem
   Untergrund folgt statt der Akzentfarbe.
   Zusaetzlich ein dunkler Saum: liegt der Ring einmal auf einer
   hellen Flaeche auf, traegt er seinen Kontrast selbst mit. */
:root{--fokus:#1D39A5}
.tone-dark,.hero,.ticker,.section.manifesto,.page-hero,.site-footer,footer{--fokus:#BFD3F2}
:focus-visible{
  outline:2px solid var(--fokus);outline-offset:3px;
  box-shadow:0 0 0 5px rgba(9,16,32,.28)}
.tone-dark :focus-visible,.hero :focus-visible,.ticker :focus-visible,
.page-hero :focus-visible,footer :focus-visible{
  box-shadow:0 0 0 5px rgba(5,10,20,.55)}