/* ad2stay.de – eine Stildatei für alle Seiten.
   Aufbau: 1 Farben (einzige Stelle mit Farbwerten) · 2 Schriften · 3 Grundlagen · 4 Bausteine · 5 Seitenteile · 6 Handy
   Regel: Unterhalb von Abschnitt 1 keine Farbwerte – nur Rollen-Variablen. Neue Kästen/Knöpfe als Baustein in Abschnitt 4, nicht je Seite. */

/* ===== 1 Farben ===== */
:root{
  --s-text:#14213A; --s-leise:#5A6478; --s-flaeche:#F6F4EF; --s-karte:#FFFFFF; --s-linie:#E3E0D8;
  --s-marke:#163A70;                 /* Links, Rahmen */
  --s-markeflaeche:#163A70;          /* große farbige Flächen */
  --s-auf-marke:#FFFFFF; --s-auf-marke-leise:rgba(255,255,255,.78); --s-auf-marke-linie:rgba(255,255,255,.35);
  --s-akzent:#F2B43C; --s-auf-akzent:#1C1C1C;
  --s-papier:#FFFDF6; --s-papier-text:#1C1C1C; --s-papier-leise:#6B6457; --s-strich:#CFC8B6;
  --s-geraet:#14213A;                /* Rahmen des Beispiel-Handys */
  --s-schatten:0 22px 40px rgba(10,20,40,.22); --s-schatten-mittel:0 12px 26px rgba(10,20,40,.16); --s-schatten-klein:0 6px 18px rgba(10,20,40,.08);
  /* Beispiel-Firmenfarben (nur für die Vorführung verschiedener Marken) */
  --s-bsp-blau:#163A70; --s-bsp-rot:#B3261E; --s-bsp-gruen:#0F6B5C;
}
@media (prefers-color-scheme:dark){:root{
  --s-text:#E8ECF3; --s-leise:#A3ACBD; --s-flaeche:#0F1726; --s-karte:#162033; --s-linie:#27344D;
  --s-marke:#9DBBEA; --s-markeflaeche:#12274A; --s-auf-marke-linie:rgba(255,255,255,.22);
  --s-papier:#F1ECDD; --s-geraet:#000000;
  --s-schatten:0 22px 40px rgba(0,0,0,.45); --s-schatten-mittel:0 0 0 1px var(--s-linie); --s-schatten-klein:0 0 0 1px var(--s-linie);
}}

/* ===== 2 Schriften (auf dem eigenen Server, keine Google-Fonts) ===== */
@font-face{font-family:"Manrope";src:url("fonts/manrope.woff") format("woff");font-weight:400 800;font-style:normal;font-display:swap}
/* Handschrift der Zettel: Gochi Hand (wie in der Reißzettel-App), SIL Open Font License 1.1 */
@font-face{font-family:"Zettelschrift";src:url("fonts/zettel.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
:root{
  --s-schrift:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --s-hand:"Zettelschrift","Segoe Print","Bradley Hand",cursive;
  --s-rund-gross:28px; --s-rund:20px; --s-rund-klein:12px;
}

/* ===== 3 Grundlagen ===== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--s-flaeche);color:var(--s-text);font:17px/1.6 var(--s-schrift);-webkit-font-smoothing:antialiased}
a{color:var(--s-marke)}
h1,h2,h3{line-height:1.15;letter-spacing:-.02em;margin:0;font-weight:800}
p{margin:0}
.rahmen{max-width:1120px;margin:0 auto;padding:0 20px}
.label{display:block;font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--s-leise)}
.leise{color:var(--s-leise)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===== 4 Bausteine ===== */

/* Knopf: .knopf.haupt (gefüllt) · .knopf.neben (Rahmen). Auf farbiger Fläche passen sich beide automatisch an. */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 24px;border-radius:999px;border:2px solid transparent;
  font:800 16px/1 var(--s-schrift);text-decoration:none;white-space:nowrap;cursor:pointer;color:var(--k-text);background:var(--k-grund)}
.knopf svg{width:16px;height:16px}
.knopf.haupt{--k-grund:var(--s-marke);--k-text:var(--s-karte)}
.knopf.neben{--k-grund:transparent;--k-text:var(--s-marke);border-color:currentColor}
.knopf.klein{min-height:38px;padding:0 16px;font-size:15px;border-width:1.5px}
.flaeche .knopf.haupt{--k-grund:var(--s-auf-marke);--k-text:var(--f-grund)}
.flaeche .knopf.neben{--k-text:var(--s-auf-marke);border-color:var(--s-auf-marke-linie)}
.knopf.haupt:hover{filter:brightness(1.08)}
.flaeche .knopf.haupt:hover{--k-grund:var(--s-akzent);--k-text:var(--s-auf-akzent);filter:none}
.knoepfe{display:flex;gap:12px;flex-wrap:wrap}

/* Karte: ruhiger weißer Kasten */
.karte{background:var(--s-karte);border-radius:var(--s-rund);padding:26px;box-shadow:var(--s-schatten-klein)}
.karte h3{font-size:20px;margin-bottom:8px}
.karte > p{color:var(--s-leise)}
.karte.gross{border-radius:24px;padding:30px}

/* Fläche: farbige Fläche in Firmenfarbe mit Akzent-Kreis (wie die App).
   Farbe über --f-grund; Varianten .farbe-rot / .farbe-gruen nur für Beispiele. */
.flaeche{--f-grund:var(--s-markeflaeche);position:relative;overflow:hidden;isolation:isolate;background:var(--f-grund);color:var(--s-auf-marke);border-radius:var(--s-rund-gross)}
.flaeche::before{content:"";position:absolute;z-index:-1;border-radius:50%;background:var(--s-akzent);width:var(--kreis,420px);height:var(--kreis,420px);right:calc(var(--kreis,420px) / -3);top:calc(var(--kreis,420px) / -3)}
.flaeche .label,.flaeche .leise{color:var(--s-auf-marke-leise)}
.farbe-rot{--f-grund:var(--s-bsp-rot)}
.farbe-gruen{--f-grund:var(--s-bsp-gruen)}

/* Firma: Logo-Kachel + Name + Zusatz (wie im App-Kopf) */
.firma{display:flex;align-items:center;gap:10px;min-width:0}
.firma .logo{flex:0 0 auto;width:40px;height:40px;border-radius:var(--s-rund-klein);background:var(--s-auf-marke);color:var(--f-grund);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px}
.firma b{display:block;font-size:15px;line-height:1.2}
.firma small{display:block;font-size:11px;font-weight:600;color:var(--s-auf-marke-leise)}
.firma.klein .logo{width:32px;height:32px;border-radius:10px;font-size:12px}
.firma.klein b{font-size:13px}

/* Zettel: Papier mit Handschrift. .schief / .schief-r neigen ihn, .zettel-fuss ist die gestrichelte Abrisskante. */
.zettel{background:var(--s-papier);color:var(--s-papier-text);border-radius:4px;padding:18px 20px;box-shadow:var(--s-schatten-mittel)}
.zettel .label{font-size:11px;color:var(--s-markeflaeche)}
.zettel .hand{font-family:var(--s-hand);font-size:24px;line-height:1.12;margin-top:6px}
.zettel .klein{font-size:13.5px;line-height:1.45;color:var(--s-papier-leise);margin-top:8px}
.zettel-fuss{margin-top:12px;padding-top:10px;border-top:2px dashed var(--s-strich);font-size:13.5px;font-weight:700;color:var(--s-papier-leise);display:flex;justify-content:space-between;gap:6px 10px;flex-wrap:wrap}
.schief{transform:rotate(-1.2deg)}
.schief-r{transform:rotate(2deg)}

/* Punkte-Liste mit Akzent-Punkt */
.punkte{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.punkte li{display:flex;gap:10px;align-items:flex-start;font-size:16px}
.punkte li::before{content:"";flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--s-akzent);margin-top:9px}

/* Raster: gleich breite, gleich hohe Spalten */
.raster{display:grid;gap:20px;grid-template-columns:repeat(var(--spalten,2),minmax(0,1fr));align-items:stretch}
.raster.drei{--spalten:3}
.raster.vier{--spalten:4}

/* Symbol (Linien-Symbol, einheitliche Größe) */
.symbol{width:28px;height:28px;color:var(--s-marke);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ===== 5 Seitenteile ===== */

/* Kopf & Fuß */
header.oben{padding:20px 0}
header.oben .rahmen{display:flex;align-items:center;gap:14px;flex-wrap:wrap;row-gap:10px}
.marke{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--s-text);font-weight:800;font-size:23px;letter-spacing:-.03em}
.marke svg{width:36px;height:36px;flex:0 0 auto}
.marke b{color:var(--s-akzent)}
nav.oben{margin-left:auto;display:flex;gap:22px}
nav.oben a{color:var(--s-leise);text-decoration:none;font-weight:700;font-size:15px;white-space:nowrap}
nav.oben a:hover,nav.oben a[aria-current]{color:var(--s-marke)}
footer.unten{border-top:1px solid var(--s-linie);margin-top:60px;padding:22px 0 30px;color:var(--s-leise);font-size:14px}
footer.unten .rahmen{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between}
footer.unten a{color:var(--s-leise)}

/* Textseiten (Impressum, Datenschutz) */
.text{padding:10px 0 20px}
.text h1{font-size:36px;margin:10px 0 18px}
.text h2{font-size:21px;margin:30px 0 8px}
.text p,.text li{max-width:760px}
.text p+p{margin-top:10px}
.hinweis-recht{color:var(--s-leise);font-size:15px;border-top:1px solid var(--s-linie);padding-top:14px;margin-top:34px}

/* Abschnitte der Startseite */
.abschnitt{padding-top:84px}
.abschnitt-kopf{max-width:680px;margin-bottom:34px}
.abschnitt-kopf h2{font-size:38px;margin:10px 0 12px}
.abschnitt-kopf p{color:var(--s-leise);font-size:18px}
.band{margin:0 20px}                                   /* farbige Fläche über fast die volle Breite */
.band > .rahmen{display:grid;gap:40px;align-items:center;padding-top:64px;padding-bottom:64px}

/* Bühne (oben) */
.buehne > .rahmen{grid-template-columns:1.1fr .9fr}
.buehne h1{font-size:56px;letter-spacing:-.035em;margin:12px 0 18px}
.buehne .einleitung{font-size:19px;line-height:1.55;color:var(--s-auf-marke-leise);max-width:540px;margin-bottom:28px}
.buehne .hinweis{margin-top:22px;font-size:14px;font-weight:700;color:var(--s-auf-marke-leise)}

/* Beispiel-Handy mit Abreißblock */
.handy{width:330px;max-width:100%;margin:0 auto;border-radius:38px;padding:12px;background:var(--s-geraet);box-shadow:var(--s-schatten)}
.handy .flaeche{--kreis:150px;border-radius:var(--s-rund-gross);padding:22px 16px 18px;min-height:560px;display:flex;flex-direction:column}
.handy .titel{margin:24px 4px 14px}
.handy .titel .label{font-size:11px}
.handy .titel h3{font-size:27px;line-height:1.05;margin-top:4px}
.handy .unten{margin-top:auto;padding-top:18px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.handy .unten small{display:block;font-size:11px;font-weight:600;color:var(--s-auf-marke-leise)}
.block{padding:0;box-shadow:var(--s-schatten)}
.block .kopf{padding:14px 16px 12px;border-bottom:2px dashed var(--s-strich)}
.block .kopf .zeile{display:flex;justify-content:space-between;align-items:baseline}
.block .kopf .zeile .klein{margin:0}
.block .hand{font-size:23px}
.streifen{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));height:170px}
.streifen button{all:unset;cursor:pointer;border-right:2px dashed var(--s-strich);display:flex;align-items:center;justify-content:center;transition:transform .35s ease,opacity .35s ease}
.streifen button:last-child{border-right:0}
.streifen button span{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--s-hand);font-size:19px;white-space:nowrap}
.streifen button:hover span,.streifen button:focus-visible span{color:var(--s-markeflaeche)}
.streifen button:focus-visible{outline:2px solid var(--s-akzent);outline-offset:-4px}
.streifen button.weg{transform:translateY(14px) rotate(4deg);opacity:0;pointer-events:none}
.abgerissen{position:relative;z-index:2;width:300px;max-width:92%;margin:-26px auto 0;box-shadow:var(--s-schatten)}
.abgerissen .hand{min-height:56px}
.abgerissen .klein{min-height:38px}

/* Zielgruppen */
.ziel{display:flex;flex-direction:column;scroll-margin-top:20px}
.ziel h3{font-size:26px;margin:8px 0 10px}
.ziel .punkte{margin:18px 0 24px}
.ziel .zettel{margin-top:auto}

/* Marken-Beispiele */
.look{align-items:center}
.marken{--spalten:3;gap:14px;align-items:start}
.marken .flaeche{--kreis:72px;border-radius:var(--s-rund);height:300px;padding:16px 14px;display:flex;flex-direction:column;gap:12px}
.marken .flaeche:nth-child(2){margin-top:28px}                 /* leicht versetzt, wirkt wie nebeneinander liegende Handys */
.marken .zettel{margin-top:auto;padding:10px 12px}
.marken .zettel .hand{font-size:17px;margin:0}
.liste-karten{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.liste-karten .karte{padding:16px 18px}
.liste-karten b{display:block;font-size:17px}
.liste-karten span{color:var(--s-leise);font-size:15.5px}

/* Datenschutz-Punkte: eine Karte, vier Spalten */
.ruhig{padding:34px}
.ruhig h3{font-size:18px;margin:12px 0 6px}
.ruhig p{font-size:15.5px}

/* Schluss mit Kröte */
.schluss{margin-top:84px}
.schluss > .rahmen{grid-template-columns:1fr auto;padding-top:56px;padding-bottom:56px}
.schluss h2{font-size:38px;margin:10px 0 12px}
.schluss p{color:var(--s-auf-marke-leise);font-size:18px;max-width:560px;margin-bottom:26px}
.kroete{width:190px;height:240px;position:relative}
.kroete svg{position:absolute;left:0;top:-60px;width:190px;height:auto;color:var(--s-auf-akzent);transform-origin:50% 0;animation:baumeln 5s ease-in-out infinite}
.schluss{--kreis:520px}                                          /* Kröte hängt ganz im Akzent-Kreis */
@keyframes baumeln{0%,100%{transform:rotate(3deg)}50%{transform:rotate(-3deg)}}

/* Verweis auf die Schwester-Apps: eine ruhige Zeile, keine Karte */
.familie{margin-top:40px;display:flex;align-items:baseline;gap:8px 18px;flex-wrap:wrap;color:var(--s-leise);font-size:15px}
.familie .label{font-size:12px}
.familie a{color:var(--s-leise);font-weight:700;white-space:nowrap}
.familie a:hover{color:var(--s-marke)}

/* ===== 6 Handy & Tablet ===== */
@media (max-width:960px){
  .buehne > .rahmen{grid-template-columns:1fr;padding-top:40px;padding-bottom:44px}
  .buehne h1{font-size:42px}
  .raster.vier{--spalten:2}
  .look{--spalten:1}
}
@media (max-width:760px){
  header.oben{padding:14px 0 6px}
  .marke{font-size:21px}.marke svg{width:32px;height:32px}
  header.oben .knopf{margin-left:auto}
  nav.oben{order:3;flex-basis:100%;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}      /* alle Punkte sichtbar, 2 × 2 */
  nav.oben a{font-size:14.5px;text-align:center;padding:9px 8px;border:1px solid var(--s-linie);border-radius:var(--s-rund-klein);background:var(--s-karte)}
  .band{margin:0 10px}
  .band{--kreis:190px}
  .buehne h1{font-size:36px}
  .buehne .einleitung{font-size:17px}
  .buehne .knoepfe{display:grid;grid-template-columns:1fr 1fr}                                        /* Hauptknopf rechts, beide gleich breit */
  .buehne .knopf{padding:0 12px;font-size:15px}
  .abschnitt{padding-top:60px}
  .abschnitt-kopf h2,.schluss h2{font-size:29px}
  .raster,.raster.drei,.raster.vier{--spalten:1}
  .marken{--spalten:3;gap:8px}
  .marken .flaeche{height:200px;padding:12px 10px}
  .marken .flaeche:nth-child(2){margin-top:0}
  .marken .firma small{display:none}
  .marken .firma b{font-size:11.5px}
  .marken .zettel .hand{font-size:14px}
  .karte.gross,.ruhig{padding:22px}
  .schluss > .rahmen{grid-template-columns:1fr;padding-top:40px;padding-bottom:40px}
  .schluss .knopf{width:100%}
  .kroete{display:none}
  .text h1{font-size:28px}.text{overflow-wrap:anywhere}
}