/* =========================================================
   COASTAL BLISS KERAMIK — Technical Precision Design System
   ========================================================= */

:root{
  --color-ink: #26221D;
  --color-ink-soft: #524B41;
  --color-paper: #F7F3EC;
  --color-paper-alt: #EFE7D8;
  --color-stone: #E4DACA;
  --color-stone-line: rgba(38,34,29,0.14);
  --color-clay: #C1622E;
  --color-clay-dark: #9C4B1F;
  --color-clay-light: #EAB48A;
  --color-slate: #47564F;
  --color-slate-dark: #2E3934;
  --color-slate-light: #7C9089;
  --color-white: #FFFDF9;

  --font-heading: 'Red Hat Display', sans-serif;
  --font-body: 'Red Hat Text', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;

  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: clamp(2rem, 1.6rem + 1.6vw, 3rem);
  --space-xl: clamp(3rem, 2.2rem + 3vw, 5rem);
  --space-2xl: clamp(4rem, 3rem + 4vw, 7rem);
  --space-3xl: clamp(5rem, 3.5rem + 6vw, 9rem);

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 34px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(38,34,29,0.07), 0 1px 1px rgba(38,34,29,0.05);
  --shadow-md: 0 6px 16px -4px rgba(38,34,29,0.12), 0 3px 6px -2px rgba(38,34,29,0.08);
  --shadow-lg: 0 24px 48px -16px rgba(38,34,29,0.22), 0 10px 20px -10px rgba(38,34,29,0.12);
  --shadow-clay-glow: 0 10px 28px -6px rgba(193,98,46,0.4), 0 3px 10px rgba(193,98,46,0.22);
  --shadow-slate-glow: 0 10px 28px -6px rgba(46,57,52,0.32);

  --container-w: 1240px;

  --ease: cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ font-family: var(--font-heading); color: var(--color-ink); line-height:1.15; margin:0 0 var(--space-sm); font-weight:700; }
p{ margin:0 0 var(--space-sm); color: var(--color-ink-soft); }
figure{ margin:0; }
figcaption{ margin-top: var(--space-2xs); color: var(--color-ink-soft); }
small{ display:inline-block; color: var(--color-ink-soft); font-size:0.82rem; }
mark{ background: linear-gradient(180deg, transparent 55%, var(--color-clay-light) 55%); color: var(--color-ink); padding: 0 0.1em; }
meter{ width:100%; height:14px; margin: var(--space-2xs) 0 var(--space-sm); }

.mono-label{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-clay-dark);
  display: inline-block;
}


.skip-to-content{
  position:absolute;
  top:0; left:0;
  background: var(--color-ink);
  color: var(--color-paper);
  padding: 0.8rem 1.2rem;
  z-index: 999;
  transform: translateY(-100%);
  transition: transform .2s var(--ease);
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-to-content:focus{ transform: translateY(0); }


.global-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 0.9rem 1.7rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-weight:700;
  font-size: 0.95rem;
  border: 1.5px solid transparent;
  cursor:pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
  min-height: 48px;
}
.global-btn--primary{
  background: var(--color-clay);
  color: var(--color-white);
  box-shadow: var(--shadow-clay-glow);
}
.global-btn--primary:hover{ transform: translateY(-2px); box-shadow: 0 16px 32px -8px rgba(193,98,46,0.45); background: var(--color-clay-dark); }
.global-btn--ghost{
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-stone-line);
}
.global-btn--ghost:hover{ background: var(--color-paper-alt); border-color: var(--color-clay); transform: translateY(-2px); }

/* =========================
   GLOBAL HEADER
   ========================= */
.global-header{
  padding: var(--space-md) var(--space-md) var(--space-sm);
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-stone-line);
}
.global-header__bar{
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  max-width: var(--container-w);
  margin: 0 auto;
}
.global-header__brand{ display:inline-flex; }
.global-header__logo{ height: 40px; width:auto; }
.global-header__eyebrow{
  position:absolute;
  right:0;
  display:none;
}
.global-header__toggle{
  position:absolute;
  left:0;
  width: 44px; height:44px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-stone-line);
  background: var(--color-white);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  cursor:pointer;
}
.global-header__toggle-line{
  width: 20px; height: 2px; background: var(--color-ink);
  transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.global-header__nav{
  margin-top: var(--space-sm);
  display:none;
}
.global-header__nav ul{
  display:flex; justify-content:center; gap: var(--space-lg);
  max-width: var(--container-w); margin: 0 auto;
}
.global-header__nav a{
  font-family: var(--font-heading);
  font-weight:600;
  font-size: 0.95rem;
  padding: 0.4rem 0.2rem;
  border-bottom: 2px solid transparent;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.global-header__nav a:hover, .global-header__nav a[aria-current="page"]{
  color: var(--color-clay-dark);
  border-color: var(--color-clay);
}

@media (min-width: 900px){
  .global-header__eyebrow{ display:inline-block; }
  .global-header__toggle{ display:none; }
  .global-header__nav{ display:block; }
}


.global-mobile-sheet{
  position: fixed; inset:0; z-index: 1000;
  visibility:hidden;
  pointer-events:none;
}
.global-mobile-sheet.is-open{ visibility:visible; pointer-events:auto; }
.global-mobile-sheet__backdrop{
  position:absolute; inset:0;
  background: rgba(38,34,29,0.45);
  opacity:0;
  transition: opacity .25s var(--ease);
}
.global-mobile-sheet.is-open .global-mobile-sheet__backdrop{ opacity:1; }
.global-mobile-sheet__panel{
  position:absolute; left:0; right:0; bottom:0;
  background: var(--color-white);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: var(--space-sm) var(--space-md) var(--space-xl);
  box-shadow: var(--shadow-lg);
  transform: translateY(100%);
  transition: transform .32s var(--ease);
}
.global-mobile-sheet.is-open .global-mobile-sheet__panel{ transform: translateY(0); }
.global-mobile-sheet__handle{
  display:block; width:44px; height:5px; border-radius: var(--radius-pill);
  background: var(--color-stone-line); margin: 0 auto var(--space-md);
}
.global-mobile-sheet__list li + li{ margin-top: var(--space-2xs); }
.global-mobile-sheet__list a{
  display:flex; align-items:center; gap: var(--space-sm);
  padding: 1rem 0.5rem;
  font-family: var(--font-heading); font-weight:600; font-size:1.05rem;
  border-radius: var(--radius-md);
  min-height: 48px;
  transition: background .2s var(--ease);
}
.global-mobile-sheet__list a:hover{ background: var(--color-paper-alt); }
.global-mobile-sheet__list i{ width:22px; text-align:center; color: var(--color-clay); }

@media (min-width:900px){ .global-mobile-sheet{ display:none; } }


.global-back-to-top{
  position: fixed; right: var(--space-md); bottom: var(--space-md);
  width:52px; height:52px; border-radius:50%;
  background: var(--color-ink); color: var(--color-paper);
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-lg);
  opacity:0; transform: translateY(12px) scale(.9);
  pointer-events:none;
  transition: opacity .3s var(--ease), transform .3s var(--ease), background .2s var(--ease);
  z-index: 800;
}
.global-back-to-top.is-visible{ opacity:1; transform: translateY(0) scale(1); pointer-events:auto; }
.global-back-to-top:hover{ background: var(--color-clay); }

/* =========================
   GLOBAL FOOTER
   ========================= */
.global-footer{
  background: var(--color-slate-dark);
  color: var(--color-paper-alt);
  padding: var(--space-2xl) var(--space-md) var(--space-md);
  margin-top: var(--space-2xl);
}
.global-footer__inner{
  max-width: var(--container-w); margin:0 auto;
  display:grid; gap: var(--space-lg);
  grid-template-columns: 1fr;
}
.global-footer p{ color: rgba(247,243,236,0.7); }
.global-footer .mono-label{ color: var(--color-clay-light); margin-bottom: var(--space-xs); }
.global-footer__brand img{ height:32px; margin-bottom: var(--space-xs); filter: brightness(0) invert(1); }
.global-footer__nav ul, .global-footer__legal ul{ display:flex; flex-direction:column; gap: var(--space-2xs); }
.global-footer__nav a, .global-footer__legal a{ color: rgba(247,243,236,0.85); transition: color .2s var(--ease); }
.global-footer__nav a:hover, .global-footer__legal a:hover{ color: var(--color-clay-light); }
.global-footer .contact-details p{ margin:0 0 4px; }
.global-footer .contact-details a{ color: rgba(247,243,236,0.85); }
.global-footer__bottom{
  max-width: var(--container-w); margin: var(--space-lg) auto 0;
  padding-top: var(--space-md);
  border-top: 1px solid rgba(247,243,236,0.15);
  display:flex; flex-wrap:wrap; gap: var(--space-xs) var(--space-md); justify-content:space-between;
}
.global-footer__bottom small{ color: rgba(247,243,236,0.55); }

@media (min-width: 700px){
  .global-footer__inner{ grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}


.global-cta{
  background: var(--color-slate);
  color: var(--color-white);
  padding: var(--space-2xl) var(--space-md);
  border-radius: var(--radius-xl);
  margin: 0 var(--space-md);
}
.global-cta__inner{ max-width: 760px; margin:0 auto; text-align:center; }
.global-cta h2{ color: var(--color-white); font-size: clamp(1.7rem, 1.4rem + 1.4vw, 2.4rem); }
.global-cta p{ color: rgba(255,253,249,0.82); max-width: 560px; margin-left:auto; margin-right:auto; }
.global-cta .mono-label{ color: var(--color-clay-light); }


.contact-details p{ margin:0 0 6px; }
.contact-details a{ color: var(--color-clay-dark); }


.js-reveal{ opacity:0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js-reveal.visible{ opacity:1; transform: translateY(0); }

/* =========================
   HOME — HERO
   ========================= */
.home-hero{ padding: var(--space-2xl) var(--space-md); }
.home-hero__grid{
  max-width: var(--container-w); margin:0 auto;
  display:grid; gap: var(--space-xl);
  align-items:center;
}
.home-hero__eyebrow{ margin-bottom: var(--space-sm); }
.home-hero__title{ font-size: clamp(2.2rem, 1.7rem + 2.6vw, 3.8rem); margin-bottom: var(--space-md); }
.home-hero__lead{ font-size: 1.1rem; max-width: 46ch; }
.home-hero__actions{ display:flex; flex-wrap:wrap; gap: var(--space-sm); margin: var(--space-md) 0 var(--space-lg); }
.home-hero__spec-strip{
  display:flex; flex-wrap:wrap; gap: var(--space-md) var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-stone-line);
}
.home-hero__spec-strip div{ display:flex; flex-direction:column; gap:2px; }
.home-hero__spec-strip dt{ opacity:0.7; }
.home-hero__spec-strip dd{ margin:0; color: var(--color-ink); font-family: var(--font-mono); font-size:0.8rem; }
.home-hero__figure{
  border-radius: var(--radius-xl);
  overflow:hidden;
  box-shadow: var(--shadow-lg);
  position:relative;
}
.home-hero__figure img{ width:100%; height:100%; object-fit:cover; aspect-ratio: 4/5; }
.home-hero__figure figcaption{ position:absolute; bottom: var(--space-sm); left: var(--space-sm); background: rgba(38,34,29,0.75); color: var(--color-paper); padding: 6px 12px; border-radius: var(--radius-sm); }

@media (min-width: 960px){
  .home-hero__grid{ grid-template-columns: 1.05fr 0.95fr; }
}


.home-intro{ padding: var(--space-2xl) var(--space-md); }
.home-intro__inner{ max-width: 900px; margin:0 auto; }
.home-intro__content{ margin-top: var(--space-sm); }
.home-intro__heading{ font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.3rem); max-width: 20ch; }


.home-products{ padding: var(--space-2xl) var(--space-md); background: var(--color-paper-alt); border-radius: var(--radius-xl); margin: 0 var(--space-md); }
.home-products__header{ max-width: 640px; margin: 0 auto var(--space-xl); text-align:center; }
.home-products__header h2{ font-size: clamp(1.7rem, 1.4rem + 1.4vw, 2.3rem); }
.home-products__grid{ max-width: var(--container-w); margin:0 auto; display:grid; gap: var(--space-lg); grid-template-columns: 1fr; }
.home-products__card{
  background: var(--color-white); border-radius: var(--radius-lg);
  overflow:hidden; box-shadow: var(--shadow-md);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  display:flex; flex-direction:column;
}
.home-products__card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.home-products__card figure img{ width:100%; aspect-ratio: 4/3; object-fit:cover; }
.home-products__card hgroup{ padding: var(--space-md) var(--space-md) 0; }
.home-products__card hgroup h3{ margin-bottom:2px; }
.home-products__card hgroup p{ font-family: var(--font-mono); font-size:0.8rem; color: var(--color-clay-dark); margin:0; }
.home-products__card > p{ padding: var(--space-sm) var(--space-md) var(--space-md); }

@media (min-width: 780px){
  .home-products__grid{ grid-template-columns: repeat(3, 1fr); }
}


.home-parallax{
  position:relative; overflow:hidden;
  min-height: 480px;
  margin: var(--space-2xl) 0;
  display:flex; align-items:flex-end;
}
.home-parallax__media{ position:absolute; inset:-15% 0; z-index:0; will-change: transform; }
.home-parallax__media img{ width:100%; height:100%; object-fit:cover; }
.home-parallax::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(38,34,29,0.15) 0%, rgba(38,34,29,0.78) 85%);
  z-index:1;
}
.home-parallax__overlay{
  position:relative; z-index:2;
  color: var(--color-paper);
  padding: var(--space-2xl) var(--space-md);
  max-width: 640px;
}
.home-parallax__overlay h2{ color: var(--color-white); font-size: clamp(1.7rem, 1.4rem + 1.4vw, 2.4rem); }
.home-parallax__overlay p{ color: rgba(247,243,236,0.85); }
.home-parallax__overlay .mono-label{ color: var(--color-clay-light); }


.home-process{ padding: var(--space-2xl) var(--space-md); }
.home-process__header{ max-width: 640px; margin: 0 auto var(--space-xl); text-align:center; }
.home-process__list{
  max-width: var(--container-w); margin:0 auto;
  display:grid; gap: var(--space-md);
  grid-template-columns: 1fr;
}
.home-process__list li{
  background: var(--color-white); border-radius: var(--radius-md);
  padding: var(--space-md); box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-stone-line);
  transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.home-process__list li:hover{ box-shadow: var(--shadow-md); transform: translateY(-3px); }
.home-process__num{ font-size:1.4rem; color: var(--color-clay); display:block; margin-bottom: var(--space-2xs); }
.home-process__list hgroup h3{ margin-bottom:0; }
.home-process__list hgroup p{ font-family: var(--font-mono); font-size:0.78rem; color: var(--color-ink-soft); margin:2px 0 var(--space-2xs); }

@media (min-width: 700px){
  .home-process__list{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1080px){
  .home-process__list{ grid-template-columns: repeat(3, 1fr); }
}


.home-timeline{ padding: var(--space-2xl) var(--space-md); background: var(--color-paper-alt); border-radius: var(--radius-xl); margin: 0 var(--space-md); }
.home-timeline__header{ max-width: 640px; margin: 0 auto var(--space-xl); text-align:center; }
.home-timeline__list{
  max-width: 780px; margin: 0 auto;
  position:relative;
  padding-left: var(--space-lg);
  border-left: 2px solid var(--color-stone-line);
}
.home-timeline__list li{ position:relative; padding-bottom: var(--space-xl); }
.home-timeline__list li:last-child{ padding-bottom:0; }
.home-timeline__list li::before{
  content:""; position:absolute; left: calc(-1 * var(--space-lg) - 6px); top:6px;
  width:12px; height:12px; border-radius:50%;
  background: var(--color-clay); box-shadow: 0 0 0 4px var(--color-paper-alt), var(--shadow-clay-glow);
}
.home-timeline__date{ display:block; margin-bottom: var(--space-2xs); font-size:0.85rem; }
.home-timeline__list hgroup h3{ margin-bottom:2px; }
.home-timeline__list hgroup p{ font-family: var(--font-mono); font-size:0.78rem; color: var(--color-ink-soft); margin:0 0 var(--space-2xs); }


.home-specs{ padding: var(--space-2xl) var(--space-md); }
.home-specs__header{ max-width: 640px; margin: 0 auto var(--space-xl); text-align:center; }
.home-specs__grid{ max-width: var(--container-w); margin:0 auto; display:grid; gap: var(--space-lg); grid-template-columns: 1fr; }
.home-specs__table table{ width:100%; border-collapse: collapse; background: var(--color-white); border-radius: var(--radius-md); overflow:hidden; box-shadow: var(--shadow-sm); }
.home-specs__table th, .home-specs__table td{ text-align:left; padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--color-stone-line); font-size:0.92rem; }
.home-specs__table th{ font-family: var(--font-mono); font-weight:500; color: var(--color-ink-soft); width:44%; }
.home-specs__meter{ background: var(--color-white); border-radius: var(--radius-md); padding: var(--space-md); box-shadow: var(--shadow-sm); }
.home-specs__meter-note{ font-size:0.85rem; margin-bottom: var(--space-md); }
meter::-webkit-meter-optimum-value{ background: var(--color-clay); }
meter::-webkit-meter-bar{ background: var(--color-paper-alt); border-radius: var(--radius-pill); border:none; }

@media (min-width: 900px){
  .home-specs__grid{ grid-template-columns: 1.1fr 0.9fr; }
}

/* =========================
   ABOUT PAGE
   ========================= */
.about-hero{ padding: var(--space-2xl) var(--space-md) var(--space-lg); max-width: 900px; margin:0 auto; }
.about-hero h1{ font-size: clamp(2rem, 1.6rem + 2vw, 3.2rem); }
.about-hero p{ font-size:1.05rem; max-width: 60ch; }

.about-story{ padding: var(--space-2xl) var(--space-md); max-width: var(--container-w); margin:0 auto; display:grid; gap: var(--space-xl); }
.about-story__media img{ width:100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); aspect-ratio: 4/3.1; object-fit:cover; }
.about-story__text h2{ font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); max-width: 22ch; }

@media (min-width: 900px){
  .about-story{ grid-template-columns: 1fr 1.1fr; align-items:center; }
}

.about-values{ padding: var(--space-2xl) var(--space-md); background: var(--color-paper-alt); border-radius: var(--radius-xl); margin: 0 var(--space-md); }
.about-values__header{ max-width: 640px; margin: 0 auto var(--space-xl); text-align:center; }
.about-values__grid{ max-width: var(--container-w); margin:0 auto; display:grid; gap: var(--space-md); grid-template-columns: 1fr; }
.about-values__card{ background: var(--color-white); padding: var(--space-md); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); border-left: 3px solid var(--color-clay); }
.about-values__card hgroup h3{ margin-bottom:2px; font-size:1.1rem; }
.about-values__card hgroup p{ font-family: var(--font-mono); font-size:0.75rem; color: var(--color-slate); margin:0 0 var(--space-2xs); }

@media (min-width: 700px){ .about-values__grid{ grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1080px){ .about-values__grid{ grid-template-columns: repeat(4,1fr); } }

.about-workshop{ padding: var(--space-2xl) var(--space-md); max-width: var(--container-w); margin:0 auto; }
.about-workshop__grid{ display:grid; gap: var(--space-xl); align-items:center; }
.about-workshop__grid img{ width:100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); aspect-ratio: 5/4; object-fit:cover; }
.about-workshop__text h2{ font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); }

@media (min-width: 900px){ .about-workshop__grid{ grid-template-columns: 1fr 1fr; } }

.about-process{ padding: var(--space-2xl) var(--space-md); }
.about-process__header{ max-width: 700px; margin: 0 auto var(--space-lg); text-align:center; }
.about-process__table{ max-width: var(--container-w); margin:0 auto; overflow-x:auto; }
.about-process__table table{ width:100%; border-collapse:collapse; background: var(--color-white); border-radius: var(--radius-md); overflow:hidden; box-shadow: var(--shadow-sm); }
.about-process__table th, .about-process__table td{ padding: 0.9rem 1.1rem; border-bottom:1px solid var(--color-stone-line); text-align:left; font-size:0.92rem; }
.about-process__table thead th{ font-family: var(--font-mono); background: var(--color-paper-alt); }

.about-cta{ margin-top: var(--space-2xl); }

/* =========================
   PRODUKTE PAGE
   ========================= */
.produkte-hero{ padding: var(--space-2xl) var(--space-md); max-width: var(--container-w); margin:0 auto; display:grid; gap: var(--space-xl); align-items:center; }
.produkte-hero__text h1{ font-size: clamp(2rem, 1.6rem + 2vw, 3.2rem); }
.produkte-hero__figure img{ width:100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); aspect-ratio: 4/3.2; object-fit:cover; }

@media (min-width: 900px){ .produkte-hero{ grid-template-columns: 1fr 1fr; } }

.produkte-grid{ padding: var(--space-lg) var(--space-md) var(--space-2xl); max-width: var(--container-w); margin:0 auto; display:flex; flex-direction:column; gap: var(--space-2xl); }
.produkte-grid__item{ display:grid; gap: var(--space-lg); align-items:center; }
.produkte-grid__item figure img{ width:100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); aspect-ratio: 4/3.1; object-fit:cover; }
.produkte-grid__body h2{ font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); margin-bottom:2px; }
.produkte-grid__body hgroup p{ font-family: var(--font-mono); font-size:0.8rem; color: var(--color-clay-dark); margin:0 0 var(--space-sm); }
.produkte-grid__specs{ display:flex; flex-wrap:wrap; gap: var(--space-sm); margin-top: var(--space-sm); }
.produkte-grid__specs li{ background: var(--color-paper-alt); padding: 6px 12px; border-radius: var(--radius-sm); font-size:0.75rem; }

@media (min-width: 860px){
  .produkte-grid__item{ grid-template-columns: 1fr 1fr; }
  .produkte-grid__item--reverse figure{ order:2; }
}

.produkte-care{ padding: var(--space-2xl) var(--space-md); background: var(--color-paper-alt); border-radius: var(--radius-xl); margin: 0 var(--space-md); }
.produkte-care__header{ max-width: 640px; margin: 0 auto var(--space-lg); text-align:center; }
.produkte-care__grid{ max-width: var(--container-w); margin:0 auto; display:grid; gap: var(--space-md); grid-template-columns: 1fr; }
.produkte-care__card{ background: var(--color-white); padding: var(--space-md); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.produkte-care__card hgroup h3{ margin-bottom:2px; font-size:1.05rem; }
.produkte-care__card hgroup p{ font-family: var(--font-mono); font-size:0.72rem; color: var(--color-slate); margin:0 0 var(--space-2xs); }

@media (min-width: 700px){ .produkte-care__grid{ grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1080px){ .produkte-care__grid{ grid-template-columns: repeat(4,1fr); } }

.produkte-cta{ margin-top: var(--space-2xl); }

/* =========================
   CONTACT PAGE
   ========================= */
.contact-hero{ padding: var(--space-2xl) var(--space-md); max-width: var(--container-w); margin:0 auto; display:grid; gap: var(--space-xl); align-items:center; }
.contact-hero__text h1{ font-size: clamp(2rem, 1.6rem + 2vw, 3.2rem); }
.contact-hero__figure img{ width:100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); aspect-ratio: 4/3.1; object-fit:cover; }

@media (min-width: 900px){ .contact-hero{ grid-template-columns: 1fr 1fr; } }

.contact-form-section{ padding: var(--space-lg) var(--space-md) var(--space-2xl); max-width: var(--container-w); margin:0 auto; }
.contact-form-section__grid{ display:grid; gap: var(--space-xl); }
.contact-form-section__form-wrap{ background: var(--color-white); padding: var(--space-lg); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.contact-form-section__form{ display:flex; flex-direction:column; gap: var(--space-md); margin-top: var(--space-md); }
.field-group{ display:flex; flex-direction:column; gap:6px; }
.field-group label{ font-weight:600; font-size:0.92rem; }
.field-group input[type="text"], .field-group input[type="email"], .field-group textarea{
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--color-stone-line);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size:1rem;
  background: var(--color-paper);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
  min-height: 48px;
}
.field-group textarea{ min-height: 130px; resize: vertical; }
.field-group input:focus, .field-group textarea:focus{
  outline:none; border-color: var(--color-clay); box-shadow: 0 0 0 3px rgba(193,98,46,0.18);
}
.field-hint{ font-size:0.78rem; color: var(--color-ink-soft); }
.field-group--checkbox{ flex-direction:row; align-items:flex-start; gap: var(--space-2xs); }
.field-group--checkbox input{ margin-top:4px; width:20px; height:20px; accent-color: var(--color-clay); flex-shrink:0; }
.field-group--checkbox label{ font-weight:400; font-size:0.9rem; }
.field-group--checkbox label a{ color: var(--color-clay-dark); text-decoration:underline; }
.contact-form-section__alert{
  background: #FDECEA; color:#8A2A1E; padding: 0.8rem 1rem; border-radius: var(--radius-sm); font-size:0.9rem;
}
.contact-form-section__alert:empty{ display:none; }

.contact-form-section__side{ display:flex; flex-direction:column; gap: var(--space-lg); }
.contact-consultation{ background: var(--color-slate); color: var(--color-white); padding: var(--space-lg); border-radius: var(--radius-lg); box-shadow: var(--shadow-slate-glow); }
.contact-consultation h3{ color: var(--color-white); }
.contact-consultation p{ color: rgba(255,253,249,0.85); }
.contact-consultation .mono-label{ color: var(--color-clay-light); }
.contact-form-section .contact-details{ background: var(--color-paper-alt); padding: var(--space-lg); border-radius: var(--radius-lg); }
.contact-form-section .contact-details a{ color: var(--color-clay-dark); }

@media (min-width: 960px){ .contact-form-section__grid{ grid-template-columns: 1.3fr 1fr; } }

.contact-map{ padding: 0 var(--space-md) var(--space-2xl); max-width: var(--container-w); margin: 0 auto; }
.contact-map .mono-label{ display:block; margin-bottom: var(--space-sm); }
.contact-map__frame{ border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-md); }
.contact-map__frame iframe{ display:block; }

/* =========================
   THANKS PAGE
   ========================= */
.thanks-hero{ padding: var(--space-2xl) var(--space-md); max-width: 700px; margin:0 auto; text-align:center; }
.thanks-hero h1{ font-size: clamp(2rem, 1.6rem + 2vw, 2.8rem); }
.thanks-hero .global-btn{ margin-top: var(--space-md); }

.thanks-timeline{ padding: 0 var(--space-md) var(--space-2xl); max-width: 560px; margin:0 auto; }
.thanks-timeline__list{ border-left: 2px solid var(--color-stone-line); padding-left: var(--space-lg); }
.thanks-timeline__item{ position:relative; padding-bottom: var(--space-lg); }
.thanks-timeline__item:last-child{ padding-bottom:0; }
.thanks-timeline__icon{
  position:absolute; left: calc(-1 * var(--space-lg) - 15px); top:0;
  width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--color-stone); color: var(--color-ink-soft);
  font-size:0.85rem;
}
.thanks-timeline__item.is-done .thanks-timeline__icon{ background: var(--color-clay); color: var(--color-white); box-shadow: var(--shadow-clay-glow); }
.thanks-timeline__item.is-current hgroup h3{ color: var(--color-clay-dark); }
.thanks-timeline__item.is-upcoming{ opacity:0.55; }
.thanks-timeline__item hgroup h3{ margin-bottom:2px; font-size:1.05rem; }
.thanks-timeline__item hgroup p{ margin:0; font-family: var(--font-mono); font-size:0.78rem; }

/* =========================
   LEGAL PAGES
   ========================= */
.legal-layout{ padding: var(--space-2xl) var(--space-md); max-width: var(--container-w); margin:0 auto; display:grid; gap: var(--space-xl); }
.legal-layout__nav{ align-self:start; position: static; }
.legal-layout__nav ul{ display:flex; flex-direction:column; gap: 8px; margin-top: var(--space-sm); }
.legal-layout__nav a{ font-size:0.88rem; color: var(--color-ink-soft); transition: color .2s var(--ease); }
.legal-layout__nav a:hover{ color: var(--color-clay-dark); }
.legal-layout__updated{ margin: var(--space-2xs) 0 0; }
.legal-layout__content h1{ font-size: clamp(1.9rem, 1.5rem + 2vw, 2.6rem); }
.legal-layout__content h2{ font-size:1.25rem; margin-top: var(--space-lg); }
.legal-layout__content p{ max-width: 68ch; }
.legal-layout__content table{ width:100%; border-collapse:collapse; margin: var(--space-sm) 0 var(--space-md); }
.legal-layout__content th, .legal-layout__content td{ text-align:left; padding: 0.6rem 0.8rem; border-bottom:1px solid var(--color-stone-line); font-size:0.92rem; }
.legal-layout__block{ margin-bottom: var(--space-lg); padding-bottom: var(--space-lg); border-bottom: 1px dashed var(--color-stone-line); }
.legal-layout__block:last-child{ border-bottom:none; }

@media (min-width: 960px){
  .legal-layout{ grid-template-columns: 240px 1fr; }
  .legal-layout__nav{ position: sticky; top: var(--space-md); }
}

/* =========================
   IMPRESSUM
   ========================= */
.impressum-layout{ padding: var(--space-2xl) var(--space-md); max-width: 900px; margin:0 auto; }
.impressum-layout h1{ font-size: clamp(1.9rem, 1.5rem + 2vw, 2.6rem); }
.impressum-layout h2{ font-size:1.2rem; margin-top: var(--space-lg); border-top:1px solid var(--color-stone-line); padding-top: var(--space-lg); }
.impressum-layout h2:first-of-type{ border-top:none; padding-top:0; }
.impressum-layout__table{ width:100%; border-collapse:collapse; margin: var(--space-sm) 0; background: var(--color-white); border-radius: var(--radius-sm); overflow:hidden; box-shadow: var(--shadow-sm); }
.impressum-layout__table th, .impressum-layout__table td{ text-align:left; padding: 0.7rem 1rem; border-bottom:1px solid var(--color-stone-line); font-size:0.92rem; }
.impressum-layout__table th{ width:38%; font-family: var(--font-mono); font-weight:500; color: var(--color-ink-soft); }


section > .mono-label{ display:inline-block; margin-bottom: var(--space-2xs); }


figure figcaption.mono-label{ margin-top: var(--space-2xs); }

/* =========================
   COOKIE CONSENT CARD
   ========================= */
.cc-card{
  position: fixed;
  left: var(--space-md); right: var(--space-md); bottom: var(--space-md);
  max-width: 560px;
  margin: 0 auto;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-stone-line);
  padding: var(--space-md);
  z-index: 1100;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.cc-card.is-visible{ opacity:1; transform: translateY(0); pointer-events:auto; }
.cc-card__eyebrow{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-clay-dark);
  margin: 0 0 var(--space-2xs);
}
.cc-card__text{ font-size: 0.9rem; margin: 0 0 var(--space-sm); }
.cc-card__text a{ color: var(--color-clay-dark); text-decoration: underline; }
.cc-card__customize{
  display: flex; flex-direction: column; gap: var(--space-2xs);
  padding: var(--space-sm);
  margin: 0 0 var(--space-sm);
  background: var(--color-paper-alt);
  border-radius: var(--radius-md);
}
.cc-card__customize[hidden]{ display: none; }
.cc-card__option{
  display: flex; align-items: center; gap: var(--space-2xs);
  font-size: 0.88rem; color: var(--color-ink-soft);
}
.cc-card__option input{ width: 18px; height: 18px; accent-color: var(--color-clay); flex-shrink: 0; }
.cc-card__save{ align-self: flex-start; margin-top: var(--space-2xs); padding: 0.6rem 1.2rem; min-height: 40px; font-size: 0.85rem; }
.cc-card__actions{
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-xs);
}
.cc-card__actions .global-btn{ padding: 0.7rem 1.2rem; min-height: 40px; font-size: 0.88rem; }
.cc-card__link{
  background: none; border: none; cursor: pointer;
  font-family: var(--font-heading); font-weight: 600; font-size: 0.85rem;
  color: var(--color-ink-soft);
  text-decoration: underline;
  padding: 0.4rem 0;
}
.cc-card__link:hover{ color: var(--color-clay-dark); }

@media (min-width: 600px){
  .cc-card{ left: var(--space-lg); right: auto; }
}