/* ==========================================================================
   Gian Zaniol — Kaffee-Consulting. Design-System.
   Aesthetik: Praezisions-Manual trifft Kaffee-Editorial (Industrial Roast).
   Ein Akzent: Blutrot. Metal nur als feines Augenzwinkern.
   ========================================================================== */

:root{
  /* Farben */
  --paper:#e8e4db;
  --paper-2:#cdc9c1;
  --paper-3:#ded9d0;
  --ink:#161615;
  --ink-soft:#4d4a44;
  --brown:#6f4a2f;
  --red:#d23b32;
  --line:#161615;
  --line-soft:rgba(22,22,21,0.16);
  --line-faint:rgba(22,22,21,0.08);

  /* Typografie */
  --font-display:'Archivo Black', 'Arial Black', sans-serif;
  --font-body:'Space Grotesk', system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', 'SFMono-Regular', monospace;

  /* Spacing-Skala */
  --gap-2xs:0.375rem;
  --gap-xs:0.75rem;
  --gap-sm:1.25rem;
  --gap-md:2rem;
  --gap-lg:4rem;
  --gap-xl:clamp(4rem, 10vw, 7.5rem);

  /* Motion-Tokens (harmonisch: alle Animationen teilen diese) */
  --dur-fast:160ms;
  --dur-mid:320ms;
  --dur-slow:560ms;
  --ease:cubic-bezier(0.22,1,0.36,1);

  /* Layout */
  --pad-x:clamp(1.25rem, 6vw, 4.5rem);
  --maxw:1500px;
  --topbar-h:3.4rem;

  /* Textur (tactile print look) — papierartiges Grain, ueber Blend-Modes eingesetzt */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E");
  --grain-fine:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --grain-ink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.4' intercept='0.06'/%3E%3CfeFuncG type='linear' slope='0.4' intercept='0.06'/%3E%3CfeFuncB type='linear' slope='0.4' intercept='0.06'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23t)'/%3E%3C/svg%3E");
  --grain-bg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)' opacity='0.17'/%3E%3C/svg%3E");
}

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

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  /* Papiertextur in die Papierfarbe multipliziert (performant: background-blend, kein fixed Overlay) */
  background-color:var(--paper);
  background-image:var(--grain-bg);
  background-size:200px;
  background-blend-mode:multiply;
  color:var(--ink);
  font-family:var(--font-body);
  font-size:clamp(1rem, 0.95rem + 0.2vw, 1.075rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

h1,h2,h3{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-weight:400;
  margin:0;
  letter-spacing:-0.015em;
  line-height:0.92;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

.mono{ font-family:var(--font-mono); }

/* Container / Sektionsraster */
.wrap{ max-width:var(--maxw); margin-inline:auto; }

section{
  position:relative;
  z-index:2;
  padding:var(--gap-xl) var(--pad-x);
  border-bottom:1px solid var(--line-soft);
}

/* Gemeinsames Sektions-Grundgeruest (von allen Sektionen genutzt) */
.section-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem 2rem; flex-wrap:wrap;
  margin-bottom:var(--gap-lg); padding-bottom:1rem;
  border-bottom:1px solid var(--line);
}
.section-head h2{
  font-size:clamp(1.9rem, 4.5vw, 3rem);
  color:var(--ink);
  background-color:var(--ink);
  background-image:var(--grain-ink);
  background-size:120px;
  background-blend-mode:screen;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .section-head h2{ -webkit-text-fill-color:currentColor; background-image:none; }
}
.section-num{ font-family:var(--font-mono); font-size:0.8rem; color:var(--ink-soft); letter-spacing:0.06em; white-space:nowrap; }
.section-lead{ font-size:clamp(1.05rem,1.5vw,1.2rem); line-height:1.6; max-width:60ch; color:var(--ink); }

/* Kicker: Mono-Label mit Blutrot-Strich */
.kicker{
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:0.18em;
  font-size:0.72rem;
  font-weight:600;
  color:var(--brown);
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
}
.kicker::before{
  content:"";
  width:26px;
  height:2px;
  background:var(--red);
}

/* ===================== TOPBAR ===================== */
.topbar{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  height:var(--topbar-h);
  padding:0 var(--pad-x);
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
}
.topbar-brand{ font-weight:600; display:flex; align-items:center; gap:0.55rem; }
.topbar-brand .dot{ width:8px; height:8px; background:var(--red); border-radius:50%; flex:none; }
.topbar-nav{ display:flex; align-items:center; gap:1.5rem; }
.topbar-nav a{ position:relative; color:var(--ink-soft); transition:color var(--dur-fast) var(--ease); }
.topbar-nav a::after{
  content:""; position:absolute; left:0; bottom:-4px; width:100%; height:1px;
  background:var(--red); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-mid) var(--ease);
}
.topbar-nav a:hover{ color:var(--ink); }
.topbar-nav a:hover::after{ transform:scaleX(1); }
.topbar-cta{
  border:1px solid var(--line);
  padding:0.5rem 0.95rem;
  color:var(--ink);
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.topbar-cta:hover{ background:var(--ink); color:var(--paper); }
.topbar-nav-links{ display:flex; align-items:center; gap:1.5rem; }
@media (max-width:820px){ .topbar-nav-links{ display:none; } }

/* ===================== REVEAL / MOTION ===================== */
.reveal{
  opacity:0;
  transform:translateY(20px);
  transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  transition-delay:calc(var(--i, 0) * 90ms);
  will-change:opacity, transform;
}
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ===================== HERO ===================== */
.hero{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-top:calc(var(--topbar-h) + var(--gap-lg));
  padding-bottom:var(--gap-lg);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}

/* Registermarken an den Hero-Ecken (Druckvorlagen-Detail) */
.hero-marks{ position:absolute; inset:calc(var(--topbar-h) + 0.9rem) 0.9rem 0.9rem; pointer-events:none; z-index:1; }
.hero-marks span{
  position:absolute; width:26px; height:26px;
  border:0 solid var(--line-soft);
  opacity:0; transition:opacity var(--dur-slow) var(--ease) 200ms;
}
.hero.is-in .hero-marks span{ opacity:1; }
.hero-marks .tl{ top:0; left:0; border-top-width:1.5px; border-left-width:1.5px; }
.hero-marks .tr{ top:0; right:0; border-top-width:1.5px; border-right-width:1.5px; }
.hero-marks .bl{ bottom:0; left:0; border-bottom-width:1.5px; border-left-width:1.5px; }
.hero-marks .br{ bottom:0; right:0; border-bottom-width:1.5px; border-right-width:1.5px; }

.hero-inner{ position:relative; z-index:3; width:100%; max-width:var(--maxw); margin-inline:auto; }

.hero-top{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:1rem; flex-wrap:wrap; margin-bottom:var(--gap-lg);
}
.hero-meta{
  text-align:right;
  font-family:var(--font-mono);
  font-size:0.72rem;
  color:var(--ink-soft);
  line-height:1.9;
  letter-spacing:0.04em;
}
.hero-meta b{ color:var(--ink); font-weight:600; }

.hero h1{
  font-size:clamp(2rem, 6.4vw, 4.9rem);
  line-height:1.0;
  position:relative;
  color:var(--ink);
  /* Print-Look: texturierte Tinte nur in den Glyphen, kein Box-Overlay */
  background-color:var(--ink);
  background-image:var(--grain-ink);
  background-size:130px;
  background-blend-mode:screen;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .hero h1{ -webkit-text-fill-color:currentColor; background-image:none; }
}
.hero h1 .ln{ display:block; }
.hero h1 .ln-2{ padding-left:0.02em; }
/* Blutroter Punkt hinter dem Namen, wie eine Signatur */
.hero h1 .accent-dot{ color:var(--red); -webkit-text-fill-color:var(--red); }

.hero-lead{
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:var(--gap-lg);
  margin-top:var(--gap-md);
  align-items:end;
}
.hero-sub{
  font-size:clamp(1.15rem, 1.9vw, 1.5rem);
  line-height:1.5;
  max-width:32ch;
  color:var(--ink);
  font-weight:500;
  margin:var(--gap-md) 0 0;
}
.hero-claim{
  font-family:var(--font-mono);
  font-size:0.86rem;
  line-height:1.75;
  color:var(--ink-soft);
  border-left:2px solid var(--brown);
  padding-left:1.1rem;
  max-width:44ch;
}
.hero-claim b{ color:var(--ink); font-weight:600; }

.hero-actions{ display:flex; align-items:center; gap:1.4rem; margin-top:var(--gap-lg); flex-wrap:wrap; }

/* Champion-Siegel */
.seal{
  display:inline-flex; align-items:center; gap:0.7rem;
  font-family:var(--font-mono); font-size:0.68rem; text-transform:uppercase;
  letter-spacing:0.1em; color:var(--ink);
  border:1.5px solid var(--line); padding:0.5rem 0.85rem;
  background:var(--paper-3);
}
.seal .star{ color:var(--red); font-size:0.9rem; line-height:1; }
.seal b{ color:var(--brown); }

/* ===================== BUTTONS ===================== */
.btn{
  --bg:var(--ink); --fg:var(--paper);
  display:inline-flex; align-items:center; gap:0.7rem;
  font-family:var(--font-mono); text-transform:uppercase;
  letter-spacing:0.1em; font-weight:600; font-size:0.82rem;
  color:var(--fg); background:var(--bg);
  padding:1rem 1.5rem; border:1px solid var(--bg);
  transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn .arw{ transition:transform var(--dur-mid) var(--ease); }
.btn:hover{ background:var(--brown); border-color:var(--brown); }
.btn:hover .arw{ transform:translateX(5px); }
.btn:active{ transform:translateY(1px); }
.btn-ghost{ --bg:transparent; --fg:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ --fg:var(--paper); background:var(--ink); border-color:var(--ink); }

.link-arrow{
  font-family:var(--font-mono); font-size:0.82rem; text-transform:uppercase;
  letter-spacing:0.08em; color:var(--ink); display:inline-flex; gap:0.5rem; align-items:center;
  border-bottom:1px solid var(--line-soft); padding-bottom:2px;
  transition:border-color var(--dur-fast) var(--ease);
}
.link-arrow .arw{ color:var(--red); transition:transform var(--dur-mid) var(--ease); }
.link-arrow:hover{ border-color:var(--red); }
.link-arrow:hover .arw{ transform:translateX(4px); }

/* ===================== HERO PHOTO + DAMPF ===================== */
.hero-photo{
  position:relative; margin:var(--gap-xl) 0 0; z-index:3;
}
.hero-photo .frame{ position:relative; overflow:hidden; border:1.5px solid var(--line); }
.hero-photo .frame::after{
  content:""; position:absolute; inset:0; z-index:5; pointer-events:none;
  background-image:var(--grain); background-size:220px;
  mix-blend-mode:multiply; opacity:0.34;
}
.hero-photo img{
  width:100%; aspect-ratio:16/9; object-fit:cover;
  filter:saturate(0.92) contrast(1.02);
  transform:scale(1.03); transition:transform 1.2s var(--ease);
}
.hero-photo.is-in img{ transform:scale(1); }
.hero-photo figcaption{
  margin-top:0.55rem; font-family:var(--font-mono); font-size:0.7rem;
  color:var(--ink-soft); letter-spacing:0.05em; display:flex; justify-content:space-between;
}

/* Aufsteigender Dampf (liebevolles thematisches Detail) */
.steam{ position:absolute; left:0; right:0; top:0; height:55%; pointer-events:none; z-index:4; overflow:hidden; }
.steam i{
  position:absolute; bottom:-10%;
  width:min(9vw,90px); height:120%;
  background:radial-gradient(closest-side, rgba(240,237,230,0.5), rgba(240,237,230,0) 70%);
  filter:blur(9px);
  opacity:0;
  animation:steam 7s var(--ease) infinite;
}
.steam i:nth-child(1){ left:22%; animation-delay:0s; }
.steam i:nth-child(2){ left:47%; animation-delay:2.3s; width:min(11vw,110px); }
.steam i:nth-child(3){ left:68%; animation-delay:4.1s; }
@keyframes steam{
  0%{ transform:translateY(20%) scaleX(0.8); opacity:0; }
  25%{ opacity:0.7; }
  60%{ opacity:0.4; }
  100%{ transform:translateY(-60%) scaleX(1.25); opacity:0; }
}
@media (prefers-reduced-motion:reduce){ .steam{ display:none; } }

/* ===================== RESPONSIVE ===================== */
@media (max-width:820px){
  .hero-lead{ grid-template-columns:1fr; gap:1.5rem; }
  .hero-meta{ text-align:left; }
  .hero-top{ margin-bottom:var(--gap-md); }
  .hero-photo{ margin-top:var(--gap-lg); }
  .hero-photo img{ aspect-ratio:4/3; }
}

/* ===================== PARTNER / MARKEN ===================== */
.partners{ padding-top:clamp(2.5rem,6vw,4rem); padding-bottom:clamp(2.5rem,6vw,4rem); }
.partners-label{
  font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.16em;
  font-size:0.72rem; font-weight:600; color:var(--ink-soft);
  margin:0 0 var(--gap-md); display:flex; align-items:center; gap:0.6rem;
}
.partners-label::before{ content:""; width:26px; height:2px; background:var(--brown); }
.partners-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3, 1fr);
  max-width:1040px;
  border-top:1px solid var(--line-soft); border-left:1px solid var(--line-soft);
}
.partners-grid li{
  font-family:var(--font-body); font-weight:600; font-size:1.02rem;
  letter-spacing:0.01em; color:var(--ink-soft);
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:92px; padding:1rem 1.25rem;
  border-bottom:1px solid var(--line-soft); border-right:1px solid var(--line-soft);
  transition:color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.partners-grid li:hover{ background:var(--paper-3); }
/* echte Logos: monochrom (ink) fuer einheitlichen, ruhigen Look */
.partners-grid img{
  max-height:30px; max-width:74%; width:auto; height:auto;
  object-fit:contain;
  filter:grayscale(1) brightness(0);
  opacity:0.55;
  transition:opacity var(--dur-fast) var(--ease);
}
.partners-grid li:hover img{ opacity:0.85; }
@media (max-width:620px){
  .partners-grid{ grid-template-columns:repeat(2,1fr); }
  .partners-grid li{ min-height:76px; }
  .partners-grid img{ max-height:26px; }
}

/* ===================== LEISTUNGEN (§ 01) ===================== */
.facts-strip{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  margin:0 0 var(--gap-lg);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.facts-cell{
  padding:var(--gap-sm);
  border-left:1px solid var(--line-soft);
}
.facts-cell:first-child{ border-left:0; padding-left:0; }
.facts-cell dt{
  font-size:0.68rem; text-transform:uppercase; letter-spacing:0.1em;
  color:var(--ink-soft); margin:0 0 0.5rem;
}
.facts-cell dd{
  margin:0; font-weight:600;
  font-size:clamp(1rem, 1.6vw, 1.2rem); color:var(--ink);
}

.leistungen-list{ display:flex; flex-direction:column; }
.leistungen-row{
  position:relative;
  display:grid;
  grid-template-columns:3.25rem 1fr 64px;
  gap:var(--gap-md);
  align-items:start;
  padding:var(--gap-md) 0 var(--gap-md) var(--gap-sm);
  border-top:1px solid var(--line-soft);
  transition:background var(--dur-mid) var(--ease);
}
.leistungen-row:last-child{ border-bottom:1px solid var(--line-soft); }
.leistungen-row:hover{ background:color-mix(in srgb, var(--brown) 6%, transparent); }
.leistungen-row::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--red);
  transform:scaleY(0); transform-origin:center;
  transition:transform var(--dur-mid) var(--ease);
}
.leistungen-row:hover::before{ transform:scaleY(1); }
.leistungen-idx{ font-size:0.85rem; color:var(--brown); padding-top:0.35rem; }
.leistungen-body h3{ font-size:clamp(1.3rem, 2.6vw, 1.7rem); }
.leistungen-body p{
  margin:0.6rem 0 0; font-size:1rem; line-height:1.65;
  color:var(--ink-soft); max-width:56ch;
}
.leistungen-items{
  list-style:none; margin:0.9rem 0 0; padding:0;
  display:flex; flex-wrap:wrap;
  font-size:0.78rem; color:var(--ink-soft);
}
.leistungen-items li:not(:last-child)::after{
  content:"·"; color:var(--brown); margin:0 0.6em; font-weight:600;
}
.leistungen-sticker{ width:64px; padding-top:0.2rem; }
.leistungen-sticker img{
  width:100%; height:auto; display:block;
  filter:saturate(0.9);
  transition:transform var(--dur-mid) var(--ease);
}
.leistungen-row:hover .leistungen-sticker img{ transform:rotate(-6deg); }
.leistungen-cta{ margin-top:var(--gap-lg); }

/* ---- Kaffee-Check Teaser (Diagnose-Karte, Einstieg zum Funnel) ---- */
.check-teaser-wrap{ margin-top:var(--gap-lg); }
.check-teaser{
  display:grid;
  grid-template-columns:1.6fr 0.9fr;
  gap:var(--gap-lg);
  align-items:center;
  position:relative;
  overflow:hidden;
  padding:var(--gap-md);
  border:1px solid var(--line);
  background:var(--paper-3);
  transition:background var(--dur-mid) var(--ease), border-color var(--dur-fast) var(--ease);
}
.check-teaser::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--red); transform:scaleY(0); transform-origin:top;
  transition:transform var(--dur-mid) var(--ease);
}
.check-teaser:hover{ border-color:var(--ink); background:color-mix(in srgb, var(--brown) 7%, var(--paper-3)); }
.check-teaser:hover::before{ transform:scaleY(1); }
.check-teaser:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }

.check-teaser-main{ min-width:0; }
.check-teaser-title{ font-size:clamp(1.3rem, 2.6vw, 1.9rem); margin:var(--gap-sm) 0 0; color:var(--ink); max-width:22ch; }
.check-teaser-sub{ margin:0.7rem 0 var(--gap-md); color:var(--ink-soft); line-height:1.6; max-width:46ch; }
.check-teaser-cta{
  display:inline-flex; align-items:center; gap:0.6rem;
  font-size:0.82rem; text-transform:uppercase; letter-spacing:0.1em; font-weight:600; color:var(--ink);
  border-bottom:1px solid var(--line); padding-bottom:3px;
  transition:border-color var(--dur-fast) var(--ease);
}
.check-teaser-cta .arw{ color:var(--red); transition:transform var(--dur-mid) var(--ease); }
.check-teaser:hover .check-teaser-cta{ border-color:var(--red); }
.check-teaser:hover .check-teaser-cta .arw{ transform:translateX(5px); }

/* Diagnose-Motiv: drei Wege, Balken fuellen sich gestaffelt beim Hover */
.check-teaser-diag{ display:flex; flex-direction:column; gap:0.7rem; border-left:1px solid var(--line-soft); padding-left:var(--gap-md); }
.diag-cap{ font-size:0.62rem; text-transform:uppercase; letter-spacing:0.16em; color:var(--brown); font-weight:600; margin-bottom:0.15rem; }
.diag-row{ display:grid; gap:0.35rem; }
.diag-label{ font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-soft); }
.diag-bar{ position:relative; height:2px; width:100%; background:var(--line-faint); overflow:hidden; }
.diag-bar::after{
  content:""; position:absolute; inset:0 auto 0 0; height:100%; width:20%;
  background:var(--red); transition:width var(--dur-slow) var(--ease);
}
.check-teaser:hover .diag-row:nth-child(2) .diag-bar::after{ width:100%; transition-delay:0ms; }
.check-teaser:hover .diag-row:nth-child(3) .diag-bar::after{ width:66%; transition-delay:80ms; }
.check-teaser:hover .diag-row:nth-child(4) .diag-bar::after{ width:42%; transition-delay:160ms; }

.check-teaser-alt{ margin:var(--gap-sm) 0 0; font-size:0.78rem; color:var(--ink-soft); letter-spacing:0.03em; }
.check-teaser-alt a{ color:var(--brown); text-decoration:underline; text-underline-offset:3px; }
.check-teaser-alt a:hover{ color:var(--ink); }

@media (prefers-reduced-motion:reduce){
  .check-teaser, .check-teaser::before, .check-teaser-cta .arw, .diag-bar::after{ transition:none; }
}
@media (max-width:820px){
  .check-teaser{ grid-template-columns:1fr; gap:var(--gap-md); }
  .check-teaser-diag{
    border-left:0; padding-left:0;
    border-top:1px solid var(--line-soft); padding-top:var(--gap-md);
    flex-direction:row; flex-wrap:wrap; gap:0.7rem 1.5rem;
  }
  .check-teaser-diag .diag-cap{ width:100%; margin:0; }
  .check-teaser-diag .diag-row{ flex:1; min-width:88px; }
}

@media (max-width:820px){
  .facts-strip{ grid-template-columns:1fr; }
  .facts-cell{
    border-left:0; border-top:1px solid var(--line-soft);
    padding:var(--gap-xs) 0;
    display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  }
  .facts-cell:first-child{ border-top:0; padding-top:0; }
  .facts-cell dt{ margin:0; }
  .leistungen-row{ grid-template-columns:2.25rem 1fr; }
  .leistungen-sticker{ grid-column:1 / -1; width:44px; margin-top:0.75rem; }
}

/* ===================== UEBER GIAN (§ 02) ===================== */
.about-grid{
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:var(--gap-lg);
  align-items:start;
}
.about-quote{
  margin:0 0 var(--gap-lg);
  padding-left:1.5rem;
  border-left:3px solid var(--red);
}
.about-quote p{
  margin:0;
  font-family:var(--font-body);
  font-weight:500;
  font-size:clamp(1.4rem, 2.6vw, 2.05rem);
  line-height:1.4;
  color:var(--ink);
  max-width:24ch;
}
.about-quote-cite{ margin-top:var(--gap-sm); }
.about-quote-cite cite{ font-style:normal; }
.about-text{ max-width:52ch; margin:0 0 var(--gap-lg); }
.about-text p{ margin:0 0 1.1em; color:var(--ink-soft); }
.about-text p:last-child{ margin-bottom:0; }
.about-facts{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin:0;
  border-top:1px solid var(--line-soft);
  border-left:1px solid var(--line-soft);
}
.about-facts div{
  padding:var(--gap-sm) var(--gap-xs);
  border-bottom:1px solid var(--line-soft);
  border-right:1px solid var(--line-soft);
}
.about-facts dt{
  font-size:0.68rem; text-transform:uppercase; letter-spacing:0.1em;
  color:var(--ink-soft); margin:0 0 0.4rem;
}
.about-facts dd{
  margin:0; font-family:var(--font-body); font-weight:600;
  font-size:1.05rem; color:var(--ink);
}
.about-photo{ margin:0; position:relative; }
.about-photo .frame{ position:relative; overflow:hidden; border:1.5px solid var(--line); }
.about-photo .frame::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:var(--grain); background-size:220px;
  mix-blend-mode:multiply; opacity:0.34;
}
.about-photo img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  filter:saturate(0.92) contrast(1.02);
}
.about-photo figcaption{
  margin-top:0.55rem; font-family:var(--font-mono); font-size:0.7rem;
  color:var(--ink-soft); letter-spacing:0.05em; display:flex; justify-content:space-between;
}
@media (max-width:820px){
  .about-grid{ grid-template-columns:1fr; gap:var(--gap-md); }
  .about-facts{ grid-template-columns:repeat(2,1fr); }
  .about-quote{ padding-left:1.1rem; }
  .about-quote p{ max-width:none; }
}

/* ===================== REFERENZEN & PRESSE (§ 03) ===================== */
.ref-block + .ref-block{ margin-top:var(--gap-lg); }
.ref-block .kicker{ margin-bottom:var(--gap-sm); }
.referenzen .section-lead{ margin-bottom:var(--gap-lg); }
.ref-clients{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(5, 1fr);
  max-width:900px;
  border-top:1px solid var(--line-soft); border-left:1px solid var(--line-soft);
}
.ref-clients li{
  text-transform:uppercase; font-size:0.82rem; letter-spacing:0.03em; color:var(--ink-soft);
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:76px; padding:1rem;
  border-bottom:1px solid var(--line-soft); border-right:1px solid var(--line-soft);
  transition:color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.ref-clients li:hover{ background:var(--paper-3); color:var(--ink); }
@media (max-width:820px){ .ref-clients{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width:620px){
  .ref-clients{ grid-template-columns:repeat(2, 1fr); max-width:none; }
  .ref-clients li{ min-height:64px; font-size:0.76rem; }
}
.press-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line-soft); max-width:900px; }
.press-item a{
  display:flex; align-items:baseline; justify-content:space-between; gap:0.5rem 1.5rem;
  padding:1.1rem 0.2rem;
  border-bottom:1px solid var(--line-soft);
  transition:border-color var(--dur-fast) var(--ease), padding-left var(--dur-mid) var(--ease);
}
.press-text{ display:flex; flex-wrap:wrap; align-items:baseline; gap:0.25rem 1rem; min-width:0; }
.press-pub{ font-size:0.8rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink); flex:none; }
.press-ctx{ font-size:0.94rem; color:var(--ink-soft); }
.press-item .arw{ color:var(--red); font-size:0.95rem; line-height:1; flex:none; transition:transform var(--dur-mid) var(--ease); }
.press-item a:hover,
.press-item a:focus-visible{ border-color:var(--red); padding-left:0.7rem; }
.press-item a:hover .arw,
.press-item a:focus-visible .arw{ transform:translateX(5px); }
.press-item a:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }

/* ===================== FAQ (§ 04) ===================== */
.faq-list{ margin-top:var(--gap-lg); max-width:860px; border-top:1px solid var(--line-soft); }
.faq-item{ border-bottom:1px solid var(--line-soft); }
.faq-q{
  list-style:none; cursor:pointer;
  display:flex; align-items:flex-start; gap:var(--gap-sm);
  padding:var(--gap-sm) 0;
}
.faq-q::-webkit-details-marker{ display:none; }
.faq-q:focus-visible{ outline:2px solid var(--red); outline-offset:6px; }
.faq-num{
  flex:none; min-width:1.6rem; font-size:0.76rem; line-height:1.5;
  color:var(--ink-soft); padding-top:0.2em;
}
.faq-q-text{
  flex:1; font-weight:600; line-height:1.5; color:var(--ink);
  transition:color var(--dur-fast) var(--ease);
}
.faq-item:hover .faq-q-text{ color:var(--brown); }
.faq-toggle{
  position:relative; flex:none; width:0.95rem; height:0.95rem; margin-top:0.35em;
  transition:transform var(--dur-mid) var(--ease);
}
.faq-toggle::before,
.faq-toggle::after{
  content:""; position:absolute; inset:0; margin:auto;
  background:var(--ink-soft); transition:background var(--dur-fast) var(--ease);
}
.faq-toggle::before{ width:100%; height:1.5px; }
.faq-toggle::after{ width:1.5px; height:100%; }
.faq-item[open] .faq-toggle{ transform:rotate(45deg); }
.faq-item[open] .faq-toggle::before,
.faq-item[open] .faq-toggle::after{ background:var(--red); }
.faq-a{
  max-width:62ch;
  padding:0 0 var(--gap-md) calc(1.6rem + var(--gap-sm));
  color:var(--ink-soft);
}
.faq-a p{ margin:0; line-height:1.65; }
.faq-item[open] .faq-a{ animation:faq-fade var(--dur-mid) var(--ease); }
@keyframes faq-fade{
  from{ opacity:0; transform:translateY(-4px); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce){
  .faq-toggle,
  .faq-toggle::before,
  .faq-toggle::after{ transition:none; }
  .faq-item[open] .faq-a{ animation:none; }
}
@media (max-width:620px){
  .faq-q{ gap:var(--gap-xs); }
  .faq-a{ padding-left:0; }
}

/* ===================== KONTAKT (§ 05) ===================== */
.kontakt-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:var(--gap-lg) var(--gap-xl); align-items:start; }
.kontakt-claim{
  font-family:var(--font-display); text-transform:uppercase;
  font-size:clamp(1.5rem,3vw,2.25rem); line-height:1.05; margin:0 0 var(--gap-sm); color:var(--ink);
}
.kontakt-sub{ color:var(--ink-soft); max-width:40ch; margin:0 0 var(--gap-md); }
.kontakt-meta{ margin:0; border-top:1px solid var(--line-soft); }
.kontakt-meta div{
  display:flex; justify-content:space-between; gap:1rem;
  padding:0.7rem 0; border-bottom:1px solid var(--line-soft);
}
.kontakt-meta dt{ font-family:var(--font-mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-soft); }
.kontakt-meta dd{ margin:0; text-align:right; color:var(--ink); }
.kontakt-meta a{ text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--brown); }
.kontakt-meta a:hover{ color:var(--brown); }

.contact-form .field{ margin-bottom:var(--gap-md); }
.contact-form label{
  display:block; font-family:var(--font-mono); font-size:0.7rem; text-transform:uppercase;
  letter-spacing:0.1em; color:var(--ink-soft); margin-bottom:0.5rem;
}
.contact-form input,
.contact-form select,
.contact-form textarea{
  width:100%; font-family:var(--font-body); font-size:1rem; color:var(--ink);
  background:transparent; border:0; border-bottom:1.5px solid var(--line);
  padding:0.6rem 0; border-radius:0;
  transition:border-color var(--dur-fast) var(--ease);
}
.contact-form textarea{ resize:vertical; }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{ outline:none; border-color:var(--red); }
.contact-form .btn{ margin-top:var(--gap-xs); }
.contact-status{ margin:var(--gap-sm) 0 0; font-size:0.82rem; min-height:1.2em; }
.contact-status.is-ok{ color:var(--brown); }
.contact-status.is-error{ color:var(--red); }
@media (max-width:820px){ .kontakt-grid{ grid-template-columns:1fr; gap:var(--gap-lg); } }