/* ============================================================
   WEIDEN WEBDESIGN — Design System  (refined edition)
   Palette & feel aligned to matthiaseger.de:
   white base · fine sage lines · muted sage / blue / brown accents
   ============================================================ */

/* ---------- Fonts (self-hosted, DSGVO-konform) ---------- */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/bricolage-600-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/bricolage-600-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/bricolage-700-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/bricolage-700-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/bricolage-800-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/bricolage-800-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/instrument-400-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/instrument-400-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/instrument-400-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/instrument-400-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-400-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-400-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/inter-500-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/inter-500-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/inter-600-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/inter-600-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/inter-700-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/inter-700-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}


/* ---------- Tokens ---------- */
:root{
  /* canvas */
  --paper:      #FFFFFF;
  --paper-2:    #F7F5F2;   /* warm wash for alternating sections */
  --paper-3:    #F1ECE6;
  --ink:        #343A41;   /* soft slate — matthiaseger text */
  --ink-2:      #454C54;
  --ink-soft:   #5A626B;
  --ink-30:     #7C858E;

  /* fine lines */
  --line:       #D3DDD1;
  --line-soft:  #E7EDE6;

  /* muted accents */
  --gruen:      #8CA38A;   --gruen-text:#5E7458;  --gruen-wash:#EFF3EE;
  --blau:       #6E8A99;   --blau-deep:#4E6B7A;    --blau-wash:#EEF3F5;
  --braun:      #4F423E;   --braun-deep:#3A302D;   --braun-wash:#F3EFED;

  /* backward-compatible aliases (existing markup uses these names) */
  --mint:var(--gruen); --mint-deep:var(--gruen-text); --mint-wash:var(--gruen-wash);
  --sky:var(--blau);   --sky-deep:var(--blau-deep);   --sky-wash:var(--blau-wash);
  --lime:#AFC2AB;

  /* type */
  --display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  --serif:   'Instrument Serif', Georgia, serif;
  --body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* motion */
  --ease: cubic-bezier(.16,1,.3,1);
  --ease-io: cubic-bezier(.65,.05,.36,1);

  --wrap: 1220px;
  --gut: clamp(20px, 4.5vw, 56px);
  --radius: 16px;
  --r-sm: 11px;
  --shadow-sm: 0 1px 2px rgba(79,66,62,.04), 0 10px 28px -20px rgba(79,66,62,.20);
  --shadow-lg: 0 1px 3px rgba(79,66,62,.06), 0 34px 70px -34px rgba(79,66,62,.30);
}

/* ---------- Reset ---------- */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  font-family:var(--body);
  font-size:16.5px;
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  cursor:none;
}
@media (hover:none){ body{ cursor:auto; } }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:none; }
::selection{ background:var(--gruen-wash); color:var(--gruen-text); }

/* ---------- Layout ---------- */
.wrap{ width:min(100% - var(--gut)*2, var(--wrap)); margin-inline:auto; }
.wrap-wide{ width:min(100% - var(--gut)*2, 1340px); margin-inline:auto; }
section{ position:relative; }
.eyebrow{
  font-family:var(--body); font-weight:600; font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gruen-text);
  display:inline-flex; align-items:center; gap:.6em;
}
.eyebrow::before{ content:""; width:22px; height:1px; background:currentColor; opacity:.55; }

/* accent word — playful serif italic (creative signature) */
.serif-it{ font-family:var(--serif); font-style:italic; font-weight:400; color:inherit; letter-spacing:0; }
.hl{ background:var(--gruen-wash); color:var(--gruen-text); border-radius:9px; padding:.02em .2em; box-decoration-break:clone; -webkit-box-decoration-break:clone; }

/* ---------- Display type (big & playful) ---------- */
.display{
  font-family:var(--display); font-weight:700;
  line-height:1.0; letter-spacing:-.03em; color:var(--ink);
  text-wrap:balance;
}
.d1{ font-size:clamp(3rem, 8.5vw, 7.5rem); font-weight:800; }
.d2{ font-size:clamp(2.2rem, 5vw, 4rem); line-height:1.02; }
.d3{ font-size:clamp(1.7rem, 3vw, 2.6rem); line-height:1.08; }
.lead{
  font-size:clamp(1rem, 1.2vw, 1.15rem);
  color:var(--ink-2); line-height:1.65; max-width:56ch; font-weight:400;
}
.accent-mint{ color:var(--gruen-text); }
.accent-sky{ color:var(--blau-deep); }

/* ============================================================
   CURSOR
   ============================================================ */
.cursor{
  position:fixed; top:0; left:0; z-index:9999; pointer-events:none;
  width:9px; height:9px; border-radius:50%; background:var(--braun);
  transform:translate(-50%,-50%);
  transition:width .3s var(--ease), height .3s var(--ease), background .3s var(--ease), opacity .3s;
}
.cursor.grow{ width:46px; height:46px; background:var(--gruen); opacity:.35; }
.cursor-label{
  position:fixed; z-index:9999; pointer-events:none; transform:translate(-50%,-50%);
  font-family:var(--body); font-weight:600; font-size:.72rem; color:var(--ink); opacity:0; transition:opacity .25s;
}
.cursor.grow + .cursor-label.on{ opacity:1; }
@media (hover:none){ .cursor,.cursor-label{ display:none; } }

/* ============================================================
   NAV — refined bar + fullscreen overlay
   ============================================================ */
.topbar{
  position:fixed; inset:0 0 auto 0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px var(--gut);
  background:rgba(255,255,255,.72); backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:transform .5s var(--ease), border-color .4s, background .4s;
}
.topbar.stuck{ border-color:var(--line-soft); }
.topbar.hide{ transform:translateY(-130%); }

.brand{ display:inline-flex; align-items:center; gap:11px; }
.brand .mark{ width:40px; height:40px; flex:none; }
.brand .lockup{ display:flex; flex-direction:column; line-height:1.12; }
.brand .lockup b{ font-weight:700; font-size:.96rem; letter-spacing:-.01em; color:var(--ink); }
.brand .lockup small{ font-weight:500; font-size:.68rem; letter-spacing:.02em; color:var(--ink-soft); margin-top:1px; }

.nav-pill{ display:inline-flex; align-items:center; gap:4px; }
.nav-pill a.mini{ font-weight:500; font-size:.9rem; padding:8px 12px; color:var(--ink-2); border-radius:100px; transition:background .3s, color .3s; }
.nav-pill a.mini:hover{ background:var(--gruen-wash); color:var(--gruen-text); }
.menu-btn{
  display:inline-flex; align-items:center; gap:9px; margin-left:6px;
  background:var(--ink); color:#F7F2EF; font-weight:600; padding:9px 15px;
  border-radius:100px; font-size:.88rem; transition:background .35s var(--ease);
}
.menu-btn:hover{ background:var(--braun); }
.menu-btn .bars{ display:inline-flex; flex-direction:column; gap:3px; }
.menu-btn .bars i{ width:15px; height:1.5px; background:currentColor; border-radius:2px; }
@media (max-width:720px){ .nav-pill a.mini{ display:none; } .brand .lockup small{ display:none; } }

/* overlay menu */
.overlay{
  position:fixed; inset:0; z-index:300; background:var(--braun-deep); color:#EDE6E0;
  clip-path:circle(0% at calc(100% - 80px) 44px);
  transition:clip-path .8s var(--ease);
  display:grid; grid-template-columns:1.3fr .9fr; pointer-events:none;
}
.overlay.open{ clip-path:circle(150% at calc(100% - 80px) 44px); pointer-events:auto; }
.overlay-close{
  position:absolute; top:20px; right:var(--gut); z-index:2;
  font-weight:600; display:inline-flex; align-items:center; gap:10px; color:#EDE6E0; font-size:.92rem;
}
.overlay-close .x{ position:relative; width:20px; height:20px; }
.overlay-close .x::before,.overlay-close .x::after{ content:""; position:absolute; top:50%; left:0; width:100%; height:1.5px; background:var(--gruen); }
.overlay-close .x::before{ transform:rotate(45deg); } .overlay-close .x::after{ transform:rotate(-45deg); }
.ov-links{ align-self:center; padding:0 var(--gut); }
.ov-links a{
  display:block; font-family:var(--display); font-weight:700;
  font-size:clamp(2rem, 5.5vw, 4.2rem); line-height:1.16; letter-spacing:-.03em;
  color:#EDE6E0; opacity:.6; transition:opacity .3s, padding .4s var(--ease); position:relative;
}
.ov-links a .idx{ font-weight:500; font-size:.72rem; color:var(--gruen); vertical-align:super; margin-right:.5em; opacity:0; transition:opacity .3s; }
.ov-links a:hover{ opacity:1; padding-left:.3em; }
.ov-links a:hover .idx{ opacity:1; }
.ov-side{ align-self:end; padding:var(--gut); border-left:1px solid rgba(237,230,224,.14); display:flex; flex-direction:column; gap:20px; }
.ov-side h4{ font-weight:600; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gruen); }
.ov-side a.big{ font-weight:600; font-size:1.15rem; }
.ov-side p{ color:rgba(237,230,224,.62); font-size:.92rem; }
@media (max-width:860px){ .overlay{ grid-template-columns:1fr; } .ov-side{ border-left:none; border-top:1px solid rgba(237,230,224,.14); } }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  font-family:var(--body); font-weight:600; font-size:.95rem;
  padding:13px 22px; border-radius:100px; overflow:hidden;
  transition:transform .3s var(--ease), color .3s, background .35s var(--ease), box-shadow .3s;
  will-change:transform;
}
.btn .lbl,.btn .arw{ position:relative; z-index:2; }
.btn .arw{ transition:transform .4s var(--ease); }
.btn:hover .arw{ transform:translateX(4px); }
.btn-solid{ background:var(--ink); color:#F7F2EF; }
.btn-solid:hover{ background:var(--braun); }
.btn-ghost{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--line); }
.btn-ghost:hover{ background:var(--gruen-wash); box-shadow:inset 0 0 0 1px var(--gruen); color:var(--gruen-text); }

/* ============================================================
   HERO
   ============================================================ */
.hero{ padding:clamp(120px,16vw,168px) 0 clamp(56px,8vw,90px); overflow:hidden; }
.hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(90,98,107,.16) 1px, transparent 1.6px);
  background-size:30px 30px;
  -webkit-mask:radial-gradient(115% 85% at 72% 4%, #000 0%, transparent 62%);
  mask:radial-gradient(115% 85% at 72% 4%, #000 0%, transparent 62%);
}
.hero .wrap{ position:relative; z-index:2; }
.hero h1{ position:relative; font-weight:800; }
.hero h1 .row{ display:block; }
.hero .h-tag{ color:var(--ink-2); }
.hero-meta{ display:flex; flex-wrap:wrap; gap:clamp(20px,4vw,52px); align-items:flex-end; margin-top:clamp(26px,4vw,40px); }
.hero-meta .lead{ flex:1 1 340px; }
.hero-cta{ display:flex; gap:11px; flex-wrap:wrap; }
.hero-note{ margin-top:14px; font-size:.85rem; color:var(--ink-soft); }

/* faint accent tints (subtle, not big blobs) */
.blob{ position:absolute; border-radius:50%; filter:blur(70px); z-index:0; pointer-events:none; will-change:transform; opacity:.10; }
.blob.b1{ width:30vw; height:30vw; background:radial-gradient(circle at 30% 30%,var(--gruen),transparent 70%); top:-8vw; right:-4vw; }
.blob.b2{ width:26vw; height:26vw; background:radial-gradient(circle at 60% 40%,var(--blau),transparent 70%); bottom:-10vw; left:-6vw; }
.blob.b3{ width:16vw; height:16vw; background:radial-gradient(circle at 50% 50%,var(--braun),transparent 70%); top:40%; left:44%; opacity:.06; }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{ border-block:1px solid var(--line-soft); padding:15px 0; overflow:hidden; white-space:nowrap; background:var(--paper); }
.marquee-track{ display:inline-flex; gap:30px; align-items:center; will-change:transform; }
.marquee-track span{ font-family:var(--display); font-weight:700; font-size:clamp(1.3rem,2.6vw,2.1rem); letter-spacing:-.02em; color:var(--ink-2); display:inline-flex; align-items:center; gap:30px; }
.marquee-track span::after{ content:"✳"; color:var(--gruen); font-size:.7em; }
.marquee.alt{ background:var(--braun-deep); color:#EDE6E0; border-color:transparent; }
.marquee.alt .marquee-track span{ color:rgba(237,230,224,.85); }
.marquee.alt .marquee-track span::after{ color:var(--gruen); }

/* ============================================================
   SECTIONS
   ============================================================ */
.sec{ padding:clamp(64px,9vw,120px) 0; }
.sec-head{ display:flex; flex-wrap:wrap; gap:20px 40px; align-items:flex-end; justify-content:space-between; margin-bottom:clamp(32px,5vw,60px); }
.sec-head .t{ max-width:24ch; }

/* ============================================================
   SERVICES — refined list
   ============================================================ */
.svc-list{ border-top:1px solid var(--line); }
.svc{ border-bottom:1px solid var(--line); position:relative; }
.svc a{ display:flex; align-items:center; gap:22px; padding:clamp(18px,2.2vw,26px) 0; position:relative; z-index:2; }
.svc .num{ font-weight:600; font-size:.78rem; color:var(--ink-30); width:34px; flex:none; }
.svc .name{ font-family:var(--display); font-weight:800; font-size:clamp(1.9rem,4.5vw,3.6rem); letter-spacing:-.03em; line-height:1.02; flex:1; transition:transform .5s var(--ease), color .4s; }
.svc .desc{ max-width:34ch; color:var(--ink-soft); font-size:.92rem; display:none; }
.svc .go{ width:50px; height:50px; border-radius:50%; box-shadow:inset 0 0 0 1px var(--line); display:grid; place-items:center; flex:none; color:var(--ink-2); transition:background .4s, transform .5s var(--ease), color .4s, box-shadow .4s; }
.svc:hover .name{ transform:translateX(22px); color:var(--gruen-text); }
.svc:hover .go{ background:var(--gruen); color:#fff; transform:rotate(45deg); box-shadow:none; }
.svc .hoverimg{ position:absolute; top:50%; right:15%; width:190px; height:124px; border-radius:12px; object-fit:cover; transform:translateY(-50%) scale(.7) rotate(-4deg); opacity:0; z-index:1; pointer-events:none; transition:opacity .45s var(--ease), transform .55s var(--ease); box-shadow:var(--shadow-lg); }
.svc:hover .hoverimg{ opacity:1; transform:translateY(-50%) scale(1) rotate(-3deg); }
@media (min-width:960px){ .svc .desc{ display:block; } }
@media (max-width:640px){ .svc .hoverimg{ display:none; } .svc:hover .name{ transform:translateX(8px); } }

/* ============================================================
   STORY (warm brown card)
   ============================================================ */
.story{ background:var(--braun-deep); color:#EDE6E0; border-radius:clamp(18px,2.4vw,26px); padding:clamp(36px,5.5vw,80px) clamp(24px,4.5vw,66px); position:relative; overflow:hidden; }
.story .blob{ opacity:.16; }
.story h2,.story .num-huge,.story .lead{ position:relative; z-index:2; }
.story h2{ color:#F3EEE9; }
.story .num-huge{ font-family:var(--display); font-weight:800; font-size:clamp(4rem,13vw,10rem); line-height:.86; letter-spacing:-.04em; background:linear-gradient(100deg,var(--gruen),var(--blau) 70%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.story .lead{ color:rgba(237,230,224,.74); }
.story-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.6vw,34px); margin-top:clamp(28px,4vw,52px); position:relative; z-index:2; }
.story-grid .cell h4{ font-family:var(--display); font-weight:600; font-size:1.05rem; margin-bottom:8px; color:var(--gruen); }
.story-grid .cell p{ color:rgba(237,230,224,.66); font-size:.92rem; }
@media (max-width:820px){ .story-grid{ grid-template-columns:1fr; } }

/* ============================================================
   CASE — Lion Taxi
   ============================================================ */
.case-card{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,4vw,60px); align-items:center; }
.case-shot{ position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-lg); background:#0b1220; }
.case-shot img{ width:100%; display:block; }
.case-shot .frame-top{ display:flex; align-items:center; gap:6px; padding:10px 14px; background:#0b1220; }
.case-shot .frame-top i{ width:9px; height:9px; border-radius:50%; background:#2c3a4a; }
.case-shot .url{ margin-left:10px; font-size:.72rem; color:#7d8ea3; }
.case-badge{ position:absolute; z-index:3; background:var(--paper); color:var(--ink); font-family:var(--display); font-weight:700; padding:12px 16px; border-radius:12px; box-shadow:var(--shadow-lg); line-height:1; border:1px solid var(--line-soft); }
.case-badge small{ display:block; font-weight:500; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:5px; color:var(--ink-soft); }
.case-badge .big{ font-size:1.5rem; color:var(--gruen-text); }
.case-badge.br{ right:-12px; bottom:-12px; }
.case-quote{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(1.5rem,2.8vw,2.2rem); line-height:1.32; color:var(--ink); }
.case-facts{ display:flex; gap:28px; flex-wrap:wrap; margin:22px 0; }
.case-facts .f b{ font-family:var(--display); font-weight:700; font-size:1.7rem; display:block; color:var(--gruen-text); }
.case-facts .f span{ font-size:.78rem; color:var(--ink-soft); }
@media (max-width:900px){ .case-card{ grid-template-columns:1fr; } }

/* ============================================================
   PORTFOLIO — reference work cards
   ============================================================ */
.portfolio{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,34px); }
.work{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--paper); transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s; }
.work:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:var(--line-soft); }
.work .thumb{ position:relative; overflow:hidden; aspect-ratio:16/10; background:var(--paper-2); }
.work .thumb img{ width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform .8s var(--ease); }
.work:hover .thumb img{ transform:scale(1.045); }
.work .live{ position:absolute; top:13px; right:13px; background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); color:var(--ink); font-weight:600; font-size:.76rem; padding:7px 13px; border-radius:100px; display:inline-flex; gap:6px; align-items:center; box-shadow:var(--shadow-sm); transition:background .3s, color .3s; }
.work:hover .live{ background:var(--gruen); color:#fff; }
.work .body{ padding:clamp(20px,2.4vw,30px); display:flex; flex-direction:column; flex:1; }
.work .tags{ display:flex; gap:7px; flex-wrap:wrap; margin-bottom:13px; }
.work .tags span{ font-size:.7rem; letter-spacing:.03em; color:var(--ink-soft); border:1px solid var(--line); border-radius:100px; padding:4px 11px; }
.work h3{ font-family:var(--display); font-weight:800; font-size:clamp(1.4rem,2.4vw,2rem); letter-spacing:-.025em; margin-bottom:9px; color:var(--ink); }
.work .body p{ color:var(--ink-soft); font-size:.95rem; line-height:1.6; }
.work .go-row{ margin-top:auto; padding-top:16px; display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:.9rem; color:var(--gruen-text); transition:gap .3s var(--ease); }
.work:hover .go-row{ gap:13px; }
@media (max-width:760px){ .portfolio{ grid-template-columns:1fr; } }

/* small work thumbnails (homepage teaser) */
.work-mini{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.work-mini a{ position:relative; border-radius:14px; overflow:hidden; border:1px solid var(--line); aspect-ratio:16/11; display:block; transition:transform .5s var(--ease), box-shadow .5s var(--ease); }
.work-mini a:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.work-mini img{ width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform .7s var(--ease); }
.work-mini a:hover img{ transform:scale(1.06); }
.work-mini .cap{ position:absolute; left:0; right:0; bottom:0; padding:20px 14px 12px; background:linear-gradient(transparent, rgba(14,21,18,.72)); color:#fff; font-weight:600; font-size:.82rem; letter-spacing:-.01em; }
@media (max-width:820px){ .work-mini{ grid-template-columns:1fr 1fr; } }

/* ============================================================
   STATS / CREDENTIALS (fine cards)
   ============================================================ */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.stats .stat{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(20px,2.4vw,30px); transition:box-shadow .4s, transform .4s var(--ease); }
.stats .stat:hover{ box-shadow:var(--shadow-sm); transform:translateY(-3px); }
.stats .stat .ic{ width:34px; height:34px; border-radius:9px; background:var(--gruen-wash); display:grid; place-items:center; margin-bottom:14px; font-size:1rem; }
.stats .stat .n{ font-family:var(--display); font-weight:700; font-size:clamp(1.7rem,3vw,2.4rem); line-height:1; letter-spacing:-.03em; color:var(--ink); }
.stats .stat .n em{ font-style:normal; color:var(--gruen-text); }
.stats .stat .k{ margin-top:7px; color:var(--ink-soft); font-size:.86rem; line-height:1.4; }
@media (max-width:820px){ .stats{ grid-template-columns:repeat(2,1fr); } }

/* ============================================================
   PROCESS
   ============================================================ */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2.4vw,28px); }
.step{ position:relative; padding-top:22px; border-top:1px solid var(--ink); }
.step .n{ font-family:var(--display); font-weight:700; font-size:.85rem; color:var(--gruen-text); position:absolute; top:-11px; left:0; background:var(--paper); padding-right:9px; }
.step.on-wash .n{ background:var(--paper-2); }
.step h4{ font-family:var(--display); font-weight:700; font-size:1.5rem; margin-bottom:8px; letter-spacing:-.01em; color:var(--ink); }
.step p{ color:var(--ink-soft); font-size:.9rem; }
@media (max-width:820px){ .steps{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .steps{ grid-template-columns:1fr; } }

/* ============================================================
   PRICING / soft panel
   ============================================================ */
.price-card{ background:var(--paper-2); border:1px solid var(--line-soft); border-radius:clamp(16px,2vw,24px); padding:clamp(28px,4.5vw,60px); position:relative; overflow:hidden; }
.price-tags{ display:flex; gap:10px; flex-wrap:wrap; margin-top:22px; }
.price-tags .tag{ background:var(--paper); border:1px solid var(--line); border-radius:100px; padding:9px 16px; font-weight:500; font-size:.88rem; display:inline-flex; align-items:center; gap:8px; color:var(--ink-2); }
.price-tags .tag b{ color:var(--gruen-text); font-weight:700; }

/* ============================================================
   CTA
   ============================================================ */
.cta{ text-align:center; padding:clamp(72px,11vw,140px) 0; position:relative; overflow:hidden; }
.cta h2{ margin-bottom:22px; }
.cta .sub{ color:var(--ink-soft); max-width:46ch; margin:0 auto 30px; font-size:1.02rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--braun-deep); color:#EDE6E0; padding:clamp(56px,8vw,104px) 0 32px; position:relative; }
.footer::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.4;
  background-image:radial-gradient(rgba(237,230,224,.05) 1px, transparent 1.6px); background-size:34px 34px;
  -webkit-mask:radial-gradient(90% 60% at 80% 0%, #000, transparent 70%); mask:radial-gradient(90% 60% at 80% 0%, #000, transparent 70%); }
.footer .wrap{ position:relative; z-index:1; }
.footer .big-link{ font-family:var(--display); font-weight:800; font-size:clamp(2.6rem,7vw,5.5rem); letter-spacing:-.035em; line-height:1; display:inline-flex; align-items:center; gap:.16em; color:#F3EEE9; transition:color .3s, gap .4s var(--ease); }
.footer .big-link:hover{ color:var(--gruen); gap:.32em; }

.foot-grid{ display:grid; grid-template-columns:2.2fr 1fr 1fr 1fr; gap:32px 28px; margin-top:clamp(40px,5vw,72px); padding-bottom:clamp(30px,4vw,48px); border-bottom:1px solid rgba(237,230,224,.13); }
.foot-about .brand{ margin-bottom:16px; }
.foot-about .mark{ width:44px; height:44px; }
.foot-about p{ color:rgba(237,230,224,.6); font-size:.94rem; line-height:1.6; max-width:36ch; }
.foot-grid h5{ font-weight:600; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gruen); margin-bottom:16px; }
.foot-grid nav a,.foot-grid .col a{ display:block; color:rgba(237,230,224,.68); font-size:.94rem; margin-bottom:11px; width:fit-content; transition:color .3s, transform .3s var(--ease); }
.foot-grid nav a:hover,.foot-grid .col a:hover{ color:#F3EEE9; transform:translateX(3px); }
.foot-grid .col p{ color:rgba(237,230,224,.6); font-size:.94rem; margin-bottom:11px; }
.footer .brand .lockup b{ color:#F3EEE9; }
.footer .brand .lockup small{ color:rgba(237,230,224,.5); }

/* local SEO row */
.foot-local{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 26px; padding:clamp(26px,3.5vw,40px) 0; border-bottom:1px solid rgba(237,230,224,.13); }
.foot-local-label{ display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(237,230,224,.55); white-space:nowrap; }
.foot-local-label b{ color:var(--gruen); font-weight:600; }
.foot-tags{ display:flex; flex-wrap:wrap; gap:9px; }
.foot-tags a,.foot-tags span{ font-size:.82rem; color:rgba(237,230,224,.72); border:1px solid rgba(237,230,224,.16); border-radius:100px; padding:6px 14px; transition:border-color .3s, color .3s, background .3s; }
.foot-tags a:hover,.foot-tags span:hover{ border-color:var(--gruen); color:#F3EEE9; background:rgba(140,163,138,.12); }

.foot-bottom{ display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center; margin-top:24px; color:rgba(237,230,224,.5); font-size:.82rem; }
.foot-legal{ display:flex; gap:18px; }
.foot-legal a{ position:relative; transition:color .3s; }
.foot-legal a:hover{ color:#F3EEE9; }
@media (max-width:820px){ .foot-grid{ grid-template-columns:1fr 1fr; } .foot-about{ grid-column:1 / -1; } }
@media (max-width:520px){ .foot-grid{ grid-template-columns:1fr; } }

/* ============================================================
   REVEAL
   ============================================================ */
.js [data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal-d="1"]{ transition-delay:.07s; }
[data-reveal-d="2"]{ transition-delay:.14s; }
[data-reveal-d="3"]{ transition-delay:.21s; }
[data-reveal-d="4"]{ transition-delay:.28s; }
.js .hero h1 .row{ opacity:0; transform:translateY(30px); transition:opacity .85s var(--ease), transform .85s var(--ease); }
.hero h1 .row.in{ opacity:1; transform:none; }
.line-mask{ display:block; overflow:hidden; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
  [data-reveal],.hero h1 .row{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* ============================================================
   INNER PAGES
   ============================================================ */
.page-hero{ padding:clamp(128px,15vw,158px) 0 clamp(40px,6vw,72px); position:relative; overflow:hidden; }
.page-hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.45;
  background-image:radial-gradient(rgba(90,98,107,.14) 1px, transparent 1.6px);
  background-size:30px 30px;
  -webkit-mask:radial-gradient(110% 80% at 70% 0%, #000 0%, transparent 60%);
  mask:radial-gradient(110% 80% at 70% 0%, #000 0%, transparent 60%);
}
.page-hero .wrap{ position:relative; z-index:2; }
.page-hero .kicker{ margin-bottom:20px; }
.breadcrumb{ font-size:.82rem; color:var(--ink-soft); margin-bottom:22px; }
.breadcrumb a:hover{ color:var(--gruen-text); }
.prose{ max-width:68ch; }
.prose p{ font-size:1.02rem; color:var(--ink-2); margin-bottom:18px; line-height:1.72; }
.prose h3{ font-family:var(--display); font-weight:700; font-size:clamp(1.6rem,3vw,2.3rem); margin:38px 0 14px; letter-spacing:-.02em; color:var(--ink); }
.prose ul{ list-style:none; margin:16px 0; }
.prose li{ position:relative; padding-left:28px; margin-bottom:11px; color:var(--ink-2); font-size:1rem; }
.prose li::before{ content:""; position:absolute; left:0; top:.6em; width:11px; height:11px; border-radius:50%; background:var(--gruen); }

.feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.feat{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(22px,2.6vw,32px); transition:transform .5s var(--ease), box-shadow .5s var(--ease); }
.feat:hover{ transform:translateY(-4px); box-shadow:var(--shadow-sm); }
.feat .ic{ width:44px; height:44px; border-radius:11px; background:var(--gruen-wash); display:grid; place-items:center; margin-bottom:16px; font-size:1.25rem; }
.feat h4{ font-family:var(--display); font-weight:700; font-size:1.4rem; margin-bottom:8px; letter-spacing:-.01em; color:var(--ink); }
.feat p{ color:var(--ink-soft); font-size:.93rem; }
@media (max-width:820px){ .feat-grid{ grid-template-columns:1fr; } }

/* faq */
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{ display:flex; justify-content:space-between; align-items:center; gap:18px; width:100%; text-align:left; padding:22px 0; font-family:var(--display); font-weight:700; font-size:clamp(1.3rem,2.6vw,2rem); letter-spacing:-.02em; color:var(--ink); }
.faq-q .pm{ flex:none; width:28px; height:28px; border-radius:50%; box-shadow:inset 0 0 0 1px var(--line); position:relative; transition:background .3s; }
.faq-q .pm::before,.faq-q .pm::after{ content:""; position:absolute; top:50%; left:50%; width:11px; height:1.5px; background:var(--ink); transform:translate(-50%,-50%); transition:transform .3s; }
.faq-q .pm::after{ transform:translate(-50%,-50%) rotate(90deg); }
.faq-item.open .pm{ background:var(--gruen-wash); }
.faq-item.open .pm::after{ transform:translate(-50%,-50%) rotate(0); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .5s var(--ease); }
.faq-a p{ padding:0 0 22px; color:var(--ink-soft); max-width:72ch; font-size:.98rem; line-height:1.68; }

/* form */
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.field label{ display:block; font-weight:600; font-size:.8rem; margin-bottom:7px; color:var(--ink-2); }
.field input,.field textarea,.field select{ width:100%; font-family:var(--body); font-size:.98rem; padding:13px 15px; background:var(--paper); border:1px solid var(--line); border-radius:11px; color:var(--ink); transition:border-color .3s, box-shadow .3s; cursor:auto; }
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--gruen); box-shadow:0 0 0 3px var(--gruen-wash); }
.field textarea{ min-height:140px; resize:vertical; }
@media (max-width:640px){ .form-row{ grid-template-columns:1fr; } }

.disclaimer{ font-size:.78rem; color:var(--ink-soft); line-height:1.6; max-width:82ch; }
.disclaimer strong{ color:var(--ink-2); }

/* ============================================================
   FLOATING BUTTONS — Kontakt-FAB · Back-to-top-Ring · Guardian
   (portiert von matthiaseger.de, an die weiden-Palette angepasst)
   ============================================================ */
@property --fab-lift{ syntax:"<length>"; inherits:true; initial-value:0px; }

/* Beim offenen Overlay-Menü alle schwebenden Buttons ausblenden */
.nav-open .contact-fab,.nav-open .backtotop,
.nav-open [class*="-btn-wrapper"]{ opacity:0 !important; visibility:hidden !important; pointer-events:none !important; }

/* Guardian-Button (eigenes Script, gehashte Klasse) am Footer mit anheben */
[class$="-btn-wrapper"]{
  transform:translateY(var(--fab-lift)) !important;
  transition:transform .5s cubic-bezier(.22,1.12,.36,1) !important;
}

/* ---- Kontakt-FAB (unten mittig) ---- */
.contact-fab{
  position:fixed; left:50%; bottom:22px; z-index:60;
  transform:translateX(-50%) translateY(var(--fab-lift));
  width:56px; height:56px; border-radius:50%;
  background:var(--braun); color:#fff; border:0; cursor:none;
  display:grid; place-items:center;
  box-shadow:0 14px 32px -10px rgba(82,65,61,.55);
  transition:filter .25s, transform .5s cubic-bezier(.22,1.12,.36,1), box-shadow .25s;
}
.contact-fab:hover{ filter:brightness(1.12); transform:translateX(-50%) translateY(calc(var(--fab-lift) - 2px)); box-shadow:0 18px 38px -10px rgba(82,65,61,.6); }
.contact-fab svg{ width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .3s; }
.fab-open .contact-fab svg{ transform:rotate(90deg); }
.contact-fab-panel{
  position:fixed; left:50%; transform:translateX(-50%) translateY(14px) scale(.97);
  bottom:calc(90px - var(--fab-lift)); z-index:60;
  width:min(340px, calc(100vw - 44px));
  background:rgba(255,255,255,.94); border:1px solid var(--line-soft); border-radius:18px;
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  box-shadow:0 24px 60px -20px rgba(41,36,31,.32);
  opacity:0; visibility:hidden; overflow:hidden;
  transition:opacity .3s ease, transform .3s cubic-bezier(.2,.7,.2,1), visibility .3s, bottom .5s cubic-bezier(.22,1.12,.36,1);
}
.fab-open .contact-fab-panel{ opacity:1; visibility:visible; transform:translateX(-50%); }
.contact-fab-header{ display:flex; justify-content:space-between; align-items:center; padding:15px 18px; border-bottom:1px solid var(--line); font-family:var(--display); font-weight:700; font-size:.95rem; }
.contact-fab-close{ background:none; border:0; font-size:1.4rem; line-height:1; cursor:none; color:var(--ink-30); padding:2px 6px; }
.contact-fab-close:hover{ color:var(--ink); }
.contact-fab-links{ padding:8px; }
.contact-fab-item{ display:flex; align-items:center; gap:14px; text-decoration:none; padding:12px; border-radius:11px; transition:background .2s; }
.contact-fab-item:hover{ background:var(--paper-2); }
.contact-fab-item strong{ display:block; font-size:.92rem; color:var(--ink); }
.contact-fab-item small{ color:var(--ink-soft); font-size:.8rem; font-weight:500; }
.contact-fab-icon{ width:38px; height:38px; flex:0 0 38px; border-radius:9px; display:grid; place-items:center; background:var(--gruen-wash); color:var(--gruen-text); }
.contact-fab-icon svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.contact-fab-icon.cfab-braun{ background:var(--braun-wash); color:var(--braun); }
.contact-fab-icon.cfab-blau{ background:var(--blau-wash); color:var(--blau-deep); }

/* ---- Back-to-top mit Fortschrittsring (rechts unten) ---- */
.backtotop{
  position:fixed; right:22px; bottom:22px; z-index:59;
  width:52px; height:52px; border-radius:50%;
  background:var(--paper); border:1px solid var(--line); cursor:none;
  display:grid; place-items:center; color:var(--ink-soft);
  box-shadow:var(--shadow-sm);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .3s, transform .5s cubic-bezier(.22,1.12,.36,1), visibility .3s, color .3s;
}
.backtotop.show{ opacity:1; visibility:visible; transform:translateY(var(--fab-lift)); }
.backtotop svg.ring{ position:absolute; inset:-1px; width:calc(100% + 2px); height:calc(100% + 2px); transform:rotate(-90deg); }
.backtotop svg.ring circle{ fill:none; stroke:var(--gruen-text); stroke-width:2.5; stroke-linecap:round; stroke-dasharray:144; stroke-dashoffset:144; transition:stroke-dashoffset .15s linear; }
.backtotop .arrow{ color:var(--ink); font-family:var(--body); font-size:1.05rem; font-weight:700; }
.backtotop .mini-seal{ display:none; }                    /* Seal-Swap entfernt — Pfeil bleibt immer sichtbar */
.backtotop.complete{ border-color:var(--braun); }         /* am Ende füllt sich der Ring braun, Pfeil bleibt */
.backtotop.complete .arrow{ color:var(--braun); }
.backtotop.complete svg.ring circle{ stroke:var(--braun); }
@media (hover:none){ .contact-fab,.contact-fab-close,.backtotop{ cursor:pointer; } }
@media (max-width:520px){ .contact-fab,.backtotop{ bottom:16px; } .contact-fab{ width:52px; height:52px; } }

/* ============================================================
   ANIMATED BACKGROUND — driftende Blobs + schwebende Shapes
   ============================================================ */
/* Blobs driften (via individueller translate/scale-Property → komponiert
   sauber mit dem parallax-transform aus main.js) */
@keyframes blobDrift{ 0%,100%{ translate:0 0; scale:1; } 50%{ translate:2.5vw 3vh; scale:1.09; } }
.blob{ animation:blobDrift 20s ease-in-out infinite; }
.blob.b2{ animation-duration:26s; animation-direction:reverse; }
.blob.b3{ animation-duration:23s; animation-delay:-6s; }

@keyframes floatY{ 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-26px) rotate(6deg); } }
@keyframes spinCW{ to{ transform:rotate(360deg); } }
@keyframes floatX{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(22px); } }

.floaties{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.floaties .shape{ position:absolute; will-change:transform; }
.floaties .spin{ position:absolute; animation:spinCW 34s linear infinite; }
.s-ring{ width:120px; height:120px; border-radius:50%; border:1.5px solid var(--gruen); top:16%; right:7%; opacity:.30; animation:floatY 9s ease-in-out infinite; }
.s-ring2{ width:200px; height:200px; border-radius:50%; border:1px solid var(--blau); bottom:-4%; left:4%; opacity:.22; animation:floatX 13s ease-in-out infinite; }
.s-dot{ width:14px; height:14px; border-radius:50%; background:var(--blau); top:58%; right:20%; opacity:.35; animation:floatY 6s ease-in-out infinite; }
.s-dot2{ width:9px; height:9px; border-radius:50%; background:var(--gruen-text); top:24%; left:20%; opacity:.4; animation:floatY 7.5s ease-in-out infinite; }
.s-sq{ width:54px; height:54px; border-radius:13px; border:1.5px solid var(--braun); opacity:.20; top:66%; left:9%; animation:floatY 11s ease-in-out infinite, spinCW 30s linear infinite reverse; }
.s-plus{ width:28px; height:28px; top:30%; left:13%; opacity:.38;
  background:linear-gradient(var(--blau-deep),var(--blau-deep)) center/100% 2px no-repeat,
             linear-gradient(var(--blau-deep),var(--blau-deep)) center/2px 100% no-repeat;
  animation:floatY 7.5s ease-in-out infinite, spinCW 26s linear infinite; }
.s-tri{ width:0; height:0; border-left:14px solid transparent; border-right:14px solid transparent; border-bottom:24px solid var(--gruen); opacity:.20; top:12%; left:42%; animation:floatY 8.5s ease-in-out infinite; }
@media (max-width:640px){ .s-ring2,.s-sq,.s-tri{ display:none; } }

/* ---------- Logo-Strip (Kunden & Projekte) ---------- */
.logostrip{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(26px,5vw,60px); }
.logostrip a{ display:inline-flex; }
.logostrip img{ height:clamp(28px,4vw,44px); width:auto; object-fit:contain; filter:grayscale(1) opacity(.5); transition:filter .4s ease, transform .4s var(--ease); }
.logostrip a:hover img{ filter:grayscale(0) opacity(1); transform:translateY(-3px); }

/* ============================================================
   FX MESH (Wissens-Netzwerk) + Video-Hintergrund-Support
   ============================================================ */
.fx-mesh{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.fx-mesh canvas{ display:block; width:100%; height:100%; }
/* Inhalte über dem Mesh halten */
.story > :not(.fx-mesh):not(.blob){ position:relative; z-index:2; }
.cta > .wrap{ position:relative; z-index:2; }

/* Optionaler Loop-Video-Hintergrund (DaVinci-Export einfach droppen) */
.bg-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; pointer-events:none; }
.story > .bg-video{ opacity:.42; mix-blend-mode:screen; }              /* dunkle Box */
.hero > .bg-video, .cta > .bg-video, .page-hero > .bg-video{ opacity:.5; } /* helle Flächen */
.bg-video + .fx-mesh{ opacity:.5; }                                    /* Mesh zurücknehmen, wenn Video da ist */

/* legal prose links */
.prose a{ color:var(--gruen-text); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.prose a:hover{ color:var(--braun); }
.prose ul{ margin:14px 0; } .prose li{ padding-left:26px; }

/* ---------- Hero Trust-Proof (Live-Referenzen als Screenshot-Kacheln) ---------- */
.hero-proof{ display:flex; flex-direction:column; align-items:flex-start; gap:13px; margin-top:26px; }
.hp-label{ font-size:.82rem; color:var(--ink-soft); font-weight:600; display:inline-flex; align-items:center; gap:8px; letter-spacing:.01em; }
.hp-label::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--gruen); box-shadow:0 0 0 4px var(--gruen-wash); animation:hpPulse 2.4s ease-in-out infinite; }
@keyframes hpPulse{ 0%,100%{ box-shadow:0 0 0 3px var(--gruen-wash); } 50%{ box-shadow:0 0 0 6px rgba(140,163,138,.18); } }
.hp-tiles{ display:flex; gap:14px; flex-wrap:wrap; }
.hp-tile{ display:flex; align-items:center; border:1px solid var(--line); border-radius:15px; overflow:hidden; background:var(--paper); box-shadow:var(--shadow-sm); transition:border-color .3s, box-shadow .4s, transform .4s var(--ease); }
.hp-thumb{ width:104px; height:66px; flex:none; overflow:hidden; background:var(--paper-2); border-right:1px solid var(--line-soft); }
.hp-thumb img{ width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform .5s var(--ease); }
.hp-body{ display:flex; flex-direction:column; padding:0 14px; }
.hp-body b{ font-family:var(--body); font-weight:700; font-size:.92rem; color:var(--ink); letter-spacing:-.01em; }
.hp-body small{ font-size:.72rem; color:var(--ink-soft); margin-top:2px; }
.hp-tile .arw{ padding:0 15px 0 8px; color:var(--ink-30); font-size:.85rem; transition:transform .3s var(--ease), color .3s; }
.hp-tile:hover{ border-color:var(--gruen); box-shadow:var(--shadow-lg); transform:translateY(-3px); }
.hp-tile:hover .hp-thumb img{ transform:scale(1.06); }
.hp-tile:hover .arw{ transform:translate(2px,-2px); color:var(--gruen-text); }
@media (max-width:560px){ .hp-tiles{ width:100%; } .hp-tile{ flex:1 1 100%; } }

/* weißes Logo (WOHNTRAUM) auf Anthrazit-Chip sichtbar machen */
.logostrip .logo-dark{ background:#2c2c2f; border-radius:11px; padding:8px 16px; box-shadow:var(--shadow-sm); }
.logostrip .logo-dark img{ height:clamp(22px,3.2vw,34px); filter:none; opacity:.9; transition:opacity .4s ease, transform .4s var(--ease); }
.logostrip .logo-dark:hover img{ opacity:1; transform:translateY(-3px); }

/* ============================================================
   BILDMATERIAL — Inline-SVG-Illustrationen
   (Quelldateien: assets/img/art/*.svg — in die Seiten eingebettet,
    damit Inter/Bricolage und die Marken-Tokens greifen)
   ============================================================ */
.art-figure{ margin:0; position:relative; }
.art-svg{ width:100%; height:auto; display:block; border-radius:clamp(14px,1.8vw,22px); }
.art-figure figcaption{
  margin-top:13px; font-size:.79rem; line-height:1.5; color:var(--ink-soft);
  display:flex; align-items:flex-start; gap:9px; max-width:52ch;
}
.art-figure figcaption::before{ content:""; flex:none; width:16px; height:1px; background:var(--gruen); margin-top:.68em; }

/* leichte Lebendigkeit in den Illustrationen */
@keyframes artPulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.32); opacity:.55; } }
@keyframes artBreathe{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.13); } }
@keyframes artCaret{ 0%,48%{ opacity:1; } 49%,97%{ opacity:0; } 98%,100%{ opacity:1; } }
@keyframes artDraw{ to{ stroke-dashoffset:0; } }
.art-svg .art-pulse{ transform-box:fill-box; transform-origin:center; animation:artPulse 2.8s ease-in-out infinite; }
.art-svg .art-breathe{ transform-box:fill-box; transform-origin:center; animation:artBreathe 5.4s ease-in-out infinite; }
.art-svg .art-caret{ animation:artCaret 1.5s steps(1,end) infinite; }
.js .art-svg .art-draw{ stroke-dasharray:520; stroke-dashoffset:520; }
.js .art-svg .art-dash{ stroke-dasharray:170; stroke-dashoffset:170; }
.js .in .art-svg .art-draw{ animation:artDraw 1.7s var(--ease) .25s forwards; }
.js .in .art-svg .art-dash{ animation:artDraw 1.2s var(--ease) .35s forwards; }

/* ============================================================
   SEITENKOPF MIT ILLUSTRATION (Split-Hero)
   ============================================================ */
.hero-art-grid{
  display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(28px,4.2vw,64px); align-items:center;
}
@media (max-width:980px){ .hero-art-grid{ grid-template-columns:1fr; gap:34px; } }

.hero-chips{ display:flex; flex-wrap:wrap; gap:9px; margin-top:22px; }
.hero-chips span{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.81rem; font-weight:600; color:var(--ink-2);
  background:var(--paper); border:1px solid var(--line); border-radius:100px; padding:7px 15px;
}
.hero-chips span::before{ content:""; flex:none; width:6px; height:6px; border-radius:50%; background:var(--gruen); }

/* ============================================================
   SPLIT-ABSCHNITT — Text neben Bild
   ============================================================ */
.split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,4.5vw,64px); align-items:center; }
.split > .split-media{ order:2; }
.split.rev > .split-media{ order:-1; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; gap:32px; } .split > .split-media,.split.rev > .split-media{ order:0; } }

.checklist{ list-style:none; display:grid; gap:11px; margin:24px 0 0; }
.checklist li{ position:relative; padding-left:34px; color:var(--ink-2); font-size:.98rem; line-height:1.55; }
.checklist li::before{ content:""; position:absolute; left:0; top:.02em; width:22px; height:22px; border-radius:50%; background:var(--gruen-wash); }
.checklist li::after{
  content:""; position:absolute; left:7px; top:.42em; width:8px; height:4px;
  border-left:1.9px solid var(--gruen-text); border-bottom:1.9px solid var(--gruen-text);
  transform:rotate(-45deg);
}

/* ============================================================
   WEITERFÜHRENDE SEITEN — Klick-Treiber
   ============================================================ */
.related{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.rel-card{
  display:flex; flex-direction:column; gap:8px; background:var(--paper);
  border:1px solid var(--line); border-radius:var(--radius); padding:clamp(20px,2.4vw,30px);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s;
}
.rel-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-sm); border-color:var(--gruen); }
.rel-card .k{ font-size:.66rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--gruen-text); }
.rel-card h4{ font-family:var(--display); font-weight:700; font-size:1.28rem; letter-spacing:-.015em; color:var(--ink); }
.rel-card p{ color:var(--ink-soft); font-size:.9rem; line-height:1.55; }
.rel-card .go{ margin-top:auto; padding-top:14px; display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:.88rem; color:var(--gruen-text); transition:gap .3s var(--ease); }
.rel-card:hover .go{ gap:14px; }
@media (max-width:820px){ .related{ grid-template-columns:1fr; } }

/* ============================================================
   THEMEN-HUB (Startseite) — alle lokalen Seiten auf einen Blick
   ============================================================ */
.hub{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.hub a{
  display:flex; flex-direction:column; gap:5px; background:var(--paper);
  border:1px solid var(--line); border-radius:var(--r-sm); padding:17px 19px;
  transition:transform .45s var(--ease), border-color .35s, background .35s, box-shadow .45s var(--ease);
}
.hub a b{ font-family:var(--body); font-weight:700; font-size:.95rem; letter-spacing:-.01em; color:var(--ink); display:flex; align-items:center; justify-content:space-between; gap:10px; }
.hub a b i{ font-style:normal; color:var(--ink-30); transition:transform .4s var(--ease), color .35s; }
.hub a small{ font-size:.78rem; line-height:1.45; color:var(--ink-soft); }
.hub a:hover{ transform:translateY(-3px); border-color:var(--gruen); background:var(--gruen-wash); box-shadow:var(--shadow-sm); }
.hub a:hover b i{ transform:translate(2px,-2px); color:var(--gruen-text); }
@media (max-width:940px){ .hub{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .hub{ grid-template-columns:1fr; } }

/* ============================================================
   FEINSCHLIFF — Zeilenumbruch im Seitenkopf, 4er- und 3er-Raster
   ============================================================ */
/* H1-Zeilen auf Unterseiten genauso brechen wie auf der Startseite */
.page-hero h1 .row{ display:block; }
.js .page-hero h1 .row{ opacity:0; transform:translateY(30px); transition:opacity .85s var(--ease), transform .85s var(--ease); }
.page-hero h1 .row.in{ opacity:1; transform:none; }

/* Vier Vorteile = vier Spalten (statt 3 + Waise) */
.feat-grid.g4{ grid-template-columns:repeat(4,1fr); }
.feat-grid.g4 .feat{ padding:clamp(20px,2.2vw,27px); }
.feat-grid.g4 .feat .ic{ width:38px; height:38px; border-radius:10px; font-size:1.1rem; margin-bottom:13px; }
.feat-grid.g4 .feat h4{ font-size:1.16rem; }
.feat-grid.g4 .feat p{ font-size:.89rem; }
@media (max-width:1040px){ .feat-grid.g4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .feat-grid.g4{ grid-template-columns:1fr; } }

/* Drei Referenz-Kacheln = drei Spalten (kein Loch rechts) */
.work-mini.g3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:820px){ .work-mini.g3{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .work-mini.g3{ grid-template-columns:1fr; } }

@media (prefers-reduced-motion:reduce){ .page-hero h1 .row{ opacity:1; transform:none; } }

/* Referenz-Screenshots sind echte Links (Tastatur + Screenreader), nicht klickbare Divs */
.case-shot{ display:block; }
.case-shot:focus-visible{ outline:3px solid var(--gruen-text); outline-offset:3px; }
/* Badge lag durch overflow:hidden des Rahmens 12px angeschnitten — jetzt bündig innen */
.case-badge.br{ right:14px; bottom:14px; }

/* ============================================================
   HERO-KONSTRUKTION — lebende Guilloché-Zeichnung
   Harmonische Kurven (wie bei Stichtiefdruck/Banknoten), die sich
   endlos neu komponieren, im Rahmen einer technischen Zeichnung.
   Logik: initKonstruktion() in main.js
   ============================================================ */
.hero-art{
  position:absolute; z-index:1; pointer-events:none;
  top:clamp(56px, 7vw, 104px); right:clamp(-70px, -3vw, -10px);
  width:clamp(420px, 42vw, 660px); aspect-ratio:1/1;
  -webkit-mask:radial-gradient(closest-side, #000 84%, transparent 100%);
  mask:radial-gradient(closest-side, #000 84%, transparent 100%);
}
.hero-art canvas{ display:block; width:100%; height:100%; }

/* neben dem großen Titel die kleinen Schwebeteilchen zurücknehmen,
   damit die Zeichnung nicht mit ihnen konkurriert */
.hero.has-art .s-ring,.hero.has-art .s-ring2,.hero.has-art .s-dot{ display:none; }

/* Ab hier ist neben dem Titel kein Platz mehr für eine eigenständige Komposition.
   Statt sie angeschnitten hinter die Buttons zu schieben, läuft sie mittig und
   stark zurückgenommen als Wasserzeichen hinter dem ganzen Hero. */
@media (max-width:1150px){
  .hero-art{
    top:50%; left:50%; right:auto; transform:translate(-50%,-50%);
    width:min(112vw,760px); opacity:.30;
  }
}
/* Auf dem Handy zählt Tempo mehr als Zierde */
@media (max-width:620px){ .hero-art{ display:none; } }

/* ============================================================
   WORTGRAVUR — einzelne Wörter mit lebendiger Füllung
   Das Canvas liegt über dem Wort und wird per destination-in mit
   dem Schriftzug maskiert. Die echte Schrift bleibt im Markup
   stehen (Vorlesesoftware, Suchmaschinen, Kopieren) und wird erst
   unsichtbar geschaltet, wenn das Canvas wirklich läuft.
   Logik: initWortgravur() in main.js
   ============================================================ */
.fx-wort{ position:relative; display:inline-block; }
.fx-wort > canvas{ position:absolute; pointer-events:none; }
.fx-wort.graviert{ color:transparent; }
/* Erzwungene Farbmodi (Windows-Kontrast) blenden Canvas-Inhalte aus oder
   ueberschreiben sie — dann muss die echte Schrift wieder sichtbar werden,
   sonst steht an der Stelle nichts. */
@media (forced-colors: active){
  .fx-wort.graviert{ color:CanvasText; forced-color-adjust:none; }
  .fx-wort > canvas{ display:none; }
}
/* Im Druck bricht die H1 fuers Papierformat neu um (7vw loest gegen die Seiten-
   breite auf), das Canvas behaelt aber seine eingebrannten Pixelmasse und wuerde
   als zu grosser Klecks ueber der Zeile liegen. Also dieselbe Rueckfallebene. */
@media print{
  .fx-wort.graviert{ color:inherit; }
  .fx-wort > canvas{ display:none; }
}
/* Eigene Compositing-Ebene nur dort, wo tatsaechlich dauernd gemalt wird —
   im Standbild waere sie reine Verschwendung. */
@media (prefers-reduced-motion:no-preference){
  .fx-wort.graviert > canvas{ will-change:transform; }
}