/* =====================================================================
   Kaldex — shared site styles (content pages: Home, Leistungen, Über uns,
   Kontakt, Impressum, Datenschutz). The 3D portfolio/gallery page keeps its
   own inline styles; this file drives everything else so the header, footer
   and typography stay identical across pages and languages.
   ===================================================================== */
:root{
  --ink:#1c150d;
  --ink-2:#241d12;
  --panel:#2a2115;
  --bone:#e9e4d8;
  --muted:rgba(233,228,216,0.78);
  --faint:rgba(233,228,216,0.58);
  --gold:#d9b451;      /* matches the logo */
  --gold-deep:#b8923a;
  --amber:#e08a4a;
  --rust:#b5502f;
  --wine:#7a3548;
  --line:rgba(233,228,216,0.13);
  --maxw:1160px;
  /* Signature brand gradient — one consistent sweep (gold → amber → rust →
     wine) used everywhere color needs to feel richer than a flat gold: CTA
     buttons, numerals, icons, quote marks. Individual elements may sample
     different stops for variety, but it's always THIS gradient, never a
     one-off hue, so the "this is Kaldex" recognition never breaks. */
  --brand-gradient: linear-gradient(135deg, #f3d78a 0%, var(--gold) 22%, var(--amber) 50%, var(--rust) 74%, var(--wine) 100%);
  --brand-gradient-ghost: linear-gradient(135deg, rgba(243,215,138,0.14) 0%, rgba(217,180,81,0.14) 22%, rgba(224,138,74,0.12) 50%, rgba(181,80,47,0.10) 74%, rgba(122,53,72,0.08) 100%);
  /* Page-accent palette — one extra colour per content page (Über uns,
     Kontakt, Leistungen) so their panels don't all read as the same brown
     gradient copy-pasted everywhere. */
  --emerald:#1c6b52;
  --teal:#1a6b7a;
  --plum:#5c3a96;
  --sapphire:#2e5fb8;
  --lilac:#8f7ac9;
}
.gradient-text{
  background:var(--brand-gradient); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--gold);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--ink);
  color:var(--bone);
  font-family:"Outfit","Helvetica Neue",Arial,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit;}

/* ---- Focus (keyboard nav) — visible everywhere a :focus-visible default
   was suppressed, not just the form fields that already had their own
   gold-border treatment. ------------------------------------------------ */
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:2px;}
.btn:focus-visible{outline-offset:4px;}
.fan-card__trigger:focus-visible, .medallion__trigger:focus-visible{outline-offset:2px;}

/* ---- Skip link — hidden until keyboard-focused, jumps past the header
   straight to <main>. ---------------------------------------------------- */
.skip-link{
  position:absolute; top:-100px; left:12px; z-index:100;
  background:var(--gold); color:#1a1405; font-weight:600; font-size:13px;
  padding:10px 18px; border-radius:8px; text-decoration:none;
  transition:top .2s ease;
}
.skip-link:focus{top:12px;}

.container{max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,56px);}
.serif{font-family:"Playfair Display",Georgia,"Times New Roman",serif;}
.gold{color:var(--gold);}
.eyebrow{
  font-size:12px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--gold); margin-bottom:18px; font-weight:600;
}

/* ---- Header ---------------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  height:64px; padding:0 clamp(20px,5vw,56px);
  background:rgba(28,21,13,0.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-left{display:flex; align-items:center; gap:22px;}
.header-right{display:flex; align-items:center; gap:20px;}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--bone);}
.brand__mark{
  /* the file is cropped to the medallion, so no ring or plate is drawn under
     it: the old border plus black circle sat outside the disc and read as a
     soft double edge at 34px */
  width:34px; height:34px; border-radius:50%; object-fit:contain;
  flex:0 0 auto;
  transition:transform .35s ease, filter .35s ease;
}
.brand__word{font-size:15px; letter-spacing:0.16em; text-transform:uppercase; font-weight:600; transition:color .35s ease, letter-spacing .35s ease;}
.brand:hover .brand__mark{transform:scale(1.08); filter:brightness(1.15);}
.brand:hover .brand__word{color:var(--gold); letter-spacing:0.22em;}
.site-nav{display:flex; align-items:center; gap:clamp(16px,2.4vw,38px);}
.site-nav a{
  position:relative;
  font-size:12px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--muted); text-decoration:none; padding:6px 0;
  border-bottom:1px solid transparent; transition:color .2s, border-color .2s;
}
.site-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-1px; height:1px;
  background:var(--gold); transition:right .3s ease;
}
.site-nav a:hover{color:var(--bone);}
.site-nav a:hover::after{right:0;}
.site-nav a.active{color:var(--bone); border-bottom-color:var(--gold);}
.site-nav a.active::after{display:none;}
.lang-switch{display:flex; align-items:center; gap:9px; font-size:11px; letter-spacing:0.06em;}
.lang-switch a{color:var(--faint); text-decoration:none;}
.lang-switch a.active{color:var(--gold);}
.lang-switch a:hover{color:var(--bone);}
/* Custom mobile language dropdown — a real <select> looks fine closed, but
   its open state is native OS chrome with zero styling control (no active-
   item color, size not adjustable), so mobile gets this instead. */
.lang-dropdown{position:relative; display:none;}
.lang-dropdown__trigger{
  background:var(--panel); color:var(--bone); border:1px solid var(--line);
  border-radius:6px; font-size:11px; letter-spacing:0.05em; padding:6px 10px;
  font-family:inherit; cursor:pointer;
}
.lang-dropdown__menu{
  position:absolute; top:calc(100% + 8px); right:0; z-index:60;
  display:none; flex-direction:column; min-width:76px; gap:2px;
  background:var(--ink); border:1px solid var(--line); border-radius:8px; padding:6px;
  box-shadow:0 16px 40px -12px rgba(0,0,0,0.65);
}
[dir="rtl"] .lang-dropdown__menu{right:auto; left:0;}
.lang-dropdown.open .lang-dropdown__menu{display:flex;}
.lang-dropdown__menu a{
  color:var(--muted); text-decoration:none; font-size:12.5px; letter-spacing:0.04em;
  padding:8px 10px; border-radius:5px; transition:background .15s ease, color .15s ease;
}
.lang-dropdown__menu a:hover{background:rgba(217,180,81,0.1); color:var(--bone);}
.lang-dropdown__menu a.active{color:var(--gold); background:rgba(217,180,81,0.14);}
.social-icons{display:flex; align-items:center; gap:14px;}
.social-icon{color:var(--faint); display:flex; transition:color .2s ease;}
.social-icon svg{width:17px; height:17px; display:block;}
.social-icon:hover{color:var(--gold);}
.nav-toggle{
  display:none; width:38px; height:38px; border:1px solid var(--line);
  border-radius:6px; background:none; cursor:pointer; align-items:center; justify-content:center;
  flex:0 0 auto;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width:16px; height:1px; background:var(--bone); position:relative;
}
.nav-toggle span::before{position:absolute; top:-5px;}
.nav-toggle span::after{position:absolute; top:5px;}

/* ---- Buttons -------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-size:13px; letter-spacing:0.04em; font-weight:600;
  padding:13px 26px; border-radius:999px; text-decoration:none; cursor:pointer;
  border:1px solid var(--gold); transition:background .2s, color .2s, transform .15s;
}
.btn--solid{
  background-image:
    linear-gradient(120deg, transparent 15%, rgba(255,255,255,0.4) 50%, transparent 85%),
    linear-gradient(120deg, #f3d78a 0%, var(--gold) 24%, var(--amber) 55%, var(--rust) 85%, var(--wine) 130%);
  background-size:240% 100%, 160% 100%;
  background-position:150% 0, 0 0;
  color:#1a1405;
  box-shadow:0 6px 20px -4px rgba(217,180,81,0.5), 0 2px 10px rgba(0,0,0,0.35);
  transition:background-position .6s ease, transform .15s, box-shadow .25s;
}
.btn--solid:disabled{opacity:0.55; cursor:progress; transform:none;}
.btn--solid:hover{
  background-position:-60% 0, -40% 0;
  transform:translateY(-2px);
  box-shadow:0 12px 30px -6px rgba(217,180,81,0.65), 0 5px 18px -2px rgba(181,80,47,0.45);
}
.btn--ghost{background:transparent; color:var(--gold);}
.btn--ghost:hover{
  background:rgba(217,180,81,0.14);
  border-color:#e7c869;
  box-shadow:0 6px 18px -6px rgba(217,180,81,0.35);
}
.btn__arrow{font-size:15px; line-height:1;}

/* ---- CTA glow halo (every button leading to Kontakt / Portfolio) — gold/
   rust to match the brand (was a leftover neon pink/cyan gradient that
   clashed with everything else on the site). :hover covers desktop; :active
   covers touch, since a tap on a real link fires :active for the
   press-and-hold moment before navigation, which is the only reliable
   touch-visible state a link can get. */
.btn{position:relative; z-index:0;}
.btn::before, .btn::after{
  content:""; position:absolute; inset:-6px; z-index:-1; border-radius:999px;
  opacity:0; pointer-events:none;
}
.btn::before{
  background:linear-gradient(-45deg, var(--gold) 0%, var(--rust) 100%);
  transform:rotate(0deg) scale(0.92);
  transition:opacity .4s ease, transform .6s cubic-bezier(.175,.885,.32,1.275);
}
.btn::after{
  background:linear-gradient(-45deg, var(--gold) 0%, var(--rust) 100%);
  filter:blur(18px); transform:scale(0.9);
  transition:opacity .4s ease, filter .4s ease;
}
.btn:hover::before, .btn:active::before{opacity:0.85; transform:rotate(-180deg) scale(1);}
.btn:hover::after,  .btn:active::after {opacity:0.5;  filter:blur(24px);}

/* ---- Emphasis for the highest-intent CTAs: end-of-page conversion bands
   and the contact form's submit button get a slightly bigger, gently
   pulsing button so the site's "closing" moments stand out most. */
.cta .btn--solid, .form .btn--solid{
  padding:15px 32px; font-size:14px;
}
@media (prefers-reduced-motion: no-preference){
  .cta .btn--solid{ animation:ctaPulse 2.8s ease-in-out infinite; }
  .cta .btn--solid:hover{ animation:none; }
}
@keyframes ctaPulse{
  0%, 100%{ box-shadow:0 6px 20px -4px rgba(217,180,81,0.5), 0 2px 10px rgba(0,0,0,0.35); }
  50%{ box-shadow:0 8px 28px -2px rgba(217,180,81,0.75), 0 3px 14px rgba(181,80,47,0.4); }
}

/* ---- Hero ----------------------------------------------------------- */
.hero{position:relative; padding:clamp(70px,12vw,140px) 0 clamp(50px,8vw,90px); overflow:hidden;}
/* .hero::after backlight lives in the ATMOSPHERE block below */
.hero > .container{position:relative; z-index:2;}
.hero-accent{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:0; transition:opacity 1.4s ease;
}
.hero-accent.is-ready{opacity:1;}
.hero-accent canvas{display:block; width:100%; height:100%;}
/* Legibility: a light touch only — real contrast comes from text-shadow on
   the headline itself (below), not from dimming the 3D scene. A heavy
   background scrim was tried and made every page look washed out; this is
   just enough to take the edge off, so the scene stays vivid. */
.hero::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(28,21,13,0.45) 0%, rgba(28,21,13,0.18) 38%, transparent 62%);
}
[dir="rtl"] .hero::before{
  background:linear-gradient(270deg, rgba(28,21,13,0.45) 0%, rgba(28,21,13,0.18) 38%, transparent 62%);
}
/* Leistungen hero — the 3D scene is the lead visual here, so let it breathe:
   lighter scrim, bigger headline, more room for the scene to read as a
   real presence instead of decoration peeking through text. */
.page-leistungen .hero::before{
  background:linear-gradient(90deg, rgba(28,21,13,0.5) 0%, rgba(28,21,13,0.08) 30%, transparent 50%);
}
[dir="rtl"].page-leistungen .hero::before, .page-leistungen[dir="rtl"] .hero::before{
  background:linear-gradient(270deg, rgba(28,21,13,0.5) 0%, rgba(28,21,13,0.08) 30%, transparent 50%);
}
.page-leistungen .hero-accent{opacity:0;}
.page-leistungen .hero-accent.is-ready{opacity:1;}
.page-leistungen .hero__title, .page-ueber-uns .hero__title, .page-kontakt .hero__title{font-size:clamp(28px,4.6vw,52px); letter-spacing:-0.02em;}

/* One shared vertical rhythm for all three content-page heroes: the 3D
   scene gets a fixed, cinematic-height box (not stretched to match
   whatever padding the text needs), and the text starts right where that
   box ends — no extra buffer, so there's no dead gap between the model and
   the copy. */
.page-leistungen .hero-accent, .page-ueber-uns .hero-accent{
  inset:auto; top:0; left:0; right:0; bottom:auto;
  height:clamp(360px,54vw,620px);
}
.page-leistungen .hero, .page-ueber-uns .hero{
  padding-top:clamp(180px,28vw,340px);
  padding-bottom:clamp(20px,3.5vw,36px);
}
/* Kontakt's scene is the shortest of the three (one frame, no cluster) —
   its own, smaller box, not just smaller padding on top of the tall shared
   one (that was overlapping the text into the box by 300+px). */
.page-kontakt .hero-accent{
  inset:auto; top:0; left:0; right:0; bottom:auto;
  height:clamp(220px,32vw,380px);
}
.page-kontakt .hero{
  padding-top:clamp(40px,26vw,170px);
  padding-bottom:clamp(20px,3.5vw,36px);
}
@media (max-width:640px){
  .page-leistungen .hero, .page-ueber-uns .hero{
    padding-top:clamp(130px,38vw,200px);
    padding-bottom:clamp(16px,3vw,28px);
  }
  .page-kontakt .hero{
    padding-top:clamp(180px,50vw,260px);
    padding-bottom:clamp(16px,3vw,28px);
  }
  .page-kontakt .hero-accent{
    height:clamp(180px,50vw,260px);
  }
  .page-leistungen .hero-accent, .page-ueber-uns .hero-accent{
    height:clamp(260px,70vw,360px);
  }
}
@media (max-width:640px){
  .hero-accent{opacity:0.6;}
  .hero-accent.is-ready{opacity:0.6;}
  .hero::before{
    background:linear-gradient(180deg, rgba(28,21,13,0.4) 0%, rgba(28,21,13,0.16) 55%, transparent 100%);
  }
}
.hero__title, .hero .lead, .hero .eyebrow, .hero__actions{position:relative; z-index:2;}
.hero__title, .hero .eyebrow{text-shadow:0 2px 18px rgba(0,0,0,0.9), 0 1px 4px rgba(0,0,0,0.95);}
.hero .lead{text-shadow:0 2px 14px rgba(0,0,0,0.8), 0 1px 3px rgba(0,0,0,0.85);}
.hero__title{
  font-family:"Playfair Display",Georgia,serif; font-weight:400;
  font-size:clamp(34px,6.4vw,74px); line-height:1.04; letter-spacing:-0.01em;
  margin-bottom:24px;
}
.hero__title em{font-style:italic; color:var(--gold);}
.lead{font-size:clamp(16px,2vw,20px); color:var(--muted); max-width:620px; margin-bottom:34px;}
.hero__actions{display:flex; gap:14px; flex-wrap:wrap;}
@media (max-width:640px){
  .hero__title{margin-bottom:14px;}
  .lead{margin-bottom:16px;}
}

/* ---- Framed panel — reusable "gallery painting" visual (hanging chain +
   bone frame + warm glow) used to break up plain card grids on Leistungen,
   Über uns and Kontakt so they read less like a generic template and more
   like an extension of the Portfolio gallery. ------------------------- */
.framed-panel{position:relative; padding-top:34px;}
.framed-panel__chain{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:1px; height:34px; background:rgba(233,228,216,0.35);
}
.framed-panel__chain::before{
  content:""; position:absolute; top:-5px; left:50%; transform:translateX(-50%);
  width:9px; height:9px; border-radius:50%;
  background:radial-gradient(circle, #ffdca8, transparent 72%);
  box-shadow:0 0 18px 5px rgba(255,220,168,0.45);
}
.framed-panel__inner{
  border:6px solid #f2ede0; border-radius:2px;
  --corner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0 L12 8 L20 10 L12 12 L10 20 L8 12 L0 10 L8 8 Z' fill='%23d9b451' opacity='0.85'/%3E%3C/svg%3E");
  background:
    var(--corner), var(--corner), var(--corner), var(--corner),
    radial-gradient(120% 100% at 15% 0%, rgba(217,180,81,0.42), transparent 60%),
    radial-gradient(120% 100% at 85% 100%, rgba(181,80,47,0.38), transparent 60%),
    linear-gradient(160deg, var(--panel), var(--ink-2));
  background-repeat:no-repeat;
  background-size:14px 14px, 14px 14px, 14px 14px, 14px 14px, auto, auto, auto;
  background-position:
    10px 10px, calc(100% - 10px) 10px,
    10px calc(100% - 10px), calc(100% - 10px) calc(100% - 10px),
    0 0, 0 0, 0 0;
  padding:clamp(20px,3.4vw,36px); min-height:200px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:14px; position:relative;
  box-shadow:0 20px 50px -20px rgba(0,0,0,0.6), 0 0 60px -18px rgba(217,180,81,0.35), inset 0 0 50px rgba(0,0,0,0.15);
  transition:transform .3s ease, box-shadow .3s ease;
}
.framed-panel:hover .framed-panel__inner{
  transform:translateY(-4px);
  box-shadow:0 28px 65px -18px rgba(217,180,81,0.4), inset 0 0 50px rgba(0,0,0,0.2);
}
.framed-panel__icon{width:56px; height:56px; color:var(--gold); flex:0 0 auto;}
.framed-panel__icon svg{width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:1.4;}
.framed-panel__label{font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--faint);}
.framed-panel__img{
  width:100%; height:100%; object-fit:cover; object-position:center 18%; position:absolute; inset:0;
  filter:blur(3px) grayscale(60%) brightness(0.78);
  transform:scale(1.06);
  transition:filter .6s ease, transform .6s cubic-bezier(.2,.8,.2,1);
}
/* :active alongside :hover — touch has no hover, but a tap does fire
   :active, so this is the mobile-equivalent reveal. */
.framed-panel:hover .framed-panel__img,
.framed-panel:focus-within .framed-panel__img,
.framed-panel:active .framed-panel__img{
  filter:blur(0px) grayscale(0%) brightness(1.06);
  transform:scale(1.01);
}
.framed-panel__inner--photo{padding:0; min-height:0; aspect-ratio:1/1;}

/* ---- Language globe — richer than a bare icon: a globe with an orbit ring
   and three small satellite badges for DE/EN/FA, using the page's warm
   gold/amber/rust trio instead of one flat colour. -------------------- */
.lang-globe{width:112px; height:112px; overflow:visible;}
.lang-globe circle.orbit{fill:none; stroke:rgba(217,180,81,0.28); stroke-width:1; stroke-dasharray:3 6;}
.lang-globe .spoke{stroke-width:1;}
.lang-globe .globe-ring{fill:none; stroke:currentColor; stroke-width:1.4;}
.lang-globe .globe-meridian{fill:none; stroke:currentColor; stroke-width:1; opacity:0.85;}
.lang-globe .badge{fill:#0d0b08; stroke-width:1.3;}
.lang-globe text{font-family:"Outfit",sans-serif; font-size:8.5px; font-weight:600; fill:#f2ede0; text-anchor:middle;}

/* ---- Service rows — full-width alternating layout (Leistungen), replaces
   a plain repeated card grid so each service gets room to breathe and a
   distinct framed visual instead of four identical boxes. ------------- */
.service-rows{display:flex; flex-direction:column;}
.service-row{
  display:flex; align-items:center; gap:clamp(30px,6vw,70px);
  padding:0; border-top:none;
}
.service-row:first-child{border-top:none;}
.service-row.reverse{flex-direction:row-reverse;}
.service-row__visual{flex:0 0 auto; width:clamp(190px,26vw,260px);}
.service-row__content{flex:1 1 auto; position:relative; min-width:0;}
.service-row__ghost{
  position:absolute; top:-0.32em; inset-inline-start:-0.04em; z-index:0;
  font-family:"Playfair Display",serif; font-style:italic;
  font-size:clamp(80px,12vw,160px); line-height:1;
  background:var(--brand-gradient-ghost); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:rgba(217,180,81,0.1);
  pointer-events:none; user-select:none;
}
.service-row__content > *{position:relative; z-index:1;}
.service-row__title{font-family:"Playfair Display",serif; font-weight:400; font-size:clamp(22px,3.2vw,32px); margin-bottom:12px;}
.service-row__text{color:var(--muted); font-size:clamp(15px,1.8vw,16.5px); max-width:520px; margin-bottom:16px; line-height:1.7;}
@media (max-width:820px){
  .service-row, .service-row.reverse{flex-direction:column; text-align:center;}
  .service-row__visual{width:160px;}
  .service-row__ghost{display:none;}
  .service-row__text{margin-inline:auto;}
}

/* ---- Card fan (Leistungen) — a stack of playing-card-style panels
   anchored at the bottom-left corner, fanned out and overlapping. Only the
   number shows until clicked; the clicked card grows to fill the area and
   reveals its content while the rest dim aside. Deliberately a different
   interaction from the framed-panel/service-row treatments used elsewhere
   on the site, so no two sections read like the same template reused. */
/* Two-column pairing: heading/copy on one side, the card fan on the other,
   both vertically centered on the same row — keeps the section's overall
   height to whichever of the two is taller, instead of stacking them and
   adding their heights together. */
.services-layout{display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(24px,4vw,56px);}
@media (max-width:900px){
  .services-layout{grid-template-columns:1fr;}
}
.services-layout .section__head{margin-bottom:0;}
.card-fan{position:relative; height:clamp(260px,26vw,340px); margin-top:0; display:flex; align-items:center;}
/* Vivid spotlight behind the fan — a real focal glow, not the site-wide
   ambient wash, so this section reads as the page's centerpiece. */
.card-fan::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  inset:-20% -10%;
  background:radial-gradient(45% 65% at 20% 75%, rgba(217,180,81,0.32), transparent 68%),
             radial-gradient(35% 55% at 55% 60%, rgba(181,80,47,0.22), transparent 70%);
  filter:blur(10px);
}
.fan-card{
  position:absolute; left:0; bottom:0;
  width:220px; height:290px; transform-origin:bottom left;
  transform:translate(calc(var(--fi) * 68px), calc(var(--fi) * -10px)) rotate(calc(-10deg + var(--fi) * 7deg));
  z-index:calc(10 - var(--fi));
  transition:transform .5s cubic-bezier(.2,.8,.2,1), width .5s cubic-bezier(.2,.8,.2,1), height .5s cubic-bezier(.2,.8,.2,1);
}
.fan-card:hover{transform:translate(calc(var(--fi) * 68px), calc(var(--fi) * -10px - 18px)) rotate(calc(-10deg + var(--fi) * 7deg));}
.fan-card__trigger{
  width:100%; height:100%; display:flex; align-items:flex-start; justify-content:flex-end;
  padding:18px; cursor:pointer; text-align:start; font:inherit; position:relative; overflow:hidden;
  border-radius:16px; border:1px solid rgba(217,180,81,0.5);
  background:linear-gradient(155deg,#1c1a16 0%,#0a0908 55%,#181512 100%);
  box-shadow:
    0 16px 34px -14px rgba(0,0,0,0.7),
    inset 0 0 0 6px #0a0908,
    inset 0 0 0 9px rgba(217,180,81,0.85),
    inset 0 0 0 10px rgba(0,0,0,0.5);
  transition:box-shadow .3s ease, opacity .25s ease, transform .12s ease-out;
  transform-style:preserve-3d; will-change:transform;
}
.fan-card__trigger::before{
  content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:78%; max-width:170px; aspect-ratio:1/1;
  background:url("/assets/card-emblem.svg") center/contain no-repeat;
  opacity:0.9; pointer-events:none;
}
.fan-card__trigger::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(115deg, rgba(255,255,255,0.10) 0%, transparent 22%, transparent 78%, rgba(255,255,255,0.06) 100%);
  pointer-events:none;
}
.fan-card:hover .fan-card__trigger{box-shadow:
    0 22px 44px -14px rgba(217,180,81,0.4),
    inset 0 0 0 6px #0a0908,
    inset 0 0 0 9px rgba(217,180,81,0.85),
    inset 0 0 0 10px rgba(0,0,0,0.5);}
/* Touch has no mousemove/hover, so the pointer-tracked tilt (site.js) never
   fires there — give taps their own equivalent: a fixed tilt+glow on
   press, using :active which touch does trigger. */
.fan-card__trigger:active{
  transform:perspective(700px) rotateY(-6deg) rotateX(4deg) scale3d(1.03,1.03,1.03);
  box-shadow:
    0 22px 44px -14px rgba(217,180,81,0.5),
    inset 0 0 0 6px #0a0908,
    inset 0 0 0 9px rgba(217,180,81,0.9),
    inset 0 0 0 10px rgba(0,0,0,0.5);
}
.fan-card__number{
  position:relative; z-index:1;
  font-family:"Playfair Display",serif; font-style:italic; font-size:28px;
  background:var(--brand-gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--gold);
}
.fan-card__face{
  position:absolute; inset:0; opacity:0; pointer-events:none;
  display:flex; flex-direction:column; justify-content:center; gap:12px;
  padding:clamp(26px,4vw,42px);
  border:2px solid rgba(242,237,224,0.9); border-radius:14px;
  background:
    radial-gradient(130% 110% at 85% -10%, rgba(217,180,81,0.32), transparent 58%),
    radial-gradient(110% 100% at 5% 115%, rgba(181,80,47,0.28), transparent 58%),
    linear-gradient(150deg, var(--panel), var(--ink-2));
  box-shadow:0 24px 50px -18px rgba(0,0,0,0.65);
  transition:opacity .3s ease .1s;
}
.fan-card__close{
  position:absolute; top:14px; inset-inline-end:14px; z-index:1;
  width:32px; height:32px; border-radius:50%; font:inherit;
  border:1px solid var(--line); background:transparent; color:var(--muted);
  font-size:18px; line-height:1; cursor:pointer; transition:color .2s, border-color .2s;
}
.fan-card__close:hover{color:var(--gold); border-color:var(--gold);}
.fan-card.is-active{
  width:min(480px,100%); height:min(300px,90%);
  transform:translate(0,0) rotate(0deg) !important; z-index:20;
}
.fan-card.is-active .fan-card__trigger{opacity:0; pointer-events:none;}
.fan-card.is-active .fan-card__face{opacity:1; pointer-events:auto;}
.card-fan.has-active .fan-card:not(.is-active){opacity:0.4; filter:saturate(0.5);}
.fan-card__title{font-family:"Playfair Display",serif; font-weight:400; font-size:clamp(20px,2.6vw,26px);}
.fan-card__text{color:var(--muted); font-size:14.5px; line-height:1.65; max-width:440px;}
@media (max-width:640px){
  /* Keep the fanned-deck look on mobile too (scaled down) instead of
     flattening into a plain list — same interaction, smaller cards. */
  .card-fan{height:clamp(160px,42vw,190px); margin-top:12px; transition:height .3s ease; justify-content:center;}
  .card-fan.has-active{height:clamp(230px,54vw,250px);}
  .fan-card{
    left:50%; width:clamp(100px,30vw,120px); height:clamp(132px,40vw,158px);
    transform-origin:bottom center;
    /* Anchored at the container's horizontal center (not the left edge) and
       fanned symmetrically around it — a corner-pivoted fan was bleeding the
       leftmost card off-screen on narrow viewports once rotated. */
    transform:translate(calc(-50% + (var(--fi) - 1.5) * 26px), calc(var(--fi) * -6px)) rotate(calc(-9deg + var(--fi) * 6deg));
  }
  .fan-card:hover, .fan-card:active{
    transform:translate(calc(-50% + (var(--fi) - 1.5) * 26px), calc(var(--fi) * -6px - 10px)) rotate(calc(-9deg + var(--fi) * 6deg));
  }
  .fan-card.is-active{left:0; width:min(320px,90vw); height:min(270px,58vh); transform:translate(0,0) rotate(0deg) !important;}
  .fan-card__number{font-size:20px;}
  .fan-card__title{font-size:17px;}
  .fan-card__text{font-size:13px;}
  .fan-card__face{padding:clamp(18px,5vw,26px); overflow-y:auto;}
}

/* ---- Medallion row — circular wax-seal-style badges (Über uns values).
   A third distinct interaction pattern (independent toggles, not a single-
   active stack like the card fan, not a static panel like framed-panel)
   so no two sections on the site share the same trick. */
.medallion-row{display:flex; justify-content:center; align-items:flex-start; gap:clamp(20px,5vw,52px); flex-wrap:wrap; margin-top:8px;}
.medallion:nth-child(2) .medallion__trigger{filter:hue-rotate(16deg);}
.medallion:nth-child(3) .medallion__trigger{filter:hue-rotate(-14deg);}
.medallion:nth-child(4) .medallion__trigger{filter:hue-rotate(30deg);}
.medallion{display:flex; flex-direction:column; align-items:center; width:200px;}
.medallion__trigger{
  width:168px; height:168px; border-radius:50%; cursor:pointer; font:inherit;
  border:3px solid #f2ede0; position:relative; flex:0 0 auto;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(217,180,81,0.36), transparent 60%),
    radial-gradient(120% 120% at 75% 80%, rgba(181,80,47,0.32), transparent 60%),
    linear-gradient(170deg, var(--panel), var(--ink-2));
  box-shadow:0 0 0 6px var(--ink), 0 0 0 8px rgba(217,180,81,0.25), 0 16px 34px -14px rgba(0,0,0,0.6);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  transition:transform .3s ease, box-shadow .3s ease, filter .3s ease;
}
.medallion__trigger:hover{transform:scale(1.05); box-shadow:0 0 0 6px var(--ink), 0 0 0 8px rgba(217,180,81,0.5), 0 20px 44px -14px rgba(217,180,81,0.35);}
.medallion.is-active .medallion__trigger{transform:scale(1.08); box-shadow:0 0 0 6px var(--ink), 0 0 0 8px rgba(217,180,81,0.6), 0 24px 50px -16px rgba(217,180,81,0.4);}
.medallion__num{
  font-family:"Playfair Display",serif; font-style:italic; font-size:15px;
  background:var(--brand-gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--gold);
}
.medallion__title{font-size:15px; font-weight:600; color:var(--bone); text-align:center; padding:0 14px;}
.medallion__detail{max-width:220px; text-align:center; margin-top:0; max-height:0; opacity:0; overflow:hidden; transition:max-height .35s ease, opacity .3s ease, margin-top .35s ease;}
.medallion.is-active .medallion__detail{max-height:200px; opacity:1; margin-top:14px;}
.medallion__detail p{color:var(--muted); font-size:13.5px; line-height:1.6;}

/* ---- Pull quote — a real plaque (frame + glow), not text floating bare
   on the page background. Same premium-frame language as .framed-panel,
   scaled wide for a sentence instead of an icon. ----------------------- */
.quote-block{
  position:relative; max-width:820px; margin:0 auto; text-align:center;
  padding:clamp(34px,5.5vw,56px) clamp(24px,5vw,48px);
  border:1px solid rgba(242,237,224,0.22); border-radius:6px; overflow:hidden;
  background:
    radial-gradient(120% 100% at 12% 0%, rgba(217,180,81,0.20), transparent 62%),
    radial-gradient(120% 100% at 88% 100%, rgba(181,80,47,0.18), transparent 62%),
    linear-gradient(160deg, var(--panel), var(--ink-2));
  box-shadow:0 30px 70px -25px rgba(0,0,0,0.6), 0 0 90px -22px rgba(217,180,81,0.35), inset 0 0 60px rgba(0,0,0,0.2);
}
.quote-block::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,0.06) 0%, transparent 26%, transparent 74%, rgba(255,255,255,0.04) 100%);
}
.quote-block::before{
  content:"“"; position:absolute; top:0.02em; left:clamp(18px,4vw,34px);
  font-family:"Playfair Display",serif; font-size:clamp(64px,9vw,110px); line-height:1;
  background:var(--brand-gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--gold);
  opacity:0.55; filter:drop-shadow(0 0 18px rgba(217,180,81,0.35)); pointer-events:none;
}
[dir="rtl"] .quote-block::before{left:auto; right:clamp(18px,4vw,34px);}
.quote-block p{
  position:relative;
  font-family:"Playfair Display",serif; font-style:italic; font-weight:400;
  font-size:clamp(21px,3.4vw,34px); line-height:1.45; color:var(--bone);
}
.quote-block .quote-mark{
  font-size:1.3em; font-style:normal;
  background:var(--brand-gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--gold);
}
.quote-attr{position:relative;}
.quote-attr::before{
  content:""; display:block; width:38px; height:1px; margin:0 auto 14px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
@media (max-width:640px){
  .quote-block{padding:clamp(30px,8vw,44px) clamp(20px,6vw,32px);}
  .quote-block p{font-size:clamp(18px,4.4vw,24px); line-height:1.4;}
}

/* ---- Blog index: featured cards (5 latest) + month-grouped archive + search */
.blog-search{position:relative; max-width:420px; margin-bottom:clamp(24px,3.5vw,36px);}
.blog-search::before{
  content:""; position:absolute; top:50%; left:18px; transform:translateY(-50%);
  width:16px; height:16px; pointer-events:none;
  background:var(--muted);
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>') center/contain no-repeat;
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>') center/contain no-repeat;
  transition:background .2s ease;
}
[dir="rtl"] .blog-search::before{left:auto; right:18px;}
.blog-search input{
  width:100%; padding:14px 18px 14px 46px; border-radius:999px;
  border:1px solid var(--line); background:var(--panel); color:var(--bone);
  font-family:inherit; font-size:14.5px;
  box-shadow:inset 0 1px 3px rgba(0,0,0,0.25);
  transition:border-color .2s ease, box-shadow .2s ease;
}
[dir="rtl"] .blog-search input{padding:14px 46px 14px 18px;}
.blog-search input::placeholder{color:var(--muted);}
.blog-search input:focus{
  outline:none; border-color:rgba(217,180,81,0.55);
  box-shadow:inset 0 1px 3px rgba(0,0,0,0.25), 0 0 0 3px rgba(217,180,81,0.15);
}
.blog-search input:focus ~ .blog-search::before{background:var(--gold);}
.blog-search:focus-within::before{background:var(--gold);}
.blog-featured{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:clamp(28px,4vw,44px);}
@media (max-width:900px){.blog-featured{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.blog-featured{grid-template-columns:1fr;}}
.blog-card{
  display:flex; flex-direction:column; border-radius:14px; overflow:hidden;
  border:1px solid var(--line); background:var(--panel);
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.blog-card:hover{
  border-color:rgba(217,180,81,0.55); transform:translateY(-6px);
  box-shadow:0 24px 48px -24px rgba(0,0,0,0.55), 0 0 32px -12px rgba(217,180,81,0.3);
}
.blog-card__media{aspect-ratio:16/10; overflow:hidden;}
.blog-card__media img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease, filter .5s ease;}
.blog-card:hover .blog-card__media img{transform:scale(1.08); filter:saturate(1.15) brightness(1.04);}
.blog-card__body{padding:16px 18px 20px;}
.blog-card__title{font-family:"Playfair Display",serif; font-style:italic; font-weight:400; font-size:clamp(16px,2vw,20px); color:var(--bone); line-height:1.3; transition:color .2s ease;}
.blog-card:hover .blog-card__title{color:var(--gold);}
.blog-card__date{font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold); margin-top:8px; opacity:0.8;}
.blog-archive-group__title{
  font-family:"Playfair Display",Georgia,serif; font-weight:400; font-size:20px;
  margin:32px 0 4px; color:var(--bone);
}
.blog-archive-group:first-of-type .blog-archive-group__title{margin-top:0;}
.blog-empty{display:none; color:var(--muted); padding:30px 0; text-align:center;}
.blog-back{
  display:inline-flex; align-items:center; gap:6px; margin-bottom:16px;
  font-size:13.5px; letter-spacing:0.02em; color:var(--muted); text-decoration:none;
  transition:color .2s ease;
}
.blog-back:hover{color:var(--gold);}

/* ---- Editorial list — alternative to a card grid for content that reads
   better as a sequence (Über uns values). ------------------------------ */
.editorial-list{display:flex; flex-direction:column;}
.editorial-list__item{
  display:flex; gap:26px; align-items:baseline;
  padding:15px 0; border-top:1px solid var(--line);
}
.editorial-list__item:last-child{border-bottom:1px solid var(--line);}
.editorial-list__num{
  font-family:"Playfair Display",serif; font-style:italic; font-size:22px; flex:0 0 auto; width:2.2em;
  background:var(--brand-gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--gold);
}
.editorial-list__body h3{font-size:17px; margin-bottom:6px;}
.editorial-list__body p{color:var(--muted); font-size:14.5px; line-height:1.65;}

/* ---- Sections ------------------------------------------------------- */
.section{padding:clamp(34px,5.5vw,64px) 0; border-top:1px solid var(--line);}
.section__head{max-width:640px; margin-bottom:clamp(20px,3vw,36px);}
@media (max-width:640px){
  .section{padding:clamp(22px,6vw,36px) 0;}
  .section__head{margin-bottom:clamp(14px,3vw,22px);}
}
.section__title{
  font-family:"Playfair Display",Georgia,serif; font-weight:400;
  font-size:clamp(26px,4vw,44px); line-height:1.1; margin-bottom:16px;
}
.section__text{color:var(--muted); font-size:clamp(15px,1.8vw,18px);}

.grid{display:grid; gap:20px;}
.grid--3{grid-template-columns:repeat(3,1fr);}
.grid--2{grid-template-columns:repeat(2,1fr);}

/* ---- Workflow — node-connection layout (Leistungen "So arbeiten wir"):
   three pill-shaped nodes on a dotted canvas, wired together by animated
   connector lines with a travelling pulse, like a workflow-builder graph
   instead of another plain card grid. --------------------------------- */
.workflow{
  position:relative; padding:32px clamp(10px,3vw,28px);
  background-image:radial-gradient(rgba(233,228,216,0.14) 1px, transparent 1.4px);
  background-size:18px 18px;
  border-radius:20px;
}
.workflow__nodes{display:flex; align-items:center;}
.workflow-node{
  --rgb:217,180,81;
  position:relative; flex:1 1 0; min-width:0;
  display:flex; align-items:flex-start; gap:12px;
  background:linear-gradient(160deg, rgba(var(--rgb),0.16), var(--ink-2));
  border:1.5px solid rgba(var(--rgb),0.55); border-radius:16px;
  padding:16px 18px; box-shadow:0 14px 30px -16px rgba(0,0,0,0.6);
}
.workflow-node:nth-child(1){--rgb:217,180,81;}
.workflow-node:nth-child(3){--rgb:224,138,74;}
.workflow-node:nth-child(5){--rgb:181,80,47;}
.workflow-node__icon{
  width:38px; height:38px; border-radius:10px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background:#0d0b08; color:rgb(var(--rgb)); box-shadow:inset 0 0 0 1px rgba(var(--rgb),0.4);
}
.workflow-node__icon svg{width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.6;}
.workflow-node__text{display:flex; flex-direction:column; gap:3px; min-width:0;}
.workflow-node__eyebrow{font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--faint);}
.workflow-node__title{font-size:16px; color:rgb(var(--rgb)); font-weight:600; margin-bottom:2px;}
.workflow-node__desc{font-size:14px; line-height:1.5; color:var(--muted);}
@media (max-width:640px){
  .workflow{padding:22px clamp(8px,3vw,16px);}
}
.workflow__connector{
  flex:0 0 clamp(28px,5vw,64px); position:relative; height:2px; margin:0 -1px;
  background:linear-gradient(90deg, rgb(var(--from)), rgb(var(--to)));
  background-size:200% 100%;
}
.workflow__connector:nth-child(2){--from:217,180,81; --to:224,138,74;}
.workflow__connector:nth-child(4){--from:224,138,74; --to:181,80,47;}
.workflow__connector::before, .workflow__connector::after{
  content:""; position:absolute; top:50%; width:8px; height:8px; border-radius:50%; transform:translateY(-50%);
}
.workflow__connector::before{left:-4px; background:rgb(var(--from)); box-shadow:0 0 8px 1px rgba(var(--from),0.6);}
.workflow__connector::after{right:-4px; background:rgb(var(--to)); box-shadow:0 0 8px 1px rgba(var(--to),0.6);}
.workflow__pulse{
  position:absolute; top:50%; inset-inline-start:0; width:6px; height:6px; border-radius:50%;
  background:#fff8e8; box-shadow:0 0 8px 3px rgba(255,220,168,0.7); transform:translateY(-50%);
}
@media (prefers-reduced-motion: no-preference){
  .workflow__connector{animation:workflowFlow 2.6s linear infinite;}
  .workflow__pulse{animation:workflowPulse 2.6s linear infinite;}
}
@keyframes workflowFlow{ from{background-position:200% 0;} to{background-position:0% 0;} }
@keyframes workflowPulse{ 0%{inset-inline-start:0;} 100%{inset-inline-start:100%;} }
@media (max-width:760px){
  .workflow__nodes{flex-direction:column; align-items:stretch;}
  .workflow-node{width:100%;}
  .workflow__connector{flex-basis:32px; width:2px; height:auto; margin:-1px 0; background:linear-gradient(180deg, rgb(var(--from)), rgb(var(--to))); background-size:100% 200%; align-self:center;}
  .workflow__connector::before{left:50%; top:-4px; transform:translateX(-50%);}
  .workflow__connector::after{left:50%; top:auto; bottom:-4px; right:auto; transform:translateX(-50%);}
  .workflow__pulse{left:50% !important; top:0; transform:translateX(-50%);}
  @media (prefers-reduced-motion: no-preference){
    .workflow__connector{animation-name:workflowFlowV;}
    .workflow__pulse{animation-name:workflowPulseV;}
  }
  @keyframes workflowFlowV{ from{background-position:0 200%;} to{background-position:0 0%;} }
  @keyframes workflowPulseV{ 0%{top:0;} 100%{top:100%;} }
}
.card{
  background:linear-gradient(160deg, rgba(217,180,81,0.22), rgba(224,138,74,0.12) 45%, rgba(181,80,47,0.10) 75%, rgba(122,53,72,0.10));
  border:1px solid var(--line); border-radius:14px; padding:30px 26px;
  transition:border-color .2s, transform .2s, background .2s;
}
.card:hover{border-color:rgba(217,180,81,0.5); transform:translateY(-3px); background:linear-gradient(160deg, rgba(217,180,81,0.30), rgba(224,138,74,0.18) 45%, rgba(181,80,47,0.16) 75%, rgba(122,53,72,0.15));}
.card__num{
  font-family:"Playfair Display",Georgia,serif; font-style:italic; font-size:22px; margin-bottom:14px;
  background:var(--brand-gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--gold);
}
.card__title{font-size:19px; margin-bottom:10px; letter-spacing:0.01em;}
.card__text{color:var(--muted); font-size:14.5px;}

/* pill list (e.g. tech / values) */
.pills{display:flex; flex-wrap:wrap; gap:10px; margin-top:8px;}
.pill{
  font-size:12.5px; letter-spacing:0.03em; color:var(--bone);
  border:1px solid rgba(217,180,81,0.3); border-radius:999px; padding:8px 16px;
  background:linear-gradient(120deg, rgba(217,180,81,0.14), rgba(181,80,47,0.08));
}

/* stat row — a "podium": the middle figure floats higher than its
   neighbours instead of three identical boxes in a row, with a connecting
   line running behind them like a timeline. */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; position:relative; padding-top:18px;}
.stats::before{
  content:""; position:absolute; left:8%; right:8%; top:calc(50% + 5px); height:1px;
  background:linear-gradient(90deg, transparent, rgba(217,180,81,0.4), transparent);
  z-index:-1;
}
.stats > div:nth-child(2){transform:translateY(-16px);}
.stats > div:nth-child(2):hover{transform:translateY(-20px);}
.stat__num{
  font-family:"Playfair Display",Georgia,serif; font-size:clamp(30px,5vw,52px); line-height:1;
  background:var(--brand-gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--gold);
}
.stat__label{color:var(--muted); font-size:13px; margin-top:8px; letter-spacing:0.04em;}
@media (max-width:640px){
  .stats::before{display:none;}
  .stats > div:nth-child(2){transform:none;}
  .stats > div:nth-child(2):hover{transform:translateY(-4px);}
}

/* quote attribution (testimonials reusing .quote-block) */
.quote-attr{color:var(--gold); font-size:13px; letter-spacing:0.04em; margin-top:16px; text-align:center;}

/* mini portfolio strip — reuses real project shots to bridge into Portfolio */
.mini-portfolio{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.mini-portfolio__item{
  position:relative; display:block; border-radius:14px; overflow:hidden;
  aspect-ratio:4/5; border:1px solid var(--line);
  transition:border-color .2s ease, transform .2s ease;
}
.mini-portfolio__item:hover{border-color:rgba(217,180,81,0.5); transform:translateY(-4px);}
.mini-portfolio__item img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease;}
.mini-portfolio__item:hover img{transform:scale(1.06);}
.mini-portfolio__overlay{
  position:absolute; inset:auto 0 0 0; padding:16px;
  background:linear-gradient(0deg, rgba(10,9,8,0.92), rgba(10,9,8,0.15) 75%, transparent);
}
.mini-portfolio__title{font-family:"Playfair Display",serif; font-style:italic; font-size:16px; color:var(--bone);}
.mini-portfolio__tag{font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold); margin-top:3px;}
@media (max-width:640px){.mini-portfolio{grid-template-columns:1fr;}}

/* inline response badge (Kontakt) */
.response-badge{
  display:inline-flex; align-items:center; gap:10px; margin-top:20px;
  padding:11px 18px; border-radius:999px; border:1px solid rgba(217,180,81,0.3);
  background:linear-gradient(120deg, rgba(217,180,81,0.14), rgba(181,80,47,0.08));
  font-size:13px; color:var(--bone);
}
.response-badge svg{width:17px; height:17px; color:var(--gold); flex:0 0 auto; stroke:currentColor; fill:none; stroke-width:1.6;}
.response-badge strong{color:var(--gold); font-weight:600;}

.form-status{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }

/* ---- shared result popup — framed-plaque styling reused from
   .framed-panel__inner (ink surface, gold rule, corner mark, glossy
   sheen) so a confirmation feels native to the site, not a browser alert. */
.kx-modal-overlay{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(10,8,5,0.72); backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.kx-modal-overlay.is-open{opacity:1; pointer-events:auto;}
.kx-modal{
  position:relative; width:100%; max-width:420px; text-align:center;
  padding:clamp(28px,5vw,40px) clamp(22px,5vw,32px) 28px;
  background:linear-gradient(150deg, rgba(217,180,81,0.14), rgba(217,180,81,0.03) 55%, var(--ink-2));
  border:1px solid rgba(217,180,81,0.35); border-radius:16px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,0.65), 0 0 60px -18px rgba(217,180,81,0.4);
  transform:translateY(14px) scale(0.97); transition:transform .3s ease;
}
.kx-modal-overlay.is-open .kx-modal{transform:translateY(0) scale(1);}
.kx-modal::after{
  content:''; position:absolute; inset:0; border-radius:16px; pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,0.16) 0%, transparent 30%, transparent 70%, rgba(255,255,255,0.08) 100%);
}
.kx-modal--error{
  background:linear-gradient(150deg, rgba(214,90,70,0.16), rgba(214,90,70,0.03) 55%, var(--ink-2));
  border-color:rgba(214,90,70,0.4);
  box-shadow:0 30px 70px -20px rgba(0,0,0,0.65), 0 0 60px -18px rgba(214,90,70,0.45);
}
.kx-modal__close{
  position:absolute; top:10px; inset-inline-end:12px; width:30px; height:30px;
  border:none; background:transparent; color:var(--muted); font-size:22px; line-height:1;
  cursor:pointer; border-radius:50%; transition:color .2s, background .2s;
}
.kx-modal__close:hover{color:var(--bone); background:rgba(255,255,255,0.06);}
.kx-modal__icon{
  width:56px; height:56px; margin:0 auto 16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle, rgba(217,180,81,0.22), transparent 70%);
  border:1px solid rgba(217,180,81,0.4); color:var(--gold);
}
.kx-modal--error .kx-modal__icon{
  background:radial-gradient(circle, rgba(214,90,70,0.22), transparent 70%);
  border-color:rgba(214,90,70,0.45); color:#e08a76;
}
.kx-modal__icon svg{width:26px; height:26px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
.kx-modal__title{font-family:"Playfair Display",Georgia,serif; font-style:italic; font-size:clamp(20px,3vw,24px); color:var(--bone); margin-bottom:10px;}
.kx-modal__text{font-size:14.5px; line-height:1.6; color:var(--muted); margin-bottom:22px;}
.kx-modal__ok{margin:0 auto; min-width:120px; justify-content:center;}

/* CTA band */
.cta{
  text-align:center; padding:clamp(56px,9vw,100px) 0;
  background:radial-gradient(70% 120% at 50% 0%, rgba(217,180,81,0.10), transparent 70%);
  border-top:1px solid var(--line);
}
.cta__title{font-family:"Playfair Display",Georgia,serif; font-size:clamp(28px,5vw,50px); margin-bottom:20px;}

/* ---- Second 3D moment — a small spinning medallion bookending the page
   near its closing CTA, instead of the scene only ever appearing once at
   the very top. Fixed square mount (hero-scene.js sizes its own canvas
   to whatever box it's given). ------------------------------------------ */
.cta-medallion{
  width:clamp(120px,32vw,210px); aspect-ratio:1/1; margin:0 auto 8px;
  position:relative; opacity:0; transition:opacity 1.2s ease;
}
.cta-medallion.is-ready{opacity:1;}
.cta-medallion canvas{display:block; width:100%; height:100%;}

/* ---- FAQ (native <details>/<summary>, no JS needed) — each item carries
   a numbered index and a left accent rule instead of reading as a plain
   stack of identical bars. ------------------------------------------- */
.faq{max-width:800px; display:flex; flex-direction:column; gap:12px; counter-reset:faqnum;}
.faq-item{
  counter-increment:faqnum;
  border:1px solid var(--line); border-inline-start:2px solid rgba(217,180,81,0.35); border-radius:14px; overflow:hidden;
  background:linear-gradient(160deg, rgba(217,180,81,0.05), rgba(255,255,255,0.02));
  transition:border-color .2s, transform .2s;
}
.faq-item[open]{border-color:rgba(217,180,81,0.4); border-inline-start-color:var(--gold);}
.faq-item:hover{transform:translateX(4px);}
[dir="rtl"] .faq-item:hover{transform:translateX(-4px);}
.faq-item summary{
  cursor:pointer; list-style:none; padding:18px 22px;
  display:flex; align-items:center; gap:16px;
  font-size:15.5px; font-weight:600; color:var(--bone);
}
.faq-item summary::before{
  content:counter(faqnum, decimal-leading-zero); flex:0 0 auto;
  font-family:"Playfair Display",serif; font-style:italic; font-size:15px;
  background:var(--brand-gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--gold);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:"+"; flex:0 0 auto; margin-inline-start:auto; font-size:20px; color:var(--gold);
  transition:transform .25s ease; line-height:1;
}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item .faq-answer{padding:0 22px 20px; color:var(--muted); font-size:14.5px; line-height:1.7;}

/* ---- Forms (Kontakt) ------------------------------------------------ */
.form{display:grid; gap:10px; max-width:560px;}
.field{display:flex; flex-direction:column; gap:8px;}
.field label{font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted);}
.field input, .field textarea{
  background:var(--ink-2); border:1px solid var(--line); border-radius:10px;
  color:var(--bone); padding:13px 15px; font:inherit; font-size:15px;
}
.field input:focus, .field textarea:focus{outline:none; border-color:var(--gold);}
.field textarea{min-height:140px; resize:vertical;}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,6vw,70px); align-items:stretch;}
.contact-grid .framed-panel{height:100%; display:flex; flex-direction:column;}
.contact-grid .framed-panel__inner{flex:1;}
/* The medallion + chain sat above the panel with enough height (up to
   ~250px) that this column started well below the form column next to it,
   even though both are meant to line up. Shrink the medallion here and
   tighten the chain so the panel itself starts roughly level with the
   form's first field. */
/* Standalone medallion above the contact-grid — centered across the whole
   section (both columns), not nested inside just the info panel where it
   used to sit oddly off to one side with no relation to the form beside
   it. */
/* Head row: copy on one side, medallion beside it (not centered as its own
   block below the text) — closes the dead gap that used to sit between the
   text and the form/panel underneath. */
.kontakt-cta-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:28px;
  margin-bottom:32px;
}
.kontakt-cta-head .cta-medallion{
  flex:0 0 auto; width:clamp(90px,9vw,120px); margin:4px 0 0;
}
@media (max-width:820px){
  .kontakt-cta-head{flex-direction:column; align-items:center; text-align:center; gap:16px;}
  .kontakt-cta-head .cta-medallion{order:-1; margin:0;}
}
.contact-grid .framed-panel{padding-top:18px;}
.contact-grid .framed-panel__chain{height:18px;}
.contact-grid .contact-info{width:100%; text-align:start;}
.contact-info dt{font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--faint); margin-top:22px;}
.contact-info dd{font-size:17px; margin-top:5px;}
.contact-info dd a{color:var(--gold); text-decoration:none;}

/* ---- Legal / prose (Impressum, Datenschutz; also blog articles) ----- */
.prose{max-width:760px;}
.prose h2{
  position:relative; font-family:"Playfair Display",Georgia,serif; font-weight:400;
  font-size:clamp(20px,3vw,28px); margin:38px 0 14px; padding-inline-start:18px;
  transition:color .3s ease, padding-inline-start .3s ease;
}
.prose h2::before{
  content:""; position:absolute; inset-inline-start:0; top:0.15em; bottom:0.15em; width:3px;
  border-radius:2px; background:var(--brand-gradient); opacity:0; transform:scaleY(0.4);
  transition:opacity .3s ease, transform .3s ease;
}
.prose h2:hover{color:var(--gold); padding-inline-start:24px;}
.prose h2:hover::before{opacity:1; transform:scaleY(1);}
.prose h3{font-size:16px; letter-spacing:0.02em; margin:26px 0 10px; color:var(--bone);}
.prose p, .prose li{color:var(--muted); font-size:15.5px; margin-bottom:12px;}
.prose ul{padding-left:20px;}
.prose a{color:var(--gold); text-decoration:underline; text-decoration-color:transparent; text-underline-offset:3px; transition:color .2s ease, text-decoration-color .2s ease;}
.prose a:hover{color:var(--amber); text-decoration-color:currentColor;}
/* Lede: the article's opening line reads slightly larger/brighter than the
   rest, an editorial cue instead of a drop cap (drop caps break Persian
   script, so this works the same way in all three languages). */
.prose > p:first-of-type{font-size:1.16em; color:var(--bone); line-height:1.6;}
.prose figure{margin:28px 0;}
.prose figure img{
  width:100%; max-width:520px; max-height:340px; object-fit:cover;
  display:block; margin:0 auto; border-radius:12px;
  box-shadow:0 20px 50px -20px rgba(0,0,0,0.5);
  transition:transform .4s ease, box-shadow .4s ease;
}
.prose figure img:hover{transform:scale(1.02); box-shadow:0 26px 60px -20px rgba(0,0,0,0.6), 0 0 30px -10px rgba(217,180,81,0.3);}
.blog-cover{
  max-width:520px; max-height:340px; width:100%; object-fit:cover; display:block; margin:24px auto;
  border-radius:12px; transition:transform .4s ease, box-shadow .4s ease;
}
.blog-cover:hover{transform:scale(1.02); box-shadow:0 26px 60px -20px rgba(0,0,0,0.6), 0 0 30px -10px rgba(217,180,81,0.3);}
/* Pull quote reused inside article body — .quote-block p normally wins by
   itself, but nested under .prose the later, equally-specific ".prose p"
   rule would otherwise override its serif/italic styling, so restate it
   here at higher specificity. */
.prose .quote-block{margin:36px auto; max-width:100%;}
.prose .quote-block p{
  font-family:"Playfair Display",serif; font-style:italic; font-weight:400;
  font-size:clamp(19px,2.6vw,26px); line-height:1.5; color:var(--bone);
}

/* ---- Footer --------------------------------------------------------- */
.site-footer{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:18px clamp(20px,5vw,56px); min-height:56px;
  background:var(--ink); border-top:1px solid var(--line);
  font-size:11px; letter-spacing:0.04em; color:var(--faint);
}
.footer-rights{margin:0; order:2;}
.footer-links{display:flex; gap:22px; order:1;}
.site-footer a{color:var(--muted); text-decoration:none;}
.site-footer a:hover{color:var(--gold);}

/* ---- Responsive ----------------------------------------------------- */
@media (max-width:820px){
  .grid--3{grid-template-columns:1fr 1fr;}
  .contact-grid{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .grid--3, .grid--2{grid-template-columns:1fr;}
  .stats{grid-template-columns:1fr 1fr;}
  .site-header{gap:10px; padding:0 clamp(14px,4vw,24px);}
  .header-left{gap:8px;}
  .header-right{gap:12px; margin-inline-end:6px;}
  .nav-toggle{display:flex;}
  .site-nav{
    position:absolute; top:64px; left:0; right:0; flex-direction:column; align-items:flex-start;
    gap:0; padding:8px clamp(20px,5vw,56px) 18px; background:var(--ink);
    border-bottom:1px solid var(--line); display:none;
  }
  .site-nav.open{display:flex;}
  .site-nav a{width:100%; padding:11px 0; border-bottom:1px solid var(--line);}
  .lang-switch{display:none;}
  .lang-dropdown{display:block;}
  .social-icons{gap:12px;}
}

/* ---- RTL (Persian/Farsi) -------------------------------------------- */
/* Flex layouts mirror automatically under dir="rtl"; these overrides fix the
   things direction alone doesn't: Persian-capable fonts, and letter-spacing/
   uppercase that would break Persian shaping. */
[dir="rtl"] body{
  font-family:"Vazirmatn","Segoe UI","Tahoma",Arial,sans-serif;
  line-height:1.85;
}
[dir="rtl"] .serif, [dir="rtl"] .hero__title, [dir="rtl"] .section__title,
[dir="rtl"] .cta__title, [dir="rtl"] .prose h2, [dir="rtl"] .card__num{
  font-family:"Vazirmatn","Segoe UI","Tahoma",Arial,sans-serif;
  font-style:normal;
}
[dir="rtl"] .hero__title em{font-style:normal;}
[dir="rtl"] .site-nav a::after{left:100%; right:0;}
[dir="rtl"] .site-nav a:hover::after{left:0;}
[dir="rtl"] .eyebrow, [dir="rtl"] .site-nav a, [dir="rtl"] .field label,
[dir="rtl"] .brand__word, [dir="rtl"] .contact-info dt, [dir="rtl"] .site-footer,
[dir="rtl"] .btn, [dir="rtl"] .stat__label{
  letter-spacing:0; text-transform:none;
}
[dir="rtl"] .prose ul{padding-left:0; padding-right:20px;}

/* =====================================================================
   ATMOSPHERE — backlit background, entrance animations and richer hover.
   All progressive enhancement: without JS or with reduced-motion the pages
   stay fully readable.
   ===================================================================== */

/* ---- Backlit ambient background (fixed, behind everything) ----------- */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(52% 58% at 14% 6%,  rgba(217,180,81,0.34), transparent 70%),
    radial-gradient(56% 64% at 88% 20%, rgba(181,80,47,0.32),  transparent 72%),
    radial-gradient(70% 70% at 72% 96%, rgba(224,138,74,0.26), transparent 74%);
}
/* ---- Per-page atmosphere variation — same brand palette (gold/amber/
   rust/wine) as every CTA button, just a different balance/emphasis per
   page so pages feel distinct without breaking the "one consistent action
   color" rule that keeps buttons recognizable. Home/Impressum/Datenschutz
   keep the default mix above. ---- */
body.page-leistungen::before{
  background:
    radial-gradient(56% 62% at 12% 6%,  rgba(217,180,81,0.42), transparent 70%),
    radial-gradient(52% 60% at 92% 16%, rgba(224,138,74,0.32), transparent 70%),
    radial-gradient(66% 66% at 68% 96%, rgba(181,80,47,0.30), transparent 74%);
}
body.page-ueber-uns::before{
  background:
    radial-gradient(58% 64% at 18% 8%, rgba(224,138,74,0.46), transparent 70%),
    radial-gradient(60% 68% at 88% 20%, rgba(217,180,81,0.38), transparent 72%),
    radial-gradient(74% 74% at 62% 98%, rgba(217,148,168,0.30), transparent 74%);
}
body.page-kontakt::before{
  background:
    radial-gradient(62% 66% at 50% 2%, rgba(217,180,81,0.40), transparent 72%),
    radial-gradient(56% 62% at 90% 82%, rgba(181,80,47,0.34), transparent 72%);
}
/* Sections carry their own colour wash too (body::before is fixed to the
   viewport, so on a long page it doesn't reach content lower down) —
   alternating sections keep colour present throughout the scroll, not just
   near the top of the page. */
.section:nth-of-type(even){
  background:
    radial-gradient(65% 100% at 12% 0%, rgba(217,180,81,0.13), transparent 68%),
    radial-gradient(65% 100% at 88% 100%, rgba(181,80,47,0.13), transparent 68%);
}
/* one slow-drifting aurora blob for subtle life */
body::after{
  content:""; position:fixed; z-index:-2; pointer-events:none;
  width:60vmax; height:60vmax; left:-10vmax; top:-10vmax; border-radius:50%;
  background:radial-gradient(closest-side, rgba(217,180,81,0.15), transparent 70%);
  filter:blur(20px);
}
@media (prefers-reduced-motion: no-preference){
  body::after{ animation:drift 26s ease-in-out infinite alternate; }
}
@keyframes drift{
  0%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(40vw,18vh) scale(1.25); }
  100%{ transform:translate(8vw,42vh) scale(1.05); }
}
/* faint top backlight rim on each major section */
.section, .cta{position:relative;}
.section::before{
  content:""; position:absolute; top:-1px; left:50%; transform:translateX(-50%);
  width:min(680px,80%); height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(217,180,81,0.55), transparent);
  opacity:0.6;
}

/* ---- Hero entrance (on load, staggered — no JS, no flash) ------------ */
@media (prefers-reduced-motion: no-preference){
  .hero .eyebrow{ animation:fadeUp .7s .05s both; }
  .hero__title{  animation:fadeUp .8s .16s both; }
  .hero .lead{   animation:fadeUp .8s .30s both; }
  .hero__actions{animation:fadeUp .8s .44s both; }
  /* Leistungen's title uses the word-by-word tornado entrance instead
     (js-tornado spans inside it) — the block-level fadeUp would double up
     with that, so it's switched off just here. */
  .page-leistungen .hero__title{animation:none; opacity:1; transform:none;}
}
@keyframes fadeUp{ from{opacity:0; transform:translateY(26px);} to{opacity:1; transform:none;} }

/* stronger backlight behind the hero headline */
.hero::after{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  width:52%; height:70%; top:6%; inset-inline-end:4%;
  background:radial-gradient(60% 70% at 60% 30%, rgba(217,180,81,0.16), transparent 72%);
  filter:blur(6px);
}

/* ---- Scroll reveal (JS adds .reveal + direction; .is-in plays it) ---- */
@media (prefers-reduced-motion: no-preference){
  .reveal{
    opacity:0; transform:translateY(30px);
    transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
    will-change:opacity, transform;
  }
  .reveal.from-left{  transform:translateX(-52px); }
  .reveal.from-right{ transform:translateX(52px); }
  .reveal.from-up{    transform:translateY(36px); }
  .reveal.scale-in{   transform:scale(0.88); }
  .reveal.is-in{ opacity:1; transform:none; }
}

/* ---- Tornado text reveal — words start scattered on a spiral (JS sets
   --tx/--ty/--tr per word) and settle into normal reading position when
   .js-tornado gets .is-in, staggered word by word via transition-delay. */
@media (prefers-reduced-motion: no-preference){
  .tornado-word{
    display:inline-block; opacity:0; will-change:transform, opacity;
    transform:translate(var(--tx,0),var(--ty,-60px)) rotate(var(--tr,0deg));
    transition:transform 1s cubic-bezier(.16,1,.3,1), opacity .6s ease;
  }
  .js-tornado.is-in .tornado-word{opacity:1; transform:none;}
}

/* ---- Cards: backlight + lift on hover -------------------------------- */
.card{position:relative; overflow:hidden;}
.card::after{                 /* top backlight glow inside the card */
  content:""; position:absolute; left:0; right:0; top:0; height:60%;
  background:radial-gradient(70% 100% at 50% 0%, rgba(217,180,81,0.14), transparent 70%);
  opacity:0; transition:opacity .35s ease; pointer-events:none;
}
.card:hover{
  border-color:rgba(217,180,81,0.55);
  transform:translateY(-7px);
  box-shadow:0 22px 55px -22px rgba(217,180,81,0.30), 0 12px 34px -16px rgba(0,0,0,0.65);
}
.card:hover::after{opacity:1;}
.card__title{transition:color .25s ease;}
.card:hover .card__title{color:var(--gold);}

/* pills + stats lift a touch too */
.pill{transition:border-color .2s, color .2s, transform .2s;}
.card:hover .pill{border-color:rgba(217,180,81,0.35);}
.stats > div{
  position:relative; padding:22px 18px; border:1px solid var(--line); border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0));
  transition:border-color .25s, transform .25s;
}
.stats > div:hover{border-color:rgba(217,180,81,0.4); transform:translateY(-4px);}

/* CTA gets a soft backlight bloom */
.cta::after{
  content:""; position:absolute; z-index:-1; inset:0; pointer-events:none;
  background:radial-gradient(45% 120% at 50% 0%, rgba(217,180,81,0.14), transparent 70%);
}

/* ---- Mobile polish --------------------------------------------------- */
@media (max-width:640px){
  .hero{padding-top:clamp(48px,16vw,90px);}
  body::before{
    background:
      radial-gradient(60% 30% at 20% 4%, rgba(217,180,81,0.22), transparent 62%),
      radial-gradient(70% 34% at 85% 30%, rgba(181,80,47,0.19), transparent 64%),
      radial-gradient(80% 40% at 60% 98%, rgba(217,180,81,0.15), transparent 68%);
  }
  .card{padding:26px 22px;}
  .card:hover{transform:none;}          /* touch: no hover-lift, rely on reveal + glow */
  .card::after{opacity:0.5;}            /* keep a gentle backlight visible on mobile */
  .stats > div{padding:18px 14px;}
}

@media (prefers-reduced-motion: reduce){
  .btn::before, .btn::after{ transition:opacity .3s ease !important; }
  .btn:hover::before, .btn:active::before{ transform:none !important; }
}

/* =====================================================================
   Page-specific box accents — smooth two-stop gradient + a diagonal glass
   sheen (same trick as the approved playing-card front: .fan-card__trigger)
   instead of noisy multi-layer grain. Clean, not muddy. One accent colour
   per page so panels read as that page, not a copy-paste of another.
   ===================================================================== */
.page-ueber-uns .framed-panel__inner,
.page-kontakt .framed-panel__inner{
  position:relative; overflow:hidden;
}
.fan-card__face{overflow:hidden;}
.page-ueber-uns .framed-panel__inner::after,
.page-kontakt .framed-panel__inner::after,
.fan-card__face::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,0.18) 0%, transparent 30%, transparent 70%, rgba(255,255,255,0.10) 100%);
}
/* Über uns identity colour — swapped from a cool lilac/sapphire pair to a
   bright warm rose-gold: the cool pair read as muddy against this site's
   warm ink base (cool + warm dark = desaturated, not vivid), which is why
   it kept reading as dull no matter how much opacity it got. Warm-on-warm
   actually glows. */
.page-ueber-uns{--roseA:230,150,140; --roseB:245,205,120;}
.page-ueber-uns .framed-panel__inner{
  background:
    var(--corner), var(--corner), var(--corner), var(--corner),
    linear-gradient(150deg, rgba(var(--roseA),0.4), rgba(var(--roseB),0.26) 55%, var(--ink-2));
  background-repeat:no-repeat;
  background-size:14px 14px, 14px 14px, 14px 14px, 14px 14px, auto;
  background-position:
    10px 10px, calc(100% - 10px) 10px,
    10px calc(100% - 10px), calc(100% - 10px) calc(100% - 10px), 0 0;
  box-shadow:0 20px 50px -20px rgba(0,0,0,0.6), 0 0 70px -14px rgba(var(--roseB),0.5), inset 0 0 50px rgba(0,0,0,0.12);
}
.page-ueber-uns .framed-panel__inner::after{
  background:linear-gradient(115deg, rgba(255,255,255,0.22) 0%, transparent 30%, transparent 70%, rgba(255,255,255,0.14) 100%);
}
/* Über uns stats — "progress pill" treatment: wide dark bars stacked
   vertically, a soft chromatic glow blob bleeding in from the left (stands
   in for the reference's face-silhouette accent) with a bright scanning
   rim-light, label on the left, the big figure on the right. */
.page-ueber-uns .stats{
  display:flex; flex-direction:column; gap:12px;
  padding-top:0;
}
.page-ueber-uns .stats::before{display:none;}
.page-ueber-uns .stats > div{
  --glow1:230,150,140; --glow2:245,205,120; --scan-pos:46%;
  transform:none !important; overflow:hidden; position:relative;
  display:flex; align-items:center; gap:14px; min-height:44px;
  border-radius:12px; padding:9px 18px;
  background:linear-gradient(90deg, #0c0a08 0%, var(--ink-2) 60%);
}
.page-ueber-uns .stats > div:hover{border-color:rgba(230,150,140,0.5); transform:translateY(-2px) !important;}
.page-ueber-uns .stats > div:nth-child(2){--glow1:28,150,110; --glow2:120,200,170;}
.page-ueber-uns .stats > div:nth-child(3){--glow1:245,170,90; --glow2:230,150,140;}
.page-ueber-uns .stats > div::before{
  content:""; order:2; flex:1 1 auto; align-self:stretch; margin:-9px 0; border-radius:0;
  background:
    radial-gradient(55% 130% at 35% 50%, rgba(var(--glow1),0.65), transparent 70%),
    radial-gradient(48% 120% at 62% 50%, rgba(var(--glow2),0.55), transparent 70%);
  filter:blur(10px);
}
.page-ueber-uns .stats > div::after{
  content:""; order:2; position:absolute; top:20%; bottom:20%; width:2px; left:var(--scan-pos);
  background:linear-gradient(180deg, transparent, rgba(255,255,255,0.85), transparent);
  box-shadow:0 0 12px 2px rgba(255,255,255,0.5); border-radius:2px;
}
.page-ueber-uns .stat__label{
  order:1; margin-top:0; color:var(--bone); font-size:12.5px; font-weight:700;
  letter-spacing:0; text-transform:none; max-width:11em;
}
.page-ueber-uns .stat__num{order:3; flex:0 0 auto; font-size:clamp(15px,1.6vw,18px); font-variant-numeric:tabular-nums;}
@media (max-width:640px){
  .page-ueber-uns .stats > div{flex-wrap:wrap; padding:12px 18px;}
  .page-ueber-uns .stats > div::before{flex-basis:100%; order:3; height:16px; margin:4px 0 0;}
  .page-ueber-uns .stats > div::after{top:auto; bottom:12px; height:16px;}
  .page-ueber-uns .stat__num{order:2; margin-inline-start:auto;}
}
.page-ueber-uns .mini-portfolio__item{box-shadow:inset 0 0 0 1px rgba(230,150,140,0.28), 0 0 0 1px rgba(255,255,255,0.04);}
.page-ueber-uns .mini-portfolio{position:relative;}
.page-ueber-uns .mini-portfolio::before{
  content:""; position:absolute; z-index:-1; pointer-events:none; inset:-16% -8%;
  background:radial-gradient(50% 70% at 80% 20%, rgba(230,150,140,0.38), transparent 68%),
             radial-gradient(40% 60% at 15% 85%, rgba(245,205,120,0.30), transparent 70%);
  filter:blur(10px);
}
.page-ueber-uns .quote-block{position:relative;}
.page-ueber-uns .quote-block::after{
  background:
    linear-gradient(115deg, rgba(255,255,255,0.14) 0%, transparent 30%, transparent 70%, rgba(255,255,255,0.08) 100%),
    radial-gradient(60% 100% at 50% -10%, rgba(230,150,140,0.24), transparent 65%);
}

/* Kontakt identity — same fix as Über uns: swapped the cool emerald/
   sapphire pair for warm copper + honey-gold, so it glows against the
   warm ink base instead of muddying. Leans more orange/saturated than
   Über uns's softer rose-gold, so the two still read as different pages. */
.page-kontakt{--copperA:224,120,72; --copperB:242,178,92;}
.page-kontakt .framed-panel__inner{
  background:
    var(--corner), var(--corner), var(--corner), var(--corner),
    linear-gradient(150deg, rgba(var(--copperA),0.42), rgba(var(--copperB),0.26) 55%, var(--ink-2));
  background-repeat:no-repeat;
  background-size:14px 14px, 14px 14px, 14px 14px, 14px 14px, auto;
  background-position:
    10px 10px, calc(100% - 10px) 10px,
    10px calc(100% - 10px), calc(100% - 10px) calc(100% - 10px), 0 0;
  box-shadow:0 20px 50px -20px rgba(0,0,0,0.6), 0 0 70px -14px rgba(var(--copperB),0.5), inset 0 0 50px rgba(0,0,0,0.12);
}
.page-kontakt .framed-panel__inner::after{
  background:linear-gradient(115deg, rgba(255,255,255,0.22) 0%, transparent 30%, transparent 70%, rgba(255,255,255,0.14) 100%);
}
.page-kontakt .faq-item{background:linear-gradient(160deg, rgba(var(--copperA),0.16), rgba(var(--copperB),0.06));}
.page-kontakt .response-badge{border-color:rgba(var(--copperB),0.45); background:linear-gradient(120deg, rgba(var(--copperA),0.22), rgba(var(--copperB),0.14));}
.page-kontakt .response-badge svg{color:#f0a868;}

.page-leistungen .faq-item{background:linear-gradient(160deg, rgba(92,58,150,0.12), rgba(224,138,74,0.05));}
.page-leistungen .stats > div{background:linear-gradient(180deg, rgba(26,107,122,0.10), rgba(46,95,184,0.03));}
.page-leistungen .stats > div:hover{border-color:rgba(26,107,122,0.45);}

.fan-card:nth-child(1) .fan-card__face{background-color:var(--ink-2); background-image:linear-gradient(150deg, rgba(28,107,82,0.42), var(--ink-2) 65%); box-shadow:0 24px 50px -18px rgba(0,0,0,0.65), 0 0 50px -16px rgba(28,107,82,0.4);}
.fan-card:nth-child(2) .fan-card__face{background-color:var(--ink-2); background-image:linear-gradient(150deg, rgba(26,107,122,0.42), var(--ink-2) 65%); box-shadow:0 24px 50px -18px rgba(0,0,0,0.65), 0 0 50px -16px rgba(26,107,122,0.4);}
.fan-card:nth-child(3) .fan-card__face{background-color:var(--ink-2); background-image:linear-gradient(150deg, rgba(92,58,150,0.45), var(--ink-2) 65%); box-shadow:0 24px 50px -18px rgba(0,0,0,0.65), 0 0 50px -16px rgba(92,58,150,0.4);}
.fan-card:nth-child(4) .fan-card__face{background-color:var(--ink-2); background-image:linear-gradient(150deg, rgba(46,95,184,0.42), var(--ink-2) 65%); box-shadow:0 24px 50px -18px rgba(0,0,0,0.65), 0 0 50px -16px rgba(46,95,184,0.4);}


/* =====================================================================
   Blog — light theme
   Home and Portfolio stay dark because the gallery needs the drama. The
   blog is long-form reading, so it flips to a warm light ground. Done by
   redefining the tokens on the blog body: every rule in this file already
   reads them, so nothing else has to be duplicated.

   Contrast against #faf7f2, measured rather than estimated:
     body text  #1c150d            16.90:1  AAA
     muted      0.74               7.45:1   AAA
     faint      0.64               5.31:1   AA
     accent     #8a6a1c            4.72:1   AA
   The dark theme's --gold (#d9b451) is only 1.85:1 here, so the accent
   moves to a deeper gold. --wine is the reverse case: unusable on the dark
   ground at 2.09:1, but 8.09:1 here, which is why it anchors the gradient.
   ===================================================================== */
body.page-blog{
  --ink:#f1edeb;
  --ink-2:#e9e4e1;
  --panel:#ffffff;
  --bone:#424242;
  --heading:#212121;
  --muted:rgba(66,66,66,0.86);
  --faint:rgba(66,66,66,0.78);
  --gold:#7a5c15;
  --gold-deep:#63490f;
  --line:rgba(33,33,33,0.12);
  --brand-gradient:linear-gradient(135deg,#7a5c15 0%,#9c4327 45%,var(--wine) 100%);
  color-scheme:light;
}

/* Headings sit a step darker than the body copy. That split is what keeps a
   light page from reading as flat grey, and it is why the earlier attempts
   with near-black body text felt harsh: the contrast was fine, the weight
   was not. */
body.page-blog h1,
body.page-blog h2,
body.page-blog h3,
body.page-blog .hero__title{ color:var(--heading); }

/* The ambient glows are tuned for a dark ground and turn muddy on a light
   one, so the blog gets a much fainter wash instead. */
body.page-blog::before{
  background:
    radial-gradient(60% 30% at 20% 4%, rgba(154,116,40,0.07), transparent 62%),
    radial-gradient(70% 34% at 85% 30%, rgba(156,67,39,0.05), transparent 64%);
}
body.page-blog::after{ opacity:0.18; }

/* Cards and panels need a visible edge once the page is no longer dark. */
body.page-blog .blog-card,
body.page-blog .editorial-list__item,
body.page-blog .quote-block{
  background:var(--panel);
  border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(28,21,13,0.04), 0 8px 24px -18px rgba(28,21,13,0.25);
}
body.page-blog .site-header,
body.page-blog .site-footer{
  background:rgba(241,237,235,0.92);
  border-color:var(--line);
}
body.page-blog .blog-search,
body.page-blog input,
body.page-blog select{
  background:var(--panel);
  color:var(--bone);
  border:1px solid var(--line);
}
body.page-blog .blog-search::placeholder{ color:var(--faint); }

/* assets/logo.png has no alpha channel — it is an opaque tile (53% black,
   23% slate) with the mark on top. On the dark pages that background is
   invisible; on the light blog it shows as a dark block in the header.
   Keying it out is not safe because the baked-in background is not one flat
   colour, so until a transparent source file exists the mark sits in a small
   dark badge here, which reads as deliberate rather than broken. */
body.page-blog .brand__mark{ background:none; padding:0; box-shadow:none; }

/* Archive rows: a scan list, not a reading list. The thumbnail had no room
   around it because the sizing sat inline on the <img> with no padding on
   the row itself, so it touched the card edge. */
.editorial-list__item{
  display:flex;
  align-items:center;
  gap:18px;
  padding:14px 18px;
}
.editorial-list__thumb{
  width:72px;
  height:72px;
  object-fit:cover;
  border-radius:10px;
  flex-shrink:0;
}
.editorial-list__body h3{ margin:0; }
.editorial-list__date{
  margin:4px 0 0;
  font-size:13px;
  color:var(--faint);
}
@media (max-width:560px){
  .editorial-list__item{ gap:14px; padding:12px 14px; }
  .editorial-list__thumb{ width:58px; height:58px; }
}