/* ============================================================
   Atelier Mergler — Design-System „Fadenlauf"
   Single Source of Truth: Tokens, Base, Komponenten, Motion-Prep.
   Tailwind (CDN) übernimmt Layout-Utilities; hier das Markensystem.
   ============================================================ */

:root{
  /* Farben — monochrom warm-neutral + Bronze-Akzent (Light) */
  --porcelain:#F7F3EC;
  --champagne:#EFE7D9;
  --linen:#E2D5C0;
  --taupe:#B49C82;
  --espresso:#6E5A45;
  --ink:#211C18;
  --bronze:#9C7A4E;

  --bg:var(--porcelain);
  --surface:var(--champagne);
  --line:#D8C7AF;
  --fg:var(--ink);
  --fg-soft:#5A4F44;
  --accent:var(--bronze);
  --header-bg:rgba(247,243,236,.82);

  /* Spacing-Skala */
  --space-2:.5rem; --space-3:1rem; --space-4:1.5rem; --space-6:2.5rem; --space-8:4rem;
  /* Form */
  --radius-sm:.375rem; --radius:.5rem; --radius-lg:.875rem;
  --shadow-sm:0 1px 2px rgb(33 28 24/.06);
  --shadow:0 14px 46px rgb(33 28 24/.10);
  --shadow-lg:0 30px 70px rgb(33 28 24/.16);
  /* Motion */
  --dur:.5s; --ease-out:cubic-bezier(.16,1,.3,1);
  --maxw:1200px;
}

[data-theme="dark"]{
  --porcelain:#1A1714; --champagne:#241F19; --linen:#2E281F;
  --taupe:#8A765E; --espresso:#C9B69C; --ink:#ECE3D6; --bronze:#C49A63;
  --bg:#1A1714; --surface:#241F19; --line:#3A3329; --fg:#ECE3D6; --fg-soft:#BDB09E;
  --accent:#C49A63; --header-bg:rgba(26,23,20,.82);
  --shadow:0 14px 46px rgb(0 0 0/.45); --shadow-lg:0 30px 70px rgb(0 0 0/.55);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:clamp(1rem,.6vw + .9rem,1.075rem); line-height:1.7;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  transition:background .5s var(--ease-out), color .5s var(--ease-out);
}
::selection{background:var(--bronze); color:var(--porcelain)}

h1,h2,h3,h4{font-family:"Cormorant Garamond",Georgia,serif; font-weight:600; line-height:1.08; color:var(--fg); text-wrap:balance; margin:0}
h1{font-size:clamp(2.4rem,5.5vw,4.25rem); letter-spacing:.3px}
h2{font-size:clamp(1.75rem,3.6vw,2.7rem)}
h3{font-size:clamp(1.3rem,2vw,1.65rem)}
p{margin:0 0 1.1rem; color:var(--fg-soft); text-wrap:pretty}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
strong{color:var(--fg)}

/* Mono-Etiketten (Signatur) */
.eyebrow{
  font-family:"Space Mono",ui-monospace,"Courier New",monospace;
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent); display:inline-flex; align-items:center; gap:.7rem;
}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--accent); display:inline-block; opacity:.7}
.mono{font-family:"Space Mono",ui-monospace,monospace; letter-spacing:.12em}
.serif-em{font-style:italic; color:var(--espresso)}

/* Layout */
.container{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1.15rem,4vw,2.5rem)}
.section{padding-block:clamp(4.5rem,9vw,7.5rem); position:relative}
.lead{font-size:clamp(1.05rem,1.4vw,1.22rem); color:var(--fg-soft); max-width:60ch}

/* Stitched divider (Signatur) */
.stitch{height:1px; border:0; border-top:1px dashed var(--line); margin:0}
.stitch-v{width:1px; border-left:1px dashed var(--line)}

/* Buttons */
.btn{
  --b:var(--ink);
  display:inline-flex; align-items:center; gap:.6rem; cursor:pointer;
  font-family:"Space Mono",monospace; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.95rem 1.7rem; border-radius:var(--radius); border:1px solid var(--b);
  background:var(--b); color:var(--porcelain); position:relative; isolation:isolate;
  transition:transform .4s var(--ease-out), background .35s, color .35s, border-color .35s;
  will-change:transform;
}
[data-theme="dark"] .btn{color:var(--bg)}
.btn:hover{transform:translateY(-2px)}
.btn--ghost{background:transparent; color:var(--fg); border-color:var(--line)}
.btn--ghost:hover{border-color:var(--accent); color:var(--accent)}
.btn--accent{--b:var(--bronze); color:#1d160d}
.btn svg{width:16px; height:16px}
:where(a,button,input,textarea,select,[tabindex]):focus-visible{
  outline:2px solid var(--accent); outline-offset:3px; border-radius:3px;
}

/* Header */
.site-header{position:fixed; inset:0 0 auto; z-index:60; transition:background .4s,backdrop-filter .4s,border-color .4s,padding .4s; border-bottom:1px solid transparent}
.site-header .bar{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:1.2rem; transition:padding .4s}
.site-header.scrolled{background:var(--header-bg); backdrop-filter:blur(14px); border-bottom-color:var(--line)}
.site-header.scrolled .bar{padding-block:.7rem}
.brand{display:flex; align-items:center; gap:.7rem; color:var(--header-fg,var(--fg))}
.brand svg .wordmark-fill{fill:currentColor}
.site-header .nav{display:flex; align-items:center; gap:2rem}
.site-header .nav a{font-size:.85rem; color:var(--header-fg,var(--fg)); position:relative; padding-block:.3rem; opacity:.85; transition:opacity .3s,color .3s}
.site-header .nav a::after{content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--accent); transition:width .35s var(--ease-out)}
.site-header .nav a:hover,.site-header .nav a[aria-current="page"]{opacity:1; color:var(--accent)}
.site-header .nav a:hover::after,.site-header .nav a[aria-current="page"]::after{width:100%}
/* transparent header over dark hero → light text */
.site-header:not(.scrolled){--header-fg:var(--on-hero,var(--fg))}
.hero-light .site-header:not(.scrolled){--header-fg:#F7F3EC}

.icon-btn{display:inline-grid; place-items:center; width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--header-fg,var(--fg)); cursor:pointer; transition:border-color .3s,color .3s,transform .3s}
.icon-btn:hover{border-color:var(--accent); color:var(--accent)}
.icon-btn svg{width:18px; height:18px}
.menu-toggle{display:none}

/* Mobile nav */
@media (max-width:880px){
  .site-header .nav{position:fixed; inset:0; flex-direction:column; justify-content:flex-start; align-items:stretch; gap:1.3rem;
    padding:6rem 1.75rem 2.5rem; background:var(--bg); transform:translateY(-100%); transition:transform .5s var(--ease-out); z-index:70; overflow-y:auto}
  .site-header .nav.open{transform:translateY(0)}
  .site-header .nav a{font-family:"Cormorant Garamond",serif; font-size:1.9rem; color:var(--fg); text-align:left; opacity:1}
  .site-header .nav a::after{display:none}
  /* „Termin anfragen" sitzt unten und behält Button-Stil (nicht 2rem aufgeblasen) */
  .site-header .nav .btn{margin-top:auto; width:100%; justify-content:center; font-family:"Space Mono",monospace; font-size:.85rem; padding:1.1rem 1.5rem}
  .menu-toggle{display:inline-grid}
}

/* Cards */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(1.5rem,2.5vw,2.1rem); display:flex; flex-direction:column; height:100%; transition:transform .5s var(--ease-out),box-shadow .5s,border-color .5s; position:relative; overflow:hidden}
.card:hover{box-shadow:var(--shadow); border-color:var(--taupe)}
.card .num{font-family:"Space Mono",monospace; font-size:.75rem; letter-spacing:.18em; color:var(--accent)}
.card h3{margin:.9rem 0 .6rem}
.card .card-cta{margin-top:auto; padding-top:1.3rem}
.card-icon{width:46px; height:46px; color:var(--espresso)}
.card-icon path,.card-icon circle,.card-icon line,.card-icon rect{vector-effect:non-scaling-stroke}

/* Media frame with on-brand fallback */
.frame{position:relative; overflow:hidden; border-radius:var(--radius-lg); border:1px solid var(--line); background:
  linear-gradient(135deg,var(--champagne),var(--linen));}
.frame img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease-out)}
.frame:hover img{transform:scale(1.05)}
.frame.broken img{display:none}
.frame.broken::after{content:"M"; position:absolute; inset:0; display:grid; place-items:center;
  font-family:"Cormorant Garamond",serif; font-size:clamp(3rem,8vw,6rem); color:var(--taupe); opacity:.5;
  background:repeating-linear-gradient(135deg,var(--champagne) 0 14px,var(--linen) 14px 15px)}

/* Reveal prep (start states only via JS; no CSS pre-hide on these) */
canvas.bg{position:fixed; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none}

/* Footer */
.site-footer{background:var(--surface); border-top:1px dashed var(--line); padding-block:clamp(3.5rem,6vw,5rem) 2.5rem; margin-top:2rem}
.site-footer a{color:var(--fg-soft); transition:color .3s}
.site-footer a:hover{color:var(--accent)}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr; gap:2rem}}
.foot-title{font-family:"Space Mono",monospace; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:1rem}

/* Forms */
.field{display:flex; flex-direction:column; gap:.45rem; margin-bottom:1.2rem}
.field label{font-family:"Space Mono",monospace; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--taupe)}
.field input,.field textarea,.field select{
  font:inherit; color:var(--fg); background:var(--bg); border:1px solid var(--line); border-radius:var(--radius);
  padding:.85rem 1rem; transition:border-color .3s,box-shadow .3s}
.field input:focus,.field textarea:focus,.field select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgb(156 122 78/.15)}
.field .err{color:#b4452f; font-size:.82rem; min-height:1em}
[data-theme="dark"] .field .err{color:#e88a78}
.form-note{font-size:.85rem; color:var(--fg-soft)}

/* Preloader */
#preloader{position:fixed; inset:0; z-index:200; display:grid; place-items:center; background:var(--porcelain)}
#preloader .mark{width:120px; height:120px}
[data-theme="dark"] #preloader{background:#1A1714}

/* Accordion */
.acc{border-bottom:1px dashed var(--line)}
.acc summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.25rem 0; font-family:"Cormorant Garamond",serif; font-size:1.3rem; color:var(--fg)}
.acc summary::-webkit-details-marker{display:none}
.acc summary .plus{flex:none; width:22px; height:22px; position:relative; transition:transform .4s}
.acc summary .plus::before,.acc summary .plus::after{content:""; position:absolute; inset:50% 0 auto; height:1.5px; background:var(--accent)}
.acc summary .plus::after{transform:rotate(90deg); transition:transform .4s}
.acc[open] summary .plus::after{transform:rotate(0)}
.acc .acc-body{padding:0 0 1.4rem; color:var(--fg-soft); max-width:62ch}

/* Skip link */
.skip{position:absolute; left:-999px; top:.5rem; z-index:300; background:var(--ink); color:var(--porcelain); padding:.6rem 1rem; border-radius:var(--radius)}
.skip:focus{left:.5rem}

/* Utility */
.grid-lines{position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:clamp(60px,8vw,110px) clamp(60px,8vw,110px); opacity:.12; mask-image:radial-gradient(120% 120% at 50% 0,#000 40%,transparent 100%)}
.tag{display:inline-block; font-family:"Space Mono",monospace; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--taupe); border:1px solid var(--line); border-radius:99px; padding:.3rem .8rem}
.kicker-row{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap}

/* SVG-Transform-Disziplin (REF-C): animierte Teile drehen/skalieren um die eigene Mitte */
[data-needle],[data-assemble],[data-spin],[data-grow]{transform-box:fill-box; transform-origin:center}

/* Zwei-Spalten-Helfer (Formular-Reihen) */
.duo{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
@media (max-width:600px){.duo{grid-template-columns:1fr}}

/* Responsive grid collapse für inline-grids */
@media (max-width:900px){
  .hero-grid,.split-62,.split-50{grid-template-columns:1fr !important; gap:2.5rem !important}
  .hero-grid > div:last-child{order:-1; max-width:340px; margin-inline:auto}
  .cards-3{grid-template-columns:1fr 1fr !important}
}
@media (max-width:600px){
  .cards-3{grid-template-columns:1fr !important}
  h1{font-size:clamp(1.85rem,7vw,2.6rem)}
  h2{font-size:clamp(1.45rem,5.2vw,2rem)}
  .section{padding-block:clamp(3rem,9vw,4rem)}
  .container{padding-inline:1.25rem}
  .lead{font-size:1.02rem}
  /* Touch-Targets ≥ 44px */
  .icon-btn{width:44px; height:44px}
  .tag,[data-filter-bar] button{min-height:44px; display:inline-flex; align-items:center; padding:.5rem 1rem}
  .dl{min-height:44px}
  /* Sicherheitsnetz gegen horizontalen Scroll */
  img{max-width:100%; height:auto}
}

/* No-anim / reduced-motion fallback: alles sichtbar */
.no-anim [data-reveal] > *,.no-anim [data-split],.no-anim [data-depth],
.no-anim [data-fade]{opacity:1 !important; transform:none !important}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  [data-reveal] > *,[data-split],[data-depth],[data-fade]{opacity:1 !important; transform:none !important}
  canvas.bg{display:none}
}