/* droppy24.ch — Gestaltung im Wannja-Stil (Tinte + Grün, Inter + Manrope, Kacheln). Mobile zuerst.
   Bei jeder Änderung View::ASSET_VERSION hochzählen (Cache-Buster ?v=). Kontraste gerechnet (WCAG AA):
   Text-Grün #15803F auf Weiss 5.0:1 (Markengrün #1A9A50 nur 3.6:1 → nur für Flächen ohne Text),
   Weiss auf #15803F 5.0:1, Weiss auf Tinte 15.9:1, Grau-600 auf Grau-100 6.9:1.
   Abstände der Seitenteile in rem (wachsen mit der Schriftgrösse des Browsers); Formular-Innereien der Tools noch in px.
   Typografie: grosse Titel enger gesperrt (-0.02em) und mit knapper Zeilenhöhe, Fliesstext ohne Sperrung, 1.6. */

@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/manrope-700.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/manrope-800.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/inter-700.woff2') format('woff2'); }

:root {
    --tinte: #14213D;
    --tinte-dunkel: #0D1830;
    --tinte-hell: #E8ECF3;
    --gruen: #1A9A50;
    --gruen-text: #15803F;
    --gruen-dunkel: #116932;
    --gruen-hell: #E7F5EC;
    --fehler: #B42318;

    --weiss: #FFFFFF;
    --grau-50: #F9FAFB;
    --grau-100: #F3F4F6;
    --grau-200: #E5E7EB;
    --grau-300: #D1D5DB;
    --grau-600: #4B5563;
    --grau-700: #374151;
    --grau-800: #1F2937;

    --schrift: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --schrift-titel: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --rand: 1rem;
    --breite: 1100px;
    --radius: 1.25rem;
    --radius-klein: 0.75rem;
    --ziel: 2.75rem;                       /* Mindestgrösse für Tipp-Ziele (44px) */
    --kopf-hoehe: 4rem;
    --druck: scale(0.97);                  /* Rückmeldung beim Drücken */
    --druck-zeit: 100ms;
}

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

/* scrollbar-gutter: Platz der Bildlaufleiste bleibt reserviert, die Seite springt nicht, wenn der Scanner sie sperrt.
   scroll-padding-top: Sprungziele (#alle, #suche, Fokus, scrollIntoView) landen unter dem klebenden Kopf, nicht dahinter. */
html {
    -webkit-text-size-adjust: 100%;
    scrollbar-gutter: stable;
    scroll-padding-top: calc(var(--kopf-hoehe) + env(safe-area-inset-top) + 0.5rem);
}

body {
    margin: 0;
    font-family: var(--schrift);
    font-size: 1rem;
    line-height: 1.6;
    letter-spacing: 0;
    color: var(--grau-800);
    background: var(--grau-50);
    overflow-wrap: break-word;
    -webkit-tap-highlight-color: transparent;   /* eigene Rückmeldung (:active) statt grauem Kasten auf iOS */
}

h1, h2, h3 {
    font-family: var(--schrift-titel);
    font-weight: 800;
    color: var(--tinte);
    margin: 0 0 0.5em;
}
h1 { font-size: clamp(1.9rem, 6vw, 3rem); line-height: 1.1; letter-spacing: -0.02em; }
h2 { font-size: 1.35rem; line-height: 1.25; letter-spacing: -0.015em; margin-top: 1.6em; }
h3 { line-height: 1.3; letter-spacing: -0.01em; }

p { margin: 0 0 1em; }

a { color: var(--tinte); text-underline-offset: 0.15em; }
a:hover { color: var(--gruen-text); }

/* Sichtbarer Fokus überall (Tastatur) */
:focus-visible {
    outline: 3px solid var(--gruen);
    outline-offset: 2px;
}

img { max-width: 100%; height: auto; }
.icon { display: block; width: 1.5rem; height: 1.5rem; flex: none; }

/* hidden-Attribut gewinnt immer, auch gegen display:flex/grid weiter unten */
[hidden] { display: none !important; }

/* Nur für Screenreader */
.vh {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip {
    position: absolute;
    left: var(--rand);
    top: -100px;
    z-index: 30;
    padding: 0.6em 1em;
    background: var(--tinte);
    color: var(--weiss);
    border-radius: 8px;
    font-weight: 600;
}
.skip:focus { top: max(var(--rand), env(safe-area-inset-top)); color: var(--weiss); }

/* viewport-fit=cover (layout.php): die Seite reicht bis unter Notch und Home-Leiste, die Abstände gleichen das aus */
.innen {
    width: 100%;
    max-width: var(--breite);
    margin: 0 auto;
    padding: 0 max(var(--rand), env(safe-area-inset-right)) 0 max(var(--rand), env(safe-area-inset-left));
}

/* ---------- Kopf ---------- */
/* Klebt oben, durchscheinend (Inhalt läuft darunter durch). Statt einer harten Linie ein weicher Schatten-Verlauf am
   unteren Rand, der erst beim Scrollen erscheint (scroll-getriebene Animation, wo unterstützt; sonst immer leicht sichtbar).
   Ohne backdrop-filter, bei «weniger Transparenz» und «mehr Kontrast»: deckend. */
.kopf {
    position: sticky;
    top: 0;
    z-index: 20;
    padding-top: env(safe-area-inset-top);
    background: rgba(255, 255, 255, 0.78);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
}
.kopf::after {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 100%;
    height: 0.75rem;
    background: linear-gradient(rgba(20, 33, 61, 0.08), rgba(20, 33, 61, 0));
    pointer-events: none;
    opacity: 0.6;
}
@supports (animation-timeline: scroll()) {
    @keyframes kopf-kante { from { opacity: 0; } to { opacity: 1; } }
    .kopf::after { opacity: 0; animation: kopf-kante linear both; animation-timeline: scroll(root); animation-range: 0 3rem; }
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .kopf { background: var(--weiss); }
}
.kopf .innen { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: var(--kopf-hoehe); }

.marke {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    min-height: var(--ziel);
    text-decoration: none;
    color: var(--tinte);
}
.marke img { display: block; width: 36px; height: 36px; }
.marke-text {
    font-family: var(--schrift-titel);
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    line-height: 1;
    white-space: nowrap;
}
.marke-24 { color: var(--gruen-text); }
/* Endung «.ch»: gleiche Schrift, zurückgenommen (Grau-600, etwas kleiner und leichter) — Grau-600 auf Weiss 7.6:1 */
.marke-ch { color: var(--grau-600); font-size: 0.8em; font-weight: 700; letter-spacing: -0.01em; }
.marke:hover { color: var(--tinte); }

.kopf-nav { display: flex; align-items: center; gap: 0.25rem; }
.kopf-link, .kopf-suche {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--ziel);
    min-width: var(--ziel);
    border-radius: 999px;
    color: var(--tinte);
    font-weight: 600;
    text-decoration: none;
    transition: transform var(--druck-zeit) ease-out, background-color var(--druck-zeit) ease-out;
}
.kopf-link { padding: 0 0.875rem; white-space: nowrap; }
/* Schmale Handys (bis 400 px): Logo «droppy24.ch» + «Alle Tools» + Lupe müssen in eine Zeile passen */
@media (max-width: 25rem) {
    .kopf .innen { gap: 0.5rem; }
    .marke { gap: 0.5rem; }
    .marke-text { font-size: 1.3125rem; }
    .kopf-link { padding: 0 0.625rem; }
}
.kopf-link:hover, .kopf-suche:hover { background: var(--tinte-hell); color: var(--tinte); }
.kopf-link:active, .kopf-suche:active { transform: var(--druck); background: var(--tinte-hell); }

/* ---------- Brotkrumen ---------- */
.krumen { padding-top: 0.75rem; font-size: 0.9rem; }
.krumen ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; }
.krumen li { display: inline-flex; align-items: center; min-width: 0; }
.krumen li + li::before { content: '›'; content: '›' / ''; color: var(--grau-600); padding: 0 0.4rem; }
.krumen a, .krumen [aria-current] { display: inline-flex; align-items: center; min-height: var(--ziel); }
.krumen a { color: var(--grau-700); text-decoration: none; }
.krumen a:hover { color: var(--gruen-text); text-decoration: underline; }
.krumen [aria-current] { color: var(--tinte); font-weight: 600; }
.krumen + .hero.hero-klein { padding-top: 0.5rem; }

/* ---------- Startseite, Kategorien ---------- */
.hero {
    padding: 3rem 0 2rem;
}
.hero h1 { max-width: 16em; }
.lead {
    font-size: 1.15rem;
    line-height: 1.5;
    color: var(--grau-700);
    max-width: 36em;
}
.hero-start { padding-bottom: 1rem; }

/* Suchfeld: gross, rund, Lupe innen. Kein «×» des Browsers nötig — Escape leert (start-app.mjs). */
.suche { max-width: 36rem; margin-top: 1.5rem; }
.suche-feld { position: relative; }
.suche-feld .icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--grau-600); pointer-events: none; }
.suche input {
    width: 100%;
    min-height: 3.25rem;
    padding: 0.75rem 1rem 0.75rem 3rem;
    border: 2px solid var(--grau-300);
    border-radius: 999px;
    background: var(--weiss);
    color: var(--grau-800);
    font: inherit;
    font-size: 1.0625rem;      /* ≥ 16px: iOS zoomt beim Fokus nicht */
    box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.05);
    -webkit-appearance: none;
    appearance: none;
}
.suche input::placeholder { color: var(--grau-600); }
.suche input:focus-visible { border-color: var(--gruen); outline-offset: 2px; }
.suche-status { margin: 0.5rem 0 0 1rem; font-size: 0.9rem; color: var(--grau-600); min-height: 1.6em; }
.suche-leer { margin: 0.5rem 0 0; padding: 0.875rem 1.125rem; background: var(--tinte-hell); color: var(--tinte); border-radius: var(--radius-klein); font-weight: 600; }

.bereich { padding-bottom: 2rem; }
.bereich h2 { margin: 0; }
.bereich > h2 { margin-bottom: 1rem; }
.bereich-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1rem; margin-bottom: 1rem; }
.bereich-kopf h2 { display: flex; align-items: center; gap: 0.625rem; }
.bereich-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    flex: none;
    border-radius: 0.625rem;
    background: var(--gruen-hell);
    color: var(--gruen-text);
}
.bereich-icon .icon { width: 1.25rem; height: 1.25rem; }
.bereich-link { display: inline-flex; align-items: center; min-height: var(--ziel); color: var(--gruen-text); font-weight: 600; text-decoration: none; }
.bereich-link::after { content: '›'; content: '›' / ''; margin-left: 0.3em; font-size: 1.2em; line-height: 1; }
.bereich-link:hover { text-decoration: underline; color: var(--gruen-dunkel); }
.alle { padding-top: 0.5rem; }

.kacheln {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
    gap: 0.875rem;
}
.kacheln > li { display: flex; }

.kachel {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    width: 100%;
    min-height: var(--ziel);
    padding: 1.25rem 1.375rem;
    background: var(--weiss);
    border: 2px solid var(--grau-200);
    border-radius: var(--radius);
    box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.05);
    color: var(--grau-700);
    line-height: 1.45;
    text-decoration: none;
    transition: transform var(--druck-zeit) ease-out, border-color 150ms ease-out;
}
a.kachel:hover { border-color: var(--gruen); color: var(--grau-700); }
a.kachel:hover .kachel-titel { color: var(--gruen-text); }
a.kachel:active { transform: var(--druck); border-color: var(--gruen); }
a.kachel:focus-visible { outline-offset: 3px; border-radius: var(--radius); }

.kachel-titel {
    font-family: var(--schrift-titel);
    font-weight: 800;
    font-size: 1.15rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--tinte);
}
.kachel-text { font-size: 0.95rem; }

.kachel-bald {
    background: var(--grau-100);
    border-style: dashed;
    border-color: var(--grau-300);
    box-shadow: none;
    color: var(--grau-600);
}
.kachel-bald .kachel-titel { color: var(--grau-600); }
.marke-bald {
    display: inline-block;
    align-self: flex-start;
    margin-left: 0;
    white-space: nowrap;
    padding: 0.125rem 0.625rem;
    border-radius: 50px;
    background: var(--grau-200);
    color: var(--grau-700);
    font-family: var(--schrift);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.6;
    text-transform: uppercase;
    letter-spacing: 0.05em;   /* kleine Versalien: weiter sperren */
}

/* Kategorie-Seite: andere Kategorien als Liste mit Icon */
.kategorien { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 0.625rem; }
.kategorie-link {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-height: var(--ziel);
    padding: 0.875rem 1rem;
    background: var(--weiss);
    border: 2px solid var(--grau-200);
    border-radius: var(--radius-klein);
    text-decoration: none;
    color: var(--grau-700);
    line-height: 1.4;
    transition: transform var(--druck-zeit) ease-out, border-color 150ms ease-out;
}
.kategorie-link .kachel-titel { display: block; font-size: 1rem; }
.kategorie-link .kachel-text { display: block; font-size: 0.875rem; }
.kategorie-link:hover { border-color: var(--gruen); color: var(--grau-700); }
.kategorie-link:active { transform: var(--druck); }

/* Startseite: Kategorien als grosse Kacheln (Icon, Name, Anzahl) — Handy zwei Spalten, breit vier */
.kat-kacheln { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: 0.875rem; }
.kat-kacheln > li { display: flex; }
.kat-kachel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    width: 100%;
    padding: 1.25rem;
    background: var(--weiss);
    border: 2px solid var(--grau-200);
    border-radius: var(--radius);
    box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.05);
    color: var(--grau-600);
    text-decoration: none;
    transition: transform var(--druck-zeit) ease-out, border-color 150ms ease-out;
}
.kat-kachel:hover { border-color: var(--gruen); color: var(--grau-600); }
.kat-kachel:hover .kachel-titel { color: var(--gruen-text); }
.kat-kachel:active { transform: var(--druck); border-color: var(--gruen); }
.kat-kachel:focus-visible { outline-offset: 3px; }
.kat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 0.5rem;
    border-radius: 0.875rem;
    background: var(--gruen-hell);
    color: var(--gruen-text);
}
.kat-icon .icon { width: 1.625rem; height: 1.625rem; }
.kat-kachel .kachel-titel { font-size: 1.1rem; }
.kat-anzahl { font-size: 0.9rem; font-weight: 600; }
@media (max-width: 599px) {
    .kat-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; }
    .kat-kachel { padding: 1rem; }
    .kat-kachel .kachel-titel { font-size: 1rem; hyphens: auto; }
    /* «Beliebt» auf dem Handy nur als Titelzeilen, sonst wird die Startseite wieder lang */
    #beliebt .kacheln { gap: 0.5rem; }
    #beliebt .kachel { padding: 0.875rem 1.125rem; }
    #beliebt .kachel-text { display: none; }
}

/* Tool-Seiten unten: Häufige Fragen, weitere Tools */
.faq { padding-bottom: 2rem; }
.faq > * { max-width: 46rem; }
.faq h2 { margin: 0 0 0.75rem; }
.faq details { border-top: 1px solid var(--grau-200); }
.faq details:last-of-type { border-bottom: 1px solid var(--grau-200); }
.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: var(--ziel);
    padding: 0.75rem 0;
    font-weight: 600;
    color: var(--tinte);
    cursor: pointer;
    list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; content: '+' / ''; font-size: 1.4rem; font-weight: 400; line-height: 1; color: var(--gruen-text); flex: none; }
.faq details[open] summary::after { content: '−'; content: '−' / ''; }
.faq details p { margin: 0 0 1rem; color: var(--grau-700); max-width: 40em; }
.weitere { padding-bottom: 3rem; }
.weitere h2 { margin: 0 0 1rem; }
.weitere-link { margin: 1rem 0 0; }
.weitere-link a { display: inline-flex; align-items: center; min-height: var(--ziel); color: var(--gruen-text); font-weight: 600; }


/* ---------- Textseiten (Impressum, Datenschutz, 404) ---------- */
.text-seite {
    max-width: 760px;
    padding-top: 40px;
    padding-bottom: 48px;
}
.text-seite address { font-style: normal; margin-bottom: 1em; }
.stand { color: var(--grau-600); font-size: 0.9rem; margin-top: 2em; }

/* ---------- Knopf ---------- */
.knopf {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 50px;
    background: var(--gruen-text);
    color: var(--weiss);
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(21, 128, 63, 0.35);
}
.knopf:hover { background: var(--gruen-dunkel); color: var(--weiss); }
/* Rückmeldung beim Drücken (pointer-down), für alle Knöpfe, Reiter und Kacheln gleich */
.knopf, .knopf-klein, .qr-reiter a, .scanner-knopf { transition: transform var(--druck-zeit) ease-out, background-color var(--druck-zeit) ease-out, border-color var(--druck-zeit) ease-out; touch-action: manipulation; }
.knopf:active, .knopf-klein:active, .qr-reiter a:active { transform: var(--druck); }
button:disabled:active { transform: none; }

/* ---------- Wannja-Kasten ---------- */
.wannja-kasten {
    padding: 0 0 48px;
}
.wannja-kasten .innen > * { max-width: 40em; }
.wannja-kasten .innen {
    max-width: calc(var(--breite) - 2 * var(--rand));
    padding: 32px 24px;
    background: var(--tinte);
    color: var(--weiss);
    border-radius: var(--radius);
    width: calc(100% - 2 * max(var(--rand), env(safe-area-inset-left), env(safe-area-inset-right)));
}
.wannja-kasten h2 { color: var(--weiss); margin-top: 0; }
.wannja-kasten p:last-child { margin-bottom: 0; }
.wannja-kasten :focus-visible { outline-color: var(--weiss); }

/* ---------- Fuss ---------- */
.fuss {
    background: var(--weiss);
    border-top: 1px solid var(--grau-200);
    padding: 24px 0 calc(24px + env(safe-area-inset-bottom));
    font-size: 0.95rem;
    color: var(--grau-700);
}
.fuss p { margin: 0 0 8px; }
.fuss a { color: var(--grau-700); }
.fuss a:hover { color: var(--gruen-text); }
.fuss-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
}
.fuss a[aria-current="page"] { font-weight: 600; color: var(--tinte); }

/* ---------- QR-Generator ---------- */
.hero.hero-klein { padding: 2rem 0 1rem; }

.qr { padding-bottom: 48px; }

.qr-reiter ul {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.qr-reiter a {
    display: inline-block;
    min-height: var(--ziel);
    padding: 8px 14px;
    border: 2px solid var(--grau-200);
    border-radius: 50px;
    background: var(--weiss);
    color: var(--grau-700);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
}
.qr-reiter a:hover { border-color: var(--gruen); color: var(--tinte); }
.qr-reiter a[aria-current="page"] { background: var(--tinte); border-color: var(--tinte); color: var(--weiss); }

/* Das Formular ist das Raster: mobil Inhalt → Vorschau → Gestaltung, ab 900px Vorschau rechts über beide Zeilen */
.qr-formular {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}
.qr-inhalt, .qr-ausgabe, .qr-gestaltung {
    background: var(--weiss);
    border: 2px solid var(--grau-200);
    border-radius: var(--radius);
    padding: 20px;
}
.qr-formular h2 { font-size: 1.15rem; margin: 0 0 12px; }
.qr-typ { border: 0; margin: 0; padding: 0; min-width: 0; }

.feld { margin-bottom: 14px; }
.feld label, .feld-titel { display: block; font-weight: 600; color: var(--grau-800); margin: 0 0 4px; }
.feld input:not([type="checkbox"]):not([type="color"]):not([type="range"]):not([type="file"]),
.feld select,
.feld textarea {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid var(--grau-300);
    border-radius: 10px;
    background: var(--weiss);
    color: var(--grau-800);
    font: inherit;
}
.feld textarea { resize: vertical; }
/* iOS Safari: Datums-/Zeitfelder haben eine eigene Mindestbreite und ragen sonst aus der Karte */
.feld input[type="date"], .feld input[type="time"], .feld input[type="datetime-local"] { min-width: 0; max-width: 100%; -webkit-appearance: none; appearance: none; min-height: 2.75rem; }
.feld input::-webkit-date-and-time-value { text-align: left; }
.feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible { border-color: var(--gruen); }
.feld [aria-invalid="true"] { border-color: var(--fehler) !important; }
.feld input[type="color"] { width: 64px; height: 40px; padding: 2px; border: 2px solid var(--grau-300); border-radius: 10px; background: var(--weiss); }
.feld input[type="range"] { width: calc(100% - 3em); vertical-align: middle; accent-color: var(--gruen-text); }
.feld output { display: inline-block; width: 2.5em; text-align: right; font-variant-numeric: tabular-nums; }
.feld input[type="file"] { max-width: 100%; }
.feld-check { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.feld-check label { display: inline; margin: 0; font-weight: 500; }
.feld-check input { width: 20px; height: 20px; accent-color: var(--gruen-text); }
.feld-check .feld-hilfe, .feld-check .feld-fehler { flex-basis: 100%; }
.feld-hilfe { color: var(--grau-600); font-size: 0.9rem; margin: 4px 0 0; }
.feld-fehler { color: var(--fehler); font-size: 0.9rem; font-weight: 600; margin: 4px 0 0; }
.feld-fehler:empty { display: none; }

.qr-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 0 16px; }

.qr-vorlagen { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.qr-vorlagen .feld-titel { flex-basis: 100%; margin: 0; }

.knopf-klein {
    min-height: var(--ziel);
    padding: 6px 14px;
    border: 2px solid var(--grau-300);
    border-radius: 50px;
    background: var(--weiss);
    color: var(--tinte);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}
.knopf-klein:hover { border-color: var(--gruen); }
.feld .knopf-klein { margin-top: 8px; }

button.knopf { border: 0; font: inherit; font-weight: 600; cursor: pointer; }
button.knopf:disabled { background: var(--grau-300); color: var(--grau-700); box-shadow: none; cursor: not-allowed; }
.knopf-zwei { background: var(--weiss); color: var(--tinte); border: 2px solid var(--tinte) !important; box-shadow: none; padding: 10px 22px; }
.knopf-zwei:hover { background: var(--tinte-hell); color: var(--tinte); }
button.knopf-zwei:disabled { background: var(--weiss); color: var(--grau-600); border-color: var(--grau-300) !important; }

.qr-vorschau {
    display: flex;
    justify-content: center;
    background: var(--grau-100);
    border-radius: 12px;
    padding: 16px;
}
.qr-vorschau canvas, .qr-vorschau svg { display: block; width: 100%; max-width: 320px; height: auto; }
.qr-leer { color: var(--grau-600); background: var(--grau-100); border-radius: 12px; padding: 48px 16px; text-align: center; }
.qr-meldung { margin: 12px 0 0; font-weight: 600; color: var(--tinte); }
.qr-meldung:empty { display: none; }
.qr-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.hinweis { color: var(--grau-600); font-size: 0.9rem; margin: 0; }
.warnung {
    background: #FEF3F2;
    border-left: 4px solid var(--fehler);
    color: var(--grau-800);
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.95rem;
}
/* Live-Region bleibt im DOM und sichtbar; leer nimmt sie keinen Platz ein */
.warnung:empty { padding: 0; border: 0; margin: 0; }
/* ---------- Barcode-Generator (nutzt das Raster und die Knöpfe des QR-Generators) ---------- */
.reiter-wofuer { display: block; font-weight: 400; font-size: 0.8rem; }
.bc-reiter a { border-radius: 14px; }
.qr-inhalt .hinweis { margin-top: 4px; }
/* Strichcodes in natürlicher Grösse, nur verkleinert wenn zu breit — ohne pixelated, sonst werden die Striche verkleinert
   ungleich breit. 2D-Codes werden vergrössert, dort hält pixelated die Quadrate scharf. */
.bc-vorschau canvas { width: auto; max-width: 100%; height: auto; }
.bc-vorschau.bc-2d canvas { width: 100%; max-width: 240px; image-rendering: pixelated; }
.marke-extern { background: var(--tinte-hell); color: var(--tinte); }
.hinweis-box { background: var(--tinte-hell); color: var(--tinte); padding: 14px 18px; border-radius: 12px; font-weight: 600; }

/* ---------- Leser (Karten wie der QR-Generator) ---------- */
.leser { display: grid; gap: 24px; }
.leser-hilfe p + p { margin-top: 8px; }
.leser-box { background: var(--weiss); border: 2px solid var(--grau-200); border-radius: var(--radius); padding: 20px; min-width: 0; }
.leser-box h2 { font-size: 1.15rem; margin: 0 0 12px; }
.leser-box .qr-knoepfe { margin: 12px 0; }
.leser-hero .qr-knoepfe { margin: 4px 0 12px; }
.leser-hero .lead { margin-bottom: 0; }
.leser-kamera-meldung { margin: 0 0 16px; font-weight: 600; color: var(--tinte); max-width: 36em; }
.leser-kamera-meldung:empty { margin: 0; }
.leser-ergebnis { scroll-margin-top: 0.5rem; }   /* plus scroll-padding-top von html (Kopf + Safe Area) */
.leser-ergebnis h2:focus { outline: none; }
.leser-ergebnis h2:focus-visible { outline: 3px solid var(--gruen); outline-offset: 4px; border-radius: 4px; }
.leser-ergebnis .qr-meldung { margin: 0 0 12px; }
.leser-ablage { border-style: dashed; border-color: var(--grau-300); }
.leser-ablage-aktiv { border-color: var(--gruen); background: var(--gruen-hell); }
.leser-datei-knopf { cursor: pointer; }
/* Das Dateifeld ist nur für Screenreader sichtbar; sein Fokus zeigt sich am Knopf */
#leser-datei:focus-visible + .leser-datei-knopf { outline: 3px solid var(--gruen); outline-offset: 2px; }
.leser-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.leser-treffer { border: 2px solid var(--grau-200); border-radius: 14px; padding: 16px; }
.leser-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; }
.leser-kopf h3 { margin: 0; font-size: 1.1rem; }
.leser-art { text-transform: none; letter-spacing: 0; font-size: 0.8rem; }
.leser-domain { margin: 8px 0; }
.leser-domain strong { overflow-wrap: anywhere; }
.leser-warnung { margin: 0 0 8px; }
.leser-text { unicode-bidi: plaintext; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--grau-100); border-radius: 10px; padding: 10px 12px; margin: 8px 0 0; }
.leser-felder { margin: 0; display: grid; gap: 6px; }
.leser-felder > div { display: grid; grid-template-columns: minmax(0, 1fr); }
.leser-felder dt { font-weight: 600; color: var(--grau-700); font-size: 0.9rem; }
.leser-felder dd { unicode-bidi: plaintext; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.leser-treffer .qr-knoepfe { margin: 12px 0 0; }
/* EAN/UPC: eine Zeile «Nummer: 4061461878832» statt Beschriftung über dem Wert */
.leser-treffer[data-art="produkt"] .leser-felder > div { display: flex; flex-wrap: wrap; gap: 0 0.4em; align-items: baseline; }
.leser-treffer[data-art="produkt"] .leser-felder dt { font-size: 1rem; font-weight: 400; color: var(--grau-700); }
.leser-treffer[data-art="produkt"] .leser-felder dt::after { content: ':'; }
.leser-treffer[data-art="produkt"] .leser-felder dd { font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.leser-treffer[data-art="produkt"] .leser-produkt { border-top: 0; margin-top: 6px; padding-top: 0; }
a.knopf-zwei { display: inline-block; }
/* Produktinfos (Open Food Facts) unter EAN/UPC-Treffern */
.leser-produkt { border-top: 1px solid var(--grau-200); margin-top: 14px; padding-top: 14px; }
.produkt-gs1 { margin: 0 0 4px; }
.produkt-gs1 strong { font-weight: 600; }
.leser-produkt .qr-knoepfe { margin: 10px 0 6px; }
.produkt-status { margin: 8px 0 0; font-weight: 600; color: var(--tinte); }
.produkt-status:empty { margin: 0; }
.produkt-karte { background: var(--grau-50); border: 1px solid var(--grau-200); border-radius: 12px; padding: 14px; margin-top: 12px; }
.produkt-kopf { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 10px; }
.produkt-bild { width: 80px; height: 80px; object-fit: contain; background: var(--weiss); border-radius: 8px; border: 1px solid var(--grau-200); flex: none; }
.produkt-titel { min-width: 0; flex: 1 1 auto; }
.produkt-titel h4 { margin: 0 0 6px; font-size: 1.05rem; overflow-wrap: break-word; hyphens: auto; }
.nutriscore { display: inline-block; margin: 0; padding: 3px 10px; border-radius: 999px; font-weight: 700; font-size: 0.9rem; }
/* Nutri-Score-Farben; A und E dunkel genug für weisse Schrift, B–D mit dunkler Schrift */
.nutri-a { background: #038141; color: var(--weiss); }
.nutri-b { background: #85BB2F; color: var(--tinte); }
.nutri-c { background: #FECB02; color: var(--tinte); }
.nutri-d { background: #EE8100; color: var(--tinte); }
.nutri-e { background: #B8320E; color: var(--weiss); }
.produkt-zutaten { margin: 10px 0 0; }
.produkt-zutaten summary { cursor: pointer; font-weight: 600; color: var(--tinte); }
.produkt-zutaten p { margin: 6px 0 0; overflow-wrap: anywhere; }
.produkt-links { margin: 10px 0 0; }
.produkt-leer { margin: 0; font-weight: 600; }
.produkt-quelle { margin: 8px 0 0; }

/* ---------- Vollbild-Scanner (Leser) ---------- */
/* Modales <dialog> im Top Layer, füllt den Schirm (dvh: ohne die Leisten des Browsers). Kamerabild als Fläche, darüber
   eine dunkle Abdeckung mit Aussparung (box-shadow des Suchers), Ecken als Klammern (Verläufe). Bewegung: leser-app.mjs. */
html.scanner-offen { overflow: hidden; }
.scanner {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: #000;
    color: var(--weiss);
    overflow: hidden;
    overscroll-behavior: contain;   /* Wischen auf dem Scanner bewegt die Seite dahinter nicht (iOS) */
    touch-action: none;             /* keine Pan-/Zoomgesten; Tippen auf die Knöpfe geht weiter */
}
.scanner::backdrop { background: transparent; }
.scanner[open] { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.scanner > * { grid-area: 1 / 1; }
.scanner video { display: block; width: 100%; height: 100%; object-fit: cover; }
.scanner-oben {
    align-self: start;
    display: flex;
    justify-content: flex-end;
    padding: calc(12px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
    z-index: 1;
}
.scanner-mitte {
    place-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 0 16px;
    pointer-events: none;   /* nur Führung; der Lichtknopf schaltet es wieder ein */
}
.scanner-sucher {
    --ecke: var(--weiss);
    --lang: 30px;
    --dick: 4px;
    position: relative;
    width: min(80vw, 520px);
    aspect-ratio: 2 / 1;
    max-height: 45dvh;
    border-radius: 18px;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.55);
    transition: box-shadow 150ms ease-out;
}
.scanner-sucher::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        linear-gradient(var(--ecke), var(--ecke)) top left / var(--lang) var(--dick),
        linear-gradient(var(--ecke), var(--ecke)) top left / var(--dick) var(--lang),
        linear-gradient(var(--ecke), var(--ecke)) top right / var(--lang) var(--dick),
        linear-gradient(var(--ecke), var(--ecke)) top right / var(--dick) var(--lang),
        linear-gradient(var(--ecke), var(--ecke)) bottom left / var(--lang) var(--dick),
        linear-gradient(var(--ecke), var(--ecke)) bottom left / var(--dick) var(--lang),
        linear-gradient(var(--ecke), var(--ecke)) bottom right / var(--lang) var(--dick),
        linear-gradient(var(--ecke), var(--ecke)) bottom right / var(--dick) var(--lang);
    background-repeat: no-repeat;
}
.scanner-sucher.scanner-treffer { --ecke: #4ADE80; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.55), inset 0 0 0 3px #4ADE80; }
/* position: relative — der Sucher ist positioniert, sein Schatten (die Abdeckung) läge sonst über Hinweis und Lichtknopf */
.scanner-hinweis, .scanner-mitte .scanner-knopf { position: relative; }
.scanner-hinweis {
    margin: 0;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.45);
    font-weight: 600;
    letter-spacing: 0.01em;
    text-align: center;
}
.scanner-knopf {
    min-width: 44px;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    background: rgba(20, 20, 20, 0.5);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    color: var(--weiss);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    pointer-events: auto;
    touch-action: manipulation;
    transition: transform 100ms ease-out, background-color 100ms ease-out;
}
.scanner-knopf:active { transform: scale(0.96); background: rgba(60, 60, 60, 0.7); }
.scanner-knopf[aria-pressed="true"] { background: var(--weiss); color: #000; }
.scanner :focus-visible { outline-color: var(--weiss); }
@media (prefers-reduced-transparency: reduce) {
    .scanner-knopf, .scanner-hinweis { background: #000; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
    .scanner-knopf, .scanner-hinweis { background: #000; border: 2px solid var(--weiss); }
    .scanner-sucher { box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.75); }
}

@media (min-width: 900px) {
    .qr-formular {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        grid-template-rows: auto 1fr;
        grid-template-areas: 'inhalt ausgabe' 'gestaltung ausgabe';
    }
    .qr-inhalt { grid-area: inhalt; }
    .qr-gestaltung { grid-area: gestaltung; }
    .qr-ausgabe { grid-area: ausgabe; position: sticky; top: calc(var(--kopf-hoehe) + env(safe-area-inset-top) + 1rem); }
    .qr-inhalt, .qr-ausgabe, .qr-gestaltung { padding: 28px; }
    .leser-box { padding: 28px; }
    .leser-felder > div { grid-template-columns: minmax(0, 14em) minmax(0, 1fr); gap: 12px; }
}

@media (min-width: 720px) {
    .hero { padding: 72px 0 40px; }
    .wannja-kasten .innen { padding: 40px; }
    .fuss .innen { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
    .fuss p { margin: 0; }
}

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

/* ---------- Bedienungshilfen des Systems ---------- */
@media (prefers-reduced-transparency: reduce) {
    .kopf { background: var(--weiss); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 1px 0 var(--grau-200); }
    .kopf::after { display: none; }
}
@media (prefers-contrast: more) {
    .kopf { background: var(--weiss); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 2px solid var(--tinte); }
    .kopf::after { display: none; }
    .kachel, .kategorie-link, .kat-kachel, .suche input, .qr-reiter a, .knopf-klein { border-color: var(--grau-700); }
    .kachel-bald { border-color: var(--grau-600); }
    .krumen a, .kachel-text, .lead, .suche-status { color: var(--grau-800); }
}
@media (prefers-reduced-motion: reduce) {
    /* Drücken bleibt sichtbar, aber ohne Bewegung: Farbe statt Verkleinern */
    a.kachel:active, .kategorie-link:active, .kat-kachel:active, .knopf:active, .knopf-klein:active, .qr-reiter a:active, .kopf-link:active, .kopf-suche:active { transform: none; }
}

/* Mobil: «bald»-Kacheln kompakt (Marke und Titel auf einer Zeile), damit die nutzbaren Tools nicht in der Länge untergehen */
@media (max-width: 599px) {
    .kacheln { gap: 0.625rem; }
    .kachel { padding: 1rem 1.125rem; }
    .kachel-bald { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.125rem 0.5rem; padding: 0.75rem 1rem; }
    .kachel-bald .marke-bald { order: 2; align-self: center; }
    .kachel-bald .kachel-titel { order: 1; font-size: 1rem; }
    .kachel-bald .kachel-text { order: 3; flex-basis: 100%; font-size: 0.875rem; }
    .bereich { padding-bottom: 1.5rem; }
}

/* --- PDF-Tools (/pdf/…) --- */
.pdf { padding-bottom: 48px; }
.pdf-privat, .it-privat { display: inline-flex; align-items: center; gap: 0.5em; margin: 0; font-weight: 600; color: var(--gruen-text); }
.pdf-privat::before, .it-privat::before { content: '✓'; content: '✓' / ''; }
.pdf-ablage { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 20px; margin-bottom: 16px;
    border: 2px dashed var(--grau-300); border-radius: var(--radius); background: var(--weiss);
    transition: border-color var(--druck-zeit) ease-out, background-color var(--druck-zeit) ease-out; }
.pdf-ablage-aktiv { border-color: var(--gruen); background: var(--gruen-hell); }
.pdf-datei-knopf { cursor: pointer; }
#pdf-datei:focus-visible + .pdf-datei-knopf { outline: 3px solid var(--gruen); outline-offset: 2px; }
.pdf .warnung { margin: 0 0 16px; }
.pdf-box { background: var(--weiss); border: 2px solid var(--grau-200); border-radius: var(--radius); padding: 20px; min-width: 0; }
.pdf-box h2 { font-size: 1.15rem; margin: 0 0 12px; overflow-wrap: anywhere; }
.pdf-summe { color: var(--grau-700); margin: 12px 0 0; overflow-wrap: anywhere; }
.pdf-summe:empty { display: none; }
.pdf > .pdf-werkzeug > .qr-meldung { margin: 0 0 16px; }
.qr-meldung.pdf-fehler { color: var(--fehler); }

/* Griff: einziges Element mit touch-action: none — die Liste bleibt auf dem Handy scrollbar */
.pdf-griff { flex: none; width: var(--ziel); height: var(--ziel); border: 0; border-radius: 10px; background: transparent; color: var(--grau-600);
    cursor: grab; touch-action: none; display: grid; place-items: center; }
.pdf-griff::before { content: ''; width: 14px; height: 20px;
    background: radial-gradient(circle, currentColor 1.6px, transparent 2px) 0 0 / 7px 7px; }
.pdf-griff:hover { background: var(--grau-100); color: var(--tinte); }
.pdf-griff:active { cursor: grabbing; }
.pdf-zieht { position: relative; z-index: 2; box-shadow: 0 12px 32px rgba(20, 33, 61, 0.22); border-color: var(--gruen) !important; }
.pdf-zieht .pdf-griff { cursor: grabbing; background: var(--gruen-hell); color: var(--gruen-text); }
.pdf-mini-knopf { min-width: var(--ziel); height: var(--ziel); padding: 0 8px; border: 2px solid var(--grau-300); border-radius: 10px;
    background: var(--weiss); color: var(--tinte); font: inherit; font-size: 1.15rem; font-weight: 600; line-height: 1; cursor: pointer;
    touch-action: manipulation; transition: transform var(--druck-zeit) ease-out, border-color var(--druck-zeit) ease-out; }
.pdf-mini-knopf:hover { border-color: var(--gruen); }
.pdf-mini-knopf:active { transform: var(--druck); }
.pdf-mini-knopf:disabled { color: var(--grau-300); border-color: var(--grau-200); cursor: default; transform: none; }
.pdf-weg:hover { border-color: var(--fehler); color: var(--fehler); }

/* Zusammenfügen: Liste */
.pdf-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pdf-eintrag { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 8px 10px 8px 4px; background: var(--weiss);
    border: 2px solid var(--grau-200); border-radius: 14px; min-width: 0; }
.pdf-mini { flex: none; position: relative; width: 48px; height: 48px; background: var(--grau-100); border-radius: 6px; overflow: hidden; }
.pdf-mini .pdf-bild { position: absolute; inset: 4px; width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 0 1px rgba(20, 33, 61, 0.4)); }
.pdf-eintrag-text { flex: 1 1 9rem; min-width: 0; display: grid; }
.pdf-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdf-info { color: var(--grau-600); font-size: 0.9rem; }
.pdf-eintrag-knoepfe { flex: none; display: flex; gap: 6px; margin-left: auto; }   /* schmal: in die zweite Zeile, rechts */

/* Seiten ordnen: Raster */
.pdf-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 16px; }
.pdf-leiste h2 { margin: 0; }
.pdf-leiste .pdf-summe { margin: 0; flex-basis: 100%; order: 3; }
.pdf-rueck { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 16px; padding: 8px 8px 8px 16px;
    background: var(--tinte-hell); color: var(--tinte); border-radius: var(--radius-klein); font-weight: 600; }
.pdf-rueck p { margin: 0; }
.pdf-rueck:has(#pdf-rueck-text:empty) { display: none; }
.pdf-raster { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 128px), 1fr)); }
.pdf-seite { display: flex; flex-direction: column; background: var(--weiss); border: 2px solid var(--grau-200); border-radius: 14px; padding: 4px 8px 8px; min-width: 0; }
.pdf-seite-kopf { display: flex; align-items: center; gap: 2px; margin-left: -4px; }
.pdf-seite-nr { font-weight: 600; font-size: 0.9rem; color: var(--grau-700); }
.pdf-seite-bild { position: relative; aspect-ratio: 1; background: var(--grau-100); border-radius: 8px; overflow: hidden; }
/* Bild füllt ein Quadrat und passt sich ein (object-fit) — gedreht bleibt es im Quadrat; Schatten nur um die Seite */
.pdf-seite-bild .pdf-bild { position: absolute; inset: 7%; width: 86%; height: 86%; object-fit: contain; filter: drop-shadow(0 1px 3px rgba(20, 33, 61, 0.25));
    transition: transform 240ms cubic-bezier(0.2, 0, 0, 1); }
.pdf-seite-bild[data-drehung="90"] .pdf-bild { transform: rotate(90deg); }
.pdf-seite-bild[data-drehung="180"] .pdf-bild { transform: rotate(180deg); }
.pdf-seite-bild[data-drehung="270"] .pdf-bild { transform: rotate(270deg); }
.pdf-mini-leer { background: repeating-linear-gradient(45deg, var(--grau-100) 0 8px, var(--grau-200) 8px 16px); }
.pdf-seite-knoepfe { display: flex; justify-content: space-between; gap: 6px; margin-top: 8px; }
.pdf-seite-knoepfe .pdf-mini-knopf { flex: 1; min-width: 0; }

/* Teilen */
#pdf-formular { margin-top: 16px; }
.pdf-art { border: 0; margin: 0 0 8px; padding: 0; min-width: 0; }
.pdf-art .feld-check { margin-bottom: 8px; }
.pdf-art input[type="radio"] { width: 20px; height: 20px; accent-color: var(--gruen-text); }
.pdf-art .feld-check label { font-weight: 500; flex: 1 1 0; min-width: 0; }
.pdf-art .feld-check input { flex: none; align-self: flex-start; margin-top: 2px; }
.pdf .feld input[type="text"] { max-width: 24rem; }

/* Bilder zu PDF */
.pdf-optionen { display: flex; flex-wrap: wrap; gap: 0 16px; margin-top: 16px; }
.pdf-optionen .feld { flex: 1 1 14rem; margin-bottom: 0; }
.pdf-optionen select { width: 100%; }

/* Komprimieren */
.pdf-hinweis-fest { margin: 0 0 16px; }
.pdf-fortschritt { margin: 8px 0 0; }
.pdf-fortschritt progress { width: 100%; height: 10px; accent-color: var(--gruen-text); }
.pdf-fortschritt p { margin: 6px 0 0; color: var(--grau-700); font-variant-numeric: tabular-nums; }
.pdf-ergebnis { margin-top: 12px; padding: 14px 16px; border-radius: var(--radius-klein); background: var(--gruen-hell); color: var(--grau-800); }
.pdf-ergebnis p { margin: 0; font-weight: 600; }
.pdf-ergebnis .knopf { margin-top: 12px; }

/* Ausfüllen und unterschreiben */
.pdf-zertes { margin: 0 0 16px; font-weight: 500; }
.pdf-unterschreiben { display: grid; gap: 16px; }
.pdf-seitenleiste { display: grid; gap: 16px; align-content: start; min-width: 0; }
.pdf-arten { display: flex; gap: 4px; margin: 0 0 12px; padding: 4px; border: 0; border-radius: 12px; background: var(--grau-100); min-width: 0; }
.pdf-arten label { flex: 1; display: grid; place-items: center; min-height: var(--ziel); border-radius: 9px; font-weight: 600; color: var(--grau-700);
    cursor: pointer; transition: background-color var(--druck-zeit) ease-out, transform var(--druck-zeit) ease-out; touch-action: manipulation; }
.pdf-arten label:active { transform: var(--druck); }
.pdf-arten input:checked + label { background: var(--weiss); color: var(--tinte); box-shadow: 0 1px 3px rgba(20, 33, 61, 0.18); }
.pdf-arten input:focus-visible + label { outline: 3px solid var(--gruen); outline-offset: 1px; }
.pdf-pad { display: block; width: 100%; height: 160px; border: 2px dashed var(--grau-300); border-radius: var(--radius-klein);
    background: var(--weiss) linear-gradient(var(--grau-300), var(--grau-300)) no-repeat 16px calc(100% - 40px) / calc(100% - 32px) 1px;
    touch-action: none; cursor: crosshair; }
.pdf-pad-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.pdf-pad-fuss .feld-hilfe { margin: 0; }
.pdf-u-probe { display: block; max-width: 100%; height: 56px; margin-top: 8px; }
.pdf-u-probe[width="0"] { display: none; }
.pdf-u-vorschau { display: block; max-width: 100%; max-height: 96px; margin-top: 8px; background: repeating-conic-gradient(var(--grau-100) 0 25%, var(--weiss) 0 50%) 0 0 / 16px 16px; }
#pdf-platz-hilfe { margin: 0; }
#pdf-felder .feld, #pdf-felder .pdf-art, #pdf-felder > .feld-check { margin-bottom: 12px; }
#pdf-felder input[type="text"], #pdf-felder textarea, #pdf-felder select { width: 100%; max-width: none; }
#pdf-f-leer:empty { display: none; }
.pdf-speichern { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.pdf-speichern .pdf-summe { margin: 0; }
.pdf-speichern .pdf-signiert { flex-basis: 100%; margin: 0; }
.pdf-blaetter { display: grid; gap: 20px; }
.pdf-blatt-rahmen { margin: 0; }
.pdf-blatt-rahmen .pdf-seite-nr { display: block; margin-bottom: 6px; }
.pdf-blatt { position: relative; width: 100%; background: var(--weiss); box-shadow: 0 1px 4px rgba(20, 33, 61, 0.25); }
.pdf-blatt-bild { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; pointer-events: none; }
/* Platzierung: einziges Ziel mit touch-action: none — die Seite selbst bleibt auf dem Handy scrollbar */
.pdf-platz { position: absolute; touch-action: none; cursor: grab; outline: 2px dashed var(--gruen); outline-offset: 2px; border-radius: 2px;
    transition: box-shadow var(--druck-zeit) ease-out; }
.pdf-platz img { display: block; width: 100%; height: 100%; pointer-events: none; user-select: none; }
.pdf-platz:focus-visible { outline: 3px solid var(--gruen); }
.pdf-platz-zieht { cursor: grabbing; box-shadow: 0 10px 28px rgba(20, 33, 61, 0.25); background: rgba(231, 245, 236, 0.35); }
.pdf-platz-knoepfe { position: absolute; right: -2px; bottom: 100%; margin-bottom: 6px; display: flex; gap: 4px; }
.pdf-platz-knopf { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: var(--tinte); color: var(--weiss); font: inherit;
    font-weight: 700; font-size: 1.05rem; line-height: 1; cursor: pointer; touch-action: manipulation; transition: transform var(--druck-zeit) ease-out; }
.pdf-platz-knopf:active { transform: var(--druck); }
.pdf-platz-knopf:focus-visible { outline: 3px solid var(--gruen); outline-offset: 1px; }
/* Ecke: sichtbar 16 px, Tippfläche 44 px */
.pdf-platz-ecke { position: absolute; right: -22px; bottom: -22px; width: 44px; height: 44px; cursor: nwse-resize; touch-action: none; }
.pdf-platz-ecke::after { content: ''; position: absolute; left: 14px; top: 14px; width: 16px; height: 16px; border-radius: 50%;
    background: var(--weiss); border: 3px solid var(--gruen-text); box-sizing: border-box; pointer-events: none; }
@media (min-width: 900px) {
    .pdf-unterschreiben { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); align-items: start; gap: 24px; }
}

@media (prefers-reduced-motion: reduce) {
    .pdf-seite-bild .pdf-bild, .pdf-ablage { transition: none; }
    .pdf-mini-knopf:active, .pdf-arten label:active, .pdf-platz-knopf:active { transform: none; }
}
@media (prefers-contrast: more) {
    .pdf-eintrag, .pdf-seite, .pdf-box, .pdf-mini-knopf, .pdf-ablage, .pdf-pad { border-color: var(--grau-700); }
    .pdf-platz { outline-color: var(--tinte); }
}

/* ---------- IT-Tools (/subnetz, /passwort, /hash, /kodieren, /json, /uuid, /unixzeit) ----------
   Karten wie die PDF-Tools, Werte in Festbreitenschrift. Alles reagiert beim Tippen; Kopieren meldet sich am Knopf selbst
   (Farbe + Text, keine Bewegung — passt auch zu «Bewegung reduzieren»). */
.it { padding-bottom: 48px; }
.it-werkzeug { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }   /* minmax: breite Inhalte (Streifen, Tabellen) scrollen in sich, statt die Seite zu verbreitern */
/* Segmente mit bis zu vier Beschriftungen (Base64URL): etwas Innenabstand, damit sie mobil nicht aneinanderstossen */
.it .pdf-arten label { padding: 0 6px; text-align: center; font-size: 0.95rem; }
.it-box { background: var(--weiss); border: 2px solid var(--grau-200); border-radius: var(--radius); padding: 20px; min-width: 0; }
.it-box h2 { font-size: 1.15rem; margin: 0 0 12px; }
.it-box > :last-child { margin-bottom: 0; }
.it-mono, .feld .it-mono, .it-werte .it-mono, .it-liste code, .it-tabelle td, .it-gross, .it-stelle {
    font-family: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
.feld textarea.it-mono { font-size: 0.9rem; line-height: 1.5; }
.feld .it-zahl { max-width: 12em; }
.it-werte { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 16px; margin: 12px 0 4px; }
.it-werte dt { font-weight: 600; color: var(--grau-700); font-size: 0.9rem; }
.it-werte dd { margin: 0 0 10px; color: var(--tinte); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.it-werte .it-binaer { font-size: 0.85rem; }
.it-werte:empty { display: none; }
@media (min-width: 600px) {
    .it-werte { grid-template-columns: max-content minmax(0, 1fr); }
    .it-werte dd { margin: 0 0 6px; }
}
.it-info { margin: 0 0 12px; font-weight: 600; color: var(--tinte); }
.it-info:empty { display: none; }
.it-tabelle { overflow-x: auto; border: 2px solid var(--grau-200); border-radius: var(--radius-klein); margin-bottom: 8px; max-height: 26rem; overflow-y: auto; }
.it-tabelle table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
.it-tabelle th, .it-tabelle td { text-align: left; padding: 6px 12px; border-bottom: 1px solid var(--grau-200); white-space: nowrap; }
.it-tabelle th { position: sticky; top: 0; background: var(--grau-100); font-weight: 600; color: var(--grau-700); }
.it-tabelle tr:last-child td { border-bottom: 0; }
.it-liste { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
.it-liste li { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; background: var(--grau-100); border-radius: var(--radius-klein); min-width: 0; }
.it-liste code { flex: 1; min-width: 0; overflow-wrap: anywhere; color: var(--tinte); font-size: 1rem; }
.it-liste .it-name { flex: none; width: 7.5em; font-weight: 600; color: var(--grau-700); font-size: 0.9rem; }
.it-liste .it-name small { display: block; font-weight: 500; font-size: 0.75rem; color: var(--fehler); line-height: 1.3; }
.it-liste .knopf-klein { flex: none; }
/* Passwort-Generator, Art «Satz»: Satz zum Merken (bricht um) über dem Passwort zum Tippen (Monospace) */
.pw-hilfe { margin: 0 0 14px; }
.pw-erklaerung { margin: 0 0 8px; }
.it-liste .pw-vorschlag { flex: 1; min-width: 0; display: grid; gap: 4px; padding: 4px 0; }
@media (max-width: 599px) { .pw-vorschlag code { font-size: 0.9rem; } }
.pw-satz { color: var(--grau-700); font-size: 0.95rem; line-height: 1.4; overflow-wrap: break-word; }
.it-kopiert { border-color: var(--gruen) !important; background: var(--gruen-hell) !important; color: var(--gruen-text) !important; }
.it-kopiert-nein { border-color: var(--fehler) !important; color: var(--fehler) !important; }
.it-ok { color: var(--gruen-text); font-weight: 600; }
.it-nein { color: var(--fehler); font-weight: 600; }
.it-optionen { display: grid; gap: 8px; border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.it-optionen .feld-check { margin: 0; }
.it-zeile { display: flex; flex-wrap: wrap; gap: 0 16px; align-items: flex-end; }
.it-zeile > .feld { flex: 1 1 12em; min-width: 0; }
.it-staerke { margin: 0 0 4px; font-weight: 600; }
.it-staerke[data-bewertung="schwach"] { color: var(--fehler); }
.it-staerke[data-bewertung="mittel"] { color: #9A5B00; }
.it-staerke[data-bewertung="gut"], .it-staerke[data-bewertung="sehr_stark"] { color: var(--gruen-text); }
.it-balken { height: 6px; border-radius: 3px; background: var(--grau-200); overflow: hidden; margin: 0 0 12px; }
.it-balken span { display: block; height: 100%; width: 0; background: currentColor; transition: width 200ms ease-out; }
.it-stelle { margin: 8px 0 0; padding: 10px 12px; background: var(--grau-100); border-radius: 8px; overflow-x: auto; font-size: 0.85rem; line-height: 1.4; white-space: pre; }
.it-gross { display: block; font-size: clamp(1.4rem, 5vw, 2rem); font-weight: 700; color: var(--tinte); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.it-jetzt { display: grid; gap: 12px 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); margin: 0; }
.it-jetzt dt { font-weight: 600; color: var(--grau-700); font-size: 0.9rem; }
.it-jetzt dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
@media (min-width: 900px) {
    .it-zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
}
@media (prefers-contrast: more) {
    .it-box, .it-tabelle { border-color: var(--grau-700); }
}

/* ---------- Netzwerk-Tools auf dem Server (/ip, /dns, /mail-check, /ssl, /header, /whois) ---------- */
.netz-form { display: flex; flex-wrap: wrap; gap: 0 16px; align-items: flex-start; }
.netz-form > .feld { flex: 1 1 10rem; min-width: 0; }
.netz-form > .netz-feld-gross { flex: 3 1 16rem; }
.netz-senden { flex: 1 0 100%; }
.netz-senden .knopf { min-height: var(--ziel); min-width: 8rem; }
@media (min-width: 720px) {
    .netz-senden { flex: 0 0 auto; padding-top: 1.75rem; }   /* auf einer Linie mit den Feldern (Label-Höhe) */
}
.netz-meldung { margin: 4px 0 0; }
.netz-status { margin: 12px 0 0; }
.it-box h3 { font-size: 1rem; margin: 20px 0 8px; color: var(--tinte); }
[aria-busy="true"] { opacity: 0.55; transition: opacity 150ms ease-out; }
.netz-punkte { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 10px; }
.netz-punkt { --ampel: var(--grau-600); --ampel-hell: var(--grau-100);
    border: 2px solid var(--grau-200); border-left: 6px solid var(--ampel); border-radius: var(--radius-klein); padding: 12px 14px; min-width: 0; }
.netz-gut { --ampel: var(--gruen-text); --ampel-hell: var(--gruen-hell); }
.netz-warnung { --ampel: #9A5B00; --ampel-hell: #FEF3C7; }
.netz-punkt.netz-fehler { --ampel: var(--fehler); --ampel-hell: #FEF3F2; }
.netz-info { --ampel: var(--tinte); --ampel-hell: var(--tinte-hell); }
.netz-punkt-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin: 0 0 4px; }
.netz-punkt-titel { font-weight: 700; color: var(--tinte); }
.netz-marke { display: inline-flex; align-items: center; gap: 0.35em; padding: 2px 10px; border-radius: 50px; font-size: 0.8rem; font-weight: 700;
    color: var(--ampel); background: var(--ampel-hell); }
.netz-marke::before { content: '•'; content: '•' / ''; font-size: 1.2em; line-height: 1; }
.netz-gut .netz-marke::before { content: '✓'; content: '✓' / ''; font-size: 1em; }
.netz-warnung .netz-marke::before { content: '!'; content: '!' / ''; font-size: 1em; }
.netz-punkt.netz-fehler .netz-marke::before { content: '✕'; content: '✕' / ''; font-size: 1em; }
.netz-info .netz-marke::before { content: 'i'; content: 'i' / ''; font-size: 1em; font-style: italic; }
.netz-punkt-text { margin: 0; overflow-wrap: anywhere; }
.netz-tipp { margin: 8px 0 0; padding: 8px 12px; background: var(--grau-50); border-radius: 8px; font-size: 0.95rem; overflow-wrap: anywhere; }
.netz-details { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; font-size: 0.85rem; color: var(--grau-700); }
.netz-details li { overflow-wrap: anywhere; }
.it-tabelle td.it-mono { white-space: normal; overflow-wrap: anywhere; min-width: 12rem; }
.netz-tmail { margin: 0; padding: 14px 18px; border-radius: var(--radius-klein); background: var(--tinte-hell); color: var(--tinte); }
.netz-tmail a { font-weight: 700; }
.ip-box { text-align: left; }
.ip-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 8px; }
.ip-adresse { font-family: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace; font-size: clamp(1.4rem, 6vw, 2.25rem); font-weight: 700;
    color: var(--tinte); letter-spacing: -0.01em; overflow-wrap: anywhere; min-width: 0; }
.it > .hinweis { margin: 0 0 16px; }
@media (prefers-contrast: more) {
    .netz-punkt { border-color: var(--grau-700); }
    .netz-marke { border: 1px solid currentColor; }
}
@media (prefers-reduced-motion: reduce) {
    [aria-busy="true"] { transition: none; }
}

/* ---------- Schweiz & Geld, Datum & Planen (/iban, /mwst, /prozent, /datum, /kalenderwoche, /feiertage, /countdown, /zeitzonen, /los) ----------
   Gleiche Karten wie die IT-Tools. Ergebnisse erscheinen beim Tippen, ohne Bewegung; der Countdown springt einmal je Sekunde. */
.it-urteil { margin: 4px 0 0; font-weight: 700; }
.it-urteil:empty, .it-gross:empty, .it-rechnung:empty { display: none; }
.it-urteil.it-ok::before { content: '✓ '; content: '✓ ' / ''; }
.it-urteil.it-nein::before { content: '✕ '; content: '✕ ' / ''; }
#ib-formatiert { margin: 8px 0 4px; letter-spacing: 0.02em; }
.it-summen dd { font-size: 1.15rem; font-weight: 600; }
.it-summen .it-gegeben { color: var(--grau-700); font-weight: 500; }
.it-rechnung { margin: 4px 0 12px; padding: 10px 12px; background: var(--grau-100); border-radius: 8px; font-size: 0.9rem; color: var(--grau-700);
    font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.feld .it-betrag { max-width: 14em; font-size: 1.15rem; }
.pz-raster { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.pz-raster > .vh { grid-column: 1 / -1; }
.pz-ergebnis { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: var(--ziel); }
.pz-ergebnis .it-info { margin: 0; flex: 1 1 12rem; }
.it-tabelle-lang { max-height: none; }
.it-tabelle-text td { font-family: var(--schrift); }   /* Namen und Daten in der Textschrift, Ziffern bleiben tabellarisch */
.it-tabelle tr.it-aktuell td { background: var(--gruen-hell); font-weight: 600; }
.ft-tabelle td:nth-child(4) { white-space: normal; min-width: 12rem; color: var(--grau-700); }
.ft-tabelle tr[data-stufe="t"] td:nth-child(3), .ft-tabelle tr[data-stufe="u"] td:nth-child(3) { color: var(--grau-700); }
.ft-tabelle tr.ft-wochenende td:nth-child(2) { color: var(--grau-600); }
/* Feiertage auf dem Handy: jede Zeile als kleine Karte (Datum + Tag, darunter Name und «Gilt als»), ohne seitliches Scrollen */
@media (max-width: 599px) {
    .ft-tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .ft-tabelle tr { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--grau-200); }
    .ft-tabelle tr:last-child { border-bottom: 0; }
    .ft-tabelle td { display: block; border: 0; padding: 0; white-space: normal; min-width: 0; }
    .ft-tabelle td:nth-child(3) { grid-column: 1 / -1; font-weight: 600; color: var(--tinte); }
    .ft-tabelle td:nth-child(4) { grid-column: 1 / -1; min-width: 0; font-size: 0.85rem; }
}
.planen-wannja { margin: 0; }
.ls-arten { flex-wrap: wrap; }
.ls-arten label { flex: 1 1 5.5rem; }
.ls-ergebnis h3 { margin: 12px 0 4px; }
.ls-ergebnis h3:first-child { margin-top: 0; }
.ls-liste { margin: 0 0 8px; padding-left: 1.6em; display: grid; gap: 2px; font-size: 1.05rem; }
.ls-liste li::marker { color: var(--grau-600); font-variant-numeric: tabular-nums; }
.ls-ergebnis:empty { display: none; }

/* Countdown: grosse Ziffern in festen Spalten, damit nichts springt */
.cd-anzeige { text-align: center; }
.cd-anzeige h2 { font-size: clamp(1.3rem, 4vw, 1.75rem); overflow-wrap: anywhere; }
.cd-richtung { margin: 0 0 12px; color: var(--grau-700); }
.cd-zahlen { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cd-zahlen li { background: var(--grau-100); border-radius: var(--radius-klein); padding: 12px 4px; display: grid; gap: 2px; }
.cd-zahl { font-family: var(--schrift-titel); font-size: clamp(1.6rem, 8vw, 3rem); font-weight: 800; color: var(--tinte); font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em; line-height: 1.1; }
.cd-zahlen.cd-lang { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cd-zahlen.cd-lang li:first-child { grid-column: 1 / -1; }
.cd-einheit { font-size: 0.85rem; color: var(--grau-700); font-weight: 600; }
.cd-anzeige .qr-knoepfe { justify-content: center; }

/* Zeitzonen: Orte als Liste, Streifen als Raster aus 24 Spalten (mobil seitlich scrollbar) */
.zz-orte { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.zz-orte li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 4px 4px 14px; background: var(--grau-100);
    border-radius: var(--radius-klein); min-width: 0; }
.zz-ort-name { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.zz-ort-name small, .zz-treffer small { font-weight: 400; color: var(--grau-600); font-size: 0.8rem; }
.zz-treffer { list-style: none; margin: 4px 0 0; padding: 4px; border: 2px solid var(--grau-200); border-radius: var(--radius-klein); display: grid; gap: 2px; }
.zz-treffer-knopf { width: 100%; text-align: left; min-height: var(--ziel); padding: 6px 10px; border: 0; border-radius: 8px; background: none; font: inherit;
    color: var(--tinte); cursor: pointer; }
.zz-treffer-knopf:hover, .zz-treffer-knopf:focus-visible { background: var(--gruen-hell); }
.zz-leer { padding: 8px 10px; color: var(--grau-600); }
.zz-streifen { overflow-x: auto; display: grid; gap: 6px; padding-bottom: 4px; }
.zz-reihe { display: grid; grid-template-columns: 7rem minmax(42rem, 1fr); align-items: center; gap: 8px; }
.zz-reihe-name { font-weight: 600; font-size: 0.9rem; overflow-wrap: anywhere; position: sticky; left: 0; background: var(--weiss); z-index: 1; }
.zz-stunden { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; }   /* 23–25 Spalten (Zeitumstellung) */
.zz-zelle { display: grid; place-items: center; min-height: 2.25rem; border-radius: 6px; background: var(--grau-100); color: var(--grau-700);
    font-size: 0.75rem; font-variant-numeric: tabular-nums; border: 2px solid transparent; padding: 0; font-family: inherit; }
button.zz-zelle { cursor: pointer; font-weight: 600; touch-action: manipulation; transition: transform var(--druck-zeit) ease-out; }
button.zz-zelle:active { transform: var(--druck); }
.zz-arbeit { background: var(--gruen-hell); color: var(--gruen-dunkel); }
.zz-anderer-tag { font-style: italic; }
.zz-gewaehlt { border-color: var(--tinte); background: var(--tinte); color: var(--weiss); }
.zz-arbeit.zz-gewaehlt { background: var(--gruen-text); border-color: var(--gruen-dunkel); color: var(--weiss); }
@media (prefers-reduced-motion: reduce) {
    button.zz-zelle:active { transform: none; }
}
@media (prefers-contrast: more) {
    .zz-zelle { border-color: var(--grau-700); }
    .zz-arbeit { text-decoration: underline; }
}

/* ---------- Bild & Text (/bild, /exif, /favicon, /woerter, /vergleich) ----------
   Gleiche Karten wie die IT-Tools, Dateiwahl wie die PDF-Tools. Ergebnisse erscheinen ohne Bewegung. */
.it-box .pdf-ablage { margin-bottom: 8px; }
.bi-formate { margin: 0 0 12px; }
.bi-liste, .ex-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bi-eintrag { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 10px; border: 2px solid var(--grau-200);
    border-radius: 14px; min-width: 0; }
.bi-ergebnis { font-size: 0.9rem; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.bi-ergebnis:empty { display: none; }
.bi-kleiner { color: var(--gruen-text); }
.bi-groesser { color: #9A5B00; }
.bi-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
.bi-fuss .pdf-summe { margin: 0; }
.bi-modi { flex-wrap: wrap; }
.bi-modi label { flex: 1 1 5.5rem; }
.bi-hinweis { margin: 4px 0 0; }
#bi-qualitaet-wert { width: 3.5em; font-weight: 500; color: var(--grau-700); }

.ex-optionen { margin: 12px 0 0; }
.ex-optionen legend { margin-bottom: 4px; }
.ex-karte { border: 2px solid var(--grau-200); border-radius: 14px; padding: 12px 14px; min-width: 0; }
.ex-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ex-name { margin: 0 !important; font-size: 1rem; overflow-wrap: anywhere; min-width: 0; }
.ex-werte { margin-bottom: 8px; }
.ex-gps a { font-weight: 600; }
.ex-gps-warnung { display: block; color: var(--fehler); font-weight: 600; font-size: 0.9rem; }
.ex-nichts { margin: 0 0 8px; }
.ex-nichts::before { content: '✓ '; content: '✓ ' / ''; }
.ex-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.ex-fuss .it-info { margin: 0; color: var(--gruen-text); }
.ex-karte > .warnung { margin: 8px 0 0; }

/* Favicon: Browser-Tab als Vorschau (hell, wie ein Fenster), Grössen in echter Pixelzahl (klein: ohne Glättung vergrössert) */
.fv-buchstaben { max-width: 6em; font-size: 1.25rem; font-weight: 700; text-transform: uppercase; }
.fv-mit-hg { margin: 8px 0 14px; }
.fv-browser { border: 2px solid var(--grau-200); border-radius: var(--radius-klein); overflow: hidden; margin: 0 0 16px; background: var(--weiss); }
.fv-leiste { display: flex; gap: 2px; padding: 8px 8px 0; background: var(--grau-200); }
.fv-tab { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 14rem; padding: 8px 14px; border-radius: 10px 10px 0 0;
    font-size: 0.85rem; color: var(--grau-700); }
.fv-tab span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fv-tab-aktiv { background: var(--weiss); color: var(--tinte); font-weight: 600; }
.fv-tab img { flex: none; width: 16px; height: 16px; }
.fv-tab-leer { flex: none; width: 16px; height: 16px; border-radius: 4px; background: var(--grau-300); }
.fv-adresse { height: 12px; margin: 10px 12px 12px; border-radius: 6px; background: var(--grau-100); }
.fv-groessen { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.fv-groessen li { display: grid; justify-items: center; gap: 4px; font-size: 0.8rem; color: var(--grau-700); font-variant-numeric: tabular-nums; }
.fv-groessen img { background: repeating-conic-gradient(var(--grau-100) 0 25%, var(--weiss) 0 50%) 0 0 / 12px 12px; border-radius: 4px; }
.fv-pixel { image-rendering: pixelated; }

/* Wortzähler: Kacheln mit grossen Zahlen, die beim Tippen ohne Springen wechseln (tabellarische Ziffern) */
.wz-text { min-height: 12rem; }
.wz-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); gap: 8px; margin: 0; }
.wz-kachel { background: var(--grau-100); border-radius: var(--radius-klein); padding: 10px 14px; min-width: 0; }
.wz-kachel dt { font-size: 0.85rem; font-weight: 600; color: var(--grau-700); }
.wz-kachel dd { margin: 0; font-family: var(--schrift-titel); font-size: 1.5rem; font-weight: 800; color: var(--tinte); font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em; overflow-wrap: anywhere; }
.wz-gross { background: var(--gruen-hell); }
.wz-gross dd { color: var(--gruen-dunkel); }
.wz-grenzen { flex-wrap: wrap; }
.wz-grenzen label { flex: 1 1 6.5rem; }
.wz-balken { color: var(--gruen-text); }
.wz-balken[data-bewertung="mittel"] { color: #9A5B00; }
.wz-balken[data-bewertung="schwach"] { color: var(--fehler); }
.wz-haeufig { margin: 8px 0 0; padding-left: 1.8em; display: grid; gap: 2px; }
.wz-haeufig li { font-size: 1rem; }
.wz-haeufig li::marker { color: var(--grau-600); font-variant-numeric: tabular-nums; }
.wz-haeufig li span:first-child { font-weight: 600; overflow-wrap: anywhere; }
.wz-anzahl { margin-left: 0.5em; color: var(--grau-600); font-variant-numeric: tabular-nums; }
.wz-haeufig:empty { display: none; }

/* Texte vergleichen: eine Liste, zwei Zellen je Zeile. Schmal untereinander (gleiche Zeilen einmal), ab 900 px nebeneinander. */
.vg-eingaben { display: grid; gap: 0 16px; }
.vg-eingaben textarea { min-height: 10rem; font-size: 0.95rem; }
.vg-optionen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.vg-optionen .it-optionen { margin: 0; flex: 1 1 16rem; }
.vg-optionen .feld-check, .feld-check-lang { flex-wrap: nowrap; align-items: flex-start; }
.feld-check-lang input, .vg-optionen .feld-check input { flex: none; margin-top: 2px; }
.vg-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 8px; }
.vg-kopf h2 { margin: 0 !important; }
.vg-diff { border: 2px solid var(--grau-200); border-radius: var(--radius-klein); overflow: hidden; font-size: 0.9rem; line-height: 1.5; }
.vg-diff:empty { display: none; }
.vg-zeile { display: grid; grid-template-columns: minmax(0, 1fr); }
.vg-zeile + .vg-zeile, .vg-gruppe .vg-zeile:first-child, .vg-aufklappen + .vg-gruppe .vg-zeile:first-child { border-top: 1px solid var(--grau-100); }
.vg-zelle { display: grid; grid-template-columns: 3.25em minmax(0, 1fr); min-width: 0; }
.vg-nr { padding: 2px 8px 2px 0; text-align: right; color: var(--grau-600); font-variant-numeric: tabular-nums; user-select: none;
    border-right: 1px solid var(--grau-200); font-size: 0.8rem; line-height: 1.85; }
.vg-text { padding: 2px 10px; white-space: pre-wrap; overflow-wrap: anywhere; font-family: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace;
    min-height: 1.5em; }
.vg-weg .vg-a, .vg-geaendert .vg-a { background: #FEF3F2; }
.vg-neu .vg-b, .vg-geaendert .vg-b { background: var(--gruen-hell); }
.vg-text del { background: #FECDCA; color: #7A271A; text-decoration: line-through; text-decoration-thickness: 1px; border-radius: 3px; }
.vg-text ins { background: #A6E3BD; color: #0B4A22; text-decoration: none; border-radius: 3px; }
.vg-weg .vg-text del, .vg-neu .vg-text ins { background: none; }
.vg-weg .vg-text del { text-decoration: none; color: #7A271A; }
.vg-neu .vg-text ins { color: #0B4A22; }
/* Schmal: gleiche Zeilen nur links, leere Zellen weg */
.vg-gleich .vg-b, .vg-leer { display: none; }
.vg-aufklappen { display: block; width: 100%; min-height: var(--ziel); padding: 6px 12px; border: 0; border-top: 1px solid var(--grau-100);
    background: var(--grau-50); color: var(--gruen-text); font: inherit; font-weight: 600; cursor: pointer; touch-action: manipulation; }
.vg-aufklappen:hover { background: var(--gruen-hell); }
.vg-aufklappen:active { transform: var(--druck); }
@media (min-width: 900px) {
    .vg-eingaben { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .vg-zeile { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .vg-zelle.vg-b { border-left: 2px solid var(--grau-200); }
    .vg-gleich .vg-b, .vg-leer { display: grid; }
    .vg-leer { background: repeating-linear-gradient(135deg, var(--grau-50) 0 6px, var(--weiss) 6px 12px); }
}
@media (prefers-reduced-motion: reduce) {
    .vg-aufklappen:active { transform: none; }
}
@media (prefers-contrast: more) {
    .vg-diff, .ex-karte, .bi-eintrag, .fv-browser { border-color: var(--grau-700); }
    .vg-text del, .vg-text ins { outline: 1px solid currentColor; }
}

/* Drucken (Kalenderwochen, Feiertage): nur die Liste, ohne Kopf, Fuss, Werbung und Bedienelemente */
@media print {
    .kopf, .krumen, .hero, .faq, .weitere, .wannja-kasten, .fuss, .skip, .nicht-drucken, #it-ladefehler { display: none !important; }
    body { background: #fff; }
    .it-box { border: 0; padding: 0; }
    .it-tabelle { overflow: visible; max-height: none; border: 0; }
    .it-tabelle th { position: static; }
    .it-tabelle th, .it-tabelle td { padding: 3px 8px; }
    .it-tabelle tr.it-aktuell td { background: none; }
}

/* ---------- Swiss QR-Rechnung (/qr-rechnung) ---------- */
.qrr-knoepfe-oben { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; }
.qrr-formular { display: grid; gap: 16px; min-width: 0; }
.qrr-formular .it-box h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.qrr-optional { font-size: 0.9rem; font-weight: 400; color: var(--grau-600); }
.qrr-absatz { margin: -4px 0 12px; }
.qrr-zeile > .qrr-breit { flex: 3 1 12em; }
.qrr-zeile > .qrr-schmal { flex: 1 1 5.5em; }
.qrr-arten { margin-bottom: 16px; }
.qrr-arten input:disabled + label { color: var(--grau-600); opacity: 0.55; cursor: not-allowed; }
.qrr-arten input:disabled + label:active { transform: none; }
.qrr-hinweis { margin: -8px 0 12px; }
#qrr-referenz-feld .knopf-klein { margin-top: 8px; }
.qrr-vorschau { position: relative; margin: 4px 0 12px; border: 2px dashed var(--grau-200); border-radius: var(--radius-klein); background: var(--weiss);
    aspect-ratio: 2 / 1; overflow: hidden; display: grid; place-items: center; }
.qrr-vorschau img { display: block; width: 100%; height: auto; }
.qrr-vorschau:not(.qrr-vorschau-aus) { border-style: solid; }
.qrr-vorschau:not(.qrr-vorschau-aus) .qrr-vorschau-leer, .qrr-vorschau-aus img { display: none; }
.qrr-vorschau-leer { margin: 0; padding: 16px; text-align: center; color: var(--grau-600); font-size: 0.95rem; }
.qrr-status { margin: 0 0 12px; font-weight: 600; color: var(--tinte); }
.qrr-status:empty { display: none; }
.qrr-ausgabe .knopf { width: 100%; }
.qrr-ausgabe .qr-knoepfe { margin: 12px 0; }
@media (min-width: 900px) {
    .qrr-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
    .qrr-ausgabe { position: sticky; top: 16px; }
}