/* Perlution – Stylesheet
   Farben und Typografie nach Brand Guide: Schwarz, Weiß, Grau, Cyber Teal #2EE5A8, Manrope. */

/* ---------- Schrift, selbst gehostet ----------
   Manrope (SIL Open Font License 1.1), Quelle: @fontsource/manrope.
   Latin und Latin Extended getrennt, der Browser lädt nur, was die Seite braucht.
   Kein Request an Google. */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/manrope-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/manrope-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/manrope-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/manrope-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;
  src:url('fonts/manrope-800-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;
  src:url('fonts/manrope-800-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --ink:#000000; --paper:#FFFFFF; --teal:#2EE5A8; --teal-soft:#C9F5E4;
  --grey:#F2F2F2; --line:#E4E4E4; --mute:#6B6B6B;
  --pad:clamp(20px,5vw,72px); --maxw:1180px; --head:62px;

  /* Typografische Leiter – bewusst nur fünf Stufen.
     Weniger Größen heißt weniger Entscheidungen für das Auge. */
  --t-label:11px;                          /* Marker in Großbuchstaben */
  --t-micro:13px;                          /* Hinweise, Fußzeile */
  --t-body:16px;                           /* Fließtext und Buttons */
  --t-input:clamp(1.25rem,2.6vw,1.9rem);   /* die Eingabe: zweite Stimme */
  /* Die Frage: erste Stimme. Sie richtet sich nach Breite UND Höhe des
     Fensters – auf einem flachen Notebook-Bildschirm wird sie von selbst
     kleiner, damit Feld und Knopf ohne Scrollen sichtbar bleiben. */
  --t-h1:clamp(2.4rem,min(6.4vw,8.6vh),4.6rem);

  /* Abstandsleiter – innerhalb einer Gruppe eng, zwischen Gruppen weit.
     Gesetz der Nähe: die Seite liest sich als drei Blöcke statt als acht Zeilen. */
  --s-1:8px; --s-2:14px; --s-3:22px; --s-4:34px; --s-5:56px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.62;font-weight:400;-webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
img{max-width:100%;height:auto}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
a{color:inherit}
section[id]{scroll-margin-top:var(--head)}
p{margin:0 0 14px}
p:last-child{margin-bottom:0}

.eyebrow{
  font-size:var(--t-label);font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mute);margin:0 0 var(--s-2);display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:9px;height:9px;background:var(--teal);flex:none;
  clip-path:polygon(0 100%,100% 0,100% 100%)}

/* ---------- Kopf ---------- */
header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.93);
  backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--head)}
.bar img{display:block;width:128px;height:auto}
/* Der einzige Navigationspunkt bleibt bewusst leise: kein Teal, kein Fettdruck.
   Oben rechts ist die zweitstärkste Blickposition – die gehört nicht dem Impressum. */
.bar .jump{font-size:var(--t-micro);font-weight:400;text-decoration:none;color:var(--mute)}
.bar .jump:hover{color:var(--ink)}

/* ---------- Die Frage ---------- */
.ask{position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  min-height:calc(100svh - var(--head));display:flex;flex-direction:column;justify-content:center}
/* Die Polster oben und unten geben in der Höhe nach, bevor der Inhalt es tut. */
.ask .wrap{position:relative;z-index:2;padding-top:clamp(28px,5vh,80px);padding-bottom:clamp(28px,5vh,80px);width:100%}
/* Blickfolge: Marker → Einladung → Frage → Eingabe → Knopf.
   Der Satz steht bewusst vor der Überschrift: er nimmt die Hürde weg,
   die Frage darunter holt dann die Antwort ab. */
.kicker{margin:0 0 var(--s-3);max-width:44ch;color:var(--mute);
  font-size:var(--t-body);line-height:1.55}
h1{font-weight:800;letter-spacing:-.045em;line-height:.95;
  font-size:var(--t-h1);margin:0;max-width:16ch}

/* Das Feld bekommt eine eigene Fläche. Vorher war es typografisch kaum von
   einem Absatz zu unterscheiden – jetzt ist auf den ersten Blick klar,
   dass man hier etwas tun darf. Aufforderungscharakter statt Text. */
.field{margin:clamp(24px,4vh,56px) 0 0;max-width:36ch;position:relative}
.answer{
  display:block;width:100%;font:inherit;font-weight:600;
  font-size:var(--t-input);line-height:1.35;letter-spacing:-.02em;
  padding:18px 20px 16px;border:0;border-bottom:2px solid var(--line);outline:0;
  border-radius:12px 12px 0 0;background:var(--grey);
  /* Rückfallhöhe für zwei Zeilen Beispieltext, falls JavaScript aus ist.
     Sonst setzt ask.js die Höhe des längsten Beispiels als min-height, damit
     beim Selbsttippen kein Zeilenumbruch die Seite verschiebt. Die Höhe hängt
     bewusst an der Platzhaltergröße, nicht an der Textgröße – sonst würde das
     Feld zusammenspringen, sobald die Schrift beim Tippen kleiner wird. */
  min-height:calc(var(--t-input) * 2.7 + 34px);
  white-space:pre-wrap;overflow-wrap:break-word;caret-color:var(--ink);
  transition:border-color .2s ease,background .2s ease,font-size .15s ease;
}
/* Solange nur das Beispiel läuft, bleibt die Schrift groß – das Feld ist dann
   die Einladung. Sobald jemand tippt, geht sie auf Fließtextgröße zurück:
   Man schreibt bequemer und sieht mehr vom eigenen Text auf einen Blick. */
.answer:not(:empty){font-size:var(--t-body);line-height:1.55;letter-spacing:normal}
.answer:hover{background:#EDEDED}
.answer:focus{border-bottom-color:var(--ink);background:#EDEDED}
.answer:empty::before{content:attr(data-ph);color:#7C7C7C;font-weight:400}
.answer.typing:empty::before{border-right:2px solid var(--teal);padding-right:2px}
/* Hinweis steht unter dem Knopf, nicht davor: dort beantwortet er die Frage
   „Was passiert, wenn ich klicke?" genau im Moment des Zögerns. */
.hint{margin:var(--s-2) 0 0;font-size:var(--t-micro);color:var(--mute);max-width:40ch}
.direct{margin:var(--s-4) 0 0;font-size:var(--t-micro);color:var(--mute)}
.direct a{color:var(--ink);font-weight:600;text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:1px;
  white-space:nowrap}
.direct a:hover{border-color:var(--teal)}

/* Die Marke reagiert auf die Eingabe */
.tri-outer{position:absolute;right:0;bottom:0;z-index:1;pointer-events:none;
  width:clamp(190px,29vw,410px);aspect-ratio:1/1;transform-origin:100% 100%}
.tri{width:100%;height:100%;background:var(--teal);
  clip-path:polygon(0 100%,100% 0,100% 100%);transform-origin:100% 100%;
  transform:translateY(calc(var(--k,0) * -38px)) scale(calc(1 + var(--k,0) * .16));
  transition:transform .7s cubic-bezier(.19,1,.22,1)}
@media (max-width:820px){.tri-outer{width:52vw;bottom:-1px}}
/* Auf schmalen Displays kleiner, damit die Kontaktzeile frei bleibt */
@media (max-width:600px){.tri-outer{width:40vw}}

/* ---------- Buttons ---------- */
/* Genau ein schwarzer Block auf der Seite. Alles andere ist heller.
   Das Auge sucht den stärksten Kontrast – und findet dort die Handlung. */
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:var(--s-3)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  text-decoration:none;font:inherit;font-weight:600;font-size:var(--t-body);
  padding:16px 28px;border-radius:10px;border:1.5px solid transparent;cursor:pointer;
  transition:transform .18s ease,background .18s ease,border-color .18s ease}
.btn-p{background:var(--ink);color:#fff}
.btn-p:hover{transform:translateY(-2px);background:#171717}
/* Sekundär: nur eine Linie. Erreichbar, aber nie im Wettbewerb mit dem Hauptknopf. */
.btn-s{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-s:hover{transform:translateY(-2px);border-color:var(--ink)}
.btn .ar{width:9px;height:9px;background:currentColor;flex:none;
  clip-path:polygon(0 100%,100% 0,100% 100%);transition:transform .18s ease,background .25s ease}
.btn:hover .ar{transform:translate(2px,-2px)}
/* Kleine Belohnung: sobald etwas im Feld steht, färbt sich der Pfeil.
   Ein sichtbarer Fortschritt macht das Absenden wahrscheinlicher. */
.btn-p.ready .ar{background:var(--teal)}

/* ---------- Abschnitte ---------- */
section.row{border-bottom:1px solid var(--line)}
.row .wrap{display:grid;grid-template-columns:190px minmax(0,1fr);gap:clamp(24px,5vw,64px);
  padding-top:clamp(44px,6vw,80px);padding-bottom:clamp(44px,6vw,80px)}
@media (max-width:820px){.row .wrap{grid-template-columns:1fr;gap:22px}}
h2{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800;letter-spacing:-.03em;line-height:1.1;margin:0 0 18px}
h3{font-size:15px;font-weight:600;margin:0 0 6px}

.card{position:relative;padding:clamp(26px,4vw,44px);background-color:var(--grey);
  background-image:linear-gradient(45deg,var(--teal) 0 50%,transparent 50%);
  background-size:52px 52px;background-position:left bottom;background-repeat:no-repeat}
.clist{display:grid;gap:26px}
@media (min-width:700px){.clist{grid-template-columns:1fr 1fr;gap:30px 40px}}
.clist .k{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:5px}
.clist a{font-size:clamp(1.05rem,2vw,1.3rem);font-weight:600;letter-spacing:-.01em;
  text-decoration:none;line-height:1.4;display:inline-block;position:relative;transition:transform .18s ease}
.clist a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--ink);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .22s ease}
.clist a:hover{transform:translateY(-2px)}
.clist a:hover::after{transform:scaleX(1)}

/* ---------- Impressum, kompakt ---------- */
.imp{font-size:var(--t-body);color:#242424;max-width:64ch}
.imp dl{display:grid;grid-template-columns:auto 1fr;gap:5px 22px;margin:0}
@media (max-width:560px){.imp dl{grid-template-columns:1fr;gap:1px 0}.imp dd{margin-bottom:10px}}
.imp dt{font-weight:600;color:var(--mute);font-size:var(--t-micro);padding-top:2px}
.imp dd{margin:0}
.imp .more{margin-top:var(--s-3);font-size:var(--t-micro);color:var(--mute);line-height:1.7}
.imp .more a{color:var(--ink);font-weight:600;text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:1px}
.imp .more a:hover{border-color:var(--teal)}

/* ---------- Rechtstextseite ---------- */
.doc{padding-top:clamp(44px,6vw,84px);padding-bottom:clamp(52px,7vw,96px);max-width:70ch}
.doc h1{font-size:clamp(2rem,4.6vw,3.2rem);max-width:none;margin:22px 0 26px}
.doc h2{font-size:clamp(1.15rem,2vw,1.4rem);margin:38px 0 10px}
.doc p,.doc li{font-size:16px;color:#242424}
.doc ul{margin:0 0 14px;padding-left:18px}
.doc li{margin-bottom:8px}
.doc .updated{font-size:13px;color:var(--mute);margin-top:44px;padding-top:18px;border-top:1px solid var(--line)}
.doc a{color:var(--ink)}
.back{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600;
  text-decoration:none;color:var(--mute);margin-top:38px}
.back:hover{color:var(--ink)}
.back i{width:8px;height:8px;background:var(--teal);display:block;
  clip-path:polygon(0 0,100% 100%,0 100%)}

/* ---------- noch einzutragen ---------- */
.todo{background:var(--teal-soft);box-shadow:0 0 0 2px var(--teal-soft);border-radius:2px;font-weight:600}

/* ---------- Fuß ---------- */
footer{background:var(--ink);color:#fff}
footer .wrap{padding-top:56px;padding-bottom:44px;display:flex;flex-wrap:wrap;gap:26px;
  align-items:flex-end;justify-content:space-between}
footer img{width:164px;height:auto;display:block}
.fmeta{font-size:var(--t-micro);color:#9a9a9a;line-height:1.7}
.fmeta a{color:#fff;text-decoration:none;border-bottom:1px solid #444;padding-bottom:1px}
.fmeta a:hover{border-color:var(--teal)}
footer .todo{background:transparent;box-shadow:none;color:var(--teal)}

/* ---------- Schmale Displays ---------- */
@media (max-width:600px){
  .ask .wrap{padding-bottom:clamp(88px,26vw,130px)}
  .field{max-width:none;margin-top:var(--s-4)}
  .actions{gap:10px}
  .actions .btn{flex:1 1 100%;padding:17px 22px}
  /* Seit der Anruf-Knopf weg ist, ist diese Zeile der einzige Weg zum Telefon
     oberhalb der Fußzeile – deshalb steht sie mobil wieder da, nur leise. */
  .direct{max-width:none}
  .imp dl{font-size:var(--t-body)}
  .doc h1{margin-top:14px}
}
@media (max-width:600px) and (orientation:landscape){
  .ask{min-height:auto}
}

/* ---------- Bedienbarkeit ---------- */
:focus-visible{outline:3px solid var(--teal);outline-offset:4px;border-radius:3px}
.answer:focus-visible{outline:0}
.skip{position:absolute;left:-9999px;top:0;background:#000;color:#fff;padding:12px 18px;z-index:99}
.skip:focus{left:8px;top:8px}

/* ---------- Bewegung ---------- */
@keyframes fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes grow{from{transform:scale(.08);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes blink{50%{border-color:transparent}}
/* Die Einblendung folgt exakt der Leserichtung und führt den Blick
   einmal von oben nach unten durch – bevor der Besucher selbst sucht. */
.ask .eyebrow{animation:fade .7s ease both}
.ask .kicker{animation:fade .7s ease .08s both}
.ask h1{animation:fade .8s ease .2s both}
.ask .field{animation:fade .8s ease .32s both}
.ask .actions{animation:fade .8s ease .44s both}
.ask .hint{animation:fade .8s ease .54s both}
.ask .direct{animation:fade .8s ease .6s both}
.tri-outer{animation:grow 1.1s cubic-bezier(.19,1,.22,1) .15s both}
.answer.typing:empty::before{animation:blink 1s step-end infinite}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}