/* =====================================================================
   THEME: Werkstatt — „Werkbank-Almanach"
   Vision G aus Claude Design (2026-05-20) als 18. Theme + neuer Default.
   Brand-Tokens aus css/brand-tokens.css (--ink, --paper, --sawdust, …).
   Strukturelle Bereicherung über data-num / data-marker / data-werkstatt-only
   Hooks in index.php — andere Themes ignorieren diese sauber.
   ===================================================================== */

/* ===================== 1 — TOKEN-LAYER ===================== */
[data-theme="werkstatt"] {
    /* Hintergründe / Vordergrund */
    --bg:               var(--paper);
    --bg-alt:           var(--paper-2);
    --bg-card:          var(--paper-2);
    --fg:               var(--ink);
    --fg-muted:         var(--mute);

    /* Akzent */
    --accent:           var(--sawdust);
    --accent-dark:      var(--sawdust-ink);
    --accent-contrast:  var(--paper);
    --accent-glow:      rgba(217, 164, 65, 0.18);
    --border:           var(--rule-soft);

    /* Schriften */
    --font-head:        var(--serif);
    --font-body:        var(--serif);
    --font-weight-head: 380;
    --font-weight-body: 400;

    /* Form */
    --radius:    0;
    --radius-sm: 0;
    --stroke:    1px;
    --btn-shape: 0;

    /* Spacing/Effects */
    --section-pad:  clamp(4rem, 9vw, 7rem);
    --photo-filter: none;
    --shadow-card:  0 1px 0 var(--rule-soft);
    --shadow-lg:    var(--shadow-press);

    /* Focus-Ring */
    --focus-ring:        var(--sawdust-ink);
    --focus-ring-offset: 2px;
}

/* ===================== 2 — BODY + GRAIN ===================== */
[data-theme="werkstatt"] body {
    background-color: var(--paper);
    /* dezenter Papier-Grain (SVG-Inline, ~15 KB Daten-URI) */
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.10  0 0 0 0 0.08  0 0 0 0 0.07  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.32'/></svg>");
    background-size: 240px 240px;
    font-feature-settings: "kern", "liga", "onum";
}

/* ===================== 3 — TYPO ===================== */
[data-theme="werkstatt"] h1,
[data-theme="werkstatt"] h2,
[data-theme="werkstatt"] h3,
[data-theme="werkstatt"] h4 {
    font-family: var(--serif);
    color: var(--ink);
    text-wrap: balance;
    letter-spacing: -0.02em;
    line-height: 1.02;
    hyphens: none;
    overflow-wrap: normal;
    word-break: keep-all;
    font-variation-settings: "opsz" 14, "wght" 420;
}
[data-theme="werkstatt"] h1 {
    font-size: clamp(38px, 8vw, 96px);
    font-weight: 360;
    letter-spacing: -0.035em;
    line-height: 0.96;
    font-variation-settings: "opsz" 8, "wght" 360;
}
[data-theme="werkstatt"] h2 {
    font-size: clamp(28px, 4vw, 52px);
    font-weight: 400;
    letter-spacing: -0.025em;
    line-height: 1.0;
    font-variation-settings: "opsz" 11, "wght" 400;
}
[data-theme="werkstatt"] h3 {
    font-size: clamp(22px, 2.5vw, 32px);
    font-weight: 440;
    letter-spacing: -0.018em;
    line-height: 1.1;
    font-variation-settings: "opsz" 12, "wght" 440;
}
[data-theme="werkstatt"] p {
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.6;
    color: var(--ink-2);
    font-variation-settings: "opsz" 22, "wght" 400;
    max-width: 62ch;
}
[data-theme="werkstatt"] .narrow,
[data-theme="werkstatt"] .narrow p { max-width: 60ch; }

/* Headline-Akzent: „Möbelstücke." in Sawdust, niemals italic */
[data-theme="werkstatt"] .accent,
[data-theme="werkstatt"] h1 .accent,
[data-theme="werkstatt"] h2 .accent,
[data-theme="werkstatt"] h3 .accent { color: var(--sawdust-ink); }
[data-theme="werkstatt"] .nowrap { white-space: nowrap; }

/* Listen (default ul/li) */
[data-theme="werkstatt"] ul li {
    font-family: var(--serif);
    color: var(--ink-2);
    line-height: 1.55;
}

/* Links: editorial-Underline mit rule-soft, Sawdust on Hover */
[data-theme="werkstatt"] a {
    color: var(--ink);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--rule-soft);
    text-underline-offset: 4px;
    transition: text-decoration-color var(--t-fast, 120ms) ease;
}
[data-theme="werkstatt"] a:hover { text-decoration-color: var(--ink); }

/* ::selection */
[data-theme="werkstatt"] ::selection { background: var(--sawdust); color: var(--ink); }

/* ===================== 4 — SECTION-GRID (Marker/Body/Meta) ===================== */
/* Sektionen mit data-marker werden zur 3-Spalten-Editorial-Bühne.
   Marker- und Meta-Aside sind <aside data-werkstatt-only>, also in
   anderen Themes versteckt. In Werkstatt erscheinen sie als Rails. */
[data-theme="werkstatt"] section[data-marker] {
    display: grid;
    grid-template-columns: minmax(160px, 200px) minmax(0, 1fr) minmax(180px, 220px);
    column-gap: 28px;
    padding: 88px clamp(1rem, 4vw, 2rem) 96px;
    border-top: 1px solid var(--ink);
    max-width: 1240px;  /* Brand-Norm (seitenschreiner-design-Skill) */
    margin: 0 auto;
    background: transparent !important;     /* override inline-styles in index.php */
}
[data-theme="werkstatt"] section[data-marker] > .container {
    grid-column: 2;
    max-width: none;
    padding: 0;
    margin: 0;
}
[data-theme="werkstatt"] section[data-marker]:first-of-type { border-top: none; }

/* Sektionen mit Marker-Rail, aber OHNE Meta-Rail (rechts): 2 Spalten statt 3 —
   Marker | breiter Body. Die Meta-Rails wurden aus Leistungen + Pakete entfernt
   (wirkten als schwebende dritte Spalte „hinter der Kachel"). Betrifft auch
   Arbeiten + Über mich, die nie eine Meta-Rail hatten — vorher lief deren Body
   unnötig schmal mit leerer 3. Spalte.
   Nur ≥1281px — darunter greift der 1-Spalten-Stack (@media max-width:1280). */
@media (min-width: 1281px) {
    [data-theme="werkstatt"] section[data-marker]:has(.section-marker):not(:has(.section-meta)) {
        grid-template-columns: minmax(160px, 200px) minmax(0, 1fr);
    }
}

/* Marker-Rail (links) */
[data-theme="werkstatt"] .section-marker {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-self: start;
}
[data-theme="werkstatt"] .section-marker .sig {
    font-family: var(--serif);
    font-size: 28px;
    font-weight: 380;
    letter-spacing: -0.01em;
    color: var(--ink);
    line-height: 1;
    font-variation-settings: "opsz" 14, "wght" 380;
}
[data-theme="werkstatt"] .section-marker .sig::before {
    content: "№ ";
    font-size: 14px;
    vertical-align: 0.6em;
    color: var(--mute);
    margin-right: 4px;
}
[data-theme="werkstatt"] .section-marker .name {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink);
    font-weight: 600;
}
[data-theme="werkstatt"] .section-marker .sub {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mute);
    line-height: 1.55;
    max-width: 150px;
}

/* Meta-Rail (rechts) — sticky, mit field-list (Specimens).
   top respektiert den fixed Header (var(--header-h) aus brand-tokens.css)
   plus 24px Luft, sonst wird die oberste Specs-Zeile beim Scrollen verdeckt. */
[data-theme="werkstatt"] .section-meta {
    grid-column: 3;
    align-self: start;
    position: sticky;
    top: calc(var(--header-h, 64px) + 24px);
}
[data-theme="werkstatt"] .section-meta .meta-eyebrow {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--mute);
    font-weight: 500;
    margin-bottom: 8px;
}
[data-theme="werkstatt"] .field-list { border-top: 1px solid var(--ink); }
[data-theme="werkstatt"] .field-list .row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--rule-soft);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
[data-theme="werkstatt"] .field-list .row .k { color: var(--mute); font-weight: 400; }
[data-theme="werkstatt"] .field-list .row .v { color: var(--ink); font-weight: 500; text-align: right; }
[data-theme="werkstatt"] .field-list .tabular { font-feature-settings: "tnum"; }

/* Sektion ohne Marker-Asides: behält normales Layout (1 Spalte).
   minmax(0, 1fr) statt nur 1fr — verhindert, dass min-content-Inhalt
   (z.B. der Stil-Spektrum-Strip) den Grid-Track auf >viewport bläht. */
[data-theme="werkstatt"] section[data-marker]:not(:has(.section-marker)) {
    grid-template-columns: minmax(0, 1fr);
    padding-left: clamp(1rem, 4vw, 2rem);
    padding-right: clamp(1rem, 4vw, 2rem);
}
[data-theme="werkstatt"] section[data-marker]:not(:has(.section-marker)) > .container { grid-column: 1; }

/* ===================== 5 — NUMERO-EYEBROWS ===================== */
[data-theme="werkstatt"] .section-eyebrow,
[data-theme="werkstatt"] .hero-eyebrow {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--mute);
    font-weight: 500;
}
[data-theme="werkstatt"] .section-eyebrow[data-num]::before {
    content: "№ " attr(data-num) " · ";
    color: var(--sawdust-ink);
    font-weight: 600;
}

/* Section-head bekommt Hairline-Trenner */
[data-theme="werkstatt"] .section-head {
    text-align: left;
    border-bottom: 1px solid var(--rule-soft);
    padding-bottom: 28px;
    margin-bottom: 44px;
    max-width: none;
}
[data-theme="werkstatt"] .section-head h2 { margin: 14px 0 12px; }
[data-theme="werkstatt"] .section-head .narrow { margin: 0; max-width: 60ch; }

/* ===================== 6 — BUTTONS (Press-Block-Shadow) ===================== */
[data-theme="werkstatt"] .btn,
[data-theme="werkstatt"] .btn-primary,
[data-theme="werkstatt"] .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 500;
    padding: 16px 22px;
    border: 1px solid var(--ink);
    border-radius: 0;
    box-shadow: var(--shadow-press);
    text-decoration: none;
    transform: translate(0, 0);
    transition: transform var(--t-base, 200ms) ease, box-shadow var(--t-base, 200ms) ease, background var(--t-base, 200ms) ease;
}
[data-theme="werkstatt"] .btn:hover,
[data-theme="werkstatt"] .btn-primary:hover,
[data-theme="werkstatt"] .btn-secondary:hover {
    transform: translate(3px, 3px);
    box-shadow: 0 0 0 var(--ink);
    background: var(--ink);
    color: var(--paper);
    text-decoration: none;
}
[data-theme="werkstatt"] .btn-secondary {
    background: var(--paper-2);
    color: var(--ink);
    box-shadow: 3px 3px 0 var(--sawdust);
}
[data-theme="werkstatt"] .btn-secondary:hover { box-shadow: 0 0 0 var(--sawdust); background: var(--paper-2); color: var(--ink); }

/* Hero-CTA-Secondary (Link-Stil mit Pfeil) */
[data-theme="werkstatt"] .hero-cta-secondary {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink);
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--ink);
    padding: 0 0 6px;
    background: none;
    box-shadow: none;
    transform: none;
    transition: gap var(--t-base, 200ms) ease;
}
[data-theme="werkstatt"] .hero-cta-secondary:hover {
    gap: 16px;
    background: none;
    color: var(--ink);
    transform: none;
    box-shadow: none;
}

/* ===================== 7 — HERO ===================== */
[data-theme="werkstatt"] .hero {
    padding-top: 64px;
    padding-bottom: 110px;
    border-top: none;
    background: transparent;
    position: relative;
    max-width: 1240px;  /* Brand-Norm (seitenschreiner-design-Skill) */
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(160px, 200px) minmax(0, 1fr) minmax(180px, 220px);
    column-gap: 28px;
}
[data-theme="werkstatt"] .hero > .container {
    grid-column: 2;
    max-width: none;
    padding: 0;
    margin: 0;
}
[data-theme="werkstatt"] .hero .hero-inner {
    display: flex;
    flex-direction: column;
    gap: 28px;
    grid-template-columns: none !important;
}
/* Portrait-Wrap im Werkstatt-Hero versteckt — Porträt wandert in den About-Block. */
[data-theme="werkstatt"] .hero .hero-portrait-wrap { display: none; }
[data-theme="werkstatt"] .hero-head { max-width: none; }
[data-theme="werkstatt"] .hero-eyebrow-strip {
    display: flex;
    gap: 14px;
    align-items: baseline;
    border-bottom: 1px solid var(--rule-soft);
    padding-bottom: 10px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mute);
    font-weight: 500;
    flex-wrap: wrap;
}
[data-theme="werkstatt"] .hero-eyebrow-strip > .lead-num { color: var(--sawdust-ink); }
[data-theme="werkstatt"] .hero-eyebrow-strip > .pushright { margin-left: auto; }

[data-theme="werkstatt"] .hero h1 {
    font-size: clamp(38px, 8vw, 124px);
    font-weight: 360;
    letter-spacing: -0.038em;
    line-height: 0.96;
    margin: 0;
    font-variation-settings: "opsz" 8, "wght" 360;
}
[data-theme="werkstatt"] .hero-lead {
    font-family: var(--serif);
    font-size: clamp(20px, 1.6vw, 23px);
    line-height: 1.5;
    font-weight: 380;
    color: var(--ink-2);
    max-width: 56ch;
    margin: 4px 0 0;
    font-variation-settings: "opsz" 22, "wght" 380;
}
[data-theme="werkstatt"] .hero-cta {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
    margin-top: 4px;
}
/* Hero-Peek im Werkstatt-Stil */
[data-theme="werkstatt"] .hero-peek {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mute);
    background: none;
    border: none;
    padding: 12px 0 0;
}

/* Hero Meta-Stack (Status + Werkmeister) */
[data-theme="werkstatt"] .hero-meta-stack {
    grid-column: 3;
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-self: start;
    position: sticky;
    top: calc(var(--header-h, 64px) + 24px);
}
[data-theme="werkstatt"] .hero-status {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
[data-theme="werkstatt"] .hero-status .status-dot {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink);
    font-weight: 500;
}
[data-theme="werkstatt"] .hero-status .status-dot::before {
    content: "";
    width: 8px;
    height: 8px;
    background: var(--sawdust);
    display: inline-block;
}
[data-theme="werkstatt"] .hero-status .detail {
    font-family: var(--serif);
    font-size: 14px;
    color: var(--mute);
    line-height: 1.55;
    max-width: 200px;
}

/* Hero L-Crop-Marks (4 Ecken) — über ::before/::after auf .hero */
[data-theme="werkstatt"] .hero { isolation: isolate; }
[data-theme="werkstatt"] .hero::before,
[data-theme="werkstatt"] .hero::after {
    content: "";
    position: absolute;
    width: 28px;
    height: 28px;
    pointer-events: none;
    z-index: 1;
    background:
        linear-gradient(var(--sawdust), var(--sawdust)) top    left  / 28px 1.6px no-repeat,
        linear-gradient(var(--sawdust), var(--sawdust)) top    left  / 1.6px 28px no-repeat;
}
[data-theme="werkstatt"] .hero::before { top: 28px; left: clamp(1rem, 4vw, 2rem); }
[data-theme="werkstatt"] .hero::after  { top: 28px; right: clamp(1rem, 4vw, 2rem); transform: scaleX(-1); }

/* ===================== 8 — LEISTUNGEN als Specimen-Liste ===================== */
[data-theme="werkstatt"] #leistungen .card-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--ink);
    counter-reset: specimen;
}
/* Specimen-Card: 3 Spalten oben (num | head | text), Stats stacken UNTER head+text.
   Vorher waren Stats als 4. Spalte rechts (200px) — bei Section max-width 1280
   blieb für Text nur 130–175px, was den Body vertikal ausstreckte und Lesbarkeit zerstörte.
   Stats unten als horizontale Mono-Liste hält das Werkstatt-Idiom und gibt Text ~400px Lesbreite. */
[data-theme="werkstatt"] #leistungen .card {
    display: grid;
    grid-template-columns: 80px minmax(200px, max-content) minmax(0, 1fr);
    grid-template-areas:
        "num head text"
        ".   stats stats";
    column-gap: 28px;
    row-gap: 16px;
    padding: 36px 0;
    border-bottom: 1px solid var(--ink);
    background: none;
    box-shadow: none;
    border-radius: 0;
    counter-increment: specimen;
    align-items: start;
    transition: background var(--t-base, 200ms) ease;
    transform: none !important;
}
[data-theme="werkstatt"] #leistungen .card:hover {
    background:
        linear-gradient(to right, transparent 0, rgba(217,164,65,0.06) 12%, rgba(217,164,65,0.06) 88%, transparent 100%);
    transform: none !important;
}
[data-theme="werkstatt"] #leistungen .card-icon {
    grid-area: num;
    width: auto; height: auto;
    margin: 0;
    background: none;
    border: 0;
    border-radius: 0;
    /* Original-Icon (Diamant-Zeichen als Text) ausblenden */
    font-size: 0;
    color: var(--ink);
    line-height: 0.9;
    transition: color var(--t-base, 200ms) ease;
}
[data-theme="werkstatt"] #leistungen .card-icon::before {
    content: counter(specimen, decimal-leading-zero);
    font-family: var(--serif);
    font-size: 56px;
    font-weight: 320;
    letter-spacing: -0.04em;
    font-feature-settings: "tnum";
    font-variation-settings: "opsz" 10, "wght" 320;
    color: inherit;
    display: block;
}
[data-theme="werkstatt"] #leistungen .card:hover .card-icon { color: var(--sawdust-ink); }

[data-theme="werkstatt"] #leistungen .card .card-kind {
    display: block;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--mute);
    font-weight: 500;
    margin-bottom: 8px;
}
[data-theme="werkstatt"] #leistungen .card h3 {
    margin: 0;
    font-size: 32px;
    font-weight: 440;
    letter-spacing: -0.018em;
    line-height: 1.05;
    font-variation-settings: "opsz" 12, "wght" 440;
    overflow-wrap: anywhere;
}
[data-theme="werkstatt"] #leistungen .card .card-head {
    grid-area: head;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
[data-theme="werkstatt"] #leistungen .card > p {
    grid-area: text;
    font-size: 17px;
    line-height: 1.55;
    color: var(--ink-2);
    max-width: 56ch;
    margin: 0;
    font-variation-settings: "opsz" 22, "wght" 400;
}
/* Stats unten — horizontale Mono-Liste, kompakt, nimmt nur soviel Höhe wie nötig.
   Werkstatt-Idiom: rule-soft Trenner oben, mono-caps key/value-Paare nebeneinander. */
[data-theme="werkstatt"] #leistungen .card .card-stats {
    grid-area: stats;
    border-top: 1px solid var(--rule-soft);
    margin: 0;
    padding: 12px 0 0;
    display: flex;
    flex-wrap: wrap;
    column-gap: 32px;
    row-gap: 8px;
}
[data-theme="werkstatt"] #leistungen .card .card-stats .row {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 0;
    border-bottom: 0;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
[data-theme="werkstatt"] #leistungen .card .card-stats .k { color: var(--mute); font-weight: 400; }
[data-theme="werkstatt"] #leistungen .card .card-stats .v { color: var(--ink); font-weight: 500; }

/* ===================== 9 — PAKETE als Ledger ===================== */
/* KEIN padding:0 mehr. Das schob die ganze Pakete-Sektion 32px nach links (Inhalt
   bei 320 statt 352) und damit aus der Marker-Rail-Gruppe (Leistungen/Arbeiten/
   Über) heraus. #pakete nutzt jetzt die Standard-section[data-marker]-Padding und
   fluchtet sauber. Der Ledger sitzt damit in der Content-Spalte wie jede Sektion. */
[data-theme="werkstatt"] #pakete .card-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    counter-reset: paket;
    overflow-x: clip;
}
[data-theme="werkstatt"] #pakete .paket {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) minmax(220px, auto);
    /* Preis (row1) und CTA (row2) bekommen je eine eigene Zeile in Spalte 3 —
       Kopf spannt beide. Sonst teilen sich price+cta eine Zelle (align start/end)
       und kollidieren, wenn der Kopf nicht hoch genug ist (Desktop-Bug). */
    grid-template-areas:
        "num  head   price"
        "num  head   cta"
        ".    specs  specs";
    column-gap: 28px;
    row-gap: 22px;
    padding: 32px 24px;
    border-bottom: 1px solid var(--ink);
    border-top: 0;
    border-left: 0;
    border-right: 0;
    background: none;
    box-shadow: none;
    border-radius: 0;
    counter-increment: paket;
    position: relative;
    transform: none !important;
    overflow: visible;
}
[data-theme="werkstatt"] #pakete .paket::before {
    content: counter(paket, decimal-leading-zero);
    grid-area: num;
    font-family: var(--serif);
    font-size: 48px;
    font-weight: 320;
    line-height: 1;
    color: var(--ink);
    font-feature-settings: "tnum";
    font-variation-settings: "opsz" 10, "wght" 320;
}
[data-theme="werkstatt"] #pakete .paket:last-child { border-bottom: 0; }
/* featured: Sawdust-Indicator-Bar an der linken Karten-Kante (innerhalb).
   Frühere Version hatte margin: 0 -28px für einen ausbrechenden Ledger-Look,
   das hat bei Viewports < 1100px horizontalen Overflow erzeugt.
   padding-right matched .paket-default (24) — sonst rutscht der Preis bei
   breiten Viewports an die rechte Karten-Kante. */
[data-theme="werkstatt"] #pakete .paket.featured {
    background: var(--paper-2);
    padding-left: 32px;
    padding-right: 24px;
}
[data-theme="werkstatt"] #pakete .paket.featured::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--sawdust);
}
/* paket-head ist Grid-Item in "head"-Area, badge/name/fit/scope stacken darin */
[data-theme="werkstatt"] #pakete .paket .paket-head {
    grid-area: head;
    display: flex;
    flex-direction: column;
    gap: 0;
}
[data-theme="werkstatt"] #pakete .paket .paket-badge {
    display: inline-block;
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 600;
    /* Gefüllter Ink-Stempel: paper auf ink = 14.6:1 (vorher sawdust-ink auf paper-3 = 4.18:1,
       unter AA für 9.5px). „Meistgewählt" soll auffallen — der dunkle Stempel sticht klar heraus,
       der Sawdust-Akzent der Card kommt über die Bar links. */
    color: var(--paper);
    background: var(--ink);
    padding: 4px 8px;
    border: 1px solid var(--ink);
    align-self: flex-start;
    width: max-content;
    margin: 0 0 6px;
    border-radius: 0;
    top: auto;
    right: auto;
    /* Basis-.paket-badge (style.css) ist position:absolute; left:50%; transform:translateX(-50%).
       Werkstatt macht den Badge zum statischen Inline-Stempel — dabei MUSS transform+left
       mit zurueckgesetzt werden, sonst schiebt das geerbte translateX(-50%) ihn ~55px nach
       links UEBER die Paket-Nummer (auf Desktop sichtbar). */
    position: static;
    transform: none;
    left: auto;
    box-shadow: none;
}
[data-theme="werkstatt"] #pakete .paket .paket-name {
    font-family: var(--serif);
    font-size: 36px;
    font-weight: 440;
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: var(--ink);
    margin: 0 0 4px;
    font-variation-settings: "opsz" 11, "wght" 440;
    text-transform: none;
}
[data-theme="werkstatt"] #pakete .paket .paket-fit {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mute);
    font-weight: 500;
    margin: 0 0 10px;
}
[data-theme="werkstatt"] #pakete .paket .paket-scope {
    font-family: var(--serif);
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink-2);
    max-width: 44ch;
    margin: 4px 0 0;
}
/* Pakete-Specs nutzt das bestehende <ul><li>-Markup, NICHT umgebaut.
   Werkstatt rendert das als horizontale Spec-Liste mit Sawdust-Hash-Bullets. */
[data-theme="werkstatt"] #pakete .paket ul {
    grid-area: specs;
    border-top: 1px solid var(--rule-soft);
    padding: 16px 0 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    column-gap: 28px;
    row-gap: 9px;
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.04em;
    color: var(--ink-2);
    line-height: 1.4;
}
[data-theme="werkstatt"] #pakete .paket ul > li {
    position: relative;
    padding: 0 0 0 14px;
    white-space: normal;
    margin: 0;
    background: none;
    border: 0;
}
[data-theme="werkstatt"] #pakete .paket ul > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 8px;
    height: 1.6px;
    background: var(--sawdust);
}
/* Optionaler spec-h Header — kann im Markup via <li class="spec-h"> ergänzt werden */
[data-theme="werkstatt"] #pakete .paket ul > li.spec-h {
    width: 100%;
    padding: 0;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mute);
    margin-bottom: 4px;
    font-weight: 500;
}
[data-theme="werkstatt"] #pakete .paket ul > li.spec-h::before { content: none; }
/* paket-price */
[data-theme="werkstatt"] #pakete .paket .paket-price {
    grid-area: price;
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
    min-width: 200px;
    margin: 0;
}
[data-theme="werkstatt"] #pakete .paket .paket-price-big {
    font-family: var(--serif);
    font-size: clamp(44px, 4.4vw, 64px);
    font-weight: 360;
    letter-spacing: -0.028em;
    line-height: 0.95;
    color: var(--ink);
    font-feature-settings: "tnum", "lnum";
    font-variation-settings: "opsz" 10, "wght" 360;
    white-space: nowrap;
}
[data-theme="werkstatt"] #pakete .paket .paket-price-unit,
[data-theme="werkstatt"] #pakete .paket .paket-price-month {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.10em;
    color: var(--ink-2);
    text-transform: none;
}
[data-theme="werkstatt"] #pakete .paket .paket-price-unit { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute); font-weight: 500; order: -1; }
[data-theme="werkstatt"] #pakete .paket .paket-price-month { margin-top: 4px; }
[data-theme="werkstatt"] #pakete .paket .btn,
[data-theme="werkstatt"] #pakete .paket .btn-primary,
[data-theme="werkstatt"] #pakete .paket .btn-secondary {
    margin-top: 14px;
}
/* CTA-Wrapper sitzt in der price-Area, rechtsbündig unter dem Preis.
   In anderen Themes ist .paket-cta block-flow am Card-Ende (style.css). */
[data-theme="werkstatt"] #pakete .paket .paket-cta {
    grid-area: cta;
    align-self: start;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    margin: 0;
}
[data-theme="werkstatt"] #pakete .paket .paket-cta .btn { width: max-content; }
[data-theme="werkstatt"] #pakete .paket .paket-cta-ask {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mute);
    text-decoration: underline;
    text-decoration-color: var(--rule-soft);
    text-underline-offset: 4px;
    padding: 6px 2px;
}
[data-theme="werkstatt"] #pakete .paket .paket-cta-ask:hover { color: var(--ink); text-decoration-color: var(--ink); }
/* Im 1-Spalten-Stack (≤1280) linksbündig */
@media (max-width: 1280px) {
    [data-theme="werkstatt"] #pakete .paket .paket-cta { align-items: flex-start; }
}

/* Premium-Upgrade + Trust-Strip im Werkstatt-Stil */
[data-theme="werkstatt"] #pakete .premium-upgrade {
    border: 1px solid var(--ink);
    background: var(--paper-2);
    border-radius: 0;
    margin: 32px 0 0;
    padding: 28px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: center;
    box-shadow: none;
}
[data-theme="werkstatt"] #pakete .premium-upgrade-eyebrow {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--sawdust-ink);
}
[data-theme="werkstatt"] #pakete .paket-trust {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--ink-2);
}
[data-theme="werkstatt"] #pakete .paket-trust strong {
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ink);
}

/* ===================== 10 — ARBEITEN als asymmetric Specimen-Grid ===================== */
[data-theme="werkstatt"] #arbeiten .works {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 28px;
}
[data-theme="werkstatt"] #arbeiten .works > .work-card:first-child { grid-row: span 2; }
[data-theme="werkstatt"] #arbeiten .work-card {
    border: 1px solid var(--ink);
    background: var(--paper-2);
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    transform: none !important;
}
[data-theme="werkstatt"] #arbeiten .work-card .work-thumb {
    background: var(--paper-3);
    background-image:
        repeating-linear-gradient(
            135deg,
            transparent 0,
            transparent 14px,
            rgba(115, 98, 83, 0.10) 14px,
            rgba(115, 98, 83, 0.10) 15px
        );
    aspect-ratio: 4/3;
    border-bottom: 1px solid var(--ink);
    position: relative;
    margin: 0;
}
[data-theme="werkstatt"] #arbeiten .works > .work-card:first-child .work-thumb { aspect-ratio: 16/11; }
[data-theme="werkstatt"] #arbeiten .work-card .work-thumb img {
    width: 100%; height: 100%; object-fit: cover;
}
[data-theme="werkstatt"] #arbeiten .work-card .work-body {
    padding: 18px 22px;
    border-top: 0;
}
[data-theme="werkstatt"] #arbeiten .work-card .work-meta {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: var(--mute);
    font-weight: 500;
}
[data-theme="werkstatt"] #arbeiten .work-card h3 {
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 460;
    letter-spacing: -0.012em;
    line-height: 1.1;
    margin: 8px 0 6px;
    font-variation-settings: "opsz" 14, "wght" 460;
}
[data-theme="werkstatt"] #arbeiten .work-card p {
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-2);
    margin: 0 0 12px;
    max-width: none;
}
[data-theme="werkstatt"] #arbeiten .work-card .work-link {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink);
    border-bottom: 1px solid var(--ink);
    padding-bottom: 4px;
    text-decoration: none;
}

/* L-Crop-Marks auf work-thumb */
[data-theme="werkstatt"] #arbeiten .work-card .work-thumb::before,
[data-theme="werkstatt"] #arbeiten .work-card .work-thumb::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    background:
        linear-gradient(var(--sawdust), var(--sawdust)) top left / 16px 1.6px no-repeat,
        linear-gradient(var(--sawdust), var(--sawdust)) top left / 1.6px 16px no-repeat;
    z-index: 2;
    pointer-events: none;
}
[data-theme="werkstatt"] #arbeiten .work-card .work-thumb::before { top: 10px; left: 10px; }
[data-theme="werkstatt"] #arbeiten .work-card .work-thumb::after  { top: 10px; right: 10px; transform: scaleX(-1); }

/* ===================== 11 — ÜBER MICH ===================== */
[data-theme="werkstatt"] #ueber .section-head { border-bottom: 0; padding-bottom: 0; margin-bottom: 28px; }
[data-theme="werkstatt"] .about-lede {
    margin: 0 0 44px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--ink);
}
[data-theme="werkstatt"] .about-lede h3 {
    font-family: var(--serif);
    font-size: clamp(28px, 3.6vw, 50px);
    line-height: 1.05;
    font-weight: 400;
    letter-spacing: -0.024em;
    color: var(--ink);
    text-wrap: balance;
    max-width: 22ch;
    margin: 0;
    font-variation-settings: "opsz" 11, "wght" 400;
}
[data-theme="werkstatt"] .about-lede h3 .accent { color: var(--sawdust-ink); }

[data-theme="werkstatt"] .about-block {
    display: grid;
    grid-template-columns: minmax(240px, 5fr) minmax(0, 8fr);
    gap: 36px;
    align-items: start;
}
[data-theme="werkstatt"] .about-portrait-wrap {
    position: relative;
    aspect-ratio: 4/5;
    background: var(--paper-3);
    background-image:
        repeating-linear-gradient(
            135deg,
            transparent 0,
            transparent 14px,
            rgba(115, 98, 83, 0.10) 14px,
            rgba(115, 98, 83, 0.10) 15px
        );
    border: 1px solid var(--ink);
    border-radius: 0;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
[data-theme="werkstatt"] .about-portrait-wrap::before,
[data-theme="werkstatt"] .about-portrait-wrap::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    background:
        linear-gradient(var(--sawdust), var(--sawdust)) top left / 18px 1.6px no-repeat,
        linear-gradient(var(--sawdust), var(--sawdust)) top left / 1.6px 18px no-repeat;
    z-index: 2;
    pointer-events: none;
}
[data-theme="werkstatt"] .about-portrait-wrap::before { top: 12px; left: 12px; }
[data-theme="werkstatt"] .about-portrait-wrap::after  { top: 12px; right: 12px; transform: scaleX(-1); }
[data-theme="werkstatt"] .about-portrait { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
[data-theme="werkstatt"] .about-portrait-fallback {
    font-family: var(--serif);
    color: var(--ink);
    font-size: 80px;
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: none;
}

[data-theme="werkstatt"] .about-meta-card {
    border: 1px solid var(--ink);
    background: var(--paper-2);
    padding: 22px;
    margin-top: 22px;
}
[data-theme="werkstatt"] .about-meta-card h4 {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--mute);
    font-weight: 600;
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ink);
}
[data-theme="werkstatt"] .about-meta-card .row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--rule-soft);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.10em;
}
[data-theme="werkstatt"] .about-meta-card .row .k { color: var(--mute); font-weight: 400; text-transform: uppercase; font-size: 10px; letter-spacing: 0.16em; }
[data-theme="werkstatt"] .about-meta-card .row .v { color: var(--ink); font-weight: 500; text-align: right; }
[data-theme="werkstatt"] .about-meta-card .note {
    margin-top: 16px;
    font-family: var(--serif);
    font-size: 14px;
    color: var(--ink-2);
    line-height: 1.5;
}

[data-theme="werkstatt"] .about-text {
    max-width: none;
    margin: 0;
}
[data-theme="werkstatt"] .about-text blockquote {
    font-family: var(--serif);
    font-size: 24px;
    font-weight: 420;
    letter-spacing: -0.012em;
    line-height: 1.3;
    color: var(--ink);
    margin: 0 0 28px;
    padding: 0;
    border: 0;
    font-style: normal;
    font-variation-settings: "opsz" 14, "wght" 420;
}
[data-theme="werkstatt"] .about-text blockquote::before { content: "„"; color: var(--sawdust-ink); }
[data-theme="werkstatt"] .about-text blockquote::after  { content: "“"; color: var(--sawdust-ink); }
[data-theme="werkstatt"] .about-text p {
    font-family: var(--serif);
    font-size: 18px;
    line-height: 1.62;
    color: var(--ink-2);
    max-width: 62ch;
    font-variation-settings: "opsz" 22, "wght" 400;
}
[data-theme="werkstatt"] .about-text p:first-of-type::first-letter {
    font-family: var(--serif);
    float: left;
    font-size: 56px;
    font-weight: 380;
    line-height: 0.88;
    margin: 6px 8px 0 0;
    color: var(--ink);
    font-variation-settings: "opsz" 10, "wght" 380;
}
/* Trust-Strip in Werkstatt versteckt — about-meta-card ersetzt sie */
[data-theme="werkstatt"] .trust-strip { display: none; }

/* ===================== 12 — FAQ als sequentielle Liste ===================== */
[data-theme="werkstatt"] #faq .faq-list { display: flex; flex-direction: column; }
[data-theme="werkstatt"] #faq .faq-item {
    border-top: 1px solid var(--rule-soft);
    background: none;
    padding: 20px 0;
}
[data-theme="werkstatt"] #faq .faq-item:last-child { border-bottom: 1px solid var(--rule-soft); }
[data-theme="werkstatt"] #faq .faq-item.open .faq-q,
[data-theme="werkstatt"] #faq .faq-q {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink);
    font-weight: 600;
    padding: 0 0 12px;
    background: none;
    border: 0;
    text-align: left;
    pointer-events: none;
    cursor: default;
}
[data-theme="werkstatt"] #faq .faq-q::after { content: none !important; }
[data-theme="werkstatt"] #faq .faq-q::before { content: none !important; }
[data-theme="werkstatt"] #faq .faq-a {
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0;
}
[data-theme="werkstatt"] #faq .faq-a p {
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.62;
    color: var(--ink-2);
    margin: 0;
    max-width: 60ch;
}

/* ===================== 13 — KONTAKT inverse ===================== */
[data-theme="werkstatt"] #kontakt {
    background: var(--ink) !important;
    color: var(--night-paper);
    margin: 0;
    padding: clamp(4rem, 8vw, 6rem) 0;
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    position: relative;
    isolation: isolate;
    /* Focus-Ring im invertierten Block hell (sawdust 8:1 statt sawdust-ink 3.38:1 auf Ink). */
    --focus-ring: var(--sawdust);
}
[data-theme="werkstatt"] #kontakt::before,
[data-theme="werkstatt"] #kontakt::after {
    content: "";
    position: absolute;
    width: 32px;
    height: 32px;
    background:
        linear-gradient(var(--sawdust), var(--sawdust)) top left / 32px 1.6px no-repeat,
        linear-gradient(var(--sawdust), var(--sawdust)) top left / 1.6px 32px no-repeat;
    pointer-events: none;
    z-index: 1;
}
[data-theme="werkstatt"] #kontakt::before { top: 0; left: clamp(1rem, 4vw, 2rem); }
[data-theme="werkstatt"] #kontakt::after  { top: 0; right: clamp(1rem, 4vw, 2rem); transform: scaleX(-1); }

[data-theme="werkstatt"] #kontakt .section-head { border: 0; padding-bottom: 18px; margin-bottom: 18px; text-align: left; }
[data-theme="werkstatt"] #kontakt .section-eyebrow { color: var(--sawdust); }
[data-theme="werkstatt"] #kontakt .section-eyebrow[data-num]::before { color: var(--sawdust); }
[data-theme="werkstatt"] #kontakt h2 {
    color: var(--night-paper);
    font-size: clamp(40px, 6vw, 80px);
    font-weight: 360;
    letter-spacing: -0.03em;
    line-height: 1.0;
    max-width: 16ch;
    margin: 0 0 18px;
    font-variation-settings: "opsz" 10, "wght" 360;
}
[data-theme="werkstatt"] #kontakt p,
[data-theme="werkstatt"] #kontakt .narrow {
    color: rgba(241, 233, 217, 0.78);
    max-width: 56ch;
}
[data-theme="werkstatt"] #kontakt .kontakt-layout {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 64px;
    align-items: end;
}
[data-theme="werkstatt"] #kontakt .kontakt-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}
[data-theme="werkstatt"] #kontakt .kontakt-btn {
    background: none;
    border: 0;
    /* vertikales Padding für ≥40px Touch-Target (vorher 19px Textzeile) */
    padding: 10px 0;
    color: var(--night-paper);
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    box-shadow: none;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    text-decoration: underline;
    text-decoration-color: rgba(217, 164, 65, 0.55);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 6px;
}
[data-theme="werkstatt"] #kontakt .kontakt-btn:hover { text-decoration-color: var(--sawdust); }
[data-theme="werkstatt"] #kontakt .kontakt-btn small { color: rgba(241,233,217,0.6); }
/* Color-Emoji-Icons (💬, 📞, ✉) im Werkstatt-Kontakt ausblenden — Mono-Caps + Sawdust-Underline
   ist das Werkstatt-Idiom; bunte Emojis brechen den Inverse-Look. */
[data-theme="werkstatt"] #kontakt .kontakt-btn-icon { display: none; }
/* Fineprint im inversen Kontakt: mute (#736253) auf Ink wäre 3.08:1 — zu dunkel.
   Heller night-paper-Ton → ~8:1 (WCAG AA). */
[data-theme="werkstatt"] #kontakt .kontakt-fineprint { color: rgba(241, 233, 217, 0.7); }
/* Mail-Display-Variante: groß rendern */
[data-theme="werkstatt"] #kontakt .kontakt-btn[href^="mailto"] {
    font-family: var(--serif);
    font-size: clamp(24px, 3.4vw, 44px);
    font-weight: 380;
    letter-spacing: -0.022em;
    text-transform: none;
    font-variation-settings: "opsz" 12, "wght" 380;
}

[data-theme="werkstatt"] .kontakt-werkstatt-meta {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-bottom: 6px;
}
[data-theme="werkstatt"] .kontakt-werkstatt-meta .block { border-top: 1px solid rgba(241,233,217,0.20); padding-top: 12px; }
[data-theme="werkstatt"] .kontakt-werkstatt-meta .k {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--sawdust);
    font-weight: 600;
    margin-bottom: 6px;
}
[data-theme="werkstatt"] .kontakt-werkstatt-meta .v {
    font-family: var(--serif);
    font-size: 17px;
    color: var(--night-paper);
    line-height: 1.5;
}

/* ===================== 14 — STIL-STUDIO Werkstatt-Idiom ===================== */
[data-theme="werkstatt"] #stil .style-switcher-meta { color: var(--mute); }
[data-theme="werkstatt"] #stil .style-switcher-hint { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.16em; font-size: 10px; }
[data-theme="werkstatt"] #stil .style-switcher-current {
    border: 0;
    background: none;
}
[data-theme="werkstatt"] #stil .style-switcher-name {
    font-family: var(--serif);
    font-size: 32px;
    font-weight: 440;
    letter-spacing: -0.018em;
    font-variation-settings: "opsz" 12, "wght" 440;
}
[data-theme="werkstatt"] #stil .style-switcher-count {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mute);
}
[data-theme="werkstatt"] #stil .style-nav {
    background: var(--paper-2);
    color: var(--ink);
    border: 1px solid var(--ink);
    border-radius: 0;
    box-shadow: 3px 3px 0 var(--ink);
    width: 48px; height: 48px;
    transition: transform var(--t-base, 200ms) ease, box-shadow var(--t-base, 200ms) ease;
}
[data-theme="werkstatt"] #stil .style-nav:hover {
    transform: translate(3px, 3px);
    box-shadow: 0 0 0 var(--ink);
}
[data-theme="werkstatt"] #stil .style-tile {
    border: 1px solid var(--rule-soft);
    border-radius: 0;
    background: var(--paper-2);
    box-shadow: none;
    padding: 8px;
    transition: border-color var(--t-base, 200ms) ease;
}
[data-theme="werkstatt"] #stil .style-tile:hover { border-color: var(--ink); }
[data-theme="werkstatt"] #stil .style-tile.active { border-color: var(--sawdust); box-shadow: 0 0 0 2px var(--sawdust) inset; }
[data-theme="werkstatt"] #stil .style-tile .tile-label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
    margin-top: 8px;
    font-weight: 500;
}
[data-theme="werkstatt"] #stil .style-secondary-btn {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    background: none;
    border: 1px solid var(--ink);
    color: var(--ink);
    border-radius: 0;
    box-shadow: none;
    padding: 10px 16px;
}
[data-theme="werkstatt"] #stil .style-switcher-kbd-hint {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mute);
}
[data-theme="werkstatt"] #stil kbd {
    font-family: var(--mono);
    background: var(--paper-3);
    border: 1px solid var(--rule-soft);
    border-radius: 0;
    padding: 2px 6px;
    font-size: 10px;
}
[data-theme="werkstatt"] #stil .stil-bridge,
[data-theme="werkstatt"] #stil .stil-cta-secondary {
    font-family: var(--serif);
    font-size: 17px;
    color: var(--ink-2);
    margin-top: 28px;
    text-align: center;
}
[data-theme="werkstatt"] #stil .stil-bridge a,
[data-theme="werkstatt"] #stil .stil-cta-secondary a {
    color: var(--ink);
    text-decoration-color: var(--rule-soft);
}

/* ===================== 15 — WERKSTATT-TILE-PREVIEW ===================== */
.tile-preview[data-theme="werkstatt"] {
    background: var(--paper);
    color: var(--ink);
    position: relative;
    border-color: var(--rule-soft);
}
.tile-preview[data-theme="werkstatt"] .tile-head { font-family: "Newsreader", serif; color: var(--ink); }
.tile-preview[data-theme="werkstatt"] .tile-body { font-family: "JetBrains Mono", monospace; color: var(--mute); letter-spacing: 0.08em; }
.tile-preview[data-theme="werkstatt"] .tile-dot { background: var(--sawdust); border-radius: 0; width: 8px; height: 8px; }
.tile-preview[data-theme="werkstatt"]::before,
.tile-preview[data-theme="werkstatt"]::after {
    content: "";
    position: absolute;
    width: 12px; height: 12px;
    background:
        linear-gradient(var(--sawdust), var(--sawdust)) top left / 12px 1.4px no-repeat,
        linear-gradient(var(--sawdust), var(--sawdust)) top left / 1.4px 12px no-repeat;
    pointer-events: none;
}
.tile-preview[data-theme="werkstatt"]::before { top: 6px; left: 6px; }
.tile-preview[data-theme="werkstatt"]::after  { top: 6px; right: 6px; transform: scaleX(-1); }

/* ===================== 16 — HEADER + FOOTER Werkstatt-Idiom ===================== */
[data-theme="werkstatt"] .site-header { border-bottom: 1px solid var(--rule-soft); }
[data-theme="werkstatt"] .brand-words {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.05;
}
[data-theme="werkstatt"] .brand-subline {
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--mute);
    display: block;
    margin-top: 4px;
}
/* Unter 600px ist die Subline + Brand + WhatsApp-Button > Header-Breite —
   die Subline verschwindet, der Brand-Icon + „Seitenschreiner" bleibt. */
@media (max-width: 600px) {
    [data-theme="werkstatt"] .brand-subline { display: none; }
}
[data-theme="werkstatt"] .nav-actions .btn-wa {
    background: var(--ink);
    color: var(--paper);
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 11px;
    border-radius: 0;
    box-shadow: 3px 3px 0 var(--sawdust);
    border: 1px solid var(--ink);
}
[data-theme="werkstatt"] .nav-actions .btn-wa:hover {
    transform: translate(3px, 3px);
    box-shadow: 0 0 0 var(--sawdust);
    background: var(--ink);
    color: var(--paper);
}

[data-theme="werkstatt"] .site-footer {
    background: var(--paper);
    color: var(--ink);
    border-top: 1px solid var(--ink);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.10em;
}
[data-theme="werkstatt"] .site-footer h2 {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--mute);
    line-height: 1.3;
    margin: 0 0 0.8rem;
}
[data-theme="werkstatt"] .site-footer a { color: var(--ink-2); text-decoration-color: var(--rule-soft); }
[data-theme="werkstatt"] .site-footer a:hover { text-decoration-color: var(--ink); }

/* Floating Toggle + Sticky Mobile + Cookie-Banner Werkstatt-Idiom */
[data-theme="werkstatt"] .floating-toggle {
    background: var(--ink);
    color: var(--paper);
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    border-radius: 0;
    box-shadow: 3px 3px 0 var(--sawdust);
    border: 1px solid var(--ink);
}
[data-theme="werkstatt"] .floating-menu {
    background: var(--paper-2);
    border: 1px solid var(--ink);
    border-radius: 0;
    box-shadow: 4px 4px 0 var(--ink);
}
[data-theme="werkstatt"] .floating-menu button {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink);
}
[data-theme="werkstatt"] .sticky-mobile {
    background: var(--paper-2);
    border-top: 1px solid var(--ink);
}
[data-theme="werkstatt"] .sticky-mobile a {
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink);
    gap: 6px;
}
/* Color-Emoji-Icons im Werkstatt-Sticky-Mobile ausblenden — Mono-Caps reicht als Label. */
[data-theme="werkstatt"] .sticky-mobile .sm-icon { display: none; }
[data-theme="werkstatt"] .sticky-mobile a.primary {
    background: var(--ink);
    color: var(--paper);
}
[data-theme="werkstatt"] .cookie-banner {
    background: var(--paper-2);
    border: 1px solid var(--ink);
    border-radius: 0;
    box-shadow: 6px 6px 0 var(--ink);
    font-family: var(--serif);
    color: var(--ink);
}
[data-theme="werkstatt"] .cookie-banner h3 {
    font-family: var(--serif);
    font-weight: 440;
}

/* ===================== 17 — DISCOVERY / DESIGN-RANGE / PROZESS / STYLE-QUIZ ===================== */
/* Discovery (Workshop) — Werkstück-Card-Stil */
[data-theme="werkstatt"] #discovery .discovery-card {
    border: 1px solid var(--ink);
    background: var(--paper-2);
    border-radius: 0;
    box-shadow: none;
    padding: 28px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: center;
}
[data-theme="werkstatt"] #discovery .discovery-card-price strong {
    font-family: var(--serif);
    font-size: 48px;
    font-weight: 360;
    letter-spacing: -0.025em;
    font-variation-settings: "opsz" 10, "wght" 360;
}

/* Prozess — Werkstatt-Variante mit Specimens-Optik */
[data-theme="werkstatt"] #prozess .card-grid {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--ink);
    counter-reset: prozess;
}
[data-theme="werkstatt"] #prozess .card {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 28px;
    padding: 28px 0;
    border-bottom: 1px solid var(--rule-soft);
    background: none;
    box-shadow: none;
    border-radius: 0;
    counter-increment: prozess;
    transform: none !important;
}
[data-theme="werkstatt"] #prozess .card .card-icon {
    background: none; border: 0; border-radius: 0;
    font-family: var(--serif);
    font-size: 48px;
    font-weight: 320;
    color: var(--ink);
    width: auto; height: auto;
    font-variation-settings: "opsz" 10, "wght" 320;
}
[data-theme="werkstatt"] #prozess .card h3 { margin-top: 0; }

/* Design-Range — hatched Werkstatt-Frame */
[data-theme="werkstatt"] #design-range .design-grid { gap: 28px; }
[data-theme="werkstatt"] #design-range .design-card {
    border: 1px solid var(--ink);
    border-radius: 0;
    background: var(--paper-2);
    box-shadow: none;
    overflow: hidden;
}
[data-theme="werkstatt"] #design-range .design-card-label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    background: var(--paper-2);
    color: var(--ink);
    padding: 12px 14px;
    border-top: 1px solid var(--ink);
}
[data-theme="werkstatt"] #design-range .design-card-label strong { font-family: var(--serif); font-size: 18px; letter-spacing: -0.012em; text-transform: none; }
/* opacity aus dem Default-CSS (0.82) hebt mute auf paper-2 effektiv auf #8b7c6d = 3.58:1.
   Im Werkstatt ist der Label-BG hell (paper-2), nicht der dunkle Default-Gradient — opacity weg, voller mute = 5.17:1. */
[data-theme="werkstatt"] #design-range .design-card-label span { color: var(--mute); opacity: 1; }

/* Style-Quiz (flag) — Mono-Chips */
[data-theme="werkstatt"] #style-quiz .quiz-q-label { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.16em; }
[data-theme="werkstatt"] #style-quiz .quiz-chip {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: var(--paper-2);
    border: 1px solid var(--ink);
    color: var(--ink);
    border-radius: 0;
    padding: 8px 14px;
}
[data-theme="werkstatt"] #style-quiz .quiz-chip[aria-checked="true"] {
    background: var(--ink);
    color: var(--paper);
}

/* ===================== 18 — RESPONSIVE ===================== */
/* Breakpoint 1280px: bis hier her ist die 4-Spalten-Specimen-Liste (num/head/text/stats)
   plus die 3-Spalten-Section (marker/body/meta) zu eng — die Text-Spalte schrumpft
   sonst unter ~80px. Über 1280px greift die editorial Bühne. */
@media (max-width: 1280px) {
    [data-theme="werkstatt"] section[data-marker],
    [data-theme="werkstatt"] .hero {
        grid-template-columns: minmax(0, 1fr);
        column-gap: 0;
        padding: 64px clamp(1rem, 4vw, 2rem) 72px;
    }
    [data-theme="werkstatt"] section[data-marker] > .container,
    [data-theme="werkstatt"] .hero > .container { grid-column: 1; }
    [data-theme="werkstatt"] .section-marker,
    [data-theme="werkstatt"] .section-meta,
    [data-theme="werkstatt"] .hero-meta-stack {
        grid-column: 1;
        position: static;
    }
    /* Hero-Marker "№ 01" darf nicht hinter den fixen Header (76px) rutschen.
       .hero[data-marker] (0,3,0) schlaegt die Gruppen-Regel oben, die den Hero via
       section[data-marker] (0,2,1) mit padding:64px-Kurzform trifft. */
    [data-theme="werkstatt"] .hero[data-marker] { padding-top: calc(var(--header-h, 76px) + 28px + env(safe-area-inset-top)); }

    /* Marker-Rail + Eyebrow tragen denselben Sektionsnamen. Auf Desktop raeumlich
       getrennt (Rail links) — im Mobile-Stack direkt untereinander = Dopplung.
       Eyebrow ausblenden; die Rail (№ + Name + Sub) bleibt der Sektions-Kopf.
       Hero ausgenommen: dessen Eyebrow-Strip ist anderer Inhalt, kein .section-head. */
    [data-theme="werkstatt"] section[data-marker]:has(.section-marker) .section-head > .section-eyebrow { display: none; }

    /* Mobile-Specimen: sauberer 1-Spalten-Stack. WICHTIG: grid-template-areas MUSS
       hier neu gesetzt werden — sonst bleiben die Desktop-Areas "num head text"
       aktiv und kollidieren mit grid-column-Overrides (head/text/stats stapeln). */
    [data-theme="werkstatt"] #leistungen .card {
        grid-template-columns: 1fr;
        grid-template-areas: "num" "head" "text" "stats";
        column-gap: 0;
        row-gap: 10px;
        text-align: left; /* Basis-.card ist center (style.css) — Specimen-Nummer sonst zentriert */
    }
    [data-theme="werkstatt"] #leistungen .card-icon { justify-content: flex-start; } /* Basis ist flex-center */
    [data-theme="werkstatt"] #leistungen .card-icon::before { font-size: 44px; }

    /* Mobile-Ledger: CTA bekommt EIGENE Area. Desktop teilen sich .paket-price und
       .paket-cta die "price"-Area (align start vs end) — im kurzen Mobile-Stack
       fallen die zusammen und ueberlappen. Darum "cta" als eigene Zeile. */
    [data-theme="werkstatt"] #pakete .paket {
        grid-template-columns: 1fr;
        grid-template-areas: "num" "head" "price" "specs" "cta";
        text-align: left; /* Basis-.card ist center (style.css) — Ledger-Nummer sonst zentriert */
    }
    [data-theme="werkstatt"] #pakete .paket .paket-price {
        align-items: flex-start;
        text-align: left;
    }
    [data-theme="werkstatt"] #pakete .paket .paket-cta {
        grid-area: cta;
        align-self: start;
    }
    [data-theme="werkstatt"] #pakete .paket .paket-specs > span:not(.spec-h) { white-space: normal; }
    [data-theme="werkstatt"] #pakete .premium-upgrade { grid-template-columns: 1fr; }
    [data-theme="werkstatt"] #arbeiten .works { grid-template-columns: 1fr; }
    [data-theme="werkstatt"] #arbeiten .works > .work-card:first-child { grid-row: auto; }
    [data-theme="werkstatt"] .about-block { grid-template-columns: 1fr; }
    [data-theme="werkstatt"] #kontakt .kontakt-layout { grid-template-columns: 1fr; gap: 32px; }
    [data-theme="werkstatt"] #discovery .discovery-card { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    [data-theme="werkstatt"] .hero[data-marker] {
        padding-top: calc(var(--header-h, 76px) + 16px + env(safe-area-inset-top));
        padding-bottom: 72px;
    }
    [data-theme="werkstatt"] .hero h1 { font-size: clamp(38px, 12vw, 64px); }
    [data-theme="werkstatt"] #leistungen .card { row-gap: 8px; }
    [data-theme="werkstatt"] #pakete .paket .paket-price-big { font-size: 52px; }
    [data-theme="werkstatt"] #kontakt { padding: 64px 0 72px; }
    [data-theme="werkstatt"] #kontakt .kontakt-btn[href^="mailto"] { font-size: 22px; }
}

/* ===================== 19 — REDUCED-MOTION ===================== */
@media (prefers-reduced-motion: reduce) {
    [data-theme="werkstatt"] .btn,
    [data-theme="werkstatt"] .btn-primary,
    [data-theme="werkstatt"] .btn-secondary,
    [data-theme="werkstatt"] #stil .style-nav {
        transition: none;
    }
    [data-theme="werkstatt"] .btn:hover,
    [data-theme="werkstatt"] .btn-primary:hover,
    [data-theme="werkstatt"] .btn-secondary:hover,
    [data-theme="werkstatt"] #stil .style-nav:hover {
        transform: none;
    }
}