/*
 * Die Produktseite unter pocketmoney.webitect.de.
 *
 * Sie bindet styles.css BEWUSST NICHT ein und benutzt auch templates/header.php
 * nicht. Bis zum 04.08.2026 war die Produktseite dieselbe Datei wie die
 * webitect.de-Unterseite - eine Rewrite-Regel lieferte sie unter beiden Adressen
 * aus. Sie sah deshalb zwangslaeufig aus wie der Rest der Website, samt Menue
 * "Home | Blog | Apps" und Brotkrume. Eine Produktseite, die zum Weggehen
 * einlaedt, ist keine.
 *
 * Die drei Farben kommen aus dem App-Symbol und sind keine Entwurfsfreiheit:
 * Dunkelgruen, Hellgruen, Gold. Wer sie hier aendert, macht Symbol und Seite
 * unterschiedlich - das Symbol im Play Store ist das erste, was jemand sieht.
 *
 * Schrift: bewusst KEIN Webfont. Titillium Web unter web/fonts/ ist die Stimme
 * von webitect.de und liegt nur in einer Staerke vor; eine Displayzeile braucht
 * mehr. Die Systemstapel unten liefern auf jedem Geraet eine passende Schrift,
 * ohne einen zweiten Download und ohne dass eine fehlende Datei die Seite still
 * auf Times zurueckfallen laesst.
 */

:root {
    --tief:      #1D5A3E;
    --gruen:     #4A9E6B;
    --gold:      #C08A22;
    --gold-hell: #F8DE8D;

    /* Papier und Tinte des Beleg-Abschnitts. Das Grau traegt einen Gruenstich -
       ein neutrales Grau neben so viel Gruen wirkt schmutzig. */
    --papier:    #FBFAF6;
    --tinte:     #16211B;
    --gedaempft: #4A554C;
    --linie:     #E2E4DA;

    --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --serif: ui-serif, "New York", Georgia, "Times New Roman", serif;
    --mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation: none !important; transition: none !important; }
}

body {
    margin: 0;
    background: var(--papier);
    color: var(--tinte);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
img { max-width: 100%; height: auto; }

a { color: inherit; }
a:focus-visible, button:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
    border-radius: 2px;
}

.huelle { max-width: 1080px; margin: 0 auto; padding: 0 1.5rem; }

/* Bildschirmleser-Sprungziel: sichtbar erst beim Tabben. */
.skip {
    position: absolute; left: -9999px;
    background: var(--tief); color: #fff; padding: 0.7rem 1.1rem;
    text-decoration: none; z-index: 100;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ------------------------------------------------------------------- Kopf
   Schmal und dauerhaft sichtbar: Der Play-Knopf soll erreichbar bleiben, egal
   wie weit jemand gescrollt hat. */
.kopf {
    position: sticky; top: 0; z-index: 50;
    background: rgb(29 90 62 / 0.94);
    backdrop-filter: blur(8px);
    color: #EAF4EC;
    border-bottom: 1px solid rgb(248 222 141 / 0.18);
}
.kopf .huelle {
    display: flex; align-items: center; gap: 1.25rem;
    min-height: 3.5rem; flex-wrap: wrap;
}
.kopf-marke {
    display: flex; align-items: center; gap: 0.6rem;
    font-weight: 700; letter-spacing: -0.01em; text-decoration: none;
    margin-right: auto;
}
/* Als eingebettetes SVG und nicht als Bilddatei: Ein images/pocketmoney.png
   gibt es nicht, und ein <img> auf eine fehlende Datei bleibt still leer. */
.kopf-marke svg { width: 1.75rem; height: 1.75rem; display: block; flex: none; }

.kopf-nav { display: flex; gap: 1.25rem; font-size: 0.9rem; }
.kopf-nav a { color: #C9DED0; text-decoration: none; }
.kopf-nav a:hover { color: #fff; }
@media (max-width: 640px) { .kopf-nav { display: none; } }

.kopf-sprache { font-size: 0.8rem; letter-spacing: 0.08em; text-decoration: none; color: #C9DED0; }
.kopf-play {
    background: var(--gold-hell); color: #3A2C05;
    text-decoration: none; font-weight: 650; font-size: 0.85rem;
    padding: 0.45rem 0.95rem; border-radius: 999px; white-space: nowrap;
}

/* =================================================================== C
   Der Aufschlag: das App-Symbol gross, Serifen als Stimme.
   Warum die Karte und nicht der Kontoauszug zuerst: Wer von Play kommt, hat
   gerade das Symbol angetippt. Die Seite beginnt mit dem, was er wiedererkennt. */
.teil-marke {
    background:
        radial-gradient(120% 90% at 85% 0%, #2E7A54 0%, #1D5A3E 45%, #14432D 100%);
    color: #EAF4EC;
    padding: clamp(3rem, 8vw, 6rem) 0;
}
.marke-raster { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 900px) { .marke-raster { grid-template-columns: 1.05fr 0.95fr; } }

.augenbraue {
    font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
    font-weight: 700; color: var(--gold-hell);
}
.teil-marke h1 {
    font-family: var(--serif); font-weight: 600;
    font-size: clamp(2.3rem, 5.4vw, 3.9rem); line-height: 1.05;
    letter-spacing: -0.02em; margin-top: 1rem; text-wrap: balance;
}
.teil-marke h1 i { font-style: italic; color: var(--gold-hell); }
.teil-marke .lead {
    margin-top: 1.3rem; color: #BDD6C4; font-size: 1.08rem; max-width: 42ch;
}

.regelliste { list-style: none; padding: 0; margin-top: 1.75rem; display: grid; gap: 0.6rem; }
.regelliste li { display: flex; gap: 0.75rem; align-items: baseline; font-size: 0.98rem; }
.regelliste li::before {
    content: ""; flex: none; width: 0.45rem; height: 0.45rem; border-radius: 50%;
    background: var(--gold-hell); transform: translateY(-0.12rem);
}

.knopfreihe { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; align-items: center; }
.knopf-voll {
    background: var(--gold-hell); color: #3A2C05; text-decoration: none;
    font-weight: 650; padding: 0.85rem 1.6rem; border-radius: 999px;
}
.knopf-leer {
    color: #DCEBE0; text-decoration: none; font-weight: 600;
    padding: 0.85rem 1.6rem; border-radius: 999px;
    box-shadow: inset 0 0 0 1.5px rgb(220 235 224 / 0.35);
}
.probe-hinweis { margin-top: 1rem; font-size: 0.85rem; color: #A9C7B2; }

/* Die Karte - dieselbe Geometrie wie das App-Symbol. */
.buehne { display: grid; place-items: center; }
.kartenstapel { position: relative; width: min(100%, 360px); aspect-ratio: 1.586; }
.kkarte {
    position: absolute; inset: 0; border-radius: 20px;
    background: linear-gradient(150deg, var(--gruen) 0%, var(--tief) 100%);
    box-shadow: 0 34px 60px -30px rgb(8 30 18 / 0.8);
    padding: 1.5rem 1.6rem;
    display: flex; flex-direction: column; justify-content: space-between;
}
.kkarte.hinten { transform: translate(-7%, -9%) rotate(-7deg); opacity: 0.4; filter: saturate(0.7); }
.kkarte.vorn { transform: rotate(2.5deg); }
.kkarte-oben { display: flex; justify-content: space-between; align-items: flex-start; }
.kkarte .zeichen { font-family: var(--serif); font-size: 3.6rem; line-height: 0.9; color: #fff; font-weight: 600; }
.kkarte .chip {
    width: 2.7rem; height: 2.1rem; border-radius: 5px; margin-top: 0.6rem;
    background: linear-gradient(160deg, var(--gold-hell), var(--gold));
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12);
}
.kkarte-unten { display: flex; justify-content: space-between; align-items: flex-end; color: #DCEBE0; }
.kkarte-unten .wer { font-size: 0.9rem; font-weight: 600; }
.kkarte-unten .stand {
    text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums;
    font-size: 1.2rem; color: #fff; font-weight: 600;
}
.kkarte-unten .stand span {
    display: block; font-family: var(--sans); font-weight: 600;
    font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: rgb(220 235 224 / 0.75);
}

/* =================================================================== A
   Der Beleg: ein echter Kontoauszug mit der Regelaenderung als eigener Zeile.
   Das ist das Argument der App und deshalb der einzige Abschnitt auf Papier -
   der Wechsel von Gruen auf Weiss ist der Punkt, an dem die Seite aufhoert zu
   werben und anfaengt zu zeigen. */
.teil-beleg { background: var(--papier); padding: clamp(3rem, 8vw, 6rem) 0; }
.beleg-raster { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 900px) { .beleg-raster { grid-template-columns: 0.85fr 1.15fr; } }

/* DAS `min-width: 0` IST DIE GANZE REPARATUR VOM 11.08.2026, und es sieht nach
   nichts aus. Ein Grid-Item hat `min-width: auto`, und das loest sich zur
   min-content-Breite seines Inhalts auf - hier also zur `min-width: 30rem` der
   Kontotabelle. Die Spalte wurde damit mindestens 480 px breit, das Raster
   sprengte das Fenster, und der Scrollkasten `.auszug-rollen` kam nie zum
   Zug: Er scrollt erst, wenn er SCHMALER ist als sein Inhalt.

   Die Folgen sahen aus wie vier verschiedene Fehler: Die Seite liess sich auf
   dem Telefon seitwaerts schieben, rechts stand ein weisser Streifen (der
   body-Hintergrund reicht nur bis zur Fensterbreite), der Browser zoomte die
   zu breite Seite heraus - und die Kopfzeile blieb beim Scrollen NICHT stehen,
   obwohl `position: sticky` korrekt gesetzt ist: Sticky klebt am
   Layout-Viewport, und der lag nach dem Herauszoomen ueber dem sichtbaren Rand.

   Gemessen im Emulator-Chrome bei 412 px Fensterbreite:
       ohne die Regel                     scrollWidth 536, Tabelle rollt nicht
       `.auszug-rollen { min-width: 0 }`   scrollWidth 536  (falsche Stelle!)
       `.zeilen { min-width: 0 }`          scrollWidth 536  (die Textbreite allein reicht schon)
       DIESE Regel                        scrollWidth 412, Tabelle rollt

   Sie steht am Raster und nicht an `.auszug`, damit auch die Textspalte daneben
   schmaler werden darf als ihr laengstes Wort. */
.beleg-raster > * { min-width: 0; }

.marke-klein {
    font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--tief); font-weight: 600;
}
.teil-beleg h2 {
    font-size: clamp(1.9rem, 4.2vw, 2.9rem); line-height: 1.06;
    letter-spacing: -0.03em; font-weight: 700; margin-top: 0.9rem; text-wrap: balance;
}
.teil-beleg h2 em { font-style: normal; color: var(--tief); }
.teil-beleg .lead { margin-top: 1.1rem; color: var(--gedaempft); max-width: 42ch; }

/* Der Hinweiskasten ganz oben im Beleg-Abschnitt (17.08.2026): die Antwort auf
   "wo ist das echte Geld?", noch vor dem Kontoauszug, der die Frage ausloest.
   Begruendung fuer den Ort steht in beiden Seitenquellen.

   Er steht bewusst NICHT als eigenes Band zwischen Buehne und Beleg: Der
   Wechsel von Gruen auf Papier ist der Punkt, an dem die Seite aufhoert zu
   werben und anfaengt zu zeigen (Kommentar oben bei .teil-beleg) - ein drittes
   Band dazwischen zerschnitte genau diesen Uebergang. Auf dem Papier ist der
   Kasten dagegen die erste sachliche Aussage des zeigenden Teils.

   `.hinweis-kasten h2` MUSS nach `.teil-beleg h2` stehen: beide haben
   Spezifitaet (0,1,1), es entscheidet die Reihenfolge. Ohne das erbte die
   Kastenueberschrift die 2,9rem der Abschnittsueberschrift und der Hinweis
   schriee lauter als der Kontoauszug, den er einleitet. */
.hinweis-kasten {
    max-width: 64ch; margin-bottom: clamp(2.5rem, 6vw, 4rem);
    background: #fff; border: 1px solid var(--linie);
    border-left: 4px solid var(--tief);
    border-radius: 3px; padding: 1.15rem 1.4rem;
}
.hinweis-kasten h2 {
    font-family: inherit; font-size: 1.15rem; line-height: 1.25;
    letter-spacing: -0.01em; font-weight: 700; margin-top: 0; color: var(--tief);
}
.hinweis-kasten p { margin-top: 0.6rem; color: var(--gedaempft); max-width: none; }

/* Seit dem 11.08.2026 scrollt nur noch die TABELLE waagerecht, nicht der ganze
   Kasten. Vorher lag der Kopf mit dem grossen Kontostand im Scrollbereich und
   war nur containerbreit: Beim Scrollen nach rechts - also genau dann, wenn man
   Betrag und Kontostand lesen will - wanderte er links aus dem Bild. Gefunden
   und behoben in der Kinderoberflaeche; hier mitgezogen, weil dieser Beleg und
   jene Oberflaeche dasselbe sein sollen. */
.auszug {
    background: #fff; border: 1px solid var(--linie); border-radius: 3px;
    box-shadow: 0 26px 55px -34px rgb(20 40 28 / 0.55);
}
.auszug-rollen { overflow-x: auto; }
.auszug-kopf {
    display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem;
    padding: 1.2rem 1.4rem; border-bottom: 1px solid var(--linie);
    background: linear-gradient(180deg, #F7FAF7, #fff);
}
.auszug-kopf .was {
    font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em;
    text-transform: uppercase; color: #7C8A7F;
}
.auszug-kopf .wer { font-weight: 600; font-size: 0.98rem; }
.auszug-kopf .stand { text-align: right; }
.auszug-kopf .stand span {
    display: block; font-family: var(--mono); font-size: 0.66rem;
    letter-spacing: 0.12em; text-transform: uppercase; color: #7C8A7F;
}
.auszug-kopf .stand b {
    font-family: var(--mono); font-size: 1.5rem; font-weight: 600;
    font-variant-numeric: tabular-nums; color: var(--tief); letter-spacing: -0.02em;
}

.zeilen { width: 100%; border-collapse: collapse; font-size: 0.88rem; min-width: 30rem; }
/* Der Hintergrund gehoert zu `position: sticky` dazu - ohne ihn schienen die
   Zeilen durch, sobald sie darunter herwandern. Und die Farbe ist am 11.08.2026
   von #8C998F abgedunkelt: Der alte Wert kam auf Weiss auf ein
   Kontrastverhaeltnis von 2,97, verlangt sind 4,5. Jetzt 4,52. Dieselbe
   Korrektur wie in pocketmoney-web.css. */
.zeilen th {
    font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.13em;
    text-transform: uppercase; color: #6F7971; font-weight: 600;
    text-align: left; padding: 0.6rem 1.4rem; border-bottom: 1px solid #EDEFE6;
    position: sticky; top: 0; z-index: 1; background: #fff;
}
.zeilen th.r, .zeilen td.r { text-align: right; }
.zeilen td { padding: 0.75rem 1.4rem; border-bottom: 1px solid #F2F3EC; vertical-align: top; }
.zeilen tr:last-child td { border-bottom: 0; }
.zeilen .tag {
    font-family: var(--mono); font-size: 0.78rem; color: #7C8A7F;
    white-space: nowrap; font-variant-numeric: tabular-nums;
}
.zeilen .zweck { font-weight: 500; }
.zeilen .detail { display: block; font-size: 0.76rem; color: #7C8A7F; margin-top: 0.15rem; font-weight: 400; }
.zeilen .betrag, .zeilen .saldo {
    font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.zeilen .betrag.plus  { color: var(--tief); }
.zeilen .betrag.minus { color: #9A4A3C; }
.zeilen .saldo { color: #58635A; }

/* Die hervorgehobene Zeile. Nicht nur Farbe: Der Balken links traegt das Signal
   auch fuer jemanden, der Farben nicht unterscheidet. */
.zeilen tr.regel td { background: #FCF6E6; }
.zeilen tr.regel td:first-child { box-shadow: inset 3px 0 0 var(--gold); }
.regel-delta {
    display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 0.35rem;
    font-family: var(--mono); font-size: 0.78rem; background: #fff;
    border: 1px solid #E7D9AE; border-radius: 2px; padding: 0.15rem 0.5rem;
}
.regel-delta s { color: #96794A; text-decoration-thickness: 1px; }
.regel-delta b { color: #6E5410; }

.beleg-spalten {
    display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    margin-top: 3.5rem; padding-top: 2.25rem; border-top: 1px solid var(--linie);
}
.beleg-spalten h3 { font-size: 1rem; font-weight: 650; }
.beleg-spalten h3::before {
    content: ""; display: block; width: 1.7rem; height: 2px;
    background: var(--gold); margin-bottom: 0.75rem;
}
.beleg-spalten p { font-size: 0.9rem; color: var(--gedaempft); margin-top: 0.4rem; }

/* =================================================================== B
   Wofuer das Ganze: die Seite des Kindes. Wieder Gruen, aber waermer als der
   Aufschlag - die Seite kommt zurueck, nachdem sie den Beleg gezeigt hat. */
.teil-kind {
    background: radial-gradient(115% 95% at 20% 10%, #2E7A54 0%, #17492F 55%, #10361F 100%);
    color: #EAF4EC; padding: clamp(3rem, 8vw, 6rem) 0;
}
.kind-raster { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 900px) { .kind-raster { grid-template-columns: 1.1fr 0.9fr; } }

.teil-kind h2 {
    font-size: clamp(2rem, 4.6vw, 3.1rem); line-height: 1.05; font-weight: 700;
    letter-spacing: -0.03em; margin-top: 1rem; text-wrap: balance;
}
.teil-kind h2 span { color: var(--gold-hell); }
.teil-kind .lead { margin-top: 1.2rem; color: #BDD6C4; max-width: 42ch; }

.ziel {
    background: rgb(255 255 255 / 0.07); border: 1px solid rgb(248 222 141 / 0.22);
    border-radius: 24px; padding: 2rem;
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.4rem;
}
.ziel .name { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: #A9C7B2; }
.ring { position: relative; width: 200px; height: 200px; margin: 0.5rem 0; }
.ring svg { transform: rotate(-90deg); display: block; }
.ring .mitte {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem;
}
.ring .fehlt { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: #A9C7B2; }
.ring .zahl {
    font-size: 2.15rem; font-weight: 700; letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums; color: var(--gold-hell);
}
.ziel .wann { font-size: 0.92rem; color: #C9DED0; }
.ziel .wann b { color: #fff; font-weight: 600; }

.kind-spalten { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); margin-top: 3rem; }
.kind-spalten div {
    background: rgb(255 255 255 / 0.05); border: 1px solid rgb(255 255 255 / 0.08);
    border-radius: 16px; padding: 1.2rem 1.3rem;
}
.kind-spalten h3 { font-size: 0.95rem; font-weight: 650; }
.kind-spalten p { font-size: 0.86rem; color: #B4CEBC; margin-top: 0.35rem; }

/* ============================================================ Vollversion */
/* Die Haarlinie oben trennt Vollversion von dem gleich getoenten Warum-Band
   darueber (siehe dort). Sie ist die einzige Kante ZWISCHEN ZWEI ABSCHNITTEN --
   sonst grenzen die sich durch ihre Farbe ab; die zweite --linie der Seite sitzt
   innerhalb von teil-beleg (.beleg-spalten). */
.teil-preis { background: #F3F1E9; border-top: 1px solid var(--linie); padding: clamp(3rem, 7vw, 5rem) 0; }
.preis-kasten { max-width: 64ch; }
.teil-preis h2 {
    font-family: var(--serif); font-weight: 600;
    font-size: clamp(1.7rem, 3.6vw, 2.4rem); letter-spacing: -0.015em; line-height: 1.1;
    margin-top: 0.9rem;
}
.teil-preis p { margin-top: 1rem; color: var(--gedaempft); }
.teil-preis .knopfreihe { margin-top: 1.75rem; }
.teil-preis .knopf-voll { background: var(--tief); color: #fff; }
.teil-preis .knopf-leer { color: var(--tief); box-shadow: inset 0 0 0 1.5px rgb(29 90 62 / 0.3); }

/* ============================================== Warum (Quelle EK/OECD) */
/* Gleiches Layout wie teil-preis: getoente Flaeche, gleiche Polsterung, gleiche
   Ueberschriftengroesse. Der erste Entwurf wollte "ruhiger als die Nachbarn"
   sein und nahm --papier -- das ist aber genau die body-Farbe. Aus ruhig wurde
   damit KEIN Feld: Der Textblock stand frei unter einem dunklen Band, und ohne
   Flaeche markiert nichts die schmalere Spalte. Die 64ch waren die ganze Zeit da
   und sahen trotzdem so breit aus wie die Rasterabschnitte darueber.
   Die beiden getoenten Baender trennt deshalb eine Haarlinie an teil-preis --
   ohne sie verschmelzen Warum und Vollversion zu einem Block. */
.teil-quelle { background: #F3F1E9; padding: clamp(3rem, 7vw, 5rem) 0; }
.quelle-kasten { max-width: 64ch; }
.teil-quelle h2 {
    font-family: var(--serif); font-weight: 600;
    font-size: clamp(1.7rem, 3.6vw, 2.4rem); letter-spacing: -0.015em; line-height: 1.1;
    margin-top: 0.9rem;
}
.teil-quelle p { margin-top: 1rem; color: var(--gedaempft); }
.teil-quelle em { font-style: normal; color: var(--tief); font-weight: 600; }
/* Die Quellenangabe steht kleiner, aber nicht grau in grau: Sie ist der Beleg
   fuer die Aussage darueber und muss lesbar bleiben, sonst ist sie Zierrat. */
.quellenangabe { font-size: 0.86rem; margin-top: 1.4rem; }
.quellenangabe cite { font-style: italic; }

/* ================================================================== Fuss */
.fuss {
    background: var(--tinte); color: #A9B5AC;
    padding: 2.5rem 0; font-size: 0.87rem;
}
.fuss .huelle { display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; align-items: center; }
.fuss a { color: #C9DED0; text-decoration: none; }
.fuss a:hover { text-decoration: underline; }
.fuss .rechts { margin-left: auto; }
@media (max-width: 640px) { .fuss .rechts { margin-left: 0; } }