/* Dammer Manufaktur – Erscheinungsbild wie dammer-manufaktur.de (Notch001/manufaktur-shop)
   Farben, Schriften und Look sind von dort übernommen und bewusst nicht erweitert.
   Schriften liegen lokal (kein Google-Fonts-Abruf, DSGVO-freundlich). */

@font-face { font-family: 'Playfair Display'; font-weight: 600; font-display: swap; src: url('fonts/playfair-display-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-weight: 700; font-display: swap; src: url('fonts/playfair-display-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 300; font-display: swap; src: url('fonts/barlow-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 400; font-display: swap; src: url('fonts/barlow-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 500; font-display: swap; src: url('fonts/barlow-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 600; font-display: swap; src: url('fonts/barlow-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 700; font-display: swap; src: url('fonts/barlow-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 500; font-display: swap; src: url('fonts/barlow-condensed-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-display: swap; src: url('fonts/barlow-condensed-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-display: swap; src: url('fonts/barlow-condensed-latin-700-normal.woff2') format('woff2'); }

:root {
    /* Design-System der Homepage */
    --braun: #B8895A;
    --schwarz: #1A1A1A;
    --creme: #F5EFE6;
    --sand: #D4B896;
    --holz: #6B4423;
    --salbei: #8FA68E;
    --terra: #C75B3F;
    --paper-bg: #EDE0CC;
    --karte: #232323;
    --karte-2: #2A2A2A;

    --linie: rgba(184, 137, 90, 0.18);
    --linie-stark: rgba(184, 137, 90, 0.35);
    --text-2: rgba(245, 239, 230, 0.72);
    --text-3: rgba(212, 184, 150, 0.6);

    --font-display: 'Playfair Display', Georgia, serif;
    --font-sans: 'Barlow', system-ui, sans-serif;
    --font-condensed: 'Barlow Condensed', 'Barlow', sans-serif;
    --radius: 2px;
    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--schwarz);
    color: var(--creme);
    font: 400 16px/1.6 var(--font-sans);
    -webkit-font-smoothing: antialiased;
}
/* Noise-Overlay wie auf der Homepage */
body::before {
    content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1000; opacity: .04;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; margin: 0; }
a { color: var(--braun); }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--braun); outline-offset: 2px; }

.paper-texture {
    background-image: repeating-linear-gradient(0deg, transparent, transparent 28px, rgba(107, 68, 35, .06) 28px, rgba(107, 68, 35, .06) 29px);
}
.kicker {
    font: 700 12px var(--font-condensed); text-transform: uppercase; letter-spacing: .25em; color: var(--braun);
    display: inline-flex; align-items: center; gap: 12px;
}
.kicker::before { content: '—'; }

/* Kopfzeile */
.kopf {
    position: sticky; top: 0; z-index: 50;
    background: rgba(26, 26, 26, .92);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(184, 137, 90, .15);
}
.kopf-innen { max-width: 1280px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 24px; }
.marke { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.marke-zeichen {
    width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--braun); color: var(--braun);
    display: grid; place-items: center; font: 700 18px var(--font-condensed); flex: none;
}
.marke-text { line-height: 1.2; }
.marke-text b { display: block; font: 700 14px var(--font-condensed); letter-spacing: .14em; text-transform: uppercase; color: var(--creme); }
.marke-text small { display: block; font: 500 10px var(--font-condensed); letter-spacing: .14em; text-transform: uppercase; color: var(--braun); }
.nav { margin-left: auto; display: flex; align-items: center; gap: 28px; }
.nav a {
    position: relative; font: 600 14px var(--font-condensed); text-transform: uppercase; letter-spacing: .12em;
    color: var(--sand); text-decoration: none; transition: color .3s;
}
.nav a::after { content: ''; position: absolute; left: 0; bottom: -4px; height: 1px; width: 0; background: var(--braun); transition: width .3s; }
.nav a:hover { color: var(--creme); }
.nav a:hover::after, .nav a.aktiv::after { width: 100%; }
.nav a.aktiv { color: var(--creme); }
.kopf .nav-mobil { display: none; margin-left: auto; }
@media (max-width: 860px) {
    .nav { display: none; }
    .kopf .nav-mobil { display: inline-flex; }
}

/* Knöpfe */
.knopf {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 1.5px solid transparent; border-radius: var(--radius); padding: 12px 26px;
    font: 700 14px var(--font-condensed); text-transform: uppercase; letter-spacing: .1em;
    cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .3s, color .3s, border-color .3s;
}
.knopf svg { width: 18px; height: 18px; flex: none; }
.knopf-primaer { background: var(--braun); color: var(--schwarz); }
.knopf-primaer:hover { background: var(--sand); }
.knopf-rand { background: transparent; color: var(--creme); border-color: var(--linie-stark); }
.knopf-rand:hover { border-color: var(--braun); color: var(--braun); }
.knopf-dunkel { background: var(--schwarz); color: var(--creme); }
.knopf-dunkel:hover { background: var(--holz); }
.knopf-whatsapp { background: #25D366; color: #0b2b16; }
.knopf-whatsapp:hover { background: #3ee07c; }
.knopf-leise { background: transparent; color: var(--sand); padding: 8px 12px; }
.knopf-leise:hover { color: var(--creme); background: rgba(184, 137, 90, .08); }
.knopf-rund { width: 40px; height: 40px; padding: 0; }
.knopf[disabled] { opacity: .45; pointer-events: none; }

.etikett {
    display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--linie-stark); border-radius: var(--radius);
    padding: 3px 10px; font: 700 11px var(--font-condensed); text-transform: uppercase; letter-spacing: .16em; color: var(--braun);
}
.etikett-werkstatt { border-color: var(--salbei); color: var(--salbei); }

/* Fußzeile */
.fuss { background: #111; border-top: 1px solid rgba(184, 137, 90, .15); padding: 32px 24px; }
.fuss-innen { max-width: 1280px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; }
.fuss .marke-zeichen { width: 32px; height: 32px; font-size: 14px; border-width: 1.5px; }
.fuss .marke-text b { font-size: 12px; color: var(--sand); }
.fuss .marke-text small { color: rgba(212, 184, 150, .5); }
.fuss-links { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.fuss-links a { font: 500 12px var(--font-condensed); text-transform: uppercase; letter-spacing: .14em; color: rgba(212, 184, 150, .5); text-decoration: none; transition: color .2s; }
.fuss-links a:hover { color: var(--sand); }

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