html { color-scheme: light dark; }

/* ===================== DESIGN TOKENS ===================== */
:root{
  /* Layout */
  --wrap: min(1200px, 92vw);
  --r: 14px;
  --header-h: 96px;

  /* Type scale & rhythm */
  --font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --step--1: clamp(.875rem, .8vw, .95rem);
  --step-0 : 1rem;
  --step-1 : clamp(1.125rem, 1.2vw, 1.25rem);
  --step-2 : clamp(1.35rem, 1.8vw, 1.6rem);
  --step-3 : clamp(1.75rem, 3vw, 2.2rem);
  --step-4 : clamp(2.4rem, 6vw, 4.2rem);
  --flow   : 1.25lh;

  /* Motion */
  --dur-md: 260ms;
  --dur-sm: 180ms;
  --ease: cubic-bezier(.2, 0, 0, 1);

  /* Lesemaß */
  --measure: 68ch;

  /* Hyphenation */
  --hyphen: auto;

  /* Theme tokens (light) */
  color-scheme: light;
  --brand:#ad2625; --brand-intens:#ed1f09;
  --text:#0f0f0f; --text-strong:#000; --text-muted:#555;
  --ink-dark-background:#ffffff;
  --ink-muted-dark-background: rgba(255,255,255,.73);
  --bg-page:#f6f5f3; --bg-hero:transparent; --bg-stimmen:#f4f4f4; --bg-ueber:#f4f4f4;
  --bg-produkte:#813830; --bg-kontakt:#f4f4f4; --bg-anfrage:#f4f4f4;
  --tile:#ffffff; --tile-2:#f2f2f2; --line:#e6e4e1; --shadow: 0 10px 30px rgba(0,0,0,.08);
}

@media (prefers-color-scheme: dark){
  :root{ color-scheme: dark; }
}

:root[data-theme="dark"]{
  color-scheme: dark;
  --text: color-mix(in oklab, white 88%, black 12%);
  --text-strong: color-mix(in oklab, white 94%, black 6%);
  --text-muted: color-mix(in oklab, white 75%, black 25%);
  --bg-page:#111111; --bg-stimmen:#1e1e1e; --bg-ueber:#151515;
  --bg-produkte:#813730; --bg-kontakt:#151515; --bg-anfrage:#151515;
  --tile:#1b1b1b; --tile-2:#252525; --line:#2c2c2c; --shadow: 0 6px 28px rgba(0,0,0,.22);
}

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

/* ===================== BASE ===================== */
*{ box-sizing: border-box }
html{
  scroll-behavior: smooth;
  hanging-punctuation: first allow-end;
  text-rendering: optimizeLegibility;
}
body{
  margin: 0;
  background: var(--bg-page);
  color: var(--text);
  font-family: var(--font-family);
  font-size: var(--step-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
  font-kerning: normal;
  font-variant-ligatures: contextual common-ligatures;
  font-feature-settings: "liga" 1, "clig" 1;
}
img{ max-width:100%; height:auto; display:block }
a{ color: inherit; text-decoration: none; position: relative }
header a:active{ color: var(--brand-intens); }
#kontakt_btn{ color: var(--ink-dark-background) }

a:not(.btn)::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background: var(--brand);
  transform: scaleX(0); transform-origin:left;
  transition: transform var(--dur-sm) var(--ease);
}
a:not(.btn):hover::after,
a:not(.btn):focus-visible::after{ transform: scaleX(1); }

:focus-visible{ outline: 2px solid color-mix(in oklab, var(--brand) 80%, white 20%); outline-offset: 3px }
[id]{ scroll-margin-top: var(--header-h) }

.wrap{ width: var(--wrap); margin-inline: auto }

/* Fließtext / Prosa */
.prose{ max-width: var(--measure); }
.prose p:not(:last-child){ margin-block: var(--flow); }
p, li, dd{ text-wrap: pretty; hyphens: var(--hyphen); }
:where(html[lang="de"]) p{ hyphens: auto; }

/* Headings */
h1,h2,h3{
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 0;
  text-wrap: balance;
}
h1{ font-size: var(--step-4); font-weight: 700; }
h2{ font-size: var(--step-3); font-weight: 700; }
h3{ font-size: var(--step-2); font-weight: 600; }

/* Kleintext/Hinweise */
small,.hint{ font-size: var(--step--1); line-height: 1.45; }

/* Body-Textkontrast leicht erhöht */
p{
  font-weight: 400;
  opacity: 1;
  color: color-mix(in oklab, var(--text) 94%, transparent);
}

/* ===================== HEADER / NAVIGATION ===================== */
header{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--bg-stimmen);
  backdrop-filter: saturate(120%) blur(6px);
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
  transition: background-color var(--dur-md) var(--ease), color var(--dur-md) var(--ease);
  color: var(--text);
}

/* Grundlayout Header (mobile zuerst) */
.nav{
  display:flex;
  align-items:center;
  gap:16px;
  height:var(--header-h);
  justify-content:space-between;
}
/* Header Nutzfläche */
header .nav.wrap{
  width: min(1320px, 96vw);
  padding-inline: clamp(12px, 2.4vw, 28px);
}

header .logo{
  height:100%;
  display:flex;
  align-items:center;
  gap:12px;
}
header .logo img{
  height:calc(100% - 16px);
  width:auto;
  display:block;
  object-fit:contain;
}

/* Desktop-Navi (Mitte) */
.site-nav-desktop{
  display:none;
  gap:18px;
  flex-wrap:nowrap;
  white-space:nowrap;
  justify-content:center;
  text-transform:none;
}
.site-nav-desktop a{
  padding:.50rem 10px;
  line-height:1.2;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:35px;
}

/* Links in der Navigation = Theme-Textfarbe */
header .site-nav-desktop a{ color: var(--text) !important; }
header .site-nav-desktop a:hover,
header .site-nav-desktop a:focus-visible{ color: var(--brand-intens); }

/* CTA/Tools rechts im Header */
.header-cta{
  display:flex;
  align-items:center;
  gap:12px;
}

/* Burger für <1024px */
.burger{
  background:none;
  border:0;
  padding:10px 14px;
  min-height:44px;
  min-width:44px;
  font-weight:700;
  font-size:1rem;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  border:1px solid transparent;
  color:inherit;
  cursor:pointer;
}

/* Theme Toggle (dezent) */
.theme-btn{
  background: transparent;
  color: inherit;
  border:1px solid transparent;
  min-inline-size:3rem;
  min-height:44px;
  line-height:1;
  border-radius:12px;
  font-weight:600;
  font-size:1.1rem;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px 14px;
  cursor:pointer;
  transition: background-color var(--dur-sm) var(--ease), border-color var(--dur-sm) var(--ease);
}
.theme-btn:hover,
.theme-btn:focus-visible{
  background: color-mix(in oklab, var(--text) 8%, transparent);
  border:1px solid color-mix(in oklab, var(--text) 22%, transparent);
}

/* CTA-Buttons (Primary) */
a.btn, button.btn{
  display:inline-block;
  gap:.5rem;
  padding:12px 16px;
  border-radius:12px;
  border:1px solid transparent;
  background: var(--brand);
  color: var(--ink-dark-background);
  font-weight:700;
  line-height:1.1;
  text-align:center;
  word-break: keep-all;
  text-wrap: balance;
  transition: transform var(--dur-sm) var(--ease), box-shadow var(--dur-sm) var(--ease), border-color var(--dur-sm) var(--ease), background-color var(--dur-sm) var(--ease);
  align-content:center;
  font-family: inherit;
  font-size: inherit;
  appearance:none;
}
a.btn:hover, button.btn:hover{
  transform: translateY(+1px);
  background-color: var(--brand-intens);
  color: var(--ink-dark-background);
}
a.btn:active, button.btn:active{ transform:none }

/* Secondary (nicht mobil = wie Primary, aber Kachel-Look) */
.btn-secondary{
  display:inline-block;
  gap:.5rem;
  padding:12px 16px;
  border-radius:12px;
  border:1px solid var(--line);
  background: var(--tile);
  color: inherit;
  font-weight:700;
  line-height:1.1;
  text-align:center;
  word-break: keep-all;
  text-wrap: balance;
  box-shadow: var(--shadow);
  transition: transform var(--dur-sm) var(--ease),
              box-shadow var(--dur-sm) var(--ease),
              border-color var(--dur-sm) var(--ease),
              background-color var(--dur-sm) var(--ease),
              color var(--dur-sm) var(--ease);
  align-content:center;
  font-family: inherit;
  font-size: inherit;
  appearance:none;
}
.btn-secondary:hover,
.btn-secondary:focus-visible{
  transform: translateY(+1px);
  background: var(--brand);
  border-color: transparent;
  color: var(--ink-dark-background);
  box-shadow:0 10px 24px rgba(0,0,0,.24);
  cursor:pointer;
}

/* Optional alias für Primary z.B. im Cookie-Banner */
.btn-primary{
  background: var(--brand);
  border:1px solid transparent;
  color: var(--ink-dark-background);
  border-radius:12px;
  font-weight:700;
  line-height:1.2;
  padding:12px 16px;
  cursor:pointer;
  font-family: inherit;
  font-size: inherit;
  appearance:none;
}
.btn-primary:hover,
.btn-primary:focus-visible{
  background: var(--brand-intens);
  border:1px solid transparent;
  color: var(--ink-dark-background);
  cursor:pointer;
}

/* Offcanvas Menüpanel */
.menu-panel{
  position:fixed;
  inset:0;
  z-index:2000;
  background: var(--tile);
  color: var(--text);
  box-shadow:0 40px 120px rgba(0,0,0,.6);
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:24px;
}
:root[data-theme="dark"] .menu-panel{
  background: var(--tile);
  color: var(--text);
}
.menu-panel[hidden]{ display:none; }

.menu-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.menu-head .menu-logo{
  display:flex;
  align-items:center;
  height:44px;
}
.menu-head .menu-logo img{
  height:44px;
  width:auto;
  object-fit:contain;
  display:block;
}

.close-menu{
  background:none;
  border:0;
  font-size:1rem;
  font-weight:600;
  min-height:44px;
  line-height:1;
  color:inherit;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid transparent;
  cursor:pointer;
}

/* Mobile Menülinks */
.menu-panel nav[aria-label] a{
  display:block;
  padding:12px 0;
  font-weight:600;
  font-size:1.05rem;
  line-height:1.3;
  min-height:44px;
  text-align:center;
  color:inherit;
}
.menu-panel nav[aria-label] a:not(.nav-cta){
  border-bottom:1px solid var(--line);
}
.menu-panel nav[aria-label] a:not(.nav-cta):last-of-type{
  border-bottom:0;
  margin-bottom:16px;
  padding-bottom:16px;
}
.menu-panel nav[aria-label] a::after{
  content:none !important;
}

.menu-panel .nav-cta.btn{
  width:100%;
  text-align:center;
  display:inline-block;
}

.menu-legal{
  font-size:.9rem;
  line-height:1.4;
  display:grid;
  gap:8px;
}
.menu-legal a,
.menu-legal button{
  display:block;
  text-align:left;
  background:none;
  border:0;
  padding:8px 0;
  color:inherit;
  font:inherit;
  line-height:1.4;
  min-height:44px;
  cursor:pointer;
}

:root[data-theme="dark"] h2{ color: var(--ink-muted); }

/* Header über Brand-Sektion */
:root[data-theme="light"] header.on-brand { color: var(--ink-dark-background); }
:root[data-theme="light"] header.on-brand nav[aria-label] a{ color: var(--ink-dark-background) !important; }
:root[data-theme="light"] header.on-brand .site-nav-desktop a{ color: var(--ink-dark-background) !important; }
:root[data-theme="light"] header.on-brand .burger,
:root[data-theme="light"] header.on-brand .theme-btn{ color: var(--ink-dark-background); }
:root[data-theme="light"] header.on-brand #kontakt_btn{ color: var(--ink-dark-background); }

/* ===================== HERO ===================== */
section.hero{ position:relative; min-height:100vh; display:grid; place-items:center; background:var(--bg-hero); overflow:hidden }
.hero video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.82); }
.hero{ background: linear-gradient(180deg, #3a2b24, #1d1714) }
.hero .panel{
  position:relative; z-index:1; text-align:center; color:#fff;
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  background: rgba(0,0,0,0.08);
  padding:0; width:100vw; height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: clamp(.5rem, 2vh, 1.25rem);
}
section.hero.in{ padding:0 }
.hero h1{ color:#fff }
.hero .claim-lead{ font-weight:300; opacity:.98; display:inline-block; text-wrap: balance; }
.hero .claim-strong{ font-weight:700; display:inline-block }
.hero p.lead{
  margin:0 auto 12px; max-width:56ch; color:#fff; opacity:.95;
  font-size: clamp(1rem, 1.5vw, 1.15rem); line-height:1.5em;
}
.hero .rail{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap }
.pills{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:10px }
.pill{ border-radius:999px; padding:8px 10px; background: color-mix(in oklab, var(--brand) 16%, rgba(255,255,255,.08)); color:#fff; font-size:.95rem }

/* ===================== SECTIONS ===================== */
section{ padding:48px 0 }

.sec-h{
  display:block; margin-bottom: var(--flow);
  --sec-h-title-color: currentColor;
}
.sec-h h2{ margin-bottom:.3lh; color: var(--sec-h-title-color); }
.sec-h .subtext{
  max-width: 55ch;
  font-size: var(--step-1);
  line-height: 1.45;
  color: color-mix(in oklab, var(--text) 62%, transparent);
  text-wrap: pretty;
}

/* Produkte: Titel/Subtext auf Brand-Hintergrund */
#produkte .sec-h{ --sec-h-title-color: var(--ink-dark-background); }
#produkte .sec-h .subtext{ color: color-mix(in oklab, var(--ink-dark-background) 72%, transparent); }

.h2{ font-weight:500 }

/* ===================== TESTIMONIALS ===================== */
#stimmen{ margin-inline: calc(50% - 50vw); background-color: var(--bg-ueber); }
.trow{
  display:flex; gap:14px; overflow:auto;
  padding:12px max(4vw, calc((100vw - var(--wrap))/2)) 18px;
  -ms-overflow-style:none; scrollbar-width:none; scroll-snap-type:x mandatory;
}
.trow::-webkit-scrollbar{ display:none }
.tcard{
  border-radius:12px; min-width:360px; padding:16px; gap:8px; scroll-snap-align:start;
  transition: transform var(--dur-sm) var(--ease), box-shadow var(--dur-sm) var(--ease);
  background: var(--tile); box-shadow: var(--shadow);
}
.tcard:hover{ transform: translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.18) }
.tcard .who{ font-weight:700; padding-top:7px }
.tcard .src{ color:#bdbdbd; font-size:.92rem }
#stimmen p{ padding:0px }
.stars{ display:flex; gap:4px }
.stars svg{ width:22px; height:22px; fill: var(--brand) }
.tcard .stars{
  display:flex; gap:10px; align-items:center; line-height:1; margin-bottom:.35rem;
}
.tcard .stars .flame{
  width:22px; height:22px; display:inline-block; fill: var(--brand);
  transition: fill .25s ease;
}
.tcard:hover .stars .flame{ fill: var(--brand-intens); }
.more-link{ white-space: nowrap; }

/* ===================== ÜBER UNS ===================== */
#ueber{ background-color: var(--bg-ueber); padding-top:0 }
#ueber h2{ margin:0 }
#ueber div.sec-h, p.subtext{ margin:0 }
.about-head{ display:grid; grid-template-columns:1fr 1fr 1fr; grid-template-rows:auto auto; }
.portrait{ grid-column:2; grid-row:1; justify-self:center; align-self:end; width:70%; }
.portrait img{ border-radius:12px; aspect-ratio:4/5; object-fit:cover; width:100%; height:auto; display:none; }
div.portrait{ display:none }
.about-intro{
  grid-column:1 / -1; grid-row:2; display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:25px;
}

/* Werte-Kacheln */
.vals{ display:grid; grid-template-columns: repeat(4, 1fr); gap:12px; margin-top:16px }
.v{
  border-radius:12px; padding:12px; text-align:center; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap: clamp(.5rem, 2vh, 1.25rem);
  background: var(--tile); box-shadow: var(--shadow);
}
.v strong{ display:block; margin:0 }
.v p{ margin:0 }

/* ===================== PRODUCTS ===================== */
#produkte{ background: var(--bg-produkte); }
.cards3{ display:grid; gap:14px; grid-template-columns: repeat(12, 1fr); }
.card{
  border-radius:var(--r);
  padding: calc(.4 * var(--flow));
  grid-column: span 4;
  transition: transform var(--dur-sm) var(--ease), box-shadow var(--dur-sm) var(--ease);
  background: var(--tile); box-shadow: var(--shadow);
  display:flex; flex-direction:column;
}
.card:hover{ transform: translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.24) }
.card h3{ margin: 0 0 .5lh; }
.cards3 .card h3{ font-weight:700; }
.card h3 .subhead{ font-weight:500; font-size:.8em; opacity:.8; }
.card p{ margin: 0 0 .8lh; }
.card .shot{ background:#2a2a2a; border-radius:10px; overflow:hidden; margin-bottom: .8lh; }
.card .shot img{ width:100%; height:100%; object-fit:cover; aspect-ratio:5/4; }

/* CTA sichtbar bei Hover (Desktop) */
.card .btn{ margin-top: auto; }
.cards3 > .card .btn{
  opacity:0; transform:translateY(4px); pointer-events:none;
  transition: opacity var(--dur-sm) var(--ease), transform var(--dur-sm) var(--ease);
}
.cards3 > .card:hover .btn{ opacity:1; transform:translateY(0); pointer-events:auto; }

/* Service-Spalte */
.products-service-col{ grid-column: span 6; align-content:start; display:grid; gap:10px }
.products-service-head{ font-size:1.6rem; margin:.2em 0 .1em; color: var(--ink-dark-background); }
.ps-grid{ display:grid; gap:14px; grid-template-columns: repeat(2, 1fr); }

/* ps-card */
.ps-card{
  border-radius:12px;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:8px;
  background: var(--tile);
  box-shadow: var(--shadow);
}
.ps-card h4{ margin:.1em 0 }
.ps-card p{ margin:0 }
.ps-card .btn{ margin-top:auto; }

/* ===================== KONTAKT ===================== */
#kontakt{ background: var(--bg-kontakt) }
.kontakt-grid{ display:grid; gap:14px; grid-template-columns: repeat(12, 1fr) }
.card.contact-card{ grid-column: span 6 }
.card.studio-card{ grid-column: span 6; display:block }
.mapcard{ grid-column: span 12; position:relative; background:#1b1b1b; border-radius:var(--r); min-height:360px; overflow:hidden; width:100% }
.map-open{ position:absolute; right:12px; top:12px; z-index:2 }
.map-placeholder{ position:absolute; inset:0; display:grid; place-items:center; gap:10px; text-align:center; padding:16px; }

/* ===================== FORM ===================== */
#anfrage{ background: var(--bg-anfrage) }
form{ border-radius:var(--r); padding:16px; display:grid; gap:12px; background: var(--tile); box-shadow: var(--shadow); }
.row{ display:grid; gap:12px; grid-template-columns:1fr 1fr }
label{ font-size: var(--step--1); font-weight:600; letter-spacing:.01em; }
input,select,textarea{
  width:100%; border:0; border-radius:10px; padding:12px 14px; transition: box-shadow var(--dur-sm) var(--ease);
  background: var(--tile-2); color: inherit; font-size: 1rem; line-height: 1.4;
}
select{
  appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, #aaa 50%),
    linear-gradient(135deg, #aaa 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position: calc(100% - 18px) calc(1em - 2px), calc(100% - 12px) calc(1em - 2px), 100% 0;
  background-size: 6px 6px, 6px 6px, 2.5em 2.5em;
  background-repeat:no-repeat;
}
input:hover,select:hover,textarea:hover{ box-shadow:0 0px 5px 1px color-mix(in oklab, var(--brand-intens) 100%, transparent) }
input:focus,select:focus,textarea:focus{ box-shadow:0 0px 5px 1px color-mix(in oklab, var(--brand-intens) 100%, transparent) }
.hint{ color: var(--ink-muted); font-size: var(--step--1) }
.req{ color: var(--brand) }
.error{ color:#ffb4ab; font-size:.92rem; margin-top: .25lh; }
.actions{ display:flex; flex-wrap:wrap; gap:10px; align-items:center }

.hp-field {
  position:absolute !important;
  left:-10000px !important;
  width:1px;
  height:1px;
  overflow:hidden;
}

button.btn[disabled]{
  opacity:.6;
  cursor:not-allowed;
}


/* Telefon-Links & Ziffern */
a[href^="tel:"]{ white-space: nowrap; }
.nowrap{ white-space: nowrap; }
.numtab{ font-variant-numeric: tabular-nums; }

/* Öffnungszeiten Liste */
ul.hours li{ font-variant-numeric: tabular-nums; }

/* Header link underline color logic */
header .site-nav-desktop a{ position:relative; text-decoration:none; }
header .site-nav-desktop a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-0.25em;
  height:2px;
  opacity:0;
  transform:scaleX(0);
  transform-origin:left;
  transition: transform .25s ease, opacity .25s ease, background-color .15s ease;
  background-color: var(--brand);
}
header .site-nav-desktop a:hover::after,
header .site-nav-desktop a.is-active::after{ opacity:1; transform:scaleX(1); }

/* Links global */
a:not(.btn):hover{ text-decoration-color: color-mix(in oklab, var(--brand) 60%, currentColor 40%); }
:root[data-theme="dark"] a:not(.btn){ text-decoration-color: color-mix(in oklab, white 60%, transparent); }


/* ========== Cookie Banner (unten fix) ========== */

.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;

  /* kein harter Rand mehr */
  border-top: 0;

  /* Hintergrund wie eure Karten, aber leicht abgetönt über der Seite */
  background: color-mix(in oklab, var(--tile) 92%, transparent);

  /* sanfter Shadow wie eure Cards / Hover, aber stärker weil Overlay */
  box-shadow: 0 24px 60px rgba(0,0,0,.4);

  /* auf sehr kleinen Screens kein Platzverlust */
  padding-block: 16px;
}

:root[data-theme="dark"] .cookie-banner {
  background: color-mix(in oklab, var(--tile) 96%, transparent);
  box-shadow: 0 24px 60px rgba(0,0,0,.8);
}

.cookie-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px 24px;

  /* gleiche max-Breite wie .wrap */
  padding-inline: clamp(12px,2.4vw,28px);
  padding-block: 4px;
}

.cookie-text {
  flex: 1 1 320px;
  min-width: 0;
  color: var(--text);
}

.cookie-headline {
  margin: 0 0 4px;
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}

.cookie-copy {
  margin: 0;
  font-size: var(--step--1);
  line-height: 1.45;
  color: color-mix(in oklab, var(--text) 80%, transparent);
  text-wrap: pretty;
}
.cookie-copy strong {
  font-weight: 600;
  color: var(--text);
}
.cookie-copy em {
  font-style: normal;
  font-weight: 600;
  color: var(--brand);
}

.cookie-actions {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: flex-start;
  justify-content: flex-start;
  min-width: min(320px,100%);
}

.cookie-actions .cookie-btn {
  white-space: normal;
  text-align: center;
  line-height: 1.25;
  min-height: 44px;
  min-width: max(180px, 44%);
  flex: 1 1 auto;
  font-size: var(--step--1);
  font-weight: 700;
  padding: 12px 14px;
  border-radius: 12px;
}


/* ===== Hero Scroll Hint Pfeil ===== */
.scroll-down {
  --size: 42px;
  position: absolute;
  bottom: clamp(48px, 8vh, 80px);
  left: 50%;
  transform: translateX(-50%);
  width: var(--size);
  height: var(--size);
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, #fff 70%, transparent);
  background: rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  backdrop-filter: blur(6px) saturate(140%);
  box-shadow: 0 18px 36px rgba(0,0,0,.5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  /* Touch friendly */
  min-width:44px;
  min-height:44px;

  /* subtle motion */
  animation: scroll-bounce 2.4s var(--ease) infinite;
}

.scroll-down-icon {
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -.03em;
  user-select: none;
}

/* leichte Auf/Ab-Animation für Aufmerksamkeit */
@keyframes scroll-bounce {
  0%   { transform: translate(-50%, 0); }
  50%  { transform: translate(-50%, 6px); }
  100% { transform: translate(-50%, 0); }
}

@media (max-width:480px){
  .scroll-down {
    --size: 40px;
  }
}


/* kleine Screens: Buttons unter dem Text, full width */
@media (max-width: 640px){
  .cookie-inner {
    flex-direction: column;
    align-items: stretch;
  }

  .cookie-text {
    flex-basis: auto;
  }

  .cookie-actions {
    flex-basis: auto;
    flex-direction: column;
    align-items: stretch;
  }

  .cookie-actions .cookie-btn {
    min-width: 100%;
  }
}

/* mittlere / große Screens: Buttons rechts als Block */
@media (min-width: 641px){
  .cookie-actions {
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    min-width: 260px;
  }

  .cookie-actions .cookie-btn {
    min-width: 240px;
  }
}


/* ===================== Responsive ===================== */
@media (min-width:1024px){
  .nav{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    column-gap:24px;
    height:var(--header-h);
  }
  .site-nav-desktop{ display:flex; justify-content:center; }
  header .nav.wrap{ width: min(1320px, 98vw); padding-inline:16px; }
  header .logo img{ height:72px; }
  .header-cta .burger{ display:none; }

  .kontakt-grid .card.contact-card,
  .kontakt-grid .card.studio-card{ grid-column: span 6; }
  .kontakt-grid .mapcard{ grid-column: span 12; }
}

@media (max-width:1023px){
  .about-head{ grid-template-columns:1fr; grid-template-rows:auto auto; }
  .portrait{ grid-column:1; display:none; }
  .about-intro{ grid-column:1; grid-template-columns:1fr; }

  .cards3 > .card .btn{ opacity:1; transform:none; pointer-events:auto; }

  .cards3{ grid-template-columns: repeat(12, 1fr); }
  .card{ grid-column: span 6; }
  .products-service-col{ grid-column: span 12 }
  .ps-grid{ grid-template-columns:1fr 1fr; gap:12px; margin-top:16px }

  .kontakt-grid .card.contact-card,
  .kontakt-grid .card.studio-card{ grid-column: span 6; }
  .kontakt-grid .mapcard{ grid-column: span 12; }

  .hero .rail{ display:none; }
  .site-nav-desktop{ display:none; }

  .hero-mobile-nav{
    display:flex !important;
    justify-content:center !important;
    text-align:center;
    margin-inline:auto;
    max-width:680px;
  }

  /* ==== NEU für Mobile: Kontakt-Button im Header ausblenden */
  .header-cta #kontakt_btn{
    display:none;
  }

  /* ==== NEU für Mobile: Logo größer machen */
  header .logo img{
    height:64px;
  }

  /* ==== NEU für Mobile: Innenabstand im Hero-Text geben,
     damit Text nicht direkt am Rand klebt */
  .hero .panel{
    padding-inline: clamp(16px,4vw,24px);
  }
}

@media (max-width:639px){
  .cards3{ grid-template-columns: repeat(12, 1fr); }
  .card{ grid-column: span 12 }
  .kontakt-grid .card.contact-card,
  .kontakt-grid .card.studio-card,
  .kontakt-grid .mapcard{ grid-column: span 12 }

  .vals{ grid-template-columns:1fr 1fr; gap:12px; margin-top:16px }
  .ps-grid{ grid-template-columns:1fr; gap:12px; margin-top:16px }
}
@media (max-width:500px){
  .vals{ grid-template-columns:1fr; }
}

/* Hero mobile nav base (im DOM belassen) */
.hero-mobile-nav{
  display:none;
  margin-top:12px;
  gap:8px;
  flex-wrap:wrap;
}
.hero-mobile-nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius:999px;
  text-decoration:none;
  background: color-mix(in oklab, var(--tile) 90%, transparent);
  color: var(--text);
  border:1px solid var(--line);
  font-weight:600;
  font-size:.95rem;
}
.hero-mobile-nav a.btn{
  background: var(--brand);
  border: 1px solid transparent;
  color: var(--ink-dark-background);
  padding:12px 16px;
  border-radius:12px;
  font-weight:700;
  display:inline-block;
  transition: transform var(--dur-sm) var(--ease), box-shadow var(--dur-sm) var(--ease), border-color var(--dur-sm) var(--ease), background-color var(--dur-sm) var(--ease);
}
.hero-mobile-nav a.btn:hover{
  transform: translateY(+1px);
  background-color: var(--brand-intens);
  color: var(--ink-dark-background);
}
.hero-mobile-nav a::after{ content:none !important; }
.hero-mobile-nav a{ text-decoration:none !important; }


/* ===================== FOOTER ===================== */
footer{
  color:grey;
  padding:18px 0 48px;
}
.foot{
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
h4{
  font-size: var(--step-1);
  letter-spacing:.005em;
}
address{
  font-style: normal;
}
strong.label{
  font-variant-caps: all-small-caps;
  letter-spacing:.06em;
}