/* =========================================================================
   Die KI-Füchse, ki-fuechse.de — Redesign "Blueprint" (18.08.2026)
   Umsetzung des Design-Handoffs "Ki-Füchse Homepage Überarbeitung":
   One-Pager mit Wortmarke DIE KI-FÜCHSE (Fuchsohren als Ü-Punkte),
   Datenblatt-Anfrage, durchgehend dunkel.

   Abweichungen vom Handoff, mit Grund:
   - Barlow und Barlow Condensed liegen SELBST GEHOSTET in fonts/ statt per
     Google-Import: die Content-Security-Policy erlaubt nur eigene Dateien,
     und die Datenschutzerklärung verspricht genau das.
   - Die Farbwelt wurde am 18.08.2026 auf die Marke umgestellt: Akzent ORANGE
     (das Logo-Orange #f47c20 selbst), Zweitfarbe BLAU #1d81c2. Der Handoff-
     Akzent #4a90d9 ist raus, er erreichte auf hellem Grund nur 2,99:1.
   - Es gibt NUR NOCH DEN DUNKLEN MODUS (Manni, 18.08.2026). Kein Schalter,
     kein data-theme, keine Auswertung der Systemeinstellung. Der Grund ist
     nicht Geschmack: auf hellem Grund ist das Logo-Orange mit 2,42:1 als
     Text unbrauchbar, es braeuchte einen zweiten abgedunkelten Ton. Auf
     Dunkel traegt der Markenton selbst. Eine Rueckkehr zu Hell heisst also
     immer auch: zwei Orangetoene statt einem.
   - Eine Fehlerzeile im Datenblatt kam dazu, weil der Entwurf kein Backend
     hatte; hier hängt senden.php dran, und der Server kann ablehnen.
   ========================================================================= */

@font-face{
  font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/barlow-400.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/barlow-400-ext.woff2") format("woff2");
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/barlow-500.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/barlow-500-ext.woff2") format("woff2");
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/barlow-condensed-600.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/barlow-condensed-600-ext.woff2") format("woff2");
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* Schreibschrift fuer die Byline, wie im Logo (Manni, 18.08.2026).
   Dancing Script, SIL Open Font License 1.1, darf selbst gehostet werden.
   Die Datei lag bereits im Windows-Schriftenordner und wurde mit fonttools
   auf die gebrauchten Zeichen reduziert: 114 kB TTF -> 16 kB woff2.
   Kein fremder Server, die CSP erlaubt ohnehin nur eigene Dateien. */
@font-face{
  font-family:"Dancing Script";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/dancing-script-400.woff2") format("woff2");
}

/* --- Tokens: die Seite ist DUNKEL, es gibt nur diesen einen Modus -------- */
:root{
  --color-bg:#16171a;
  --color-surface:#1e2024;
  --color-text:#e8e9eb;
  --color-divider:color-mix(in srgb, #e8e9eb 16%, transparent);

  /* Auf dunklem Grund ist Marke = Akzent, und genau das ist der Gewinn der
     Dark-only-Entscheidung: das ECHTE Logo-Orange #f47c20 erreicht hier
     6,62:1 und ist damit als Text- und Knopffarbe zugelassen. Auf hellem
     Grund waeren es nur 2,42:1 gewesen, dort brauchte es einen zweiten,
     abgedunkelten Ton. Seite und Logo tragen jetzt EINEN Orangeton.
     Die Rampe laeuft nach oben ins Helle: 700/800/900 sind heller als der
     Akzent (Hover, Active, Kleintext), 100/200 sind dunkle Flaechen. */
  --color-marke:#f47c20;
  --color-accent:#f47c20;
  --color-auf-akzent:#16171a;
  --color-accent-100:#3a2410;
  --color-accent-200:#4d2f13;
  --color-accent-300:#6b3f16;
  --color-accent-400:#8a531c;
  --color-accent-500:#c26a1c;
  --color-accent-600:#e07a24;
  --color-accent-700:#ffb877;
  --color-accent-800:#ff9a4d;
  --color-accent-900:#ffb877;

  /* Zweitfarbe Blau (Manni, 18.08.2026: "der perfekte Blauton").
     Rolle: STRUKTUR, nicht Aktion. Registrierungskreuze, Blueprint-Linien,
     Hinweise. Nie fuer Knoepfe oder Links, das bleibt der Akzent.
     Auf dem dunklen Grund: 4,24:1 als Linie, die Textstufe 7,12:1.
     ACHTUNG: Blau und Orange liegen fast gleich hell (1,2:1 zueinander). Fuer
     Rot-Gruen-Blinde sind sie nebeneinander kaum zu trennen. Farbe darf hier
     nie das einzige Unterscheidungsmerkmal sein, immer Form oder Text dazu. */
  --color-zweit:#1d81c2;
  --color-zweit-text:#5aabe0;

  --color-fehler:#ff8f8f;

  --font-heading:"Barlow Condensed",system-ui,sans-serif;
  --font-heading-weight:600;
  --font-body:"Barlow",system-ui,sans-serif;

  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow-md:0 3px 10px rgba(0,0,0,.55);
  --shadow-lg:0 12px 32px rgba(0,0,0,.6);
}
/* --- Basis --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
/* Das hidden-Attribut muss auch gegen display:inline-flex der Knöpfe
   gewinnen, sonst steht der Zurück-Knopf schon auf Schritt 1 im Bild. */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--color-bg);color:var(--color-text);
  font-family:var(--font-body);font-size:19px;line-height:1.62;font-weight:500;
  text-wrap:pretty;
  transition:background-color .25s ease, color .25s ease;
}
h1,h2,h3,h4{
  font-family:var(--font-heading);font-weight:var(--font-heading-weight);
  line-height:1.12;letter-spacing:-.015em;margin:0;
}
p{margin:0 0 10px}
a{color:var(--color-accent);text-underline-offset:3px}
a:hover{color:var(--color-accent-700)}
:focus{outline:none}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
::selection{background:color-mix(in srgb, var(--color-accent) 30%, transparent)}

/* --- Blueprint-Rahmen mit Registrierungskreuzen (aus dem DS) ------------- */
.blueprint{position:relative;border:1px solid var(--color-divider);border-radius:0}
.blueprint>.corner{
  position:absolute;width:11px;height:11px;
  color:var(--color-zweit);
}
.blueprint>.corner::before,.blueprint>.corner::after{content:"";position:absolute;background:currentColor}
.blueprint>.corner::before{left:5px;top:0;width:1px;height:100%}
.blueprint>.corner::after{top:5px;left:0;width:100%;height:1px}
.blueprint>.corner.tl{top:-6px;left:-6px}
.blueprint>.corner.tr{top:-6px;right:-6px}
.blueprint>.corner.bl{bottom:-6px;left:-6px}
.blueprint>.corner.br{bottom:-6px;right:-6px}

/* --- Knöpfe (DS, Blueprint-Grammatik: eckig) ----------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  cursor:pointer;text-decoration:none;
  font-family:var(--font-heading);font-weight:var(--font-heading-weight);
  font-size:16px;line-height:1.2;color:var(--color-text);
  background:transparent;border:1px solid var(--color-divider);border-radius:0;
  padding:7px 12px;
}
.btn svg{display:block;flex:none}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-primary{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-auf-akzent)}
.btn-primary:hover:not(:disabled){background:var(--color-accent-800);border-color:var(--color-accent-800)}
.btn-primary:active:not(:disabled){background:var(--color-accent-900);border-color:var(--color-accent-900)}
.btn-secondary:hover{background:color-mix(in srgb, var(--color-text) 7%, transparent)}
.btn-secondary:active{background:color-mix(in srgb, var(--color-text) 14%, transparent)}
.btn-ghost{color:var(--color-accent);border-color:transparent;padding-inline:4px}
.btn-ghost:hover{background:color-mix(in srgb, var(--color-accent) 10%, transparent);color:var(--color-accent)}
.btn-icon{width:36px;height:36px;padding:0}

/* --- Formular-Bausteine (DS) --------------------------------------------- */
.field>label{
  display:block;font-size:15px;margin-bottom:6px;
  color:color-mix(in srgb, var(--color-text) 82%, transparent);
}
.input{
  /* 16px ist Pflicht, nicht Geschmack: Safari auf dem iPhone zoomt beim
     Antippen automatisch in die Seite, wenn ein Feld kleiner gesetzt ist.
     min-height 44px, damit das Feld sicher zu treffen ist. */
  width:100%;min-height:48px;padding:11px 14px;font:inherit;font-size:18px;
  color:var(--color-text);caret-color:var(--color-accent);
  background:var(--color-surface);
  border:1px solid var(--color-divider);border-radius:0;
}
.input:hover{border-color:color-mix(in srgb, var(--color-text) 45%, transparent)}
.input:focus-visible{border-color:var(--color-accent);outline-offset:0}
textarea.input{min-height:90px;resize:vertical}

/* --- Tags ----------------------------------------------------------------- */
.tag{
  display:inline-flex;align-items:center;font-size:15px;letter-spacing:.02em;
  padding:5px 12px;border-radius:0;
}
.tag-outline{border:1px solid var(--color-accent);color:var(--color-accent)}

/* --- Kopfzeile (sticky) --------------------------------------------------- */
.kopf{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:14px;
  background:var(--color-bg);border-bottom:1px solid var(--color-divider);
  padding:12px clamp(20px,5vw,72px);
  transition:background-color .25s ease;
}
.kopf .marke-link{margin-right:auto;text-decoration:none;color:inherit}
.plakette{
  display:inline-block;border:1px solid var(--color-text);padding:3px 9px;
  font-family:var(--font-heading);font-weight:var(--font-heading-weight);
  letter-spacing:.16em;font-size:15px;
}
/* Das runde Logo in der Kopfzeile. Es ersetzt die DKIF-Plakette, die als
   Kurzzeichen bleibt (im Datenblatt-Kopf). 40px Anzeige, 96px Datei, damit
   es auf Retina scharf ist. Der Kreis braucht keinen Rahmen, er hat einen
   orangen Ring. */
.kopf .marke-link{display:inline-flex;align-items:center;gap:10px;min-height:44px}
/* schiebt Instagram und Anfrage gemeinsam nach rechts */
.kopf .marke-link{margin-right:auto}
.kopf .logo{display:block;width:40px;height:40px;flex:none}
.kopf .marke-wort{
  font-family:var(--font-heading);font-weight:var(--font-heading-weight);
  letter-spacing:.06em;font-size:19px;text-transform:uppercase;
  position:relative;
  /* Muss in EINER Zeile bleiben. Ohne das bricht sie zwischen dem u-Span
     (der die Ohren traegt) und dem Rest zu "DIE KI-FU" / "CHSE" um, sobald
     die Kopfzeile eng wird. Fiel im Impressum auf. */
  white-space:nowrap;
}
/* In der Kopfzeile traegt das Ü dieselben Fuchsohren wie im Hero (Manni,
   19.08.2026). Bei 19px Schrift waeren sie mit .18em nur 3,4px gross und
   damit ein Fleck, deshalb hier etwas kraeftiger und enger gesetzt. Die
   Stammmitten des u liegen unveraendert bei .099em und .334em, der
   Zwischenraum ergibt sich daraus: .235em minus Ohrbreite. */
.kopf .marke-wort .ohr{--ohr-b:.22em}
.kopf .marke-wort .ohren{--ohr-top:.167em}   /* gemessen, s. u. */
.kopf .anfrage-link{color:inherit;text-decoration:none;font-size:16px;font-weight:500}
/* Instagram in der Kopfzeile (Manni, 18.08.2026). Glyph als Inline-SVG,
   kein Bild von Meta: die CSP laesst nur eigene Dateien zu, und ein fremdes
   Bild waere ein Zaehler fuer jeden Seitenaufruf. */
.kopf-insta{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 6px;
  color:inherit;text-decoration:none;font-size:18px;font-weight:500;
}
/* Farbaufteilung wie von Manni gewuenscht (19.08.2026): das Zeichen blau,
   der Name orange, der Punkt darin der kraeftigste Blaupunkt der Seite.
   Der Punkt sitzt im SVG als eigener circle mit fill="var(--color-zweit)"
   und ist deshalb unabhaengig von der Strichfarbe. */
.kopf-insta{color:var(--color-accent)}
.kopf-insta svg{width:22px;height:22px;flex:none;color:var(--color-zweit)}
.kopf-insta:hover{color:var(--color-accent-700)}
.kopf-insta:hover svg{color:var(--color-zweit)}

/* Der Anfrage-Knopf in der Kopfzeile: dieselbe Form wie der grosse Knopf im
   Hero, nur kleiner (Manni, 18.08.2026: "genauso oben rechts, nur etwas
   kleiner"). Er pulsiert bewusst NICHT: zwei pulsierende Knoepfe auf einer
   Seite ziehen gegeneinander und machen die Kopfzeile unruhig. */
.nur-breit{display:inline}
@media (max-width:820px){ .nur-breit{display:none} }
.btn-klein{padding:0 16px;font-size:16px;min-height:44px;height:44px;gap:5px;line-height:1}
.kopf .anfrage-link{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
.kopf .anfrage-link:hover{color:var(--color-accent)}

/* --- Inhaltsspalte -------------------------------------------------------- */
.wrap{max-width:1140px;margin:0 auto;padding:0 clamp(20px,5vw,72px)}

/* --- Hero ------------------------------------------------------------------ */
.hero{padding:clamp(44px,7vw,88px) 0 clamp(56px,8vw,100px)}
/* Der Marken-Block: Logo und Wortmarke nebeneinander, ohne Kasten.
   Der frühere .rahmen mit Registrierungskreuzen ist raus (Manni: "KI Füchse
   nicht im Kasten"). Die Kreuze leben im Anfrage-Datenblatt weiter, dort
   tragen sie die Blueprint-Idee. */
.marke-block{
  display:flex;align-items:center;gap:clamp(20px,3.4vw,40px);
  flex-wrap:wrap;padding:0 0 clamp(18px,3vw,28px);
}
.logo-gross{
  display:block;width:clamp(150px,22vw,280px);height:auto;flex:none;
}
/* Wortmarke und Byline gehören zusammen und stehen NEBEN dem Logo, nicht
   als drittes Element daneben. Ohne diesen Block rutscht die Byline in die
   Flex-Reihe und landet rechts von der Wortmarke. */
.marke-text{flex:1 1 320px;min-width:0;text-align:center}

/* Die Wortmarke: DIE KI-FÜCHSE in Barlow Condensed, das Ü als U mit zwei
   Fuchsohren-Dreiecken im Akzent als Umlautpunkte. Alle Maße in em, damit
   die Ohren mit jeder Schriftgröße skalieren. */
.wortmarke{
  margin:0;
  font-size:clamp(42px,8.4vw,104px);
  line-height:1.05;letter-spacing:.01em;text-transform:uppercase;
}
/* .fuss .u gehoert zwingend dazu: ohne position:relative beziehen sich die
   absolut gesetzten Ohren auf den naechsten positionierten Vorfahren und
   landen im Fuss 107px daneben. Genau das war der Fall. */
.wortmarke .u,.marke-wort .u,.fuss .u{position:relative;display:inline-block}
/* Der Bindestrich in der Wortmarke traegt die Zweitfarbe (Manni, 19.08.2026:
   Orange soll dominieren, das Blau nur an einzelnen Strichen vorkommen).
   Genau ein Zeichen mitten im Namen: es faellt auf, nimmt dem Orange aber
   keine Flaeche. Kein Informationstraeger, rein gestalterisch.
   Knoepfe und Links bleiben bewusst orange, sonst konkurrieren zwei
   Signalfarben um dieselbe Bedeutung. */
.wortmarke .strich,.marke-wort .strich,.fuss .strich{color:var(--color-zweit)}
/* --- Sitz der Ohren -------------------------------------------------------
   Neu gemessen am 19.08.2026, diesmal am RICHTIGEN Buchstaben: die
   Wortmarke steht in Versalien, gerendert wird also ein grosses U. Die
   erste Messung galt dem kleinen u und lag daneben.

   Barlow Condensed 600, grosses U, per Canvas bei 500px:
     Stammbreite   .116em (beide)
     Stammmitten   .107em und .369em   ->  Abstand .262em
     Versalhoehe   .70em
     Advance       .478em
   (das kleine u hatte .115em / .099em / .334em, deshalb sassen die Ohren
   je .0135em zu weit innen)

   Kein flex mit gap mehr: jedes Ohr wird EINZELN auf seine Stammmitte
   gesetzt. Das ist unabhaengig von Rundungen und davon, wie breit das Ohr
   gerade ist. --ohr-b ist die Ohrbreite, die Formel zieht davon die Haelfte
   ab, damit die MITTE des Ohrs auf der Stammmitte landet. */
.wortmarke .ohren,.marke-wort .ohren,.fuss .ohren{
  /* --ohr-top ist je Ort GEMESSEN, nicht geraten: die Zeilenhoehe
     unterscheidet sich zwischen Hero (1.05), Kopfzeile und Fuss, deshalb
     liegt die Oberkante des U jeweils woanders im Span. Sollwert ist eine
     Ueberlappung von rund 3px, damit das Ohr aufsitzt statt zu schweben. */
  position:absolute;left:0;top:var(--ohr-top,.014em);
  width:100%;height:0;
}
.wortmarke .ohr,.marke-wort .ohr,.fuss .ohr{position:absolute}
.wortmarke .ohr.links,.marke-wort .ohr.links,.fuss .ohr.links{
  left:calc(.107em - var(--ohr-b) / 2);
}
.wortmarke .ohr.rechts,.marke-wort .ohr.rechts,.fuss .ohr.rechts{
  left:calc(.369em - var(--ohr-b) / 2);
}
/* Die Ohren sind gezeichnete SVG, keine clip-path-Dreiecke mehr
   (Manni, 18.08.2026: "richtig Muehe geben, dreidimensionaler Effekt").

   Warum SVG: ein clip-path kann weder gebogene Kanten noch Verlaeufe. Ein
   Fuchsohr unterscheidet sich vom Dreieck genau darin, dass die Aussenkante
   konvex ist, die Innenkante fast gerade faellt und die Spitze nach aussen
   versetzt sitzt.

   Farben wie im Logo: ORANGE AUSSEN, HELL INNEN. Die Plastik entsteht durch
   zwei GEGENLAEUFIGE Verlaeufe, nicht durch einen einzelnen: das Aussenohr
   wird zur Aussenkante hin dunkler, das Innenohr zur Basis hin. Dadurch
   liest sich das Innenohr als Vertiefung statt als aufgesetzter Fleck.

   Etwas groesser als die alten Dreiecke (.13em statt .115em), sonst
   verpufft die Zeichnung: bei 42px Schrift am Handy sind das nur rund 5px. */
.wortmarke .ohr,.marke-wort .ohr,.fuss .ohr{
  --ohr-hell:#ffa94d;
  --ohr-mitte:var(--color-marke);
  --ohr-dunkel:#c25c10;
  --ohr-spitze:#8a3f06;
  --ohr-innen-hell:#ffe9d2;
  --ohr-innen-schatten:#e0a978;

  --ohr-b:.18em;
  display:block;width:var(--ohr-b);height:calc(var(--ohr-b) * 1.333);
  transform-origin:50% 100%;
}
.wortmarke .ohr-svg,.marke-wort .ohr-svg,.fuss .ohr-svg{display:block;width:100%;height:100%}
.wortmarke .ohr.links,.marke-wort .ohr.links,.fuss .ohr.links{transform:rotate(-16deg)}
.wortmarke .ohr.rechts,.marke-wort .ohr.rechts,.fuss .ohr.rechts{transform:rotate(16deg)}

/* --- Die Ohren zucken ------------------------------------------------------
   Nachgebaut nach dem, was Fuechse wirklich tun, nicht nach Zeichentrick:

   1. Beide Ohren bewegen sich UNABHAENGIG voneinander. Deshalb zwei getrennte
      Keyframes und ein Versatz von 4,2s: es zuckt immer nur eines.
   2. Die Drehung geht spiegelbildlich nach AUSSEN, links weg und rechts weg.
   3. Ein Fuchs zuckt KURZ beim Orten eines Geraeusches und steht dann wieder
      still. Darum 9s Zyklus, davon rund 8 Prozent Bewegung.
   4. Wir sehen die Ohren VON VORN. Eine Drehung zur Seite zeigt sich deshalb
      als perspektivische Verschmaelerung (rotateY mit perspective), nicht als
      Kippen in der Bildebene. Reines rotate() waere das Anlegen der Ohren,
      also Angst statt Aufmerksamkeit. Die kleinen 2 bis 3 Grad rotate sind
      nur die Unsauberkeit, die jede echte Bewegung hat.

   WICHTIG: Jeder Keyframe traegt die VOLLE Kette samt Ruhelage. Eine
   Animation auf transform ueberschreibt die Grundregel oben, sonst schnappen
   die Ohren beim Start auf 0 Grad. */
@keyframes ohr-zuckt-links{
  0%,  8%  { transform:perspective(140px) rotate(-16deg) rotateY(0deg) }
  9.6%     { transform:perspective(140px) rotate(-19deg) rotateY(-52deg) }
  10.5%    { transform:perspective(140px) rotate(-18deg) rotateY(-46deg) }
  16%      { transform:perspective(140px) rotate(-16deg) rotateY(-6deg) }
  18%,100% { transform:perspective(140px) rotate(-16deg) rotateY(0deg) }
}
@keyframes ohr-zuckt-rechts{
  0%,  8%  { transform:perspective(140px) rotate(16deg) rotateY(0deg) }
  9.6%     { transform:perspective(140px) rotate(19deg) rotateY(52deg) }
  10.5%    { transform:perspective(140px) rotate(18deg) rotateY(46deg) }
  16%      { transform:perspective(140px) rotate(16deg) rotateY(6deg) }
  18%,100% { transform:perspective(140px) rotate(16deg) rotateY(0deg) }
}
.wortmarke .ohr.links{animation:ohr-zuckt-links 9s ease-in-out infinite}
.wortmarke .ohr.rechts{animation:ohr-zuckt-rechts 9s ease-in-out 4.2s infinite}

.byline{
  /* Kein Trennstrich mehr und dicht an der Wortmarke (Manni, 18.08.2026).
     Mittig darunter, so wie "Manni & Saša" im Logo unter dem Schriftzug
     steht. Der Block wird zusammen mit der Wortmarke neben dem Logo
     gesetzt, deshalb hier zentrieren und nicht am linken Rand ausrichten. */
  margin-top:clamp(2px,.6vw,8px);padding-top:0;
  display:flex;justify-content:center;align-items:baseline;gap:12px;flex-wrap:wrap;
  /* Schreibschrift und Akzentfarbe wie im Logo. Dancing Script laeuft
     deutlich kleiner als Barlow, deshalb die rund doppelte Groesse, sonst
     wirkt die Zeile verloren. */
  font-family:"Dancing Script",cursive;
  font-size:clamp(24px,3.2vw,34px);line-height:1.15;
  color:var(--color-accent);
}

.slogan{font-size:clamp(34px,4.6vw,58px);line-height:1.1;letter-spacing:-.015em;margin:clamp(36px,6vw,56px) 0 0}
.subline{
  /* Auf breiten Schirmen soll die Zeile in EINE Zeile passen: mit 58ch
     (689px) brach sie um und in der zweiten Zeile stand nur ein 120px
     kurzer Rest. text-wrap:balance verteilt den Text gleichmaessig, sobald
     das Fenster doch zu schmal wird, statt eine lange und eine sehr kurze
     Zeile zu erzeugen. */
  font-size:21px;line-height:1.55;max-width:80ch;margin:14px 0 0;
  text-wrap:balance;
  color:color-mix(in srgb, var(--color-text) 88%, transparent);
}
.cta-zeile{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:26px}
.cta-zeile .btn-primary,
.cta-unten .btn-primary{padding:16px 28px;font-size:20px}

/* Aufmerksamkeit ohne Grelle (Manni, 18.08.2026: der Puls war zu grell).
   Statt die Flaeche selbst heller und dunkler zu takten, wandert alle 7
   Sekunden EINMAL ein Lichtreflex ueber den Knopf, so wie Licht ueber eine
   glatte Oberflaeche streicht. Der Knopf behaelt dabei durchgehend seine
   Farbe, es aendert sich nur ein Schleier darueber.
   Dazu tippt der Pfeil im selben Takt kurz nach rechts: das lenkt den Blick
   auf die Handlung statt auf den Knopf als Flaeche.
   Beides laeuft 80 Prozent der Zeit gar nicht, das ist die Ruhe dazwischen. */
.cta-zeile .btn-primary,
.cta-unten .btn-primary,
.kopf .btn-klein{position:relative;overflow:hidden;isolation:isolate}

.cta-zeile .btn-primary::after,
.cta-unten .btn-primary::after,
.kopf .btn-klein::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,
    transparent 38%,
    color-mix(in srgb, #fff 26%, transparent) 50%,
    transparent 62%);
  transform:translateX(-130%);
  animation:cta-glanz 7s linear infinite;
}
@keyframes cta-glanz{
  0%,80%{ transform:translateX(-130%) }
  100%  { transform:translateX(130%) }
}

/* Der Pfeil tippt im selben Rhythmus kurz an. */
.cta-zeile .btn-primary svg,
.cta-unten .btn-primary svg,
.kopf .btn-klein svg{animation:cta-pfeil 7s ease-in-out infinite}
@keyframes cta-pfeil{
  0%,78%,92%,100%{ transform:translateX(0) }
  85%           { transform:translateX(3px) }
}

/* Beim Zeigen und Druecken ist die Aufmerksamkeit ohnehin da. */
.cta-zeile .btn-primary:hover::after,
.cta-zeile .btn-primary:focus-visible::after,
.cta-unten .btn-primary:hover::after,
.cta-unten .btn-primary:focus-visible::after,
.kopf .btn-klein:hover::after,
.kopf .btn-klein:focus-visible::after{animation:none;opacity:0}
.cta-zeile .btn-primary:hover svg,
.cta-unten .btn-primary:hover svg{animation:none;transform:translateX(3px);transition:transform .2s ease}
.microcopy{font-size:17px;margin:10px 0 0;color:color-mix(in srgb, var(--color-text) 70%, transparent)}
.tag-zeile{display:flex;flex-wrap:wrap;gap:8px;margin-top:36px}

/* --- Anfrage ---------------------------------------------------------------- */
.anfrage{padding:0 0 clamp(64px,10vw,120px)}
.kicker{
  display:block;font-size:14px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--color-accent-700);margin-bottom:12px;
}
.anfrage .linie{height:1px;border:0;margin:0 0 20px;background:var(--color-divider)}
.anfrage h2{font-size:clamp(30px,3.6vw,44px);line-height:1.12;text-transform:uppercase;letter-spacing:.02em}
.anfrage .sub{
  font-size:19px;margin:10px 0 0;max-width:58ch;
  color:color-mix(in srgb, var(--color-text) 82%, transparent);
}

/* Das Datenblatt */
/* Ohne Kasten (Manni, 19.08.2026: "der Rahmen gefaellt mir nicht so ganz").
   Der Kopf behaelt eine Ober- und Unterlinie, damit die Zeile mit
   "Schritt 1 von 2" nicht frei schwebt. Innen faellt das Polster weg, der
   Inhalt sitzt jetzt buendig zur uebrigen Seite. */
.platte{margin-top:36px}
.platte>header{border-top:1px solid var(--color-divider)}
.platte .innen{padding:clamp(20px,4vw,36px) 0 0}
.platte>header{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--color-divider)}
.platte>header .zelle{
  padding:11px 20px;font-size:14px;line-height:20px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  border-left:1px solid var(--color-divider);
  color:color-mix(in srgb, var(--color-text) 82%, transparent);
}
.platte>header .zelle.titel{
  flex:1;min-width:16ch;border-left:0;white-space:normal;color:var(--color-text);
}
.platte .innen{padding:clamp(20px,4vw,36px)}

.segmente{display:flex;gap:6px;margin-bottom:24px}
.segmente i{display:block;height:3px;flex:1 1 0;background:var(--color-divider)}
.segmente i.an{background:var(--color-accent)}

.schritt{animation:dkif-rise .25s ease}
.schritt[hidden]{display:none}
.schritt h3{font-size:clamp(22px,5vw,28px);text-transform:uppercase;letter-spacing:.02em;margin:0 0 16px}
.schritt .satz{
  font-size:18px;margin:-10px 0 16px;
  color:color-mix(in srgb, var(--color-text) 82%, transparent);
}

/* Genau drei Spalten: die sechs Themen stehen damit als zwei saubere
   Reihen zu dritt (Manni, 19.08.2026). Vorher fuellte auto-fit je nach
   Breite vier plus zwei, was unruhig aussah. */
.themen{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.themen button{
  display:flex;align-items:center;gap:10px;
  padding:13px 15px;width:100%;text-align:left;
  border:1px solid var(--color-divider);border-radius:0;background:transparent;
  color:inherit;font:inherit;font-size:19px;line-height:1.3;cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.themen button svg{flex:none}
.themen button:hover{border-color:var(--color-accent)}
.themen button.gewaehlt{
  border-color:var(--color-accent);
  background:var(--color-accent-100);color:var(--color-accent-800);
}

.felder{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;max-width:620px}
/* margin-top hier statt als style-Attribut: die CSP (style-src 'self')
   blockiert Inline-Stile. */
.notizfeld{max-width:620px;margin-top:14px}

.knopfzeile{display:flex;align-items:center;gap:10px;margin-top:26px}
.knopfzeile .platz{flex:1}
.knopfzeile .weiter{padding:13px 22px;font-size:17px}

.fehlerzeile{font-size:15px;margin:14px 0 0;color:var(--color-fehler)}
.fehlerzeile[hidden]{display:none}

/* Honigtopf: für Maschinen ein normales Feld, für Menschen unsichtbar. */
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Danke-Zustand */
.danke{display:flex;flex-direction:column;align-items:flex-start;gap:14px;animation:dkif-rise .3s ease}
.danke[hidden]{display:none}
.danke .siegel{width:46px;height:46px;display:grid;place-items:center;color:var(--color-accent)}
.danke h3{font-size:24px;text-transform:uppercase;letter-spacing:.02em;margin:6px 0 0}
.danke .gross{font-size:17px;margin:0;max-width:52ch;color:color-mix(in srgb, var(--color-text) 88%, transparent)}
.danke .klein{font-size:15px;margin:0;color:color-mix(in srgb, var(--color-text) 70%, transparent)}

@keyframes dkif-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* --- Fußzeile --------------------------------------------------------------- */
/* Zweiter Aufruf am Seitenende */
.cta-unten{
  border-top:1px solid var(--color-divider);
  padding:clamp(40px,6vw,64px) 0 clamp(32px,5vw,48px);
  text-align:center;
}
.cta-unten-text{
  font-family:var(--font-heading);font-weight:var(--font-heading-weight);
  font-size:clamp(24px,3.4vw,34px);text-transform:uppercase;letter-spacing:.02em;
  margin:0 0 18px;
}
.cta-unten .microcopy{margin-top:12px}

.fuss{
  border-top:1px solid var(--color-divider);
  padding:26px 0 44px;
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;
  font-size:16px;color:color-mix(in srgb, var(--color-text) 82%, transparent);
}
/* Der Name im Fuss traegt dieselbe Wortmarke wie oben: Versalien, blauer
   Bindestrich, Fuchsohren als Umlautpunkte (Manni, 19.08.2026). Die
   Grundregeln der Ohren gelten seit derselben Aenderung auch hier, deshalb
   sind nur noch Groesse und Abstand zu setzen. */
.fuss-marke{
  font-family:var(--font-heading);font-weight:var(--font-heading-weight);
  text-transform:uppercase;letter-spacing:.04em;
  color:var(--color-zweit);
  font-size:1.05em;
}
.fuss-marke .ohr{--ohr-b:.2em}
.fuss-marke .ohren{--ohr-top:.222em}         /* gemessen, s. u. */

.fuss .rechts{display:flex;gap:16px;align-items:center}
/* Impressum und Datenschutz sind am Handy sonst 24px hohe Ziele. Der
   Honigtopf (.honig input) bleibt bewusst aussen vor, er soll gerade NICHT
   getroffen werden. */
.fuss .rechts a{display:inline-flex;align-items:center;min-height:44px}
/* Instagram: Symbol und Name gehören zusammen, deshalb ein Link statt zwei.
   Das Glyph ist ein Inline-SVG, die CSP (img-src 'self') erlaubt keine
   fremden Quellen, und ein Bild vom Meta-Server wäre nebenbei ein Zähler
   für jeden Seitenaufruf. */
.fuss .insta{display:inline-flex;align-items:center;gap:6px;min-height:44px}
/* Auch die Trennpunkte im Fuss tragen das Blau. */
.fuss [aria-hidden="true"]{color:var(--color-zweit)}
.fuss .insta svg{flex:none}

/* --- Handy ---------------------------------------------------------------
   Bis zum 18.08.2026 hatte die Seite keine einzige Breakpoint-Query, alles
   lief ueber clamp(). Das traegt die Schriftgroessen, aber nicht die
   Abstaende: auf dem iPhone SE (375x667, aeltere Modelle 320x568) stand zu
   viel Luft zwischen zu wenig Inhalt. */
@media (max-width:480px){
  /* Luft rausnehmen, damit oberhalb der Faltkante mehr Inhalt steht */
  .hero{padding:28px 0 36px}

  /* Logo ueber die Wortmarke statt daneben, sonst bleibt fuer beides zu
     wenig Platz. 150px: gross genug, dass die Fuechse erkennbar sind, und
     klein genug, dass Claim UND Knopf auf dem iPhone SE (667px hoch) noch
     ueber der Faltkante stehen. Mit 200px lag der Knopf darunter. */
  .marke-block{flex-direction:column;align-items:flex-start;gap:14px;padding-bottom:14px}
  /* WICHTIG: in der Spaltenrichtung wirkt flex-basis auf die HOEHE, nicht
     auf die Breite. Ohne dieses Zuruecksetzen reisst .marke-text 320px hoch
     auf und zwischen Byline und Claim klafft eine leere Flaeche. */
  .marke-text{flex:0 0 auto;width:100%}
  .logo-gross{width:150px}
  .byline{margin-top:14px;padding-top:10px}
  .slogan{margin-top:24px}
  .byline{margin-top:20px}
  .cta-zeile{margin-top:20px}
  .tag-zeile{margin-top:24px;gap:6px}
  .anfrage{padding-bottom:56px}

  /* Der Knopf geht ueber die volle Breite, das ist am Daumen am sichersten */
  .cta-zeile{display:block}
  .cta-zeile .btn-primary,
  .cta-unten .btn-primary{display:flex;width:100%;min-height:52px}

  /* Drei Spalten passen auf 375px nicht, dort untereinander */
  .themen{grid-template-columns:1fr}

  /* Der Fuss stapelt statt zu quetschen */
  .fuss{flex-direction:column;align-items:flex-start;gap:4px}
  .fuss .rechts{gap:14px;flex-wrap:wrap}

  /* Kopfzeile: der Instagram-Name entfaellt, das Glyph genuegt. Sonst
     draengeln sich Logo, Wortmarke, @ki.fuechse und Anfrage auf 375px und
     die Wortmarke bricht auf zwei Zeilen um (Kopfzeile wurde 80px hoch).
     Der volle Name steht weiterhin im Fuss. */
  .kopf-insta .insta-name{display:none}
  .kopf{gap:10px}
}

/* iPhone SE der ersten Generation und alles darunter */
@media (max-width:360px){
  .wrap{padding-inline:16px}
  .kopf{padding-inline:16px;gap:8px}
  .kopf .marke-wort{display:none}   /* nur noch Logo, der Name steht im Hero */
  .themen button{padding-inline:12px}

  /* iPhone SE der ersten Generation ist nur 568px hoch. Damit der Knopf
     moeglichst nah an die Faltkante rueckt, ohne das Logo zu verstecken:
     etwas kleiner, Byline enger. Ganz drueber passt es nicht, dafuer
     stehen Logo, Wortmarke, Claim und Leistungszeile davor. */
  .logo-gross{width:128px}
  .marke-block{gap:12px;padding-bottom:8px}
  .byline{margin-top:12px;padding-top:8px}
  .slogan{margin-top:18px}
  .subline{margin-top:10px}
}

/* --- Erscheinen beim Scrollen ---------------------------------------------
   Der Startzustand haengt an .js-einblenden am <html>. Diese Klasse setzt
   js/seite.js selbst, erst wenn der IntersectionObserver wirklich laeuft.
   Ohne JavaScript greift keine dieser Regeln und alles ist sofort da, statt
   dass die halbe Seite unsichtbar bleibt. */
.js-einblenden .anfrage,
.js-einblenden .cta-unten,
.js-einblenden .tag-zeile,
.js-einblenden .fuss,
.js-einblenden .slogan,
.js-einblenden .subline{
  /* Deutlicher als zuvor (Manni, 19.08.2026: er nahm die Einblendung gar
     nicht wahr). 16px Versatz waren zu wenig, um als Bewegung zu lesen. */
  opacity:0;transform:translateY(30px);
  transition:opacity .7s ease-out, transform .7s cubic-bezier(.2,.7,.3,1);
}
.js-einblenden .sichtbar{opacity:1;transform:none}

/* Leichte Staffelung: die Unterzeile kommt kurz nach dem Claim, die
   Tag-Zeile danach. Mehr als 120ms wirkt zaeh. */
.js-einblenden .subline{transition-delay:.1s}
.js-einblenden .tag-zeile{transition-delay:.18s}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  /* Ohne Uebergang muessen die Elemente sofort sichtbar sein, sonst blieben
     sie auf opacity:0 haengen. */
  .js-einblenden .anfrage,
  .js-einblenden .cta-unten,
  .js-einblenden .tag-zeile,
  .js-einblenden .fuss,
  .js-einblenden .slogan,
  .js-einblenden .subline{opacity:1!important;transform:none!important}
}