/* NAO — Produkt-Detail (Partners Group | Private Equity)
   Umsetzung von „Produkt Detail.dc.html" aus dem Claude-Design-Projekt
   „App Screens mit Design System".

   Der Entwurf trägt alle Werte inline am Markup; hier stehen dieselben
   Zahlen in benannten Klassen. Kein Wert ist gerundet oder ersetzt worden —
   wer gegen den Entwurf prüft, findet jede Größe wieder.

   ABWEICHUNGEN VOM ENTWURF — nach den Fotos der laufenden App (08.09.2026,
   iPhone 16 Pro, 402 pt). Der Entwurf ist auf 390 pt gezeichnet und trägt
   eine größere Typo-Stufe als die App, die tatsächlich läuft. Gemessen:
   „Ganz einfach regelmäßig investieren." bräuchte mit den Werten des
   Entwurfs (16 px, Fach 52 px) einen 462 pt breiten Schirm, um einzeilig
   zu bleiben — kein iPhone ist so breit. Also gilt die App.

     Aufmacher  Rand 20 → 16, Typo 24 → 23 px.
                23 ist die größte Größe, bei der „mit einer Zielrendite von
                14% p.a." bei 402 pt hält (362 ≤ 370). Sie ergibt Titel 336
                und Unterzeile 362 pt — die Proportionen der Fotos.
     Sparplan   Fach 52 → 40, Polsterung 18 → 16, Spalt 16 → 10,
                Unterzeile 16 → 14 px. Erst damit halten beide Zeilen.
     Wertezeile Polsterung 20 → 18, Spalt 14 → 12. Nur deshalb bleibt
                „Kündigungsfrequenz / Quartalsweise" einzeilig wie im Foto.
     Überschriften Abschnittstitel 28 → 20 px. Gemessen an den Wortbreiten
                in den Fotos: bei 20 px treffen Timeline (80/81),
                Performance (122/122), Wissenswertes (144/146), Größte
                Positionen (169/173) und Hauptinformationen (187/190) auf
                im Mittel 2 px genau — bei 28 px sind es 54 px daneben.
                Fünf voneinander unabhängige Wörter, dieselbe Antwort.
                Danach mitgezogen, je aus einer Messung: Blatt-Titel
                28 → 24, Beschreibung 20 → 18, Navigationstitel 20 → 18,
                Performance-Zahl 29 → 25.

   Alles Übrige steht unverändert auf den Werten des Entwurfs.

   Die Bühne holt die Breite aus dem <meta name="vitrine-breite"> im Kopf. */

:root{
  --grund:#F4F4F5;      /* Blattgrund                    */
  --karte:#FFFFFF;      /* Kartenfläche                  */
  --tinte:#111113;      /* Schrift und schwarze Knöpfe   */
  --tinte2:#3A3A3E;     /* zweite Stufe                  */
  --grau:#8A8A8E;       /* Nebentext                     */
  --grau-ic:#A0A0A4;    /* Info-Zeichen                  */
  --linie:#EFEFF1;      /* Trennlinie in Karten          */
  --kante:#E4E4E6;      /* Kante der Leiste, blasse Punkte */
  --fuell:#E9E9EA;      /* graue Pillen                  */
  --fach:#F0F0F1;       /* Icon-Fach, Logo-Platzhalter, Gitter */
  --stufe:#5A5A5E;      /* gefüllte Risikostufe          */
  --stufe-aus:#D6D6D9;  /* leere Risikostufe             */
  --teal:#0FBFC4;       /* Wertentwicklung               */
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

/* Ohne !important verliert die Browserregel [hidden]{display:none} gegen
   jede eigene display-Angabe. Genau das ließ die Zahlungsmethoden-Pille
   (display:inline-flex) auch auf dem Sparplan-Screen stehen. */
[hidden]{ display:none !important; }

html,body{
  margin:0; height:100%;
  background:var(--grund);
  color:var(--tinte);
  font-family:Inter, -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  overscroll-behavior:none;
}

/* Das scrollende Blatt und die stehende Leiste darüber — im Entwurf zwei
   Geschwister unter dem Screen-Kasten, hier unter dem body. */
.blatt{
  position:absolute; inset:0;
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  background:var(--grund);
  scrollbar-width:none;          /* am Telefon gibt es keinen Balken —  */
}                                 /* im Rahmen soll auch keiner stehen.  */
.blatt::-webkit-scrollbar{ display:none; }

.ic{ flex:none; display:block; }

/* ── Kopfleiste: Statusleiste und Navigation ────────────────────────────
   Beides steht NICHT im Entwurf — der lässt oben schlicht 52 px frei. In
   der echten App liegen dort die Statusleiste und, sobald der Aufmacher
   weggescrollt ist, eine Navigationsleiste mit grauem Zurück-Knopf und
   gekürztem Titel. Die Statusleiste ist aus dem Zeichenvorrat desselben
   Design-Projekts übernommen (Invest App Screens); die Navigationsleiste
   ist nach den Fotos der laufenden App gebaut.

   Der Milchglas-Grund blendet über --auf ein, die Schrift der Statusleiste
   bleibt dabei stehen — sonst flackerte die Uhrzeit beim Scrollen. */

.kopfleiste{
  /* Über allen Bühnen: die Statusleiste gehört dem Gerät, nicht der Seite —
     sie steht auch auf der Betrag-Seite und über dem Schleier. Damit dabei
     nicht die Milchglas-Leiste mitkommt, setzt app.js --auf auf 0, sobald
     eine Bühne offen ist, und --dunkel auf 1. */
  position:absolute; top:0; left:0; right:0; z-index:70;
  --auf:0;
  pointer-events:none;
}
.kopfleiste::before{
  content:"";
  position:absolute; inset:0;
  background:rgba(244,244,245,.94);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--kante);
  opacity:var(--auf);
}

/* Apple-typisch: hell über dem dunklen Aufmacher, dunkel über der hellen
   Leiste. Die laufende App zeigt sie durchweg dunkel — auch über dem
   Aufmacher, wo sie kaum lesbar ist; das ist hier bewusst korrigiert.
   --dunkel fährt die Farbe, --auf nur Milchglas und Titel. */
.status{
  position:relative;
  height:52px;
  /* 32 statt 22: In den Fotos der laufenden App beginnt die Uhrzeit rund
     38 pt vom linken Rand und die Batterie endet rund 34 pt vor dem
     rechten — iOS zentriert die Zeit im linken „Ohr" neben der Island,
     was aus der Ferne wie ein großzügiger Seitenrand aussieht. */
  padding:15px 32px 0;
  display:flex; align-items:center; justify-content:space-between;
  color:#fff;
  color:color-mix(in srgb, var(--tinte) calc(var(--dunkel, 0) * 100%), #fff);
  font-size:17px; font-weight:600; letter-spacing:-.01em;
}
/* Alle drei Zeichen nach Apples Maßen. Sie sind mittig zueinander
   ausgerichtet, nur die Netzbalken stehen auf ihrer eigenen Grundlinie. */
.status__rechts{ display:flex; align-items:center; gap:6px; }

.status__netz{ display:flex; align-items:flex-end; gap:1.8px; height:11.5px; }
.status__netz i{ width:3px; border-radius:1px; background:currentColor; }
.status__netz i:nth-child(1){ height:4px; }
.status__netz i:nth-child(2){ height:6.5px; }
.status__netz i:nth-child(3){ height:9px; }
.status__netz i:nth-child(4){ height:11.5px; }

.status__wlan{ display:block; }

/* Apples Batterie: die Hülle steht auf 35 %, die Füllung VOLL. Genau
   dieser Unterschied macht sie erkennbar — eine durchgehend graue
   Batterie sieht aus wie eine halb geladene. Der Nippel rechts liegt
   auf 40 %. */
.status__akku{ position:relative; width:25px; height:13px; flex:none; }
.status__akku i{ position:absolute; inset:0; border:1px solid currentColor; border-radius:4.3px; opacity:.35; }
.status__akku b{ position:absolute; inset:2px; border-radius:2.5px; background:currentColor; }
.status__akku u{
  position:absolute; right:-2.6px; top:4.2px;
  width:1.6px; height:4.6px;
  border-radius:0 1.4px 1.4px 0;
  background:currentColor; opacity:.4;
  text-decoration:none;
}

.nav{
  position:relative;
  height:56px;
  padding:0 20px;
  display:flex; align-items:center; gap:14px;
  opacity:var(--auf);
}

.nav__titel{
  flex:1; min-width:0;
  text-align:center;
  font-size:18px; font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ── Aufmacher ──────────────────────────────────────────────────────── */

/* Die Tintenfläche liegt UNTER dem Bild. Fehlt es — und für die meisten
   Fonds gibt es noch keins —, bleibt sie stehen und die weiße Schrift
   darauf lesbar; dieselbe Regel wie beim Hero der Startseite. Ohne sie
   stünde Weiß auf dem hellen Blattgrund und wäre unsichtbar. */
.kopf{ position:relative; height:556px; overflow:hidden; color:#fff; background:var(--tinte); }
/* Die Quelle ist 1206 × 2622, der Kasten 402 × 556 — sichtbar sind 63,6 %
   der Höhe. Mittig geschnitten (der Vorgabewert) fallen die Blattspitzen ab
   und unten steht leere Fläche; oben ausgerichtet steht die Pflanze ganz im
   Bild, wie in der laufenden App. */
.kopf__bild{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:50% 0;
  display:block;
}
/* Der Entwurf lässt oben 52 px für die Statusleiste frei. Die Dynamic
   Island des Rahmens endet 46,3 pt unter der Schirmkante — 52 reicht. */
/* Der Produkt-Detail ist der Startschirm — ein Zurück-Pfeil führte von hier
   nirgendwohin. Er ist deshalb in beiden Leisten entfernt; nur die
   Betrag-Seite trägt einen, weil sie tatsächlich etwas zu verlassen hat. */
.kopf__status{ position:relative; height:52px; }
.kopf__fuss{
  position:absolute; left:16px; right:16px; bottom:26px;
  display:flex; flex-direction:column; align-items:flex-start; gap:14px;
}
.marke{
  background:#fff; color:var(--tinte);
  font-size:17px; font-weight:400;
  padding:11px 22px; border-radius:999px;
}
.kopf__titel{ font-size:23px; font-weight:400; letter-spacing:-.01em; line-height:1.26; color:#fff; }
.kopf__rendite{ font-size:23px; font-weight:400; letter-spacing:-.01em; line-height:1.26; color:rgba(255,255,255,.62); }
.kopf__rendite b{ font-weight:700; color:#fff; }
.klasse{
  border:1.5px solid rgba(255,255,255,.9); color:#fff;
  font-size:16px; font-weight:400;
  padding:10px 22px; border-radius:999px;
}

/* ── Inhalt ─────────────────────────────────────────────────────────── */

.inhalt{
  padding:18px 20px 130px;       /* unten Platz für die stehende Leiste */
  display:flex; flex-direction:column; gap:34px;
}
.karte{ background:var(--karte); border-radius:22px; }
.abschnitt{ display:flex; flex-direction:column; gap:18px; }
.abschnitt__titel{ font-size:20px; font-weight:400; letter-spacing:-.015em; }

/* Sparplan-Anriss */
.sparplan{ padding:16px; display:flex; align-items:center; gap:10px; }
.sparplan__fach{
  width:40px; height:40px; flex:none; border-radius:12px;
  background:var(--fach);
  display:flex; align-items:center; justify-content:center;
}
.sparplan__text{ flex:1; min-width:0; }
.sparplan__titel{ font-size:18px; font-weight:700; }
.sparplan__unter{ font-size:14px; font-weight:400; color:var(--grau); margin-top:3px; }

/* Beschreibung */
.beschreibung__titel{ font-size:18px; font-weight:700; letter-spacing:-.01em; }
.beschreibung__satz{ font-size:17px; font-weight:400; line-height:1.5; }
.punkte{ display:flex; flex-direction:column; gap:16px; margin-top:2px; }
.punkt{ display:flex; gap:12px; font-size:17px; font-weight:400; line-height:1.5; }
.punkt::before{ content:"\2022"; color:var(--tinte); }
.pille{
  align-self:flex-start;
  background:var(--fuell); border-radius:999px;
  padding:13px 22px;
  font-size:15px; font-weight:700; letter-spacing:.06em;
  margin-top:6px;
}

/* Kennzahlen und Hauptinformationen — dieselbe Karte, dieselbe Zeile */
.werte{ padding:22px 18px; display:flex; flex-direction:column; gap:26px; }
.zeile{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.zeile--oben{ align-items:flex-start; }
.zeile__name{ display:flex; align-items:center; gap:8px; font-size:17px; font-weight:400; }
.zeile__wert{ font-size:17px; font-weight:700; }
.zeile__wert--isin{ display:flex; align-items:center; gap:10px; flex:none; }
.zeile__wert--umbruch{ text-align:right; max-width:190px; line-height:1.35; }
.info{ color:var(--grau-ic); }

/* Risikoleiter: sieben Stufen, vier davon gefüllt */
.risiko{ display:flex; gap:2px; flex:none; }
.risiko i{ width:20px; height:14px; border-radius:2px; background:var(--stufe-aus); }
.risiko i:first-child{ border-radius:4px 2px 2px 4px; }
.risiko i:last-child{ border-radius:2px 4px 4px 2px; }
.risiko i.an{ background:var(--stufe); }

/* Hauptknopf im Fluss */
.knopf{
  text-align:center;
  background:var(--tinte); color:#fff;
  font-size:16px; font-weight:700; letter-spacing:.06em;
  padding:20px; border-radius:999px;
}

/* Zeitachse */
.tl{ padding:24px 20px; }
.tl__spur{ position:relative; padding-left:44px; }
.tl__linie{ position:absolute; left:9px; top:10px; bottom:16px; width:2px; background:#EAEAEC; }
.tl__halt{ position:relative; padding-bottom:30px; }
.tl__halt:last-child{ padding-bottom:0; }
.tl__punkt{
  position:absolute; left:-44px; top:3px;
  width:20px; height:20px; border-radius:999px;
  background:var(--kante);
}
.tl__punkt--jetzt{
  background:var(--tinte);
  display:flex; align-items:center; justify-content:center;
}
.tl__punkt--jetzt::after{ content:""; width:6px; height:6px; border-radius:999px; background:#fff; }
.tl__was{ font-size:17px; font-weight:700; }
.tl__wann{ font-size:17px; font-weight:400; margin-top:4px; }
.tl__halt--spaeter .tl__was,
.tl__halt--spaeter .tl__wann{ color:var(--grau); }

/* Wissenswertes */
.faq{ padding:4px 20px; }
.faq__zeile{ display:flex; align-items:center; gap:14px; padding:20px 0; }
.faq__frage{ flex:1; font-size:17px; font-weight:700; line-height:1.4; }
.faq__mehr{ padding:20px 0; font-size:17px; font-weight:700; }
.trenner{ height:1px; background:var(--linie); }

/* Wertentwicklung */
.perf{ padding:20px; }
.perf__kopf{ display:flex; align-items:center; gap:12px; }
.perf__bild{ width:36px; height:36px; flex:none; border-radius:9px; object-fit:cover; display:block; }
.perf__name{ font-size:17px; font-weight:700; }
.perf__wert{ font-size:25px; font-weight:400; letter-spacing:-.02em; margin-top:18px; }
.perf__delta{ display:flex; align-items:center; gap:6px; font-size:17px; margin-top:4px; }
.perf__delta b{ font-weight:700; color:var(--teal); }
.perf__delta span{ font-weight:400; color:var(--grau); }
.perf__kurve{ position:relative; margin-top:20px; }
.perf__kurve svg{ display:block; }
.schild{
  position:absolute;
  background:var(--grund); border-radius:8px;
  padding:5px 10px;
  font-size:15px; font-weight:400; color:var(--tinte2);
}
.schild--oben{ top:-2px; right:16px; }
.schild--unten{ bottom:8px; right:16px; }
.schild--links{ bottom:-14px; left:6px; }

/* Größte Positionen */
.positionen{ padding:4px 20px; margin-top:10px; }
.positionen__unter{ font-size:17px; font-weight:400; color:var(--grau); }
.pos{ display:flex; align-items:center; gap:14px; padding:20px 0; }
.pos__logo{ width:56px; flex:none; display:flex; justify-content:center; }
.pos__logo b{ width:52px; height:20px; border-radius:4px; background:var(--fach); }
.pos__name{ flex:1; font-size:17px; font-weight:400; }
.pos__anteil{ font-size:17px; font-weight:700; flex:none; }

/* Dokumente */
.dokumente{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.dok{
  display:inline-flex; align-items:center; gap:12px;
  background:var(--fuell); border-radius:999px;
  padding:15px 22px;
  font-size:16px; font-weight:700; letter-spacing:.05em;
}

/* ── Stehende Leiste ────────────────────────────────────────────────── */

.leiste{
  position:absolute; left:0; right:0; bottom:0; z-index:30;
  background:rgba(244,244,245,.94);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-top:1px solid var(--kante);
  padding:14px 20px 22px;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.leiste__stand{ display:flex; align-items:center; gap:12px; }
.leiste__ring{ width:44px; height:44px; flex:none; position:relative; }
.leiste__ring svg{ display:block; transform:rotate(-90deg); }
.leiste__was{ font-size:17px; font-weight:700; line-height:1.25; }
.leiste__wann{ font-size:17px; font-weight:400; color:var(--grau); line-height:1.25; margin-top:1px; }
/* 58 px Polsterung, nicht die 34 des Entwurfs: im Foto der laufenden App
   spannt INVEST rund 180 pt, der Entwurf kam auf 133. Bei 402 pt Schirm
   bleibt links gerade genug für Ring und Frist. */
.leiste__knopf{
  flex:none;
  background:var(--tinte); color:#fff;
  font-size:16px; font-weight:700; letter-spacing:.06em;
  padding:19px 58px; border-radius:999px;
}

/* ══ Abläufe ════════════════════════════════════════════════════════════
   Sparplan-Blatt, Betrag-Eingabe (Sparplan wie Investieren) und der
   Anmelde-Aufruf. Alles nach den Fotos der laufenden App vom 08.09.2026;
   im Entwurf steht davon nichts. Drei Bühnen liegen übereinander:
   Schleier → Blatt → Betrag-Seite, jede mit eigenem hidden-Schalter. */

.schleier{
  /* Über der Betrag-Seite (60), nicht darunter: sonst dunkelt er nur den
     Produkt-Detail ab, und der Anmelde-Aufruf stünde ungedimmt auf Weiß. */
  position:absolute; inset:0; z-index:62;
  opacity:0;
  transition:opacity .26s ease;
  /* Schwarz auf 36 %: erklärt beide Beobachtungen im Foto — der helle
     Inhalt fällt auf Mittelgrau (244 × .64 = 156), der dunkle Aufmacher
     bleibt dunkel und die Pflanze sichtbar. Ein grauer Schleier könnte
     nur eins von beidem. */
  background:rgba(0,0,0,.36);
}
.schleier[data-an]{ opacity:1; }

/* ── Blatt von unten ────────────────────────────────────────────────── */

.blattung{
  position:absolute; left:16px; right:16px; bottom:16px; z-index:64;
  background:var(--karte);
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 -2px 40px rgba(16,16,24,.22);
  transform:translateY(calc(100% + 16px));
  transition:transform .34s cubic-bezier(.32,.72,0,1);
}
.blattung[data-an]{ transform:none; }
.blattung__griff{
  width:48px; height:5px; border-radius:999px;
  background:#C7C7CC;
  margin:10px auto 0;
}
.blattung__inhalt{ padding:22px 24px 26px; }
.blattung__titel{ font-size:24px; font-weight:400; letter-spacing:-.015em; margin:18px 0 0; }
.blattung__text{ font-size:17px; font-weight:400; line-height:1.5; margin:16px 0 0; }
.blattung__fuss{ background:#EDEFF6; padding:20px; }

/* ── Betrag-Seite ───────────────────────────────────────────────────── */

.betrag{
  position:absolute; inset:0; z-index:60;
  background:#fff;
  display:flex; flex-direction:column;
  transform:translateX(100%);
  transition:transform .34s cubic-bezier(.32,.72,0,1);
}
.betrag[data-an]{ transform:none; }
.betrag__nav{
  flex:none;
  height:56px; margin-top:52px;      /* 52 = Statusleiste */
  padding:0 20px;
  display:flex; align-items:center; gap:14px;
}
.betrag__titel{ flex:1; min-width:0; text-align:center; font-size:18px; font-weight:500; }
.rundknopf{
  width:44px; height:44px; flex:none; padding:0;
  border:0; border-radius:999px; background:var(--fach);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}

.betrag__mitte{ flex:none; padding:34px 20px 0; text-align:center; }
/* Grau, solange nur die Null als Platzhalter dasteht; sobald etwas
   eingetippt ist, wird der ganze Betrag Tinte — Zahl, Zeichen und
   Schreibmarke, denn die nimmt ihre Farbe über currentColor mit. */
.betrag__zahl{
  display:flex; align-items:center; justify-content:center;
  font-size:64px; font-weight:300; letter-spacing:-.02em;
  color:var(--grau);
  line-height:1.1;
}
.betrag__zahl[data-gefuellt]{ color:var(--tinte); }

/* Eine echte Schreibmarke: 2 px, runde Enden, und sie blinkt. Der Takt ist
   der von iOS — gut eine Sekunde, mit kurzem Überblenden statt hartem
   Umschalten, sonst wirkt sie wie ein Fehler im Bild. */
.betrag__strich{
  width:2px; height:56px; margin:0 5px;
  border-radius:1px;
  background:currentColor;
  animation:schreibmarke 1.06s infinite;
}
@keyframes schreibmarke{
  0%, 48%  { opacity:1; }
  52%, 96% { opacity:0; }
  100%     { opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .betrag__strich{ animation:none; }
}
.betrag__frei{ font-size:17px; font-weight:400; color:var(--tinte); margin-top:14px; }
.betrag__zahlweg{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:18px; padding:14px 22px;
  background:var(--fach); border-radius:999px;
  font-size:17px; font-weight:400;
}
.betrag__zahlweg b{ font-weight:700; }

.betrag__werte{ flex:none; padding:26px 20px 0; display:flex; flex-direction:column; gap:14px; }
.betrag__werte .zeile__wert{ font-weight:700; }

.betrag__block{
  flex:1; min-height:0;
  display:grid; grid-template-columns:repeat(3,1fr); align-content:center;
  padding:8px 20px;
}
.taste{
  border:0; background:transparent;
  font-family:inherit; font-size:34px; font-weight:400; color:var(--tinte);
  padding:14px 0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.taste--null{ color:var(--grau); }        /* wie im Foto: die Null steht grau */
.taste:active{ opacity:.4; }

.betrag__weiter{
  flex:none; margin:0 20px 22px;
  border:0; border-radius:999px;
  padding:20px;
  font-family:inherit; font-size:17px; font-weight:700; letter-spacing:.06em;
  background:#9A9A9E; color:#fff;
  cursor:default;
}
.betrag__weiter[data-bereit]{ background:var(--tinte); cursor:pointer; }

/* ── Auf- und zuklappen ─────────────────────────────────────────────── */

.faq__zeile, .pos{ cursor:pointer; }
.faq__zeile svg, .pos svg{ transition:transform .2s ease; }
.faq__zeile[aria-expanded="true"] svg,
.pos[aria-expanded="true"] svg{ transform:rotate(180deg); }
/* 0fr → 1fr ist das einzige Verfahren, das auf unbekannte Inhaltshöhe
   animiert, ohne eine Höhe zu raten — es hat aber eine Falle: ein
   Grid-Kind hat `min-height: auto` und schrumpft deshalb NICHT unter
   seine Inhaltshöhe. Der Track bleibt dann zwar 0 hoch, das Kind malt
   aber darüber hinaus und legt sich über die nächste Zeile. `min-height:0`
   am Kind ist die eigentliche Behebung; das overflow am Kasten ist die
   zweite Sicherung, damit selbst dann nichts hinausläuft. */
.klapp{
  display:grid; grid-template-rows:0fr;
  overflow:hidden;
  transition:grid-template-rows .26s cubic-bezier(.32,.72,0,1);
}
/* Die geklippte Ebene trägt WEDER Polsterung NOCH Rand — beides ließe
   sich nicht wegschrumpfen und hielte den Kasten offen (gemessen: 20 px
   Restsatz). Der Abstand sitzt deshalb eine Ebene tiefer. */
.klapp > *{ min-height:0; overflow:hidden; }
.klapp p{ margin:0; padding-bottom:20px; font-size:17px; color:var(--grau); }
.klapp[data-offen]{ grid-template-rows:1fr; }
.pos .pos__logo, .pos .pos__name, .pos .pos__anteil{ pointer-events:none; }


/* ── Berührung ──────────────────────────────────────────────────────────
   Eine echte App antwortet auf jeden Fingerdruck. Alles Antippbare wird
   kurz blasser; die Dauer ist bewusst asymmetrisch (sofort hinein, langsam
   heraus), sonst wirkt ein schneller Tipper wie kein Tipper. */

.sparplan, .knopf, .leiste__knopf, .pille, .dok, .rundknopf,
.faq__zeile, .pos, .faq__mehr,
.betrag__zahlweg, .betrag__weiter[data-bereit]{
  transition:opacity .34s ease;
}
.sparplan:active, .knopf:active, .leiste__knopf:active, .pille:active,
.dok:active, .rundknopf:active, .faq__zeile:active, .pos:active,
.faq__mehr:active, .betrag__zahlweg:active, .betrag__weiter[data-bereit]:active{
  opacity:.45; transition:opacity 0s;
}
.betrag__zahlweg, .faq__mehr{ cursor:pointer; }

@media (prefers-reduced-motion: reduce){
  .schleier, .blattung, .betrag, .klapp{ transition:none; }
}

/* ── Bearbeiten-Modus ───────────────────────────────────────────────────
   Nur eine gestrichelte Marke pro Feld, sonst nichts: Das Blatt soll auch
   beim Tippen noch aussehen wie die App und nicht wie ein Formular. */

.bearbeiten [contenteditable="true"]{
  outline:1px dashed rgba(47,91,255,.45);
  outline-offset:2px;
  border-radius:2px;
  cursor:text;
}
.bearbeiten [contenteditable="true"]:hover{ outline-color:rgba(47,91,255,.8); }
.bearbeiten [contenteditable="true"]:focus{
  outline:2px solid #2F5BFF; outline-offset:2px;
  background:rgba(47,91,255,.06);
}
/* Zeichen bleiben Zeichen — nicht anwählbar, nicht löschbar. */
.bearbeiten [contenteditable="true"] svg{ user-select:none; pointer-events:none; }
/* Im Bearbeiten-Modus wird nichts angetippt, also auch nichts blasser. */
.bearbeiten *:active{ opacity:1 !important; }