/* ==========================================================================
   Rheinland Digitalwerk — main stylesheet

   Two themes, night by default. Colours come from the logo:
     #01247A navy · #00B2C0 cyan · #001854 deep navy · #E4791E orange
   The tone is deliberately quiet: low contrast steps, generous spacing,
   slow transitions, nothing that flashes.
   ========================================================================== */

/* ── tokens ──────────────────────────────────────────────────────────── */

:root{
  /* brand, identical in both themes */
  --navy:        #01247A;
  --navy-deep:   #001854;
  --cyan:        #00B2C0;
  --orange:      #E4791E;

  --f-display:'Poppins', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;
  --f-body:   'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono:   'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Header height, in two states. At the top of the page the bar is tall
     and the wordmark is at its largest; once the page is scrolled it pulls
     back to a working size so it takes less of the screen. Four other
     rules follow --hh, so it lives here rather than being repeated as a
     number; they all use the at-rest height, which is the offset the page
     is laid out against. */
  --hh: clamp(74px, 7.6vw, 112px);
  --hh-sm: clamp(70px, 5.2vw, 78px);

  --shell: 1280px;
  --gut: clamp(20px, 5vw, 52px);
  --sec-y: clamp(66px, 8vw, 116px);
  --r: 14px;
  --r-lg: 20px;
  --ease: cubic-bezier(.22,.7,.25,1);
  --t: .45s;
}

/* night — the default */
:root, :root[data-theme="night"]{
  --bg:       #0B1422;
  --bg-2:     #0F1A2C;
  --bg-3:     #142238;
  --surface:  rgba(150,190,235,.05);
  --surface-2:rgba(150,190,235,.085);
  --line:     rgba(140,185,230,.14);
  --line-2:   rgba(140,185,230,.24);
  --ink:      #E6EEFA;
  --ink-2:    #A6BAD4;
  --ink-3:    #74879F;
  --accent:   #3FD8E6;
  --accent-2: #00B2C0;
  --on-accent:#04202B;
  --glow:     0 0 0 1px rgba(63,216,230,.16);
  --shadow:   0 26px 60px -36px rgba(0,0,0,.9);
  color-scheme: dark;
}

/* day */
:root[data-theme="day"]{
  --bg:       #FAFAF8;
  --bg-2:     #F3F4F1;
  --bg-3:     #EAEBE7;
  --surface:  #FFFFFF;
  --surface-2:#F6F7F4;
  --line:     rgba(24,38,62,.11);
  --line-2:   rgba(24,38,62,.20);
  --ink:      #11203A;
  --ink-2:    #4A5A70;
  --ink-3:    #74839A;
  --accent:   #0C7C8A;
  --accent-2: #00929F;
  --on-accent:#FFFFFF;
  --glow:     0 0 0 1px rgba(12,124,138,.14);
  --shadow:   0 22px 50px -32px rgba(13,27,51,.28);
  color-scheme: light;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:clamp(15px,.36vw + 14.2px,16.5px);
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background var(--t) var(--ease), color var(--t) var(--ease);
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
p{ margin:0; }

h1,h2,h3,h4{ font-family:var(--f-display); font-weight:600; line-height:1.16; margin:0; letter-spacing:-.021em; }
h2{ font-size:clamp(26px,3vw,42px); }
h3{ font-size:clamp(17px,1.35vw,20px); }
h4{ font-size:13px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); font-weight:600; }

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut); }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--accent); color:var(--on-accent); padding:12px 20px;
  border-radius:0 0 10px 0; font-weight:600; text-decoration:none;
}
.skip-link:focus{ left:0; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }

/* ── header ──────────────────────────────────────────────────────────── */

.site-header{
  position:fixed; inset-inline:0; top:0; z-index:100;
  border-bottom:1px solid transparent;
  transition:background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.site-header.is-stuck{
  background:color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--line);
}
.header-inner{
  display:flex; align-items:center; gap:22px; height:var(--hh);
  transition:height .45s var(--ease);
}
.site-header.is-compact .header-inner{ height:var(--hh-sm); }

.brand{ position:relative; display:flex; align-items:center; text-decoration:none; flex:0 0 auto; }

/* ── the spark across the wordmark ───────────────────────────────────────
   Every three seconds a narrow band of light runs across the letters from
   left to right. The logo is artwork, not text, so the band is a gradient
   in a layer over it, cut to the shape of the logo with the very same file
   as a mask — only the strokes light up, never the space between them. The
   night file is the day file recoloured, so its alpha is identical and one
   mask serves both themes.
   ────────────────────────────────────────────────────────────────────── */
.brand-spark{
  position:absolute; inset:0; pointer-events:none;
  -webkit-mask:url("../img/logo-full.png") no-repeat 0 0 / 100% 100%;
          mask:url("../img/logo-full.png") no-repeat 0 0 / 100% 100%;
  /* A white flash would be wasted here: at night "Rheinland" is already
     near-white, so brightening it changes almost nothing. The band is a
     saturated cyan instead — the light letters turn cyan, the cyan ones
     go white-hot, and the orange mark lights up too. A shift in colour
     reads as a spark where a shift in brightness does not. */
  --spark: #1FA8BE;
  --spark-core: #5FE9F5;
}
/* The band is its own layer and travels on a transform, not on a background
   position: a percentage background-position is measured against the
   difference between the image and the box, which runs the wrong way and
   makes the distance hard to reason about. A translate is simply left to
   right across the wordmark. */
.brand-spark::before{
  content:"";
  position:absolute; top:-30%; bottom:-30%; left:0; width:26%;
  background:linear-gradient(90deg,
    transparent, var(--spark) 30%, var(--spark-core) 50%, var(--spark) 70%, transparent);
  animation:brandSpark 3s linear infinite;
}
@keyframes brandSpark{
  0%       { transform:translateX(-150%) skewX(-16deg); opacity:0; }
  2%       { opacity:1; }
  22%      { transform:translateX(470%)  skewX(-16deg); opacity:1; }
  24%, 100%{ transform:translateX(470%)  skewX(-16deg); opacity:0; }
}
:root[data-theme="day"] .brand-spark{ --spark:#0B7C8A; --spark-core:#2FD2E4; }
/* As large as the row allows: full size once there is room beside the
   navigation, stepped down in the band where the two would meet, and
   biggest of all above 1280px where the menu leaves plenty of room. */
.brand-full{ width:clamp(206px, 21vw, 282px); height:auto; transition:width .45s var(--ease); }
.brand-mark{ display:none; width:48px; height:48px; transition:width .45s var(--ease), height .45s var(--ease); }
@media (min-width:1280px){
  .brand-full{ width:clamp(282px, 24vw, 330px); }
}
/* scrolled: the mark returns to a working size and gets out of the way */
.site-header.is-compact .brand-full{ width:clamp(196px, 14.5vw, 216px); }
.site-header.is-compact .brand-mark{ width:42px; height:42px; }
/* The wordmark is dark navy artwork, so on a dark background it has to be
   lifted. A white-out filter did that, but it flattened the orange too —
   and the orange is the same #E4791E as the initials in the headline. So
   night mode swaps in a recoloured copy instead: navy becomes light ink,
   the cyan becomes the night accent, the orange stays exactly as it is. */
:root[data-theme="night"] .brand-full,
:root[data-theme="night"] .footer-brand img{ content:url("../img/logo-full-night.png"); }
:root[data-theme="night"] .brand-mark{ content:url("../img/logo-mark-night.png"); }

.nav{ margin-inline-start:auto; display:flex; align-items:center; gap:2px; }
.nav a{
  text-decoration:none; color:var(--ink-2); font-size:14.5px; font-weight:500;
  padding:9px 13px; border-radius:9px;
  transition:color .25s var(--ease), background .25s var(--ease);
}
.nav a:hover{ color:var(--ink); background:var(--surface); }
.nav a.is-active{ color:var(--accent); }
.nav .nav-cta{
  margin-inline-start:10px; color:var(--on-accent); font-weight:600;
  background:var(--accent-2);
}
.nav .nav-cta:hover{ color:var(--on-accent); background:var(--accent); }

.header-tools{ display:flex; align-items:center; gap:8px; }

.pill{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:999px; padding:6px 12px; cursor:pointer;
  font-family:var(--f-body); font-size:12.5px; font-weight:600; letter-spacing:.03em;
  color:var(--ink-3);
  transition:border-color .25s, background .25s, color .25s;
}
.pill:hover{ border-color:var(--line-2); background:var(--surface-2); color:var(--ink-2); }
.lang-opt{ transition:color .25s; }
.lang-opt.is-on{ color:var(--accent); }
.lang-sep{ opacity:.35; }

.theme-toggle{ width:40px; height:34px; justify-content:center; padding:0; }
.theme-toggle svg{ width:17px; height:17px; }
.theme-toggle .ico-day{ display:none; }
:root[data-theme="day"] .theme-toggle .ico-day{ display:block; }
:root[data-theme="day"] .theme-toggle .ico-night{ display:none; }

.burger{
  display:none; width:40px; height:34px; border:1px solid var(--line); border-radius:999px;
  background:var(--surface); cursor:pointer; padding:0; position:relative;
}
.burger span{
  position:absolute; left:11px; width:18px; height:1.6px; background:var(--ink); border-radius:2px;
  transition:transform .3s var(--ease), opacity .2s;
}
.burger span:nth-child(1){ top:11px; }
.burger span:nth-child(2){ top:16px; }
.burger span:nth-child(3){ top:21px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

/* ── buttons ─────────────────────────────────────────────────────────── */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 24px; border-radius:11px; border:1px solid transparent;
  font-family:var(--f-body); font-size:15px; font-weight:600; text-decoration:none;
  cursor:pointer; white-space:nowrap;
  transition:transform .3s var(--ease), background .3s var(--ease),
             border-color .3s var(--ease), color .3s var(--ease);
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ color:var(--on-accent); background:var(--accent-2);
  box-shadow:0 8px 20px -12px color-mix(in srgb, var(--accent-2) 80%, transparent); }
.btn-primary:hover{ background:var(--accent);
  box-shadow:0 12px 26px -12px color-mix(in srgb, var(--accent) 85%, transparent); }
.btn-ghost{ color:var(--ink); border-color:var(--line-2); background:transparent; }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }
.btn-sm{ padding:11px 18px; font-size:14px; }
.btn-block{ width:100%; }
.btn-wa{ color:#08331B; background:#3DD07F; }
.btn-wa:hover{ background:#2FBE70; }
.btn-arrow{ transition:transform .3s var(--ease); }
.btn:hover .btn-arrow{ transform:translateX(3px); }

/* ── section furniture ───────────────────────────────────────────────── */

.section{ padding-block:var(--sec-y); position:relative; }
.section-alt{ background:var(--bg-2); border-block:1px solid var(--line); }
/* a hairline that fades out at both ends, so sections separate without
   the page turning into a stack of solid bands */
.section + .section:not(.section-alt)::before{
  content:""; position:absolute; inset-inline:var(--gut); top:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--line) 22%, var(--line) 78%, transparent);
}

.sec-head{ max-width:720px; margin-bottom:clamp(38px,5vw,64px); }
.kicker{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin-bottom:16px;
}
.kicker::before{
  content:""; width:20px; height:1px; background:currentColor; opacity:.55;
  transform-origin:left center;
  animation:kickerDraw .9s var(--ease) both;
}
@keyframes kickerDraw{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.sec-lead{ color:var(--ink-2); font-size:clamp(15.5px,1vw,17.5px); margin-top:15px; max-width:58ch; }
.fineprint{ color:var(--ink-3); font-size:13.5px; margin-top:26px; max-width:76ch; }
.muted{ color:var(--ink-3); }

/* ── hero ────────────────────────────────────────────────────────────── */

.hero{ position:relative; padding-top:var(--hh); }
/* a slow wash of light behind the scene — night only, and slow enough that
   it registers as atmosphere rather than as an animation */
:root[data-theme="night"] .hero::before{
  content:""; position:absolute; inset:-10% -20% -10% -10%; z-index:0;
  pointer-events:none;
  background:
    radial-gradient(42% 46% at 22% 38%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
    radial-gradient(38% 42% at 62% 66%, color-mix(in srgb, var(--navy) 26%, transparent), transparent 72%);
  animation:heroDrift 26s ease-in-out infinite alternate;
}
@keyframes heroDrift{
  from{ transform:translate3d(-2%,1%,0) scale(1); opacity:.75; }
  to  { transform:translate3d(3%,-2%,0) scale(1.08); opacity:1; }
}
.hero-inner{
  display:grid; grid-template-columns:1fr; align-items:center;
  min-height:clamp(560px, 82vh, 820px);
}
.hero-copy{ position:relative; z-index:3; padding-block:clamp(34px,5vw,64px); max-width:560px; }
.hero-copy.is-right{ margin-inline-start:auto; }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12.5px; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  color:var(--accent);
  background:var(--surface); border:1px solid var(--line);
  padding:7px 15px; border-radius:999px; margin-bottom:24px;
}
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--orange); }
:root[data-theme="night"] .eyebrow .dot{
  box-shadow:0 0 10px color-mix(in srgb, var(--orange) 70%, transparent);
  animation:dotBreathe 3.4s ease-in-out infinite;
}
@keyframes dotBreathe{
  0%,100%{ opacity:1;  transform:scale(1); }
  50%    { opacity:.45; transform:scale(.72); }
}

.hero-title{ font-size:clamp(34px,4.6vw,60px); font-weight:600; letter-spacing:-.03em; line-height:1.08; }
.hero-title > span{ display:block; }
.hero-title .soft{ color:var(--ink-3); font-weight:500; }
/* the initial of each word, in the orange from the logo */
.hero-title .cap{ display:inline; color:var(--orange); }
.hero-lead{ color:var(--ink-2); font-size:clamp(16px,1.1vw,18.5px); margin-top:22px; max-width:50ch; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:13px; margin-top:32px; }
.hero-badges{
  list-style:none; margin:34px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:9px 20px; color:var(--ink-3); font-size:13.8px;
}
.hero-badges li{ display:flex; align-items:center; gap:8px; }
.hero-badges li::before{
  content:""; width:5px; height:5px; border-radius:50%; background:var(--accent); flex:0 0 auto;
}

/* ── trust strip ─────────────────────────────────────────────────────
   The figures count up from zero whenever the strip scrolls into view, so
   the block needs room to breathe and a baseline the digits can settle on.
   ──────────────────────────────────────────────────────────────────── */

.strip{ border-block:1px solid var(--line); background:var(--bg-2); }
.strip-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  padding-block:clamp(30px,3.4vw,46px);
}
.strip-grid > div{
  position:relative;
  padding:4px clamp(10px,2vw,26px);
  text-align:center;
}
/* dividers fade out at both ends instead of hard rules */
.strip-grid > div + div::before{
  content:""; position:absolute; inset-inline-start:0; top:14%; bottom:14%;
  width:1px;
  background:linear-gradient(180deg, transparent, var(--line) 24%, var(--line) 76%, transparent);
}

.strip-num{
  display:flex; align-items:baseline; justify-content:center; gap:3px;
  font-family:var(--f-display);
  font-size:clamp(34px,4.2vw,54px);
  font-weight:600; line-height:1; letter-spacing:-.035em;
  color:var(--orange);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
.strip-num .n{
  /* fixed width per digit count stops the row jittering while it counts */
  display:inline-block; min-width:1ch; text-align:center;
}
.strip-num .suffix{ font-size:.46em; font-weight:600; color:var(--accent); letter-spacing:0; }

/* a rule under each figure that draws itself as the number lands */
.strip-rule{
  display:block; height:2px; width:26px; margin:14px auto 0;
  border-radius:2px; background:var(--orange);
  transform:scaleX(0); transform-origin:center;
  transition:transform .8s var(--ease);
}
.strip-grid > div.is-counting .strip-rule{ transform:scaleX(1); }

.strip-label{
  display:block; margin-top:12px;
  font-size:13.2px; line-height:1.5; color:var(--ink-3);
}

@media (max-width:900px){
  .strip-grid{ grid-template-columns:repeat(2,1fr); gap:26px 0; }
  .strip-grid > div:nth-child(odd)::before{ display:none; }
  .strip-grid > div + div::before{ top:6%; bottom:6%; }
}
@media (max-width:420px){
  /* a long label may wrap on the narrowest phones instead of pushing the
     page wider than the screen */
  .btn{ white-space:normal; text-align:center; }
  .strip-grid{ grid-template-columns:1fr; }
  .strip-grid > div + div::before{
    inset:0 14% auto 14%; width:auto; height:1px;
    background:linear-gradient(90deg, transparent, var(--line), transparent);
  }
}

/* ── cards ───────────────────────────────────────────────────────────── */

.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(266px,1fr)); gap:16px; }
.card{
  position:relative; overflow:hidden;
  padding:28px 26px 26px; border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--line);
  transition:transform .4s var(--ease), border-color .4s var(--ease),
             background .4s var(--ease), box-shadow .4s var(--ease);
}
/* a highlight along the top edge reads as light falling from above */
.card::before{
  content:""; position:absolute; inset-inline:18%; top:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--line-2), transparent);
  opacity:.9;
}
/* a soft light that follows the pointer across the card */
.card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(180px circle at var(--mx,50%) var(--my,0%),
             color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%);
  opacity:0; transition:opacity .45s var(--ease);
}
.card:hover::after,.card:focus-within::after{ opacity:1; }
.card:hover,.card:focus-within{
  box-shadow:var(--shadow); transform:translateY(-3px);
  border-color:color-mix(in srgb, var(--accent) 34%, var(--line-2));
}
.card h3{ margin-bottom:10px; transition:color .35s var(--ease); }
.card:hover h3,.card:focus-within h3{ color:var(--accent); }
.card p{ color:var(--ink-2); font-size:14.6px; }
.card > *{ position:relative; z-index:1; }

.card-ico{
  position:relative;
  width:44px; height:44px; border-radius:12px; margin-bottom:18px;
  display:grid; place-items:center;
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  color:var(--accent);
  transition:background .4s var(--ease), transform .5s var(--ease),
             box-shadow .5s var(--ease);
}
/* a ring that opens out of the tile as the card is pointed at */
.card-ico::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  border:1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  opacity:0; transition:opacity .5s var(--ease), scale .5s var(--ease);
  scale:1;
}
.card:hover .card-ico,.card:focus-within .card-ico{
  background:color-mix(in srgb, var(--accent) 22%, transparent);
  transform:translateY(-2px) scale(1.06);
  box-shadow:0 10px 22px -14px color-mix(in srgb, var(--accent) 90%, transparent);
}
.card:hover .card-ico::after,.card:focus-within .card-ico::after{ opacity:1; scale:1.28; }
.card-ico svg{ width:21px; height:21px; overflow:visible; }

/* the strokes are drawn in, one after the other */
[data-drawable] svg > *{
  stroke-dasharray:var(--len,0); stroke-dashoffset:var(--len,0);
}
[data-drawable].is-drawn svg > *{
  animation:icoDraw .68s var(--ease) both;
  animation-delay:calc(var(--i,0) * .09s);
}
@keyframes icoDraw{ to{ stroke-dashoffset:0; } }
.card-list{ list-style:none; margin:16px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.card-list li{
  font-size:11.8px; color:var(--ink-3); padding:4px 10px; border-radius:999px;
  background:var(--surface-2); border:1px solid var(--line);
}

/* ── steps ───────────────────────────────────────────────────────────── */

.steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
}
.step{ background:var(--bg); padding:30px 26px 32px; transition:background .35s var(--ease); }
.step:hover{ background:var(--surface-2); }
.step-n{ font-family:var(--f-mono); font-size:12px; letter-spacing:.12em; color:var(--orange); display:block; margin-bottom:13px; }
.step h3{ margin-bottom:8px; }
.step p{ color:var(--ink-2); font-size:14.4px; }

/* ── packages ────────────────────────────────────────────────────────── */

.pkgs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(252px,1fr)); gap:16px; }
.pkg{
  display:flex; flex-direction:column; padding:30px 26px;
  border-radius:var(--r-lg); border:1px solid var(--line); background:var(--surface);
  position:relative; transition:transform .4s var(--ease), border-color .4s var(--ease);
}
.pkg:hover{ transform:translateY(-3px); border-color:var(--line-2); }
.pkg-feature{ border-color:var(--accent); background:var(--surface-2); }
.pkg-tag{
  position:absolute; top:-10px; inset-inline-start:26px;
  background:var(--orange); color:#22130A;
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:4px 11px; border-radius:999px;
}
.pkg-for{ color:var(--accent); font-size:13.4px; margin-top:6px; }
.pkg ul{ list-style:none; margin:20px 0 26px; padding:0; display:grid; gap:10px; flex:1; }
.pkg ul li{ position:relative; padding-inline-start:24px; color:var(--ink-2); font-size:14.4px; }
.pkg ul li::before{
  content:""; position:absolute; inset-inline-start:0; top:9px; width:11px; height:7px;
  border-inline-start:1.8px solid var(--accent); border-bottom:1.8px solid var(--accent);
  transform:rotate(-45deg);
}

/* ── portfolio ───────────────────────────────────────────────────────── */

.pf-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr)); gap:18px; }
.pf{
  border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); background:var(--surface);
  transition:transform .4s var(--ease), border-color .4s var(--ease);
}
.pf:hover{ transform:translateY(-3px); border-color:var(--line-2); }
.pf-visual{ aspect-ratio:16/10; position:relative; overflow:hidden; background:var(--bg-3); }
.pf-meta{ padding:22px 24px 26px; }
.pf-meta h3{ margin-bottom:8px; }
.pf-meta p{ color:var(--ink-2); font-size:14.2px; }
.tags{ list-style:none; margin:15px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.tags li{
  font-size:11.4px; color:var(--accent); padding:4px 10px; border-radius:999px;
  background:color-mix(in srgb, var(--accent) 10%, transparent);
}

/* quiet, geometric placeholders — no stock photography */
.pf-visual::before,.pf-visual::after{ content:""; position:absolute; transition:transform .6s var(--ease); }
.pf:hover .pf-visual::before{ transform:translateY(-4px); }

.pf[data-art="resto"] .pf-visual::before{
  inset:20% 27%; border-radius:4px; border:1px solid var(--line-2);
  background:linear-gradient(180deg, color-mix(in srgb,var(--orange) 26%, transparent) 0 8%, transparent 8%);
  box-shadow:inset 0 22px 0 -21px var(--accent), inset 0 34px 0 -33px var(--accent), inset 0 46px 0 -45px var(--accent);
}
.pf[data-art="resto"] .pf-visual::after{ inset:auto 27% 15% 27%; height:2px; background:var(--orange); opacity:.7; }

.pf[data-art="craft"] .pf-visual::before{
  inset:30% 24% 28% 24%; border-radius:8px;
  background:repeating-linear-gradient(118deg, color-mix(in srgb,var(--orange) 45%, transparent) 0 7px, transparent 7px 20px);
}
.pf[data-art="craft"] .pf-visual::after{
  inset:24% 32% 44% 32%; border-radius:50%/60% 60% 40% 40%;
  border:2px solid var(--accent); border-bottom-color:transparent;
}

.pf[data-art="shop"] .pf-visual::before{
  inset:20% 17%; border-radius:5px; border:1px solid var(--line-2);
  background:
    linear-gradient(90deg, color-mix(in srgb,var(--accent) 22%, transparent) 0 32%, transparent 32%) 0 0/100% 44% no-repeat,
    linear-gradient(90deg, transparent 0 38%, color-mix(in srgb,var(--orange) 34%, transparent) 38% 68%, transparent 68%) 0 56%/100% 44% no-repeat;
}
.pf[data-art="shop"] .pf-visual::after{ inset:auto 17% 21% auto; width:26px; height:26px; border-radius:50%; background:var(--orange); opacity:.75; }

.pf[data-art="med"] .pf-visual::before{ inset:33% 43%; background:var(--accent); border-radius:2px; }
.pf[data-art="med"] .pf-visual::after{ inset:43% 33%; background:var(--accent); border-radius:2px; opacity:.85; }

.pf[data-art="law"] .pf-visual::before{
  inset:23% 31%; border:1px solid var(--line-2); border-radius:3px;
  background:repeating-linear-gradient(180deg, color-mix(in srgb,var(--ink) 16%, transparent) 0 2px, transparent 2px 10px);
}
.pf[data-art="law"] .pf-visual::after{ inset:23% 31% auto auto; width:38px; height:38px; background:var(--orange); opacity:.55; border-radius:0 3px 0 100%; }

.pf[data-art="start"] .pf-visual::before{
  inset:26% 38% 27% 38%; border-radius:999px 999px 6px 6px; background:var(--accent); opacity:.75;
}
.pf[data-art="start"] .pf-visual::after{ inset:auto 42% 17% 42%; height:10px; border-radius:50%; background:var(--orange); opacity:.6; }

/* ── audience ────────────────────────────────────────────────────────── */

.aud-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,72px); align-items:center; }
.aud-copy .btn{ margin-top:26px; }
.aud-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.aud-list li{
  display:flex; align-items:center; gap:14px;
  padding:16px 20px; border-radius:12px;
  background:var(--surface); border:1px solid var(--line);
  font-size:14.8px; color:var(--ink-2);
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.aud-list li:hover{ border-color:var(--line-2); color:var(--ink); }
.aud-list li::before{ content:""; flex:0 0 auto; width:7px; height:7px; border-radius:50%; background:var(--accent); }

/* ── contact ─────────────────────────────────────────────────────────── */

.contact{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(30px,5vw,72px); align-items:start; }
.contact-list{ list-style:none; margin:30px 0 26px; padding:0; display:grid; gap:16px; }
.contact-list li{ display:flex; align-items:center; gap:15px; }
.contact-list small{ display:block; font-size:11.5px; color:var(--ink-3); letter-spacing:.06em; text-transform:uppercase; }
.contact-list a{ color:var(--ink); text-decoration:none; font-weight:500; transition:color .25s; }
.contact-list a:hover{ color:var(--accent); }
/* the photograph under the profile links, where the column used to run out
   of copy well before the form beside it ran out of fields */
.contact-shot{ margin:clamp(24px,3vw,34px) 0 0; max-width:400px; }

.ci{
  width:42px; height:42px; flex:0 0 auto; border-radius:12px; display:grid; place-items:center;
  background:color-mix(in srgb, var(--accent) 12%, transparent); color:var(--accent);
}
.ci svg{ width:19px; height:19px; }

/* ── social row: four equal buttons, calm drift ───────────────── */
.socials{
  list-style:none; margin:26px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:12px;
}
.soc{
  --soc: var(--accent);
  width:52px; height:52px; border-radius:16px;
  display:grid; place-items:center;
  color:var(--ink-2);
  background:var(--surface); border:1px solid var(--line);
  transition:color .35s ease, border-color .35s ease, background .35s ease,
             transform .45s cubic-bezier(.22,.8,.3,1), box-shadow .45s ease;
  animation:socFloat 6.5s ease-in-out infinite;
  will-change:transform;
}
.socials li:nth-child(2) .soc{ animation-delay:-1.6s; }
.socials li:nth-child(3) .soc{ animation-delay:-3.2s; }
.socials li:nth-child(4) .soc{ animation-delay:-4.8s; }
.soc svg{ width:23px; height:23px; display:block; transition:transform .45s cubic-bezier(.22,.8,.3,1); }
.soc:hover,.soc:focus-visible{
  color:var(--soc);
  border-color:color-mix(in srgb, var(--soc) 55%, transparent);
  background:color-mix(in srgb, var(--soc) 12%, var(--surface));
  transform:translateY(-5px);
  box-shadow:0 14px 26px -16px color-mix(in srgb, var(--soc) 85%, transparent);
  animation-play-state:paused;
}
.soc:hover svg,.soc:focus-visible svg{ transform:scale(1.08); }
.soc:active{ transform:translateY(-2px); }
.soc-wa{ --soc:#25D366; }
.soc-li{ --soc:#2C86D6; }
.soc-ig{ --soc:#D3559B; }
.soc-fb{ --soc:#2E7BF0; }
:root[data-theme="day"] .soc-wa{ --soc:#128C4B; }
:root[data-theme="day"] .soc-li{ --soc:#0A66C2; }
:root[data-theme="day"] .soc-ig{ --soc:#B8347C; }
:root[data-theme="day"] .soc-fb{ --soc:#1559CF; }
@keyframes socFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-4px); }
}
@media (prefers-reduced-motion:reduce){
  .soc{ animation:none; }
}

.contact-form{
  padding:clamp(24px,3vw,36px); border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--line); display:grid; gap:15px;
}
.f-row{ display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.field{ display:grid; gap:6px; }
.field > span{ font-size:12.8px; font-weight:500; color:var(--ink-2); }
.field input,.field select,.field textarea{
  width:100%; padding:13px 15px; border-radius:10px;
  background:var(--bg); border:1px solid var(--line);
  color:var(--ink); font-family:var(--f-body); font-size:15px;
  transition:border-color .25s, box-shadow .25s;
}
.field textarea{ resize:vertical; min-height:118px; }
.field select{ appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 20px) 21px, calc(100% - 14px) 21px;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.field input:user-invalid,.field textarea:user-invalid{ border-color:#D9534F; }
.field option{ background:var(--bg); color:var(--ink); }

.consent{ display:flex; gap:11px; align-items:flex-start; font-size:13px; color:var(--ink-3); line-height:1.6; }
.consent input{ margin-top:3px; width:16px; height:16px; flex:0 0 auto; accent-color:var(--accent-2); }
.consent a{ color:var(--accent); }
.form-status{ font-size:13.8px; min-height:1.2em; }
.form-status.ok{ color:var(--accent); }
.form-status.err{ color:#D9534F; }

/* ── footer ──────────────────────────────────────────────────────────── */

.site-footer{ border-top:1px solid var(--line); background:var(--bg-2); padding-top:clamp(46px,6vw,74px); }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:34px; }
.footer-brand img{ width:172px; margin-bottom:16px; }
.footer-brand p{ color:var(--ink-3); font-size:13.8px; max-width:36ch; }
.site-footer nav,.footer-grid > div:last-child{ display:flex; flex-direction:column; gap:9px; }
.site-footer h4{ margin-bottom:5px; }
.site-footer a{ color:var(--ink-2); text-decoration:none; font-size:14.2px; transition:color .25s; width:fit-content; }
.site-footer a:hover{ color:var(--accent); }
.footer-bottom{
  margin-top:clamp(38px,5vw,60px); padding-block:22px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13.2px; color:var(--ink-3);
}

/* ── legal pages ─────────────────────────────────────────────────────── */

.legal{ padding-block:calc(var(--hh) + clamp(38px,6vw,76px)) var(--sec-y); }
.legal .shell{ max-width:820px; }
.legal h1{ font-size:clamp(28px,3.6vw,42px); margin-bottom:10px; }
.legal h2{ font-size:clamp(19px,1.9vw,24px); margin-top:42px; margin-bottom:10px; }
.legal p,.legal li{ color:var(--ink-2); font-size:15.2px; }
.legal p{ margin-top:12px; }
.legal ul{ margin-top:12px; padding-inline-start:22px; display:grid; gap:7px; }
.legal a{ color:var(--accent); }
.todo{
  display:block; margin-top:18px; padding:16px 20px; border-radius:12px;
  background:color-mix(in srgb, var(--orange) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--orange) 32%, transparent);
  color:var(--orange); font-size:13.8px;
}

/* ── reveal ──────────────────────────────────────────────────────────── */

.reveal{ opacity:0; transform:translateY(16px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

/* ── responsive ──────────────────────────────────────────────────────── */

@media (max-width:1080px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:900px){
  .nav{
    position:fixed; inset:var(--hh) 0 auto 0; flex-direction:column; align-items:stretch; gap:2px;
    background:var(--bg); padding:14px var(--gut) 24px; border-bottom:1px solid var(--line);
    transform:translateY(-10px); opacity:0; visibility:hidden; pointer-events:none;
    /* the drawer hangs off the header, so it rides the same shrink */
    transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s,
               inset-block-start .45s var(--ease);
  }
  .site-header.is-compact .nav{ inset-block-start:var(--hh-sm); }
  .nav.is-open{ transform:none; opacity:1; visibility:visible; pointer-events:auto; }
  .nav a{ padding:14px 12px; font-size:16px; }
  .nav .nav-cta{ margin:10px 0 0; text-align:center; }
  .burger{ display:block; }
  /* the nav is a drawer here, so it no longer pushes the buttons over —
     they go to the far side themselves, clear of the logo */
  .header-tools{ margin-inline-start:auto; }
  .site-header{ background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
  .contact,.aud-wrap{ grid-template-columns:1fr; }
  .strip-grid{ grid-template-columns:repeat(2,1fr); }
  .strip-grid > div:nth-child(3){ border-inline-start:0; }
  .strip-grid > div:nth-child(-n+2){ border-bottom:1px solid var(--line); }
}
@media (max-width:620px){
  .brand-full{ display:none; }
  .brand-mark{ display:block; }
  .brand-spark{
    -webkit-mask-image:url("../img/logo-mark.png");
            mask-image:url("../img/logo-mark.png");
  }
  .f-row{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; gap:26px; }
}

@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; }
  .header-inner, .brand-full, .brand-mark{ transition:none; }
  .brand-spark::before{ animation:none; display:none; }
  [data-drawable] svg > *{ stroke-dasharray:none; stroke-dashoffset:0; }
  .card::after{ display:none; }
  :root[data-theme="night"] .hero::before{ animation:none; }
  :root[data-theme="night"] .eyebrow .dot{ animation:none; }
  .kicker::before{ animation:none; }
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

/* screen-reader-only text */
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ══════════════ SCHWEBENDER KONTAKT-ROBOTER (FAB) ══════════════
   A small robot parked bottom-right. It drifts up or down with the
   scroll, idles with a slow hover, and opens the contact options. */
.fab{
  position:fixed; right:clamp(14px,2.2vw,26px); bottom:clamp(14px,2.2vw,26px);
  z-index:90; display:flex; flex-direction:column; align-items:flex-end; gap:12px;
  --fab-fly:0px; --fab-tilt:0deg; --fab-thrust:0;
}

.fab-bot{
  width:94px; height:111px; padding:0; border:0; background:none; cursor:pointer;
  display:block; -webkit-tap-highlight-color:transparent;
}
.fab-bot-inner{
  display:block; position:relative; width:100%; height:100%;
  transform:translateY(var(--fab-fly)) rotate(var(--fab-tilt));
  transition:transform .12s linear;
  animation:fabHover 4.4s ease-in-out infinite;
}
@keyframes fabHover{
  0%,100%{ translate:0 0; }
  50%{ translate:0 -6px; }
}
.fab-svg{ width:100%; height:100%; display:block; overflow:visible;
  filter:drop-shadow(0 14px 18px rgba(0,0,0,.34)); }
:root[data-theme="day"] .fab-svg{ filter:drop-shadow(0 12px 16px rgba(17,32,58,.22)); }

.fb-shell{ fill:var(--fb-shell); stroke:var(--fb-edge); stroke-width:1.2; }
.fb-belly{ fill:var(--fb-panel); }
.fb-visor{ fill:var(--fb-visor); }
.fb-eye{ fill:var(--fb-eyes); animation:fabBlink 6.2s infinite; }
.fb-stem{ stroke:var(--fb-edge); stroke-width:2.4; stroke-linecap:round; fill:none; }
.fb-bulb{ fill:#E4791E; animation:fabBulb 3.1s ease-in-out infinite; }
.fb-ant{ transform-origin:36px 16px; animation:fabAnt 4.4s ease-in-out infinite; }
/* The label changes with the language, so its size is settled in script
   (see fitBelly) rather than tuned to one word here. */
.fb-text{
  fill:var(--fb-visor); font-family:var(--f-body); font-weight:700;
  font-size:7px; letter-spacing:.2px; text-anchor:middle;
}
.fb-text[hidden]{ display:none; }
.fb-jets{ opacity:calc(.22 + .78 * var(--fab-thrust)); transition:opacity .18s ease; }
.fb-jet{
  fill:#E4791E; transform-origin:center top;
  scale:1 calc(.45 + 1.15 * var(--fab-thrust));
  transition:scale .18s ease;
}
.fab-shadow{
  position:absolute; left:50%; bottom:-10px; width:56px; height:10px;
  translate:-50% 0; border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,0,0,.42), transparent);
  opacity:.55;
}
:root[data-theme="day"] .fab-shadow{ background:radial-gradient(closest-side, rgba(17,32,58,.28), transparent); }

:root, :root[data-theme="night"]{
  --fb-shell:#1E3150; --fb-edge:#3D5F8C; --fb-panel:#09111F;
  --fb-visor:#5FE9F5; --fb-eyes:#04202B;
}
:root[data-theme="day"]{
  --fb-shell:#D7DFEA; --fb-edge:#9AAAC0; --fb-panel:#16263F;
  --fb-visor:#3BC6D6; --fb-eyes:#0A1A2B;
}

@keyframes fabBlink{
  0%,92%,100%{ scale:1 1; }
  95%{ scale:1 .1; }
}
@keyframes fabBulb{
  0%,100%{ opacity:.55; }
  50%{ opacity:1; }
}
@keyframes fabAnt{
  0%,100%{ rotate:-5deg; }
  50%{ rotate:5deg; }
}

.fab-bot:hover .fab-bot-inner{ animation-duration:2.6s; }
.fab-bot:focus-visible{ outline:2px solid var(--accent); outline-offset:6px; border-radius:18px; }

/* the options panel */
.fab-menu{
  width:216px; padding:12px; border-radius:16px;
  background:color-mix(in srgb, var(--bg-2) 92%, transparent);
  border:1px solid var(--line-2); box-shadow:var(--shadow);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  display:grid; gap:3px;
  transform-origin:bottom right;
  animation:fabIn .3s cubic-bezier(.22,.9,.3,1) both;
}
.fab-menu[hidden]{ display:none; }
@keyframes fabIn{
  from{ opacity:0; transform:translateY(10px) scale(.94); }
  to{ opacity:1; transform:none; }
}
.fab-menu-title{
  margin:2px 6px 8px; font-size:11.5px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-3); font-weight:600;
}
.fab-opt{
  --soc:var(--accent);
  display:flex; align-items:center; gap:11px; padding:8px 9px; border-radius:11px;
  color:var(--ink-2); text-decoration:none; font-size:14px; font-weight:500;
  transition:background .25s ease, color .25s ease, transform .3s cubic-bezier(.22,.8,.3,1);
}
.fab-opt:hover,.fab-opt:focus-visible{
  background:color-mix(in srgb, var(--soc) 13%, transparent);
  color:var(--ink); transform:translateX(3px);
}
.fab-ico{ width:26px; height:26px; flex:0 0 auto; display:grid; place-items:center; color:var(--soc); }
.fab-ico svg{ width:19px; height:19px; }
.fo-mail{ --soc:var(--accent); }
.fo-wa{ --soc:#25D366; } .fo-li{ --soc:#2C86D6; }
.fo-ig{ --soc:#D3559B; } .fo-fb{ --soc:#2E7BF0; }
:root[data-theme="day"] .fo-wa{ --soc:#128C4B; }
:root[data-theme="day"] .fo-li{ --soc:#0A66C2; }
:root[data-theme="day"] .fo-ig{ --soc:#B8347C; }
:root[data-theme="day"] .fo-fb{ --soc:#1559CF; }

@media (max-width:620px){
  .fab-bot{ width:78px; height:92px; }
  .fab-menu{ width:198px; }
}
@media (prefers-reduced-motion:reduce){
  .fab-bot-inner{ animation:none; transform:none; }
  .fb-ant,.fb-bulb,.fb-eye{ animation:none; }
  .fab-menu{ animation:none; }
}