/* QRocodile – Oberflächen-Stile.
   Ausgelagert aus app/Views/partials/head.php, damit der Browser sie
   cachen kann. Die Schriftpfade sind relativ zu public/assets/. */

/* Lokal gehostete Ubuntu-Schrift (CSP blockiert externe Font-CDNs).
   Vier Schnitte: Light 300, Regular 400, Medium 500, Bold 700. */
@font-face {
    font-family: "Ubuntu";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("../fonts/ubuntu-light.woff2") format("woff2");
}
@font-face {
    font-family: "Ubuntu";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/ubuntu-regular.woff2") format("woff2");
}
@font-face {
    font-family: "Ubuntu";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/ubuntu-medium.woff2") format("woff2");
}
@font-face {
    font-family: "Ubuntu";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/ubuntu-bold.woff2") format("woff2");
}

/* ---------------------------------------------------------------
   Design-Tokens. Blauer Verlaufs-Hintergrund, Karten auf hellem Grund,
   Ubuntu als durchgehende Schrift.
   --------------------------------------------------------------- */
:root {
    --paper:   #FAFAF7;
    --ink:     #1a1a1a;
    --accent:  #0575E6;   /* Akzent aus dem Hintergrund-Blau */
    --meta:    #8A8A82;
    --border:  #E4E4DE;
    --field:   #FFFFFF;

    /* Sehr dezentes Muster über dem blauen Verlauf. */
    --grid-line: rgba(255, 255, 255, 0.06);

    /* Format-Farben: Stufen aus dem Grün→Blau-Hintergrundverlauf. */
    --c-svg: #45a247;   /* Grün (Verlaufsanfang) */
    --c-png: #3a9277;   /* Grün-Teal (zwischen SVG und EPS) */
    --c-eps: #2f7d9e;   /* Teal (Verlaufsmitte) */
    --c-pdf: #283c86;   /* Blau (Verlaufsende) */
    /* Kantenlänge einer Rasterzelle. Alle Layout-Abstände orientieren
       sich an diesem Wert, damit Inputs am Muster ausgerichtet sind. */
    --grid: 24px;
    /* Einheitliche, leichte Eckenrundung für alle Elemente. */
    --radius: 6px;

    /* Ubuntu für alles; die "mono"-Rolle nutzt ebenfalls Ubuntu, damit
       die Typografie einheitlich ist. */
    --sans: "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --mono: "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* Helles Theme ist der STANDARD (:root-Defaults, data-theme="light").
   Bei data-theme="dark" greifen die dunklen Werte hier. Der Umschalter
   merkt sich die Wahl in localStorage. */
:root[data-theme="dark"] {
    --paper:  #121311;
    --ink:    #F1F1EC;
    --meta:   #7C7C74;
    --border: #2A2B28;
    --field:  #1B1C1A;
    --grid-line: rgba(255, 255, 255, 0.022);
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
    /* Grün-Blauer Verlaufs-Hintergrund mit Fallback (nach Vorgabe). */
    background: #283c86; /* Fallback für alte Browser */
    background: -webkit-linear-gradient(to right, #45a247, #283c86);
    background: linear-gradient(to right, #45a247, #283c86);
    background-attachment: fixed;   /* Verlauf bleibt beim Scrollen stehen */
    /* Feines Muster ganz leicht darüber. */
    background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
        linear-gradient(to right, #45a247, #283c86);
    background-size: var(--grid) var(--grid), var(--grid) var(--grid), cover;
    background-attachment: fixed;
    background-position: -1px -1px, -1px -1px, 0 0;
    color: var(--ink);
    font-family: var(--sans);
    font-weight: 300;               /* Ubuntu Light als Grundgewicht */
    line-height: 1.5;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

.wrap {
    /* ~70 % der vorherigen Breite – kompakter Container, als helle Karte
       auf dem blauen Verlauf. */
    max-width: 728px;
    margin: calc(var(--grid) * 2) auto;
    padding: calc(var(--grid) * 1.75) clamp(1.25rem, 4vw, 2rem);
    background: var(--paper);
    border-radius: calc(var(--radius) * 2);
    box-shadow: 0 20px 60px -20px rgba(40, 60, 134, 0.5);
}

/* --- Tab-Leiste (QR / EAN) ---------------------------------------- */
.tabs {
    display: flex;
    gap: 0;
    margin-bottom: calc(var(--grid) * 1.5);
    border-bottom: 1px solid var(--border);
}
.tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.1rem;
    margin-bottom: -1px;               /* Rand mit .tabs-Linie überlappen */
    font-family: var(--mono);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--meta);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.15s, border-color 0.15s;
}
.tab:hover:not(:disabled) { color: var(--ink); }
.tab.is-active {
    color: var(--ink);
    border-bottom-color: var(--accent);
}
.tab:disabled { cursor: not-allowed; opacity: 0.65; }
.tab-badge {
    font-size: 0.6rem;
    letter-spacing: 0.05em;
    padding: 0.1rem 0.35rem;
    color: var(--paper);
    background: var(--meta);
    border-radius: 2px;
}

/* --- Kopf --------------------------------------------------------- */
header {
    margin-bottom: calc(var(--grid) * 1.5);   /* 36px, am Raster */
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

/* Sprachwahl und Theme-Umschalter sitzen nebeneinander rechts oben. */
.header-controls {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

/* --- Sprachwahl ---------------------------------------------------
   <details>-Dropdown: ohne JavaScript bedienbar, Einträge sind
   echte Links. Optik bewusst identisch zum Theme-Umschalter. */
.lang-picker {
    position: relative;
    flex-shrink: 0;
}
.lang-picker summary {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 42px;
    padding: 0 0.6rem;
    margin-top: 0.3rem;
    color: var(--ink);
    background: var(--field);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    list-style: none;                 /* Standard-Dreieck ausblenden */
    transition: border-color 0.15s, color 0.15s;
    user-select: none;
}
/* Das Marker-Dreieck in WebKit/Blink separat abschalten. */
.lang-picker summary::-webkit-details-marker { display: none; }
.lang-picker summary:hover { border-color: var(--accent); color: var(--accent); }
.lang-picker summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.lang-flag {
    font-size: 1.05rem;
    line-height: 1;
    /* Emoji-Flaggen brauchen eine Schrift, die sie farbig kennt. */
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.lang-code {
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.03em;
}
.lang-caret {
    width: 14px;
    height: 14px;
    opacity: 0.6;
    transition: transform 0.15s;
}
.lang-picker[open] .lang-caret { transform: rotate(180deg); }

.lang-menu {
    position: absolute;
    top: calc(100% + 0.3rem);
    right: 0;
    z-index: 20;
    min-width: 11rem;
    margin: 0;
    padding: 0.25rem;
    list-style: none;
    background: var(--field);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.lang-menu a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    border-radius: calc(var(--radius) - 2px);
    color: var(--ink);
    text-decoration: none;
    font-size: 0.9rem;
}
.lang-menu a:hover { background: var(--paper); color: var(--accent); }
.lang-menu a[aria-current] {
    color: var(--accent);
    font-weight: 500;
}

/* --- Theme-Umschalter (Sonne/Mond) -------------------------------- */
.theme-toggle {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-top: 0.3rem;
    color: var(--ink);
    background: var(--field);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.theme-toggle:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.theme-toggle svg { width: 20px; height: 20px; display: block; }
/* Im hellen Theme die Sonne zeigen (aktueller Zustand = hell),
   im dunklen Theme den Mond. Jeweils das andere Icon ausblenden. */
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun  { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

/* Wortmarke im Kopf (früher h1, jetzt p – die echte Überschrift
   steht unter der Tab-Leiste). */
.logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    letter-spacing: -0.01em;
    margin: 0;
    line-height: 1.05;
}

/* Seitenüberschrift: klein und zurückhaltend, damit der Generator
   die Aufmerksamkeit behält – für Suchmaschinen bleibt sie die h1. */
.page-title {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.3;
}
/* "QR" grün wie das Krokodil-Icon, Medium. "okodil" in Light. */
.logo-qr   { font-weight: 500; color: #45a247; }
/* Nur der Abstand ZWISCHEN Q und R wird minimal verkleinert – das
   letter-spacing wirkt hinter dem Q, also genau zwischen Q und R. */
.logo-q    { letter-spacing: -0.05em; }
.logo-rest { font-weight: 300; }

/* Krokodil-Icon: hinter dem Text, etwas kleiner und leicht tiefer
   versetzt – Unterkante bündig mit dem "okodil"-Text. Grün wie das "QR".
   Das Auge entsteht durch den zweiten Pfad als Aussparung (even-odd). */
.logo-croc {
    width: 1.9em;
    height: auto;
    flex-shrink: 0;
    fill: #45a247;
    fill-rule: evenodd;
    position: relative;
    top: 0.19em;                 /* leicht tiefer, Unterkante bündig */
}

/* --- Hauptbereich: QR-Vorschau | Download-Buttons ----------------- */
/* QR links, Buttons rechts daneben – gemeinsame Unterkante (align:end).
   QR bekommt eine feste, kompakte Größe; die Button-Spalte füllt den
   Rest und legt die Buttons an die Unterkante des QR. */
.main {
    display: flex;
    gap: var(--grid);
    align-items: flex-end;          /* gemeinsame Unterkante QR + Buttons */
    margin-bottom: var(--grid);
}
.scanner { flex: 0 0 auto; }        /* QR behält seine feste Größe */
.downloads { flex: 1 1 auto; }      /* Buttons füllen den Rest */

@media (max-width: 520px) {
    /* Auf schmalen Screens untereinander. */
    .main { flex-direction: column; align-items: stretch; }
}

/* --- Formularfelder ----------------------------------------------- */
/* Feldabstand = eine Rasterzelle (24px) → Ausrichtung am Muster. */
.field { margin-bottom: var(--grid); }

label.lbl {
    display: block;
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--meta);
    margin-bottom: 0.4rem;
}

/* Einheitliche Höhe für alle Bedienelemente = 2 Rasterzellen (48px).
   So sitzen URL-Feld, Farbwähler und Selects exakt auf gleicher Höhe
   und rasten am Hintergrundmuster ein. */
:root { --control-h: calc(var(--grid) * 2); }

input[type="text"], select {
    width: 100%;
    height: var(--control-h);
    font-family: var(--mono);
    font-size: 0.9rem;
    color: var(--ink);
    background: var(--field);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0 0.75rem;
    transition: border-color 0.15s;
}

input[type="text"]:focus, select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* URL-Feld: festes "https://"-Präfix links am Eingabefeld. */
.url-field {
    display: flex;
    align-items: stretch;
    height: var(--control-h);
    border: 1px solid var(--border);
    background: var(--field);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.url-field:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.url-prefix {
    display: flex;
    align-items: center;
    padding: 0 0.15rem 0 0.75rem;
    font-family: var(--mono);
    font-size: 0.9rem;
    color: var(--meta);
    user-select: none;
    white-space: nowrap;
}
/* Das Eingabefeld im URL-Feld hat keinen eigenen Rahmen/keine eigene
   Höhe – beides gehört dem umschließenden .url-field. */
.url-field input[type="text"] {
    height: auto;
    border: 0;
    padding-left: 0;
    background: transparent;
}
.url-field input[type="text"]:focus {
    box-shadow: none;
}

/* Zwei-/Drei-spaltige Parameterreihen. Gap = Rasterzelle (24px). */
.row, .row-3 {
    display: grid;
    gap: var(--grid);
}
.row   { grid-template-columns: repeat(2, 1fr); }
.row-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 480px) {
    .row, .row-3 { grid-template-columns: 1fr; }
}

/* CMYK-Farbeingabe: vier Zahlenfelder (C/M/Y/K) nebeneinander. */
.cmyk-field {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    height: var(--control-h);
}
.cmyk-field .cmyk {
    width: 100%;
    height: 100%;
    font-family: var(--mono);
    font-size: 0.9rem;
    text-align: center;
    color: var(--ink);
    background: var(--field);
    border: 1px solid var(--border);
    border-right: 0;
    border-radius: var(--radius);
    padding: 0 0.2rem;
    transition: border-color 0.15s;
    /* Spinner-Pfeile ausblenden für ruhigeres Bild. */
    -moz-appearance: textfield;
}
.cmyk-field .cmyk::-webkit-outer-spin-button,
.cmyk-field .cmyk::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cmyk-field .cmyk:last-child { border-right: 1px solid var(--border); }
.cmyk-field .cmyk:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
    /* Fokussiertes Feld nach vorn, damit der Rahmen nicht abgeschnitten wird. */
    position: relative;
    z-index: 1;
}

/* Kleiner Farb-Vorschau-Swatch neben dem Label (per JS gefüllt). */
.swatch {
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-left: 0.4rem;
    vertical-align: middle;
    border: 1px solid var(--border);
    background: #000;
}

/* Info-Icon hinter Labels: kleiner Kreis mit "i" und CSS-Tooltip. */
.info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    margin-left: 0.4rem;
    padding: 0;
    vertical-align: middle;
    font-family: var(--sans);
    font-size: 0.62rem;
    font-weight: 700;
    font-style: italic;
    line-height: 1;
    color: var(--meta);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 50%;
    cursor: help;
    position: relative;
    transition: color 0.15s, border-color 0.15s;
}
.info:hover, .info:focus-visible {
    color: var(--accent);
    border-color: var(--accent);
    outline: none;
}
/* Tooltip-Bubble aus data-tip. Erscheint über dem Icon. */
.info::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 220px;
    padding: 0.5rem 0.65rem;
    font-family: var(--sans);
    font-style: normal;
    font-weight: 400;
    font-size: 0.72rem;
    line-height: 1.4;
    text-transform: none;
    letter-spacing: 0;
    color: var(--paper);
    background: var(--ink);
    border-radius: 4px;
    white-space: normal;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s;
    z-index: 5;
    pointer-events: none;
}
/* kleiner Pfeil unter der Bubble */
.info::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--ink);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s;
    z-index: 5;
    pointer-events: none;
}
.info:hover::after, .info:focus-visible::after,
.info:hover::before, .info:focus-visible::before {
    opacity: 1;
    visibility: visible;
}

/* Toggle für transparenten Hintergrund. */
.check {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--mono);
    font-size: 0.82rem;
    color: var(--meta);
    cursor: pointer;
    user-select: none;
}
.check input { width: 1.05rem; height: 1.05rem; accent-color: var(--accent); }

/* --- Vorschau: schlichter QR-Container ---------------------------- */
/* Ganz leichter Verlauf statt einfarbig – so hebt sich ein weißer
   QR-Rand sichtbar von der Container-Fläche ab. */
.scanner {
    position: relative;
    width: 260px;
    max-width: 100%;
    aspect-ratio: 1;
    background: linear-gradient(135deg, #ffffff 0%, #eef0f2 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: grid;
    place-items: center;
    /* Wenig Innenabstand → QR füllt den Container gut aus. Der
       QR-eigene Rand (Quiet Zone) sorgt weiterhin für Luft. */
    padding: 6%;
}
:root[data-theme="dark"] .scanner {
    background: linear-gradient(135deg, #1f2020 0%, #141514 100%);
}

.scanner svg { width: 100%; height: 100%; display: block; }

.scanner .placeholder {
    font-family: var(--mono);
    font-size: 0.8rem;
    color: var(--meta);
    text-align: center;
}

/* Zustandshinweis unter der Vorschau (Fehler/Status). */
.status {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--meta);
    margin-top: 0.9rem;
    min-height: 1.1rem;
    text-align: center;
}
.status.error { color: #D93025; }

/* --- Download-Buttons --------------------------------------------- */
/* Vertikal gestapelt, rechts neben dem QR. Sie füllen die Höhe des
   QR-Containers, sodass der unterste Button mit dem QR bündig endet. */
.downloads {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    /* gleiche Höhe wie der QR-Container (260px) → gemeinsame Unterkante. */
    height: 260px;
}
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex: 1;                            /* Buttons teilen sich die Höhe */
    padding: 0 0.9rem;
    font-family: var(--mono);
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    /* Icon + Text immer weiß, unabhängig vom Theme. */
    color: #fff;
    border: 0;
    border-radius: var(--radius);
    cursor: pointer;
    transition: filter 0.15s, transform 0.05s;
}
@media (max-width: 520px) {
    /* Untereinander-Layout: Buttons nicht mehr an QR-Höhe koppeln. */
    .downloads { height: auto; }
    .btn { flex: none; height: calc(var(--grid) * 2.25); }
}
/* Format-Farben zur Wiedererkennung. */
.btn-svg { background: var(--c-svg); }
.btn-png { background: var(--c-png); }
.btn-eps { background: var(--c-eps); }
.btn-pdf { background: var(--c-pdf); }
.btn:hover  { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }
.btn-icon { width: 17px; height: 17px; flex-shrink: 0; }

/* Hinweis unter den Download-Buttons. */
.hint {
    font-family: var(--mono);
    font-size: 0.7rem;
    line-height: 1.5;
    color: var(--meta);
    margin: 0.75rem 0 0;
    text-align: center;
}

/* --- Barcode-Vorschau (GS1-128) ----------------------------------- */
/* Der Barcode-Container ist nicht quadratisch – er passt sich dem
   breiten, flachen Barcode an. Überschreibt die quadratische
   .scanner-Regel des QR-Codes. */
.scanner-barcode {
    width: 100%;
    aspect-ratio: auto;
    min-height: 120px;
    padding: 1.25rem;
}
.scanner-barcode svg {
    width: 100%;
    height: auto;
    max-height: 180px;
}

/* Auf den Barcode-Seiten steht die Vorschau links und die Download-
   Buttons rechts daneben (wie beim QR-Code). Die Vorschau darf sich
   dehnen (flex: 1), die Buttons behalten ihre feste Breite – so bleiben
   sie in der Karte statt rechts herauszuragen. */
.main:has(.scanner-barcode) .scanner-barcode {
    flex: 1 1 auto;
    min-width: 0;                      /* darf schrumpfen, statt Buttons rauszudrängen */
}
.main:has(.scanner-barcode) .downloads {
    flex: 0 0 auto;                    /* feste Breite, wird nicht gedrängt */
    width: 120px;
    height: auto;                      /* nicht an QR-Höhe (260px) koppeln */
    align-self: stretch;               /* Buttons füllen die Barcode-Höhe */
}

/* Zwei Checkbox-Optionen nebeneinander (transparent / Klarschrift). */
.field-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
}

/* Einleitungstext über dem Formular. Bewusst zurückhaltend – er
   erklärt die Seite, ohne dem Generator die Aufmerksamkeit zu nehmen. */
.intro {
    margin: 0 0 var(--grid);
    max-width: 62ch;
    color: var(--meta);
    font-size: 0.88rem;
    line-height: 1.6;
}

/* --- Spenden-Leiste ("Buy me a coffee") ---------------------------
   Schmaler Balken über die volle Breite, direkt unter Code und
   Download-Buttons. Der Verlauf ist bewusst kräftig gesetzt. */
.coffee {
    margin-top: var(--grid);
    padding: 0.6rem 0.9rem;
    border-radius: var(--radius);
    background: #EB0000;  /* Fallback für alte Browser */
    background: -webkit-linear-gradient(to right, #3300FC, #95008A, #EB0000);
    background: linear-gradient(to right, #3300FC, #95008A, #EB0000);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.coffee-text {
    margin: 0;
    min-width: 0;
    font-size: 0.86rem;
    font-weight: 400;
    line-height: 1.4;
    /* Emoji-Fallback, damit das Herz im Text farbig erscheint. */
    font-family: var(--sans), "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
}
/* Zwei Zeilen: Claim oben, Bitte darunter. */
.coffee-claim,
.coffee-sub { display: block; }
/* Erste Zeile normal, die Bitte darunter hervorgehoben. */
.coffee-claim { font-weight: 400; }
/* Weißes Herz zwischen "Made with" und dem Claim. */
.coffee-heart {
    width: 0.95em;
    height: 0.95em;
    vertical-align: -0.13em;
    margin: 0 0.1em;
    color: #fff;
}
.coffee-sub   { font-weight: 500; }
.coffee-actions {
    flex-shrink: 0;            /* Aktionen behalten ihre Breite */
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Betrags-Dropdown – gleiche Bauform wie die Sprachwahl, aber auf
   dem farbigen Grund als halbtransparente Fläche. */
.coffee-picker { position: relative; }
.coffee-picker summary {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    height: 34px;
    padding: 0 0.6rem;
    border-radius: var(--radius);
    border: 1px solid #000;
    background: #000;
    color: #fff;
    cursor: pointer;
    list-style: none;
    user-select: none;
    font-size: 0.88rem;
    transition: background 0.15s, border-color 0.15s;
}
.coffee-picker summary::-webkit-details-marker { display: none; }
.coffee-picker summary:hover {
    background: #1a1a1a;
    border-color: #1a1a1a;
}
.coffee-picker summary:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}
.coffee-amount { font-variant-numeric: tabular-nums; font-weight: 500; }
.coffee-caret {
    width: 13px;
    height: 13px;
    opacity: 0.85;
    transition: transform 0.15s;
}
.coffee-picker[open] .coffee-caret { transform: rotate(180deg); }

/* Das Menü liegt auf dem hellen Karton, nicht auf dem Verlauf –
   dadurch bleibt es gut lesbar. */
.coffee-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 0.35rem);      /* nach oben öffnen: die Leiste
                                          sitzt am unteren Seitenrand */
    z-index: 20;
    min-width: 9.5rem;
    margin: 0;
    padding: 0.25rem;
    list-style: none;
    background: #000;
    border: 1px solid #2a2a2a;
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.coffee-menu a {
    display: block;
    padding: 0.4rem 0.6rem;
    border-radius: calc(var(--radius) - 2px);
    color: #fff;
    text-decoration: none;
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}
.coffee-menu a:hover { background: #1f1f1f; }
.coffee-menu a[aria-current] { font-weight: 600; }

.coffee-custom {
    margin-top: 0.25rem;
    padding-top: 0.4rem;
    border-top: 1px solid #2a2a2a;
}
.coffee-custom-label {
    display: block;
    padding: 0 0.6rem 0.25rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.6);
}
.coffee-custom-row {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0 0.6rem 0.3rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
}
.coffee-custom-row input {
    width: 4rem;
    padding: 0.25rem 0.4rem;
    font-family: var(--sans);
    font-size: 0.88rem;
    color: #fff;
    background: #1a1a1a;
    border: 1px solid #3a3a3a;
    border-radius: calc(var(--radius) - 2px);
}
.coffee-custom-row input:focus {
    outline: none;
    border-color: #fff;
}
/* Spinner ausblenden – die Pfeile stören in dem schmalen Feld. */
.coffee-custom-row input::-webkit-outer-spin-button,
.coffee-custom-row input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.coffee-custom-row input { -moz-appearance: textfield; }
.coffee-go {
    padding: 0.25rem 0.5rem;
    border: 1px solid #3a3a3a;
    border-radius: calc(var(--radius) - 2px);
    background: #1a1a1a;
    color: #fff;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1.2;
}
.coffee-go:hover { border-color: #fff; }

/* Hauptaktion: weiße Fläche als klarer Kontrast zum Verlauf. */
.coffee-button {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 0.9rem;
    border-radius: var(--radius);
    background: #000;
    color: #fff;
    font-size: 0.88rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.12s, box-shadow 0.15s;
}
.coffee-button:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
    transform: translateY(-1px);
}
.coffee-button:active { transform: translateY(0); }

@media (max-width: 560px) {
    .coffee {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }
}

/* --- Footer -------------------------------------------------------- */
.site-footer {
    margin-top: var(--grid);
    padding-top: 0.8rem;
    border-top: 1px solid var(--border);
    text-align: center;
}
.site-footer a {
    color: var(--meta);
    font-size: 0.78rem;
    text-decoration: none;
}
.site-footer a:hover { color: var(--accent); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}