/* Startseite: Nutzen, drei Schritte, Verbinden, Rechtliches. Sonst nichts.
   Bewegung erzaehlt, damit der Text kurz bleiben kann.

   Grundregel fuer jede Animation: Der normale Zustand ist das ENDBILD. Die Ausgangslage
   steht nur in den Keyframes (fill-mode both). Wer Bewegung abschaltet
   (prefers-reduced-motion, siehe marke.css) oder kein Skript hat, sieht alles fertig. */

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.versteckt{position:absolute;width:0;height:0;overflow:hidden}
.nur-vorlesen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@keyframes auf{from{opacity:0}}
@keyframes hoch{from{opacity:0;transform:translateY(14px)}}
@keyframes zeichnen{from{stroke-dashoffset:1}}

/* Kopf und kurze Erklaerung folgen derselben mittigen Achse. */
.oben{max-width:1120px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:center;gap:16px}
.oben .marke{min-height:44px}
.eckmarke{margin:0;text-align:right;font:500 11px/1.7 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--leise)}

/* ── Nutzen ─────────────────────────────────────────────────────────────── */
.held{max-width:1120px;margin:0 auto;padding:56px 20px 64px;display:flex;flex-direction:column;align-items:center;text-align:center}
.zeichen{width:clamp(150px,30vw,250px);height:auto;overflow:visible;margin-bottom:40px}
/* Gestrichelte Passung: zeigt, wohin die Teile gehoeren, und tritt nach dem Einrasten zurueck */
.passung path{fill:none;stroke:var(--linieStark);stroke-width:1.4;stroke-dasharray:5 6;opacity:0;
  animation:passung 2.4s .1s ease both}
@keyframes passung{0%{opacity:0}15%,60%{opacity:1}100%{opacity:0}}
.teil{fill:var(--metall)}
/* Einrasten: zuegig heran, kurz vor dem Ziel abbremsen, fest sitzen */
.teil-oben{animation:von-rechts 1.1s .55s cubic-bezier(.75,0,.15,1) both}
.teil-unten{animation:von-links 1.1s .7s cubic-bezier(.75,0,.15,1) both}
@keyframes von-rechts{from{transform:translateX(100px);opacity:0}30%{opacity:1}}
@keyframes von-links{from{transform:translateX(-100px);opacity:0}30%{opacity:1}}
.held h1{font-size:clamp(38px,7.4vw,68px);line-height:1.04;letter-spacing:-.02em;max-width:15ch;margin:0 0 36px}
.held-knopf{font-size:18px;min-height:58px;padding:0 28px}
.held .nutzen{font-size:clamp(17px,2.5vw,21px);color:var(--leise);line-height:1.6;margin:-8px 0 26px;max-width:38ch}
.verbindung-hinweis{font-size:13px;color:var(--leise);margin:16px 0 0}
.pfeil{display:inline-block;transition:transform .25s}
.held-knopf:hover .pfeil,.held-knopf:focus-visible .pfeil{transform:translateY(3px)}
/* Die Bewegung bleibt auf Schmuck beschraenkt. Text und Aktionen warten nie darauf. */
.markiert{position:relative;display:inline-block;white-space:nowrap}
.unterstrich{position:absolute;left:-3%;width:106%;bottom:-.2em;height:.26em;overflow:visible;color:var(--metall)}
.unterstrich path{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;animation:zeichnen 1.1s 2.4s cubic-bezier(.6,0,.3,1) both}

/* ── Drei Schritte ──────────────────────────────────────────────────────── */
.schritte{max-width:1120px;margin:0 auto;padding:16px 20px 0}
.schritte-liste{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.schritt{border-top:1px solid var(--linie);padding:24px 0 16px;min-width:0;scroll-margin-top:24px;text-align:center}
.skizze{display:block;width:100%;max-width:300px;height:auto;margin:0 auto 14px;color:var(--metall);overflow:visible}
.nr{font:500 13px var(--mono);letter-spacing:.14em;color:var(--leise);margin:0 0 4px}
.schritt h3{font-size:clamp(28px,5vw,34px);margin:0 0 6px}
.schritt p:not(.nr){color:var(--leise);margin:0 auto;max-width:30ch}

/* Skizzenstriche: Grundzustand gezeichnet */
.strich{fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1}
.strich.leise{stroke:var(--linieStark)}
.strich.haken{stroke:var(--frei);stroke-width:2.4}
.strich.gruen-strich{stroke:var(--frei);stroke-width:1;opacity:.45}
/* Beschriftung in den Skizzen von Hand, wie auf der bestehenden Website (Architects Daughter) */
.skizze text.hand{font:400 15px var(--hand);letter-spacing:.01em;fill:var(--leise)}
.skizze text.hand.gross{font-size:16px;fill:var(--text)}
.skizze text.hand.gruen{fill:var(--frei)}
.stecker use{fill:var(--metall)}
.ja rect{fill:var(--metall)}
.ja text.hand{fill:var(--aufAktion);font-size:18px}

/* Erst beim Hineinscrollen zeichnen (start.js setzt .js und .sichtbar) */
@media (prefers-reduced-motion:no-preference){

  .sichtbar .strich{animation:zeichnen 1s cubic-bezier(.6,0,.3,1) both}
  .sichtbar .spaeter{animation:auf .5s both}
  .sichtbar .stecker{animation:stecker .9s 1.1s cubic-bezier(.3,0,.1,1) both}
  .sichtbar .getippt{animation:tippen 1.4s .7s steps(26) both}
  .sichtbar .ja{transform-box:fill-box;transform-origin:center;animation:pop .5s 1.1s cubic-bezier(.3,1.6,.5,1) both}

  .sichtbar .t1{animation-delay:.25s}
  .sichtbar .t2{animation-delay:.45s}
  .sichtbar .t3{animation-delay:.65s}
  .sichtbar .t4{animation-delay:.85s}
  .sichtbar .t5{animation-delay:1.05s}
  .sichtbar .t6{animation-delay:1.25s}
  .sichtbar .t7{animation-delay:1.7s}
  .sichtbar .t8{animation-delay:2.1s}
  .sichtbar .t9{animation-delay:2.3s}
  .sichtbar .t10{animation-delay:2.5s}
  .sichtbar .t11{animation-delay:2.7s}
  .sichtbar .t12{animation-delay:2.9s}

  /* Wartet: Am Rechner stehen die drei Schritte nebeneinander und kommen zusammen ins Bild.
     start.js zeigt sie dort der Reihe nach, im Abstand von einer Sekunde und leicht
     ueberlappend (Simon 09.10.2026: „A mit ein bisschen B“). Bis ein Schritt dran ist,
     steht er leer da statt fertig gezeichnet, sonst verschwaende er und kaeme neu. */
  .wartet .strich{stroke-dashoffset:1}
  .wartet .spaeter,.wartet .stecker,.wartet .ja{opacity:0}
  .wartet .getippt{clip-path:inset(0 100% 0 0)}
}
/* Am Rechner laufen die Striche innerhalb eines Schritts zuegiger, damit die Folge der
   drei nicht zu lang wird. Am Handy bleibt alles wie vorher. */
@media (min-width:760px) and (prefers-reduced-motion:no-preference){
  .schritte-liste .sichtbar .strich{animation-duration:.8s}
  .schritte-liste .sichtbar .t1{animation-delay:.15s}
  .schritte-liste .sichtbar .t2{animation-delay:.25s}
  .schritte-liste .sichtbar .t3{animation-delay:.35s}
  .schritte-liste .sichtbar .t4{animation-delay:.45s}
  .schritte-liste .sichtbar .t5{animation-delay:.55s}
  .schritte-liste .sichtbar .t6{animation-delay:.65s}
  .schritte-liste .sichtbar .t7{animation-delay:.85s}
  .schritte-liste .sichtbar .t8{animation-delay:.3s}
  .schritte-liste .sichtbar .t9{animation-delay:.42s}
  .schritte-liste .sichtbar .t10{animation-delay:.54s}
  .schritte-liste .sichtbar .t11{animation-delay:.66s}
  .schritte-liste .sichtbar .t12{animation-delay:.78s}
  .schritte-liste .sichtbar .getippt{animation-duration:.9s;animation-delay:.2s}
  .schritte-liste .sichtbar .stecker{animation-delay:.5s}
  .schritte-liste .sichtbar .ja{animation-delay:.7s}
}
html:not(.js) .zeichen *,html:not(.js) .unterstrich path{animation:none}
@keyframes stecker{from{opacity:0;transform:translateX(48px)}}
@keyframes tippen{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes pop{from{opacity:0;transform:scale(.3)}}

/* Adresse */
.adresse{display:flex;align-items:stretch;margin:16px auto 4px;border:1px solid var(--linieStark);max-width:420px}
.adresse code{flex:1;min-width:0;display:flex;align-items:center;padding:0 14px;min-height:var(--ziel);
  font:500 15px var(--mono);color:var(--text);user-select:all}
.tipp{overflow-wrap:anywhere}
.adresse .knopf{min-height:var(--ziel);padding:0 16px;font-size:15px;border:0;border-left:1px solid var(--linieStark)}
.kopiert{display:block;min-height:22px;color:var(--frei);font-size:14px}
.verbindungsfrage{margin:14px auto 18px;max-width:26ch;font:500 clamp(20px,3vw,24px)/1.4 var(--disp);color:var(--text)}
.anschluss-hilfe{font-size:14px;margin:12px auto 0;max-width:420px}
.anschluss-hilfe summary{min-height:52px;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;text-decoration:none;color:var(--text);list-style:none}
.anschluss-hilfe summary::-webkit-details-marker{display:none}
.anschluss-hilfe summary::after{content:"";width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-4px}
.anschluss-hilfe[open] summary::after{transform:rotate(225deg);margin-top:4px}
.schritt .anschluss-hilfe p{max-width:none;margin:0 0 12px;line-height:1.6}
.anschluss-hilfe summary:focus-visible{outline:2px solid var(--metall);outline-offset:4px}
@keyframes puls{50%{box-shadow:0 0 0 5px rgba(244,239,227,.22);border-color:var(--metall)}}
#verbinden:target .adresse{animation:puls 1.3s .6s 2}
@media (max-width:400px){
  .adresse{flex-direction:column}
  .adresse .knopf{border-left:0;border-top:1px solid var(--linieStark)}
}

/* Hinweis zu Gast und Profil */
.hinweis{display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center;margin:20px auto 0;padding-top:20px;border-top:1px solid var(--linie);max-width:64ch}
.hinweis svg{flex:none;width:26px;height:20px;margin-top:3px;color:var(--gehalten)}
.hinweis .strich{stroke-width:1.5}
.fuss{text-align:center}
.fuss nav{justify-content:center;gap:8px 24px}
.fuss nav a{display:inline-flex;align-items:center;justify-content:center;min-height:48px;min-width:48px}
.fuss p{max-width:64ch;margin:16px auto 0}

/* ── Rechner ────────────────────────────────────────────────────────────── */
@media (min-width:760px){
  .schritte-liste{grid-template-columns:repeat(3,1fr);gap:36px}
}
@media (min-width:900px){
  .held{padding:40px 20px 56px}
}
@media (min-width:760px) and (max-width:1050px){
  .adresse{flex-direction:column}
  .adresse .knopf{border-left:0;border-top:1px solid var(--linieStark)}
}
@media (max-width:360px){
  .oben{gap:10px}
  .eckmarke{font-size:9px;letter-spacing:.12em}
}

/* 10.10.2026: Der Anschluss ist ohne weitere Suchanfrage erreichbar. */
.anschluss-hilfe ol{padding-left:22px;text-align:left;color:var(--leise);line-height:1.6}
.anschluss-hilfe li{margin:10px 0}
.anschluss-hilfe a{display:inline-block;min-height:48px;padding:10px 0;text-underline-offset:3px}