/* ATELIER — gemeinsame Gestaltungsschicht (seit 2026-11-07).
   Wird nach dem Inline-CSS jeder Seite geladen und ersetzt die alte Rahmung:
   Papier und Tinte, Payne's Grey als Schluesselfarbe, Amber als zweite Druckfarbe,
   offene Spalten mit Haarlinien statt Kaesten, Pillenknoepfe, typografische Sprachwahl.
   Seiten mit eigener Palette (3D-Galerie) tragen <html data-own-palette> und bekommen nur Navigation und Sprachwahl. */

/* ---------- Farben ---------- */
:root:not([data-own-palette]) {
    --warm-black: #1d2328;      /* Ueberschriften: tiefes Payne-Schwarz */
    --charcoal: #2b3136;        /* Fliesstext */
    --charcoal-soft: #4a525a;   /* Nebentext */
    --ink-deep: #27323b;        /* dunkle Flaechen */
    --rule: rgba(39, 50, 59, 0.16);
    --rule-strong: rgba(39, 50, 59, 0.3);
    --field: rgba(83, 104, 120, 0.06);
}

/* ---------- Navigation und Sprachwahl (alle Seiten) ---------- */
nav { border-bottom-color: rgba(39, 50, 59, 0.08); }
.lang-toggle { border: 0; border-radius: 0; overflow: visible; gap: 0.1rem; align-items: center; }
.lang-btn,
.lang-btn.active,
.lang-btn:hover:not(.active) { background: none; }
.lang-btn { position: relative; color: var(--stone-ink); font-weight: 500; letter-spacing: 0.14em; padding: 0.45rem 0.35rem; min-width: 2.2rem; }
.lang-btn + .lang-btn::before { content: '/'; position: absolute; left: -0.2rem; top: 50%; translate: 0 -52%; color: var(--stone-light); font-weight: 400; pointer-events: none; }
.lang-btn.active { color: var(--warm-black); }
.lang-btn.active::after { content: ''; position: absolute; left: 0.45rem; right: 0.45rem; bottom: 0.15rem; height: 1px; background: var(--amber); }
.lang-btn:hover:not(.active) { color: var(--forest); }

/* Tablets: Menue klappt bis 1140 px zusammen (vorher erst ab 680 px; dazwischen schob es die Sprachwahl aus dem Bild).
   Nur auf Seiten mit Menueknopf, Portfolio und Rechtsseiten haben keinen. */
@media (max-width: 1140px) {
    nav:has(.hamburger) .nav-links { display: none; }
    nav .hamburger { display: flex; }
    nav:has(.hamburger) .nav-links.open { display: flex; flex-direction: column; align-items: stretch; position: absolute; top: 100%; left: 0; right: 0; background: var(--warm-white); padding: 1rem 2rem 1.2rem; border-bottom: 1px solid var(--stone-light); gap: 0; }
    nav:has(.hamburger) .nav-links.open a { padding: 0.65rem 0; font-size: 0.8rem; border-bottom: 1px solid var(--rule, rgba(181,169,154,0.12)); }
    nav:has(.hamburger) .nav-links.open li:last-child a { border-bottom: none; }
    nav:has(.hamburger) .nav-links.open li a::before { display: none; }
}

/* Kein seitliches Scrollen durch ueberstehende Deko (z. B. versetzte Rahmen) */
body { overflow-x: clip; }

/* ---------- Knoepfe: weiche Pillen, Nebenwege als Unterstreichung ---------- */
html:not([data-own-palette]) .hero-cta,
html:not([data-own-palette]) .form-submit,
html:not([data-own-palette]) .cookie-btn { border-radius: 999px; box-shadow: none; }
html:not([data-own-palette]) .hero-cta:hover,
html:not([data-own-palette]) .form-submit:hover { transform: none; box-shadow: none; background: var(--accent-hover); }

html:not([data-own-palette]) .proof-cta-link,
html:not([data-own-palette]) .page-cta-link,
html:not([data-own-palette]) .pricing-cta,
html:not([data-own-palette]) .hero-quiet {
    background: none; border: 0; border-radius: 0; padding: 0 0 0.2rem; box-shadow: none; transform: none;
    color: var(--forest); text-decoration: none; border-bottom: 1px solid var(--rule-strong);
    transition: color 0.3s ease, border-color 0.3s ease;
}
html:not([data-own-palette]) .proof-cta-link:hover,
html:not([data-own-palette]) .page-cta-link:hover,
html:not([data-own-palette]) .pricing-cta:hover,
html:not([data-own-palette]) .hero-quiet:hover { background: none; color: var(--amber-ink); border-bottom-color: var(--amber-ink); transform: none; }

/* ---------- Offene Spalten statt Kaesten ---------- */
html:not([data-own-palette]) :is(.value-card, .puzzle-piece, .deliverable-card, .pricing-card, .methode-card, .audience-card,
    .client-card, .also-card, .fact-item, .diy-col, .sanity-step, .sanity-callout, .route-col, .compare-col, .price-card, .methode-stay) {
    background: none; border: 0; border-top: 1px solid var(--rule); border-radius: 0; box-shadow: none;
    padding: 1.5rem 0 0; transform: none;
}
html:not([data-own-palette]) :is(.value-card, .puzzle-piece, .deliverable-card, .pricing-card, .methode-card, .audience-card, .client-card, .also-card, .diy-col):hover {
    background: none; box-shadow: none; transform: none; border-color: var(--rule);
}
html:not([data-own-palette]) .value-card::before { display: none; }
html:not([data-own-palette]) .value-card > svg,
html:not([data-own-palette]) .value-icon { display: none; }
html:not([data-own-palette]) .pricing-card.featured { border-top: 2px solid var(--amber); box-shadow: none; }

/* Dunkle Flaechen in tiefem Payne */
html:not([data-own-palette]) .context-section,
html:not([data-own-palette]) footer { background: var(--ink-deep); }
html:not([data-own-palette]) .context-card { background: none; border: 0; border-top: 1px solid rgba(243, 239, 232, 0.18); border-radius: 0; padding: 1.3rem 0 0; }
html:not([data-own-palette]) .context-card p { color: rgba(243, 239, 232, 0.72); }
html:not([data-own-palette]) .context-section .section-label { color: #a9b7c2; }
html:not([data-own-palette]) .context-section .section-title em { color: #c4cfd7; }

/* Kleine Etiketten ohne Kasten */
html:not([data-own-palette]) :is(.pricing-badge, .pricing-pill, .feature-tag, .proof-type) {
    background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; color: var(--forest-ink);
}
html:not([data-own-palette]) .pricing-badge { color: var(--amber-ink); }

/* Arbeiten: Bild weich gerundet, keine Karte */
html:not([data-own-palette]) .proof-card { background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
html:not([data-own-palette]) .proof-card:hover { transform: none; box-shadow: none; }
html:not([data-own-palette]) .proof-preview { border-radius: 14px; background: var(--cream-deep); }
html:not([data-own-palette]) .proof-preview img { filter: none; }
html:not([data-own-palette]) .proof-info { padding: 1rem 0 0; }
html:not([data-own-palette]) .proof-link { width: auto; height: auto; background: none; border-radius: 0; color: var(--forest); }
html:not([data-own-palette]) .proof-link:hover { background: none; color: var(--amber-ink); }

/* Fragen: Liste mit Haarlinien */
html:not([data-own-palette]) .faq-item,
html:not([data-own-palette]) .faq-item[open] { background: none; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; }
html:not([data-own-palette]) .faq-item summary { padding-left: 0; padding-right: 0; }
html:not([data-own-palette]) .faq-answer,
html:not([data-own-palette]) .faq-item > p,
html:not([data-own-palette]) .faq-item > div { padding-left: 0; padding-right: 0; }

/* Formular: zarte Flaeche, sichtbare Grundlinie (3,6:1) */
html:not([data-own-palette]) :is(.form-group input, .form-group textarea, .form-group select) {
    background: var(--field); border: 0; border-bottom: 1.5px solid var(--forest-light); border-radius: 10px 10px 0 0;
}
html:not([data-own-palette]) :is(.form-group input, .form-group textarea, .form-group select):focus { border-bottom-color: var(--forest); background: rgba(83, 104, 120, 0.09); }

/* Portraets: ohne Schattenwolke */
html:not([data-own-palette]) .why-portrait img,
html:not([data-own-palette]) .hero-portrait img { box-shadow: none; }

/* Druckerornament statt Stockfoto zwischen Abschnitten */
.filet { height: 1.1rem; width: 9rem; margin: clamp(2.5rem, 6vw, 4.5rem) auto; background: var(--forest-light);
    -webkit-mask: url(/public/gravures/filet.svg) center / contain no-repeat; mask: url(/public/gravures/filet.svg) center / contain no-repeat; }
@media (forced-colors: active) { .filet { forced-color-adjust: none; background: CanvasText; } }
html:not([data-own-palette]) .cookie-banner { background: var(--ink-deep); }

/* Kontaktdaten: Haarlinien statt Emoji-Icons */
html:not([data-own-palette]) .contact-detail > span[aria-hidden="true"]:first-child { display: none; }
html:not([data-own-palette]) .contact-detail { border-top: 1px solid var(--rule); padding: 0.7rem 0; margin: 0; }

/* Hinweis-Absaetze ohne Kasten */
html:not([data-own-palette]) :is(.pricing-note, .steps-note, .puzzle-conclusion, .merge-box, .backstage-list li, .trust-row) {
    background: none; border: 0; border-top: 1px solid var(--rule); border-radius: 0; box-shadow: none; padding-left: 0; padding-right: 0;
}