/* ==========================================================================
   Lokale Webfonts (DSGVO-konform, kein Google-Server)
   Alle Dateien liegen in /assets/fonts/
   ========================================================================== */

/* --------------------------------------------------------------
   Inter (Hauptschrift)
   -------------------------------------------------------------- */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('/assets/fonts/inter-v20-latin_latin-ext-300.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/inter-v20-latin_latin-ext-regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/inter-v20-latin_latin-ext-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/inter-v20-latin_latin-ext-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/inter-v20-latin_latin-ext-700.woff2') format('woff2');
}
/* Gewicht 800 wird bewusst NICHT geladen (25.09.2026):
   Es wurde im gesamten Dokument von genau einem Element benutzt und kostete
   rund 51 KB Download. Browser nutzen dafür automatisch den 700er Schnitt.
   Die Datei inter-v20-latin_latin-ext-800.woff2 liegt weiterhin in
   /assets/fonts/ – dieser Block muss nur wieder eingesetzt werden, um
   Extrabold erneut zu aktivieren. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('/assets/fonts/inter-v20-latin_latin-ext-900.woff2') format('woff2');
}

/* --------------------------------------------------------------
   Roboto
   -------------------------------------------------------------- */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('/assets/fonts/roboto-v51-latin_latin-ext-300.woff2') format('woff2');
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/roboto-v51-latin_latin-ext-regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/roboto-v51-latin_latin-ext-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/roboto-v51-latin_latin-ext-700.woff2') format('woff2');
}

/* --------------------------------------------------------------
   Playfair Display
   -------------------------------------------------------------- */
@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/playfair-display-v40-latin_latin-ext-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/playfair-display-v40-latin_latin-ext-700.woff2') format('woff2');
}

/* --------------------------------------------------------------
   Merriweather
   -------------------------------------------------------------- */
@font-face {
    font-family: 'Merriweather';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('/assets/fonts/merriweather-v33-latin_latin-ext-300.woff2') format('woff2');
}
@font-face {
    font-family: 'Merriweather';
    font-style: italic;
    font-weight: 300;
    font-display: swap;
    src: url('/assets/fonts/merriweather-v33-latin_latin-ext-300italic.woff2') format('woff2');
}
@font-face {
    font-family: 'Merriweather';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/merriweather-v33-latin_latin-ext-regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Merriweather';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/merriweather-v33-latin_latin-ext-700.woff2') format('woff2');
}

/* --------------------------------------------------------------
   JetBrains Mono
   -------------------------------------------------------------- */
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/jetbrains-mono-v24-latin_latin-ext-regular.woff2') format('woff2');
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/jetbrains-mono-v24-latin_latin-ext-500.woff2') format('woff2');
}


/* ==========================================================================
   TwiceDocs — Custom Styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   Print-Regeln: exakte DIN-5008-Ausgabe beim Browser-Druck
   -------------------------------------------------------------------------- */
@media print {
    body {
        background: white !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .no-print {
        display: none !important;
    }
    /* Kopf- und Fußleiste sind Bedienoberfläche, kein Dokumentinhalt */
    header,
    footer {
        display: none !important;
    }
    /* Beim Drucken wird immer der Briefkopf ausgegeben, nie die Startseite.
       Die Startseite ist deshalb unten als no-print markiert. Wichtig: Damit
       das auch von der Startseite aus funktioniert, bereitet script.js die
       Vorschau über den beforeprint-Auslöser vor – sonst wäre die Seite leer. */
    #generatorView {
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    #landingView,
    section[aria-label="Control Panel"],
    .preview-toolbar,
    #studioKnowledgeBase {
        display: none !important;
    }
    #previewViewport,
    #previewScaledBox,
    #previewContainer {
        transform: none !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }
    .page-sheet {
        box-shadow: none !important;
        margin: 0 !important;
    }
}

/* --------------------------------------------------------------------------
   Seitenformate (DIN A4 & US Letter)
   -------------------------------------------------------------------------- */
.page-a4 {
    width: 210mm;
    height: 297mm;
    min-height: 297mm;
    max-height: 297mm;
    background: #ffffff;
    box-shadow: 0 20px 40px -12px rgba(34, 39, 47, 0.15), 0 0 0 1px rgba(34, 39, 47, 0.08);
    margin: 0 auto;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
}

.page-us-letter {
    width: 8.5in;
    height: 11in;
    min-height: 11in;
    max-height: 11in;
    background: #ffffff;
    box-shadow: 0 20px 40px -12px rgba(34, 39, 47, 0.15), 0 0 0 1px rgba(34, 39, 47, 0.08);
    margin: 0 auto;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   DIN 5008 Falz- & Lochmarken
   -------------------------------------------------------------------------- */
.din-mark {
    position: absolute;
    left: 0;
    height: 1px;
    background-color: #94a3b8;
    pointer-events: none;
    z-index: 25;
}

/* --------------------------------------------------------------------------
   Fensterkuvert-Hilfslinie
   WICHTIG: Diese Linie ist bewusst als "outline" umgesetzt und nicht als
   "border". html2canvas rendert outline nicht — dadurch erscheint die
   Hilfslinie nur in der Vorschau und niemals im exportierten PDF. Genau das
   ist gewollt (die Beschriftung lautet "in preview").
   Wer sie auf "border" oder "box-shadow" umstellt, bekommt sie ungewollt in
   jede Druckdatei. Geprüft am 25.09.2026: Ein Export mit und ohne Hilfslinie
   ist pixelidentisch.
   -------------------------------------------------------------------------- */
.window-envelope-guide {
    outline: 1px dashed rgba(27, 108, 168, 0.4);
    outline-offset: 1px;
}

/* --------------------------------------------------------------------------
   Scrollbars
   -------------------------------------------------------------------------- */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #f8fafc;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* --------------------------------------------------------------------------
   Barrierefreiheit: Fokus-Ringe
   -------------------------------------------------------------------------- */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid #1B6CA8 !important;
    outline-offset: 2px !important;
}

/* ==========================================================================
   Barrierefreiheit: Kontrast-Verbesserung (WCAG 2.1 AA)
   Hebt text-slate-400 und text-slate-500 auf WCAG-AA-konforme Grautöne an
   ========================================================================== */

/* text-slate-400 → slate-500 (Kontrast von 2.8:1 auf 4.6:1) */
.text-slate-400 {
    color: #64748b !important;
}

/* text-slate-500 → slate-600 (Kontrast von 4.6:1 auf 6.5:1) */
.text-slate-500 {
    color: #475569 !important;
}



/* ==========================================================================
   Cursor-Pointer für klickbare Elemente
   (Tailwind v4 setzt das nicht mehr automatisch)
   ========================================================================== */
button:not(:disabled),
[role="button"]:not([aria-disabled="true"]),
summary,
a[href],
select,
label[for],
input[type="checkbox"]:not(:disabled),
input[type="radio"]:not(:disabled),
input[type="file"]:not(:disabled) {
    cursor: pointer;
}

button:disabled,
input:disabled,
[aria-disabled="true"] {
    cursor: not-allowed;
}

/* Text-Inputs behalten den Text-Cursor */
input[type="text"],
input[type="email"],
input[type="color"],
textarea {
    cursor: text;
}

input[type="color"] {
    cursor: pointer;
}
/* ==========================================================================
   Wissensblöcke: Layout-Absicherung (Überschrift über Content)
   ========================================================================== */
#kbContainer details {
    display: block;
    width: 100%;
}

#kbContainer details > summary {
    display: flex;
    width: 100%;
    box-sizing: border-box;
}

#kbContainer details > summary::-webkit-details-marker {
    display: none;
}
/* ==========================================================================
   Studio-Lesbarkeit: Kleinste Schriftgrößen anheben
   Tailwind-Klassen text-[10px], text-[10.5px], text-[11px] werden auf 12/12.5 px gesetzt
   ========================================================================== */
.text-\[10px\] { font-size: 12px !important; line-height: 1.4; }
.text-\[10\.5px\] { font-size: 12px !important; line-height: 1.4; }
.text-\[11px\] { font-size: 12.5px !important; line-height: 1.4; }
/* ==========================================================================
   Studio: Umschaltung zwischen Eingabe und Vorschau auf schmalen Geräten
   Bewusst über eine Klasse am Raster und eine Medienabfrage statt über die
   Klasse "hidden" an den Spalten: Ein per JavaScript gesetztes "hidden" an
   #panelControls blieb beim Verbreitern des Fensters hängen – die Eingabe-
   spalte war dann verschwunden und kam erst nach dem Neuladen der Seite
   zurück. Oberhalb von 1024 px greift keine dieser Regeln, beide Spalten sind
   dort immer sichtbar. Ohne Klasse (Ausgangszustand) ist ebenfalls beides
   sichtbar, also wie bisher untereinander.
   ========================================================================== */
@media (max-width: 1023px) {
    .mob-view-preview #panelControls { display: none; }
    .mob-view-form #panelPreview { display: none; }
}

/* ==========================================================================
   Ratgeber-Verweise auf der deutschen Startseite
   Eigene Klasse statt Tailwind-Utilities, weil tailwind-build.css nur die im
   Studio verwendeten Klassen enthält. Diese Datei ist nicht wegoptimiert.
   ========================================================================== */
.td-ratgeber {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 24px 26px;
    /* Breite wie die Produktkacheln weiter oben auf der Seite (gemessen:
       1216 px). Vorher zog sich der Kasten über die volle Fensterbreite, was
       neben den zentrierten Abschnitten unnatürlich aussah. */
    max-width: 1216px;
    width: calc(100% - 48px);
    margin: 0 auto 48px;
}
.td-ratgeber h2 {
    font-size: 17px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 4px;
}
.td-ratgeber-sub {
    font-size: 12px;
    color: #64748b;
    margin: 0 0 18px;
}
.td-ratgeber-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 10px;
}
.td-ratgeber-list li { margin: 0; }
.td-ratgeber-list a {
    display: block;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 11px 13px;
    text-decoration: none;
    transition: border-color .15s, background .15s;
}
.td-ratgeber-list a:hover {
    border-color: #1B6CA8;
    background: #f8fafc;
}
.td-ratgeber-list strong {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 2px;
}
.td-ratgeber-list span {
    display: block;
    font-size: 10.5px;
    color: #64748b;
    line-height: 1.45;
}
.td-ratgeber-more {
    margin: 16px 0 0;
    font-size: 12px;
}
.td-ratgeber-more a {
    color: #1B6CA8;
    font-weight: 600;
    text-decoration: none;
}
.td-ratgeber-more a:hover { text-decoration: underline; }