/* SMART AI — preview_v1 · light theme (Brand Guidelines 2026)
   Base: cool paper #F4F5F7, white bands/cards, ink-navy type. Actions/accents are
   NAVY — no decorative gold. Per the brand ("the metal IS the tier, never
   decorative") metal lives ONLY on credentials: the Siegel tiers + tier badges. */
:root {
  --paper: #F4F5F7;
  --white: #FFFFFF;
  --ink-900: #1E2B36;
  --ink-700: #3A4A5A;
  --ink-600: #55656F;
  --ink-500: #8C909E;
  --ink-400: #A6A8B4;
  --navy-950: #1E2B36;
  --navy-900: #2C4255;
  --navy-800: #314656;
  --slate-400: #8C909E;
  --slate-300: #A6A8B4;
  /* metal — reserved for credentials/tiers ONLY (never a decorative UI accent) */
  --metal-gold: #E6B23C;
  --metal-gold-text: #B8742D;
  --metal-gold-grad: linear-gradient(135deg, #F5D575 0%, #EDC664 45%, #B8742D 100%);
  /* --gold-* now hold NAVY: the decorative accent is navy, so every existing
     var(--gold-*) reference resolves to navy without touching each rule */
  --gold-300: #3A4F63;
  --gold-500: #2C4255;
  --gold-700: #1E2B36;
  --silver-400: #C3C4CC;
  --silver-600: #A8B8C1;
  --bronze-500: #C2A07C;
  --bronze-700: #B79C81;
  --bronze-text: #96714C;
  --silver-text: #6E8290;
  --gold-text: #2C4255;
  --line: rgba(30, 43, 54, .14);
  --line-soft: rgba(30, 43, 54, .08);
  --line-dark: rgba(255, 255, 255, .12);
  --gold-grad: linear-gradient(135deg, #3A4F63 0%, #1E2B36 100%);
  --silver-grad: linear-gradient(135deg, #F9FBFC 0%, #DBE4EB 50%, #A8B8C1 100%);
  --bronze-grad: linear-gradient(135deg, #F7DFC7 0%, #D5BBA0 50%, #B79C81 100%);
  --tier-grad: linear-gradient(90deg, var(--bronze-500), var(--silver-400), var(--metal-gold));
  --radius: 10px;    /* cards/panels — matches the app (brand.css --radius) */
  --radius-sm: 5px;  /* buttons/inputs — tighter than the app, more precise */
  --fill-quiet: #E4E8ED;        /* filled secondary on light surfaces */
  --fill-quiet-hover: #D6DBE2;
  --fill-quiet-dark: #37495C;        /* solid — never lets the video show through */
  --fill-quiet-dark-hover: #46596D;
  --shadow: 0 1px 2px rgba(30, 43, 54, .04), 0 4px 16px rgba(30, 43, 54, .05);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --maxw: 1080px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
html { background: #fff; }
body {
  font-family: "Inter", -apple-system, system-ui, sans-serif;
  font-optical-sizing: auto;
  background: var(--paper);
  color: var(--ink-900);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv05" 1, "cv08" 1;  /* single-storey l/t — cleaner at display sizes */
}
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* type — tracking tightens as size grows (optical compensation) */
h1 { font-size: clamp(34px, 5.5vw, 56px); font-weight: 700; letter-spacing: -.032em; line-height: 1.04; text-wrap: balance; }
h2 { font-size: clamp(26px, 3.5vw, 38px); font-weight: 700; letter-spacing: -.024em; line-height: 1.12; text-wrap: balance; }
h3 { font-size: 18px; font-weight: 600; letter-spacing: -.011em; line-height: 1.32; }
p { text-wrap: pretty; }
.eyebrow {
  font-size: 13px; font-weight: 500; color: var(--ink-500); margin-bottom: 14px;
}
.muted { color: var(--ink-500); }
.lead { font-size: clamp(16px, 2vw, 19px); color: var(--ink-600); max-width: 44em; }

/* scroll reveal */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .65s ease, transform .65s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* nav — tall, milky frosted-glass bar */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255, 255, 255, .85);
  border-bottom: 1px solid rgba(30, 43, 54, .07);
}
/* the soft dark edge that appears when the hero video scrolls under the bar —
   made permanent so the navbar always sits on a subtle shadow */
.nav::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 100%;
  height: 18px; pointer-events: none;
  background: linear-gradient(180deg, rgba(22, 32, 41, .085) 0%, rgba(22, 32, 41, .03) 45%, rgba(22, 32, 41, 0) 100%);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .nav {
    background: rgba(255, 255, 255, .62);
    -webkit-backdrop-filter: blur(20px) saturate(1.7);
    backdrop-filter: blur(20px) saturate(1.7);
  }
}
.nav-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 32px;
  height: 82px; display: flex; align-items: center; gap: 32px;
}
.nav-brand {
  display: flex; align-items: center; gap: 12px;
  font-weight: 700; font-size: 16px; letter-spacing: -.01em; color: var(--ink-900);
}
.nav-brand img { height: 30px; width: auto; object-fit: contain; }
.nav-links { display: flex; gap: 30px; margin-left: auto; font-size: 14.5px; font-weight: 500; color: var(--ink-600); align-items: center; }
.nav-links a { position: relative; transition: color .18s; }
.nav-links a:hover { color: var(--ink-900); }
.nav-links a:not(.nav-cta)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 2px;
  background: var(--gold-500); border-radius: 1px;
  transform: scaleX(0); transform-origin: left; transition: transform .22s ease;
}
.nav-links a:not(.nav-cta):hover::after { transform: scaleX(1); }
.nav-cta {
  font-size: 14px; font-weight: 600; color: #fff !important;
  background-color: var(--gold-500);
  padding: 11px 22px; margin-left: 10px; border-radius: var(--radius-sm);
  transition: background-color .18s var(--ease);
}
.nav-cta:hover { background-color: var(--gold-300); }
/* language toggle — a quiet segmented pair, never a dropdown */
.lang {
  display: inline-flex; align-items: center; gap: 1px;
  margin-left: 4px; padding: 3px; border-radius: var(--radius-sm);
  background: rgba(30, 43, 54, .06);
}
.lang a {
  padding: 5px 9px; border-radius: 3px; font-size: 12.5px; font-weight: 600;
  color: var(--ink-500); letter-spacing: .02em; transition: color .18s var(--ease), background-color .18s var(--ease);
}
.lang a:hover { color: var(--ink-900); }
.lang a[aria-current] { background: var(--white); color: var(--ink-900); }
.lang a::after { display: none !important; }   /* no gold underline on these */
/* Mobile: Nav-Links ausblenden — ABER nicht die Einträge im Sprach-Dropdown,
   sonst klappt das Menü leer auf. */
@media (max-width: 860px) {
  .nav-links a:not(.nav-cta):not(.lang a):not(.lang-menu a) { display: none; }
}

/* sections — paper base, white bands.
   scroll-margin keeps anchored headings clear of the 82px sticky navbar. */
section { padding: 100px 0; scroll-margin-top: 82px; }
section + section { border-top: 1px solid var(--line-soft); }
.sec-head { margin-bottom: 52px; }
.band { background: var(--white); }

/* hero — light stage, soft gold glow, ghosted Ai mark */
.hero {
  position: relative;
  overflow: hidden;
  padding: 110px 0 96px;
  background: linear-gradient(158deg, var(--white) 0%, var(--paper) 72%);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 16%, rgba(44, 66, 85, .05), transparent 50%);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -110px;
  width: 620px;
  height: 620px;
  background-repeat: no-repeat; background-position: center; background-size: contain;
  background-image: url(assets/smart-ai-mark-navy.png);
  background-image: image-set(url(assets/smart-ai-mark-navy.webp) type("image/webp"),
                              url(assets/smart-ai-mark-navy.png)  type("image/png"));
  opacity: .04;
  pointer-events: none;
  /* soft radial fade so the ghost mark never gets a hard crop at the section edges */
  -webkit-mask-image: radial-gradient(circle at 38% 32%, #000 12%, transparent 70%);
  mask-image: radial-gradient(circle at 38% 32%, #000 12%, transparent 70%);
}
/* hero video under a light veil so the ink type stays readable */
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.hero-veil {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .90) 45%, rgba(255, 255, 255, .62) 100%);
}
@media (prefers-reduced-motion: reduce), (max-width: 700px) {
  .hero-video { display: none; }
}
.hero .wrap { position: relative; z-index: 1; }
.hero .mark { width: 84px; height: auto; margin-bottom: 30px; }

/* start page hero — dark cinematic video stage, editorial display type */
.hero-home {
  min-height: 84vh; display: flex; align-items: center;
  padding: 130px 0 120px; background: var(--navy-950); color: var(--white);
}
.hero-home::before, .hero-home::after { display: none; }
/* two-layer scrim: horizontal weight for the type column + a base darkening,
   so the display type always sits on solid ground regardless of the footage */
.hero-home .hero-veil {
  background:
    radial-gradient(56% 52% at 100% 100%, rgba(230, 178, 60, .06), transparent 62%),
    linear-gradient(96deg, rgba(22, 32, 41, .80) 0%, rgba(22, 32, 41, .66) 34%, rgba(22, 32, 41, .23) 72%, rgba(22, 32, 41, .12) 100%),
    linear-gradient(180deg, rgba(22, 32, 41, .36) 0%, rgba(22, 32, 41, .18) 45%, rgba(22, 32, 41, .48) 100%);
}
/* as a flex item the wrap would shrink to content width and drift off the
   page grid — force full width so the display type aligns with the navbar */
.hero-home .wrap {
  width: 100%; max-width: var(--maxw);
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 56px;
}
.hero-copy { min-width: 0; }
/* the real Gütesiegel — all three tiers, side by side, on the right of the hero */
.hero-badges { display: flex; gap: 14px; align-items: center; justify-content: flex-end; }
.hero-badges img {
  width: 116px; height: auto; aspect-ratio: 420 / 585;
  filter: drop-shadow(0 14px 40px rgba(0, 0, 0, .5));
}
@media (max-width: 1040px) { .hero-badges img { width: 100px; } }
@media (max-width: 900px) {
  .hero-home .wrap { grid-template-columns: 1fr; gap: 0; }
  .hero-badges { display: none; }
}
/* slogan — the brand line, now a small marked kicker above the claim */
.hero-slogan {
  font-size: clamp(15px, 1.9vw, 18px); font-weight: 500; letter-spacing: .01em;
  color: rgba(255, 255, 255, .66); margin-bottom: 16px;
}
.hero-slogan span { color: #fff; font-weight: 600; }
/* main claim — prominent but not display-bold */
.hero-home h1 {
  font-size: clamp(27px, 3.5vw, 44px);
  font-weight: 500;
  letter-spacing: -.018em;
  line-height: 1.14;
  max-width: 28ch;
  text-wrap: balance;
}
.hero-home h1 span { color: #fff; }
/* keep "KI-Einsatz in der Hospitality." on one line on wider screens */
.hero-home h1 .hero-keep { white-space: nowrap; }
@media (max-width: 560px) { .hero-home h1 .hero-keep { white-space: normal; } }
/* the category line — the sentence that defines what SMART AI is */
.hero-category {
  margin-top: 30px;
  font-size: clamp(17px, 1.9vw, 21px); font-weight: 500;
  line-height: 1.5; letter-spacing: -.005em;
  color: rgba(255, 255, 255, .95); max-width: 40ch;
}
.hero-home .lead {
  margin-top: 14px; max-width: 46ch;
  font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .62);
}
.hero-home .hero-ctas { margin-top: 40px; }
.hero-home .btn { padding: 16px 30px; box-shadow: 0 2px 10px rgba(0, 0, 0, .16); }
.hero-ctas .btn .arr { transition: transform .2s var(--ease); }
.hero-ctas .btn:hover .arr { transform: translateX(3px); }
/* on the dark hero a navy button would vanish — primary is white here */
.hero-home .btn-gold { background-color: #fff; color: var(--ink-900); }
.hero-home .btn-gold:hover { background-color: rgba(255, 255, 255, .86); }
.hero-home .btn-ghost { background-color: var(--fill-quiet-dark); color: var(--white); }
.hero-home .btn-ghost:hover { background-color: var(--fill-quiet-dark-hover); }
/* subpage heroes sit on paper — the darker gold keeps contrast there */
.hero:not(.hero-home) h1 span { color: var(--gold-text); }
.hero .lead { margin-top: 20px; max-width: 60ch; }
.hero-rule { height: 3px; width: 84px; background: var(--gold-500); margin: 34px 0; }
.rule-tiers { height: 4px; width: 160px; background: var(--tier-grad); margin-top: 26px; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

/* buttons — flat filled surfaces: 5px, no shadow, no gradient */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: -.006em;
  cursor: pointer; padding: 14px 26px; border: none; border-radius: var(--radius-sm);
  transition: background-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-gold { background-color: var(--gold-500); color: #fff; }
.btn-gold:hover { background-color: var(--gold-300); }
/* secondary is FILLED too — a quiet neutral, never an empty outline */
.btn-ghost { background-color: var(--fill-quiet); color: var(--ink-900); border: none; }
.btn-ghost:hover { background-color: var(--fill-quiet-hover); }
.btn-note { font-size: 12.5px; color: var(--ink-500); margin-top: 8px; }

/* law chips (used in the "So wirst du konform" block) */
.aiact-chips { display: flex; flex-direction: column; gap: 8px; list-style: none; }
.aiact-chips li {
  font-size: 12px; color: var(--ink-600); border: 1px solid var(--line);
  padding: 8px 13px; white-space: nowrap; border-radius: var(--radius-sm);
  background: var(--white);
}
.aiact-chips b { color: var(--ink-900); font-weight: 700; }

/* Programm — editorial split */
.split { display: grid; grid-template-columns: 1fr 1.6fr; gap: 56px; align-items: start; }
.split .sec-head { margin-bottom: 0; position: sticky; top: 96px; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } .split .sec-head { position: static; } }
.essays { display: grid; }
.essay { padding: 30px 0; border-top: 1px solid var(--line-soft); }
.essay:first-child { padding-top: 0; border-top: 0; }
.essay .num {
  font-size: 13px; font-weight: 600; color: var(--ink-500);
  display: block; margin-bottom: 10px;
}
.essay h3 { font-size: 20px; margin-bottom: 10px; }
.essay p { font-size: 15.5px; color: var(--ink-600); max-width: 58ch; }

/* Bausteine — icon feature list */
/* stations — a clean card grid (icon on top), rebuilt from the old two-column list */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 860px) { .features { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .features { grid-template-columns: 1fr; } }
.feature {
  display: flex; flex-direction: column; gap: 14px; padding: 28px 26px;
  background: var(--white); border: 1px solid var(--line-soft);
  border-radius: var(--radius); box-shadow: var(--shadow);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.feature:hover { transform: translateY(-4px); box-shadow: 0 2px 6px rgba(30, 43, 54, .07), 0 16px 36px rgba(30, 43, 54, .12); }
.feature svg { flex: none; width: 26px; height: 26px; stroke: var(--ink-500); }
/* filled glyph icons for the stations — same masked treatment as the value icons. */
.feature .f-ic {
  display: block; flex: none; width: 30px; height: 30px;
  background: var(--ink-500);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.feature .f-ic.ic-elearning  { -webkit-mask-image: url(assets/icons/online-learning-2.svg); mask-image: url(assets/icons/online-learning-2.svg); }
.feature .f-ic.ic-practice   { -webkit-mask-image: url(assets/icons/meeting.svg);           mask-image: url(assets/icons/meeting.svg); }
.feature .f-ic.ic-readiness  { -webkit-mask-image: url(assets/icons/data.svg);              mask-image: url(assets/icons/data.svg); }
.feature .f-ic.ic-coffee     { -webkit-mask-image: url(assets/icons/tea-cup.svg);           mask-image: url(assets/icons/tea-cup.svg); }
.feature .f-ic.ic-governance { -webkit-mask-image: url(assets/icons/governance.svg);        mask-image: url(assets/icons/governance.svg); }
.feature .f-ic.ic-playground { -webkit-mask-image: url(assets/icons/flask.svg);             mask-image: url(assets/icons/flask.svg); }
.feature h3 { margin-bottom: 4px; font-size: 17px; }
.feature p { font-size: 14.5px; line-height: 1.55; color: var(--ink-600); }

/* Schulung — vertical path left, outcome card right */
.schulung-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px 80px; align-items: start; }
@media (max-width: 880px) { .schulung-grid { grid-template-columns: 1fr; gap: 48px; } }
.journey { list-style: none; display: grid; }
.journey li { display: grid; grid-template-columns: 38px 1fr; gap: 22px; position: relative; padding-bottom: 34px; }
.journey li:last-child { padding-bottom: 0; }
.journey li::before {
  content: ""; position: absolute; left: 19px; top: 44px; bottom: 6px;
  width: 1px; background: var(--line);
}
.journey li:last-child::before { display: none; }
.j-num {
  display: grid; place-items: center; width: 38px; height: 38px;
  border: 1px solid var(--line); color: var(--ink-900); font-weight: 700; font-size: 15px;
  background: var(--white); position: relative; z-index: 1;
  border-radius: var(--radius-sm);
}
.journey h3 { font-size: 17px; margin: 7px 0 8px; }
.journey p { font-size: 14.5px; color: var(--ink-600); max-width: 46ch; }

/* outcome — the credential card */
.outcome {
  border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden;
  background: var(--white); box-shadow: var(--shadow);
}
.outcome-label {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 36px 34px; text-align: center; border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(158deg, var(--navy-900), var(--navy-950));
}
.outcome-label img { width: 148px; }
.outcome-label span { font-size: 12.5px; font-weight: 600; letter-spacing: .04em; color: var(--slate-300); }
.outcome-body { padding: 28px 30px 32px; }
.outcome-body ul { list-style: none; display: grid; gap: 14px; margin-top: 14px; }
.outcome-body li { padding-left: 26px; position: relative; font-size: 14.5px; line-height: 1.6; color: var(--ink-600); }
.outcome-body li::before { content: "✓"; position: absolute; left: 0; color: var(--gold-text); font-weight: 700; }
.outcome-body b { color: var(--ink-900); font-weight: 600; }

/* full-bleed photo bands — the ibex pattern: emotion + CTA on imagery */
/* WebP first, JPEG as fallback for browsers without image-set() */
.photo-band {
  position: relative; padding: 110px 0; color: var(--white);
  background-color: var(--navy-950);
  background-image: url(assets/band-cta.jpg);
  background-image: image-set(url(assets/band-cta.webp) type("image/webp"),
                              url(assets/band-cta.jpg)  type("image/jpeg"));
  background-size: cover; background-position: center 48%; background-repeat: no-repeat;
}
.photo-band--vision {
  background-image: url(assets/band-vision.jpg);
  background-image: image-set(url(assets/band-vision.webp) type("image/webp"),
                              url(assets/band-vision.jpg)  type("image/jpeg"));
  background-position: center 38%;
}
.photo-band::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(30, 43, 54, .88) 0%, rgba(30, 43, 54, .5) 100%);
}
.photo-band .wrap { position: relative; }
.photo-band h2 { max-width: 20em; }
.photo-band .lead { color: rgba(255, 255, 255, .85); margin-top: 16px; }
.photo-band .eyebrow { color: rgba(255, 255, 255, .65); }
.photo-band .hero-ctas { margin-top: 34px; }
.btn-outline-white { background-color: var(--fill-quiet-dark); color: var(--white); border: none; }
.btn-outline-white:hover { background-color: var(--fill-quiet-dark-hover); }
/* photo bands are dark — primary is white so it reads against the image */
.photo-band .btn-gold { background-color: #fff; color: var(--ink-900); }
.photo-band .btn-gold:hover { background-color: rgba(255, 255, 255, .86); }
.vision-quote {
  font-size: clamp(20px, 2.8vw, 27px); line-height: 1.45; font-weight: 500;
  max-width: 30em; margin-top: 18px;
}

/* testimonial avatars */
.quote .who { display: flex; align-items: center; gap: 12px; }
.who-avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  background: var(--navy-900); color: #fff;
  font-weight: 700; font-size: 13px; display: grid; place-items: center;
}

/* proof strip — the number as trust anchor (ibex pattern) */
.proof { padding: 30px 0; border-bottom: 1px solid var(--line-soft); }
.proof-row { display: flex; flex-wrap: wrap; gap: 24px 64px; align-items: baseline; }
.proof-stat { display: flex; align-items: baseline; gap: 10px; }
.proof-stat b { font-size: 27px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.proof-stat span { font-size: 14px; color: var(--ink-500); }
.proof-link { margin-left: auto; font-size: 13.5px; font-weight: 600; color: var(--gold-text); }
.proof-link:hover { color: var(--gold-700); }

/* FAQ — real objections, openly answered (ibex pattern) */
.faq { max-width: 760px; }
.faq details { border-top: 1px solid var(--line-soft); }
.faq details:last-of-type { border-bottom: 1px solid var(--line-soft); }
.faq summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 21px 40px 21px 0; font-weight: 600; font-size: 16.5px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 23px; font-weight: 400; color: var(--ink-400); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 0 24px; font-size: 15px; line-height: 1.7; color: var(--ink-600); max-width: 66ch; }

/* "Warum jetzt" — three forces that add up to one conclusion */
.stack { max-width: 800px; }
.stack-row {
  display: grid; grid-template-columns: 64px 1fr; gap: 24px; align-items: start;
  padding: 30px 32px 30px 26px;
  background: var(--paper); border-radius: var(--radius);
}
.band .stack-row { background: var(--paper); }
.stack-num {
  font-size: 15px; font-weight: 700; color: var(--gold-text);
  font-variant-numeric: tabular-nums; letter-spacing: .02em; padding-top: 3px;
}
.stack-body h3 { font-size: 18.5px; margin-bottom: 8px; }
.stack-body p { font-size: 15.5px; color: var(--ink-600); max-width: 58ch; }
/* the connector: a hairline with the operator sitting on it */
.stack-link {
  display: grid; place-items: center; position: relative;
  height: 46px; margin-left: 26px;
}
.stack-link::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 25px;
  width: 1px; background: var(--line);
}
.stack-link span {
  position: relative; z-index: 1; justify-self: start; margin-left: 12px;
  width: 27px; height: 27px; display: grid; place-items: center;
  background: var(--white); border: 1px solid var(--line); border-radius: 50%;
  font-size: 14px; font-weight: 600; color: var(--ink-500); line-height: 1;
}
.stack-result-link span { border-color: var(--gold-500); color: var(--gold-text); }
.stack-result {
  padding: 32px 34px; border-radius: var(--radius);
  background: var(--navy-950); color: var(--white);
}
.stack-result p {
  font-size: clamp(18px, 2.2vw, 22px); line-height: 1.5; font-weight: 500;
  color: rgba(255, 255, 255, .82); max-width: 40ch;
}
.stack-result strong { color: var(--white); font-weight: 700; }
@media (max-width: 620px) {
  .stack-row { grid-template-columns: 1fr; gap: 10px; padding: 26px 24px; }
  .stack-link { margin-left: 24px; }
}

/* system section — stations header */
.stationen { margin-top: 72px; }
.stationen h3 { font-size: 21px; margin-bottom: 10px; }

/* two-up quotes on the start page */
.quotes-2 { grid-template-columns: 1fr 1fr; margin-top: 56px; }
@media (max-width: 820px) { .quotes-2 { grid-template-columns: 1fr; } }

/* Wer profitiert — hairline-left claims */
.values { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 36px 30px; }
@media (max-width: 520px) { .values { grid-template-columns: 1fr; } }
.value { border-left: 1px solid var(--line); padding-left: 22px; }
.value svg { width: 34px; height: 34px; stroke: var(--ink-500); margin-bottom: 14px; }
/* filled glyph icons — masked so they take the muted ink tone like the line icons.
   mask urls resolve relative to this stylesheet, so DE and EN pages share them.
   longhand mask-image (not the shorthand) so Safari resolves it reliably. */
.value .v-ic {
  display: block; width: 34px; height: 34px; margin-bottom: 14px;
  background: var(--ink-500);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: left center; mask-position: left center;
  -webkit-mask-size: contain; mask-size: contain;
}
.value .v-ic.ic-guest     { -webkit-mask-image: url(assets/icons/check-in.svg);    mask-image: url(assets/icons/check-in.svg); }
.value .v-ic.ic-staff     { -webkit-mask-image: url(assets/icons/employees.svg);   mask-image: url(assets/icons/employees.svg); }
.value .v-ic.ic-business  { -webkit-mask-image: url(assets/icons/business.svg);    mask-image: url(assets/icons/business.svg); }
.value .v-ic.ic-partner   { -webkit-mask-image: url(assets/icons/collaborate.svg); mask-image: url(assets/icons/collaborate.svg); }
.value .v-ic.ic-authority { -webkit-mask-image: url(assets/icons/attestation.svg); mask-image: url(assets/icons/attestation.svg); }
.value h3 { font-size: 17px; margin-bottom: 8px; }
.value p { font-size: 14.5px; color: var(--ink-600); }

/* ── the one section that breaks the pattern ──────────────────────────────
   No kicker, no lead, no even grid: a dark plate (the language of the labels
   themselves), an asymmetric head, and the three levels arranged as a stair
   so the progression is visible before it is read. */
.siegel { background: var(--navy-950); color: var(--white); padding: 132px 0 128px; }
/* CTA under the tiers — on the dark plate the primary button goes white to stand out */
.siegel-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 60px; }
.siegel .btn-gold { background: #fff; color: var(--ink-900); }
.siegel .btn-gold:hover { background: rgba(255, 255, 255, .86); }
.siegel-cta .btn .arr { transition: transform .2s var(--ease); }
.siegel-cta .btn:hover .arr { transform: translateX(3px); }
.siegel-head { margin-bottom: 72px; text-align: center; }
@media (max-width: 820px) { .siegel-head { grid-template-columns: 1fr; align-items: start; } }
.siegel-head h2 { font-size: clamp(34px, 5.2vw, 56px); letter-spacing: -.034em; line-height: 1; }
.siegel-head p {
  font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, .68);
  max-width: 32ch; padding-bottom: 6px;
}
/* the stair: each level literally sits higher than the one before */
/* home Gütesiegel — flat credentials on the navy plate: the seal sits directly on the
   background with simple text below. No cards, no boxes, no stair-stagger; all aligned. */
.siegel .tiers { grid-template-columns: repeat(3, 1fr); gap: 40px; align-items: start; }
@media (max-width: 760px) { .siegel .tiers { grid-template-columns: 1fr; gap: 54px; } }
.siegel .tiers-stair .tier { margin-top: 0 !important; }
.siegel .tier {
  background: none; border: 0; box-shadow: none; border-radius: 0;
  padding: 0; overflow: visible;
}
.siegel .tier::before { display: none; }
.siegel .tier:hover { transform: none; }
.siegel .tier img { width: 178px; margin: 0 auto 24px; }
.siegel .tier .tier-name { font-size: 22px; color: #fff; }
.siegel .tier .tier-metal { font-size: 12px; font-weight: 700; letter-spacing: .2em; margin: 10px 0 14px; }
.siegel .tier p { color: rgba(255, 255, 255, .66); line-height: 1.62; max-width: 30ch; margin: 0 auto; }
.siegel .tier-soon {
  color: rgba(255, 255, 255, .5); border: 0; padding: 0; border-radius: 0;
  margin-top: 16px; font-size: 12px; letter-spacing: .04em;
}
.siegel .criteria-intro h3 { color: var(--white); }
.siegel .criteria-intro p { color: rgba(255, 255, 255, .66); }
.siegel .crit-col { background: var(--navy-900); border-color: rgba(255, 255, 255, .1); box-shadow: none; }
.siegel .crit-col li { color: rgba(255, 255, 255, .7); }
.siegel .crit-col li.crit-carry { color: var(--white); }
.siegel .crit-count { color: rgba(255, 255, 255, .48); }
.siegel .crit-col li::before { color: var(--gold-500); }
.siegel .tier-metal.gold { color: var(--metal-gold); }
.siegel .tier-metal.bronze { color: var(--bronze-500); }
.siegel .tier-metal.silver { color: var(--silver-400); }

/* siegel — the credential keeps its plate; metal lives in the top edge */
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.tier {
  background: var(--white); border: 1px solid var(--line-soft);
  padding: 34px 26px 30px; text-align: center; position: relative;
  transition: transform .25s ease; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow);
}
.tier:hover { transform: translateY(-4px); }
.tier::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.tier.t-bronze::before { background: var(--bronze-grad); }
.tier.t-silver::before { background: var(--silver-grad); }
.tier.t-gold::before { background: var(--metal-gold-grad); }
.tier img { width: 150px; aspect-ratio: 420 / 585; margin: 0 auto 20px; }
.tier .tier-name { font-size: 19px; font-weight: 700; }
.tier .tier-metal { font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin: 6px 0 12px; }
.tier .tier-metal.bronze { color: var(--bronze-text); }
.tier .tier-metal.silver { color: var(--silver-text); }
.tier .tier-metal.gold {
  background: var(--metal-gold-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.tier p { font-size: 14px; color: var(--ink-600); }
.tier-soon {
  display: inline-block; margin-top: 14px; font-size: 11.5px; font-weight: 600;
  color: var(--ink-500); border: 1px solid var(--line); border-radius: 20px;
  padding: 4px 12px;
}

/* siegel criteria */
.criteria-intro { margin: 64px 0 28px; }
.criteria-intro h3 { font-size: 21px; margin-bottom: 8px; }
.criteria-intro p { font-size: 15px; color: var(--ink-600); }
.criteria { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
@media (max-width: 760px) { .criteria { grid-template-columns: 1fr; } }
.crit-col {
  border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden;
  background: var(--white); position: relative; padding: 26px 26px 28px;
  box-shadow: var(--shadow);
}
.crit-col::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.c-bronze::before { background: var(--bronze-grad); }
.c-silver::before { background: var(--silver-grad); }
.crit-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.crit-name { font-size: 16.5px; font-weight: 700; }
.crit-count { font-size: 12.5px; font-weight: 600; color: var(--ink-500); white-space: nowrap; }
.crit-col ul { list-style: none; display: grid; gap: 10px; }
.crit-col li { padding-left: 24px; position: relative; font-size: 14.5px; line-height: 1.55; color: var(--ink-600); }
.crit-col li::before { content: "✓"; position: absolute; left: 0; color: var(--gold-text); font-weight: 700; }
.crit-col li.crit-carry { color: var(--ink-900); font-weight: 600; }
.crit-col li.crit-carry::before { content: "＋"; color: var(--ink-500); }

/* partner section — logo tiles ready for real partner marks */
.partner-logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.partner-logo {
  height: 88px; display: grid; place-items: center;
  background: var(--white); border: 1px solid var(--line-soft); border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--ink-400); font-size: 13px; font-weight: 700; letter-spacing: .14em;
}
.partner-logo img { max-height: 44px; max-width: 70%; object-fit: contain; }

/* blog index page */
.page-head { padding: 96px 0 20px; }
.page-head .lead { margin-top: 16px; }
.page-head .hero-rule { margin: 34px 0 0; }
.post .date { font-size: 12px; color: var(--ink-500); display: block; margin-top: 4px; letter-spacing: .04em; }
a.post { display: grid; }

/* blog — editorial index rows */
.posts { display: grid; }
.post {
  display: grid; grid-template-columns: 130px 1fr auto; gap: 26px; align-items: baseline;
  padding: 26px 0; border-top: 1px solid var(--line-soft);
}
.posts .post:first-child { border-top: 0; padding-top: 0; }
@media (max-width: 700px) { .post { grid-template-columns: 1fr; gap: 6px; } }
.post .tag { font-size: 12.5px; font-weight: 500; color: var(--ink-500); }
.post h3 { font-size: 19px; transition: color .15s; }
.post p { font-size: 14.5px; color: var(--ink-600); margin-top: 6px; max-width: 62ch; }
.post .more { font-size: 13.5px; font-weight: 600; color: var(--gold-text); white-space: nowrap; }
.post:hover h3 { color: var(--gold-text); }

/* article template */
.article-head { padding: 84px 0 0; }
.article-head .inner, .prose, .article-cta-wrap { max-width: 760px; }
.article-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 600; color: var(--gold-text); margin-bottom: 34px;
}
.article-back:hover { color: var(--gold-700); }
.article-meta {
  display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: baseline;
  font-size: 13px; font-weight: 500; color: var(--ink-500);
}
.article-meta .tag { color: var(--ink-700); font-weight: 600; }
.article-head h1 { font-size: clamp(30px, 4.5vw, 46px); margin: 18px 0 20px; }
.article-head .lead { font-size: 19px; }
.article-head .hero-rule { margin: 34px 0 0; }
.prose { padding: 30px 0 0; }
.prose p { margin: 18px 0; font-size: 16.5px; line-height: 1.75; color: var(--ink-700); }
.prose h2 { font-size: 23px; margin: 44px 0 4px; }
.prose ul, .prose ol { margin: 18px 0 18px 4px; list-style: none; display: grid; gap: 10px; }
.prose li { padding-left: 24px; position: relative; font-size: 16px; line-height: 1.7; color: var(--ink-700); }
.prose li::before { content: "—"; position: absolute; left: 0; color: var(--ink-400); }
.prose strong { color: var(--ink-900); font-weight: 600; }
.pullquote {
  border-left: 2px solid var(--line); padding: 8px 0 8px 24px; margin: 34px 0;
  font-size: 19px; line-height: 1.6; font-weight: 500;
}
.article-author { margin-top: 40px; font-size: 13.5px; color: var(--ink-500); }
.article-author b { color: var(--ink-900); font-weight: 600; }
.article-cta {
  border: 1px solid var(--line-soft); padding: 30px 32px; margin: 56px 0 0;
  display: flex; justify-content: space-between; align-items: center; gap: 20px 28px; flex-wrap: wrap;
  border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow);
}
.article-cta h3 { font-size: 18px; margin-bottom: 6px; }
.article-cta p { font-size: 14px; color: var(--ink-600); max-width: 46ch; }

/* "So wirst du konform" */
.konform { margin-top: 44px; border-top: 1px solid var(--line-soft); padding-top: 36px; max-width: 70ch; }
.konform h3 { font-size: 18px; margin-bottom: 10px; }
.konform p { font-size: 15px; color: var(--ink-600); margin-bottom: 18px; }
.konform .aiact-chips { flex-direction: row; flex-wrap: wrap; gap: 10px; }

/* compliance */
.compliance ul { list-style: none; display: grid; gap: 12px; margin-top: 8px; max-width: 70ch; }
.compliance li { padding-left: 26px; position: relative; font-size: 15px; color: var(--ink-600); }
.compliance li::before { content: "—"; position: absolute; left: 0; color: var(--ink-400); }
/* EU AI Act — two clean article cards */
.aiact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 820px) { .aiact-grid { grid-template-columns: 1fr; } }
.aiact-card {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line-soft);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px 26px;
}
.aiact-art { font-size: 14px; font-weight: 700; letter-spacing: .04em; color: var(--ink-500); }
.aiact-card h3 { font-size: 18.5px; margin: 6px 0 10px; }
.aiact-card p { font-size: 14.5px; color: var(--ink-600); line-height: 1.55; flex: 1; }
.aiact-date { align-self: flex-start; margin-top: 18px; font-size: 12.5px; font-weight: 600; color: var(--ink-700); background: var(--fill-quiet); padding: 5px 12px; border-radius: 100px; }

/* kontakt — boxless, straight on the sheet */
.kontakt-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 44px 80px; }
@media (max-width: 760px) { .kontakt-panel { grid-template-columns: 1fr; } }
.kontakt-cell h3 { font-size: 19px; margin-bottom: 10px; }
.kontakt-cell p { font-size: 14.5px; color: var(--ink-600); margin-bottom: 22px; max-width: 40ch; }
/* contact — a clean modern form + a quiet direct-contact aside */
.contact-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 40px 64px; align-items: start; }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; gap: 44px; } }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 520px) { .cf-row { grid-template-columns: 1fr; } }
.cf-field { margin-bottom: 18px; }
.cf-field label { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink-900); margin-bottom: 7px; }
.cf-opt { font-weight: 500; color: var(--ink-500); }
.cf-input {
  width: 100%; padding: 13px 15px; font: inherit; font-size: 15px; color: var(--ink-900);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.cf-input::placeholder { color: var(--ink-400); }
.cf-input:focus { outline: none; border-color: var(--navy-900); box-shadow: 0 0 0 3px rgba(44, 66, 85, .12); }
textarea.cf-input { resize: vertical; min-height: 128px; line-height: 1.55; }
.cf-actions { margin-top: 22px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cf-note { font-size: 13.5px; color: var(--ink-600); }
.contact-aside h3 { font-size: 17px; margin-bottom: 8px; }
.contact-aside p { font-size: 14.5px; color: var(--ink-600); line-height: 1.6; margin-bottom: 12px; max-width: 36ch; }
.contact-mail { display: inline-block; font-size: 15px; font-weight: 600; color: var(--gold-text); }
.contact-mail:hover { color: var(--gold-700); }
.contact-book { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line-soft); }
.contact-book h4 { font-size: 14px; margin-bottom: 8px; }
.contact-soon { display: inline-block; margin-top: 4px; font-size: 12.5px; font-weight: 600; color: var(--ink-500); }

/* public directory toolbar */
.dir-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-bottom: 28px; }
.dir-search {
  flex: 1 1 260px; max-width: 340px;
  font-family: inherit; font-size: 14.5px; color: var(--ink-900);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 16px; outline: none; transition: border-color .15s;
}
.dir-search::placeholder { color: var(--ink-400); }
.dir-search:focus { border-color: var(--gold-500); }
.dir-filters { display: flex; gap: 8px; flex-wrap: wrap; }
/* filter chips are filled too — same family as the buttons */
.chip {
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  color: var(--ink-700); background-color: var(--fill-quiet);
  border: none; border-radius: var(--radius-sm); padding: 9px 16px;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.chip:hover { background-color: var(--fill-quiet-hover); color: var(--ink-900); }
.chip.active { background-color: var(--ink-900); color: var(--white); }
.dir-count { margin-left: auto; font-size: 13.5px; color: var(--ink-500); white-space: nowrap; }
.dir-empty {
  padding: 48px 20px; text-align: center; font-size: 15px; color: var(--ink-500);
  border: 1px dashed var(--line); border-radius: var(--radius); margin-top: 4px;
}

/* betriebe subpage */
/* directory — two photo-forward cards per row */
.betriebe { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
@media (max-width: 720px) { .betriebe { grid-template-columns: 1fr; gap: 22px; } }
.betrieb {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--white); border: 1px solid var(--line-soft);
  border-radius: var(--radius); box-shadow: var(--shadow);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.betrieb:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(30, 43, 54, .15); border-color: var(--line); }

/* photo */
.betrieb-photo { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--fill-quiet); }
.betrieb-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.betrieb:hover .betrieb-photo img { transform: scale(1.05); }
/* slight SMART AI shadow gradient over the whole image — course-preview style, low opacity */
.betrieb-photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top left, rgba(30, 43, 54, .99) 0%, rgba(30, 43, 54, .62) 36%, rgba(30, 43, 54, 0) 74%),
    linear-gradient(180deg, rgba(30, 43, 54, 0) 36%, rgba(30, 43, 54, .44) 100%);
}

/* SMART AI stamp — navy seal, top-right, balances the tier badge */
.betrieb-stamp {
  position: absolute; top: 13px; right: 13px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(44, 66, 85, .90); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 2px 12px rgba(30, 43, 54, .30);
}
.betrieb-stamp img { width: 22px; height: 22px; display: block; }

/* tier seal floats on the photo, frosted for legibility */
.betrieb .badge {
  position: absolute; top: 14px; left: 14px; z-index: 2; margin: 0;
  display: inline-flex; align-items: center; font-size: 11px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; padding: 6px 13px; border-radius: 20px;
  background: rgba(255, 255, 255, .93); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 2px 12px rgba(30, 43, 54, .20);
}
.badge.aware { color: var(--bronze-text); border: 1px solid var(--bronze-500); }
.badge.ready { color: var(--silver-text); border: 1px solid var(--silver-600); }
.badge.expert { color: var(--metal-gold-text); border: 1px solid var(--metal-gold); }

/* body */
.betrieb-body { display: flex; align-items: center; gap: 14px; padding: 18px 20px; }
.betrieb .initials {
  flex: none; width: 46px; height: 46px; display: grid; place-items: center;
  background: var(--navy-900); color: #fff; font-weight: 700; font-size: 15px;
  border-radius: var(--radius-sm);
}
.betrieb-text { min-width: 0; }
.betrieb .name { font-weight: 600; font-size: 16.5px; color: var(--ink-900); line-height: 1.25; }
.betrieb .ort { font-size: 13px; color: var(--ink-500); margin-top: 3px; }

/* trust strip */
.betrieb-foot {
  display: flex; align-items: center; gap: 8px; margin-top: auto;
  padding: 13px 20px; border-top: 1px solid var(--line-soft);
  font-size: 12px; font-weight: 600; color: var(--navy-900);
}
.betrieb-foot svg { width: 16px; height: 16px; flex: none; }

/* testimonials — editorial pull quotes */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
@media (max-width: 820px) { .quotes { grid-template-columns: 1fr; gap: 36px; } }
.quote { display: flex; flex-direction: column; border-top: 1px solid var(--line); padding-top: 22px; }
.quote blockquote { font-size: 17px; line-height: 1.65; }
.quote blockquote::before { content: "«"; color: var(--gold-text); margin-right: 2px; }
.quote blockquote::after { content: "»"; color: var(--gold-text); margin-left: 2px; }
.quote .who { margin-top: 18px; font-size: 13.5px; color: var(--ink-500); }
.quote .who b { color: var(--ink-900); font-weight: 600; }

/* footer — navy block with a slight gradient + an extremely faint gold glow */
footer {
  color: var(--white); padding: 76px 0 0;
  background:
    radial-gradient(58% 80% at 100% 100%, rgba(230, 178, 60, .05), transparent 60%),
    linear-gradient(180deg, var(--navy-900) 0%, var(--navy-950) 55%);
}
.foot-main {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 44px;
  padding-bottom: 56px;
}
@media (max-width: 900px) { .foot-main { grid-template-columns: 1fr 1fr; gap: 36px; } }
@media (max-width: 520px) { .foot-main { grid-template-columns: 1fr; } }
.foot-brand .nav-brand { color: var(--white); }
.foot-brand .nav-brand img { height: 36px; }
.foot-brand p { font-size: 14px; color: var(--slate-300); max-width: 30ch; margin-top: 14px; line-height: 1.6; }
.foot-col h4 { font-size: 13.5px; font-weight: 600; color: var(--white); margin-bottom: 16px; }
.foot-col a { display: block; font-size: 14px; color: var(--slate-300); margin-bottom: 11px; transition: color .15s; }
.foot-col a:hover { color: var(--white); }
.foot-bottom {
  border-top: 1px solid var(--line-dark); padding: 22px 0 34px;
  display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between;
  font-size: 13px; color: var(--slate-400);
}

/* preview banner */
.preview-note {
  background: var(--ink-900); color: #fff;
  font-size: 12.5px; font-weight: 600; text-align: center; padding: 7px 12px;
}

/* ── pillars — ASC-style overview band: navy plate, white cards, "Mehr erfahren →".
   sits right below the hero and forwards into the deeper sections. ───────────── */
.pillars-band { background: var(--navy-900); color: #fff; border-top: 0; }
.pillars-head { text-align: center; margin: 0 auto 18px; }
.pillars-head h2 { color: #fff; }
.pillars-lead {
  text-align: center; max-width: 56ch; margin: 0 auto 46px;
  color: rgba(255, 255, 255, .72); font-size: clamp(15px, 1.7vw, 17px);
}
.pillars { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 900px; margin: 0 auto; }
@media (max-width: 620px) { .pillars { grid-template-columns: 1fr; } }
.pillar {
  display: flex; flex-direction: column;
  background: var(--white); border-radius: 14px;
  padding: 38px 32px 30px;
  box-shadow: 0 1px 2px rgba(30, 43, 54, .05), 0 12px 32px rgba(30, 43, 54, .11);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.pillar:hover { transform: translateY(-7px); box-shadow: 0 2px 6px rgba(30, 43, 54, .08), 0 24px 50px rgba(30, 43, 54, .18); }
/* editorial index — quiet, gives the row structure */
.pillar-index {
  font-size: 12.5px; font-weight: 700; letter-spacing: .14em;
  color: var(--ink-400); font-variant-numeric: tabular-nums; margin-bottom: 20px;
}
/* pillar icons — masked glyphs on the white cards, replacing the numbers */
.pillar-ic {
  display: block; width: 34px; height: 34px; margin-bottom: 18px;
  background: var(--ink-500);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: left center; mask-position: left center;
  -webkit-mask-size: contain; mask-size: contain;
}
.pillar-ic.pic-data         { -webkit-mask-image: url(assets/icons/personal-data.svg); mask-image: url(assets/icons/personal-data.svg); }
.pillar-ic.pic-team         { -webkit-mask-image: url(assets/icons/link.svg);          mask-image: url(assets/icons/link.svg); }
.pillar-ic.pic-transparency { -webkit-mask-image: url(assets/icons/transparency.svg);  mask-image: url(assets/icons/transparency.svg); }
.pillar-ic.pic-certified    { -webkit-mask-image: url(assets/icons/certified.svg);     mask-image: url(assets/icons/certified.svg); }

/* directory hero — clean certified seal icon, standalone above the heading */
.dir-hero-ic {
  display: block; width: 46px; height: 46px; margin-bottom: 22px; background: var(--navy-900);
  -webkit-mask: url(assets/icons/certified.svg) left center / contain no-repeat;
  mask: url(assets/icons/certified.svg) left center / contain no-repeat;
}
.pillar h3 {
  font-size: clamp(20px, 1.5vw, 23px); font-weight: 700; line-height: 1.18;
  letter-spacing: -.022em; color: var(--ink-900); margin-bottom: 14px; text-wrap: balance;
}
.pillar p { font-size: 14.5px; line-height: 1.62; color: var(--ink-600); flex: 1; }
/* the forward link pins to the bottom with a hairline above it */
.pillar-more {
  margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line-soft);
  font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold-text); display: inline-flex; align-items: center; gap: 9px;
}
.pillar-more .arr { transition: transform .2s var(--ease); }
.pillar:hover .pillar-more .arr { transform: translateX(4px); }

/* film grain — subtle, calm, static overlay across the whole page */
body::after{content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27140%27%20height%3D%27140%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.85%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27140%27%20height%3D%27140%27%20filter%3D%27url%28%23n%29%27%2F%3E%3C%2Fsvg%3E");background-size:140px 140px;opacity:.11;}

/* Lenis smooth scroll — recommended base */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* system section — 3 added tiles */
.feature .f-ic.ic-inventory  { -webkit-mask-image: url(assets/icons/link.svg);        mask-image: url(assets/icons/link.svg); }
.feature .f-ic.ic-guidelines { -webkit-mask-image: url(assets/icons/attestation.svg); mask-image: url(assets/icons/attestation.svg); }
.feature .f-ic.ic-guestinfo  { -webkit-mask-image: url(assets/icons/check-in.svg);    mask-image: url(assets/icons/check-in.svg); }

/* compliance tiles as links to the legal texts */
a.aiact-card { color: inherit; transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease); }
a.aiact-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(30, 43, 54, .12); border-color: var(--line); }
.aiact-link { align-self: flex-start; margin-top: 18px; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--gold-text); }
.aiact-link .arr { transition: transform .2s var(--ease); }
a.aiact-card:hover .aiact-link .arr { transform: translateX(3px); }

/* AIdvisors Einordnung — Q&A accordions on the EU-AI-Act topic pages */
.qa { max-width: 760px; margin-top: 10px; }
.qa details { border-top: 1px solid var(--line-soft); }
.qa details:last-of-type { border-bottom: 1px solid var(--line-soft); }
.qa summary { list-style: none; cursor: pointer; position: relative; padding: 22px 42px 22px 0; font-weight: 600; font-size: 17px; line-height: 1.42; color: var(--ink-900); transition: color .15s var(--ease); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--gold-text); }
.qa summary .qa-tag { display: inline-block; margin-right: 10px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--gold-text); background: var(--fill-quiet); padding: 3px 9px; border-radius: 100px; vertical-align: 1px; }
.qa summary::after { content: ""; position: absolute; right: 8px; top: 26px; width: 9px; height: 9px; border-right: 2px solid var(--ink-500); border-bottom: 2px solid var(--ink-500); transform: rotate(45deg); transition: transform .2s var(--ease); }
.qa details[open] summary::after { transform: rotate(-135deg); }
.qa-body { padding: 0 0 26px; max-width: 70ch; }
.qa-body p { font-size: 15.5px; line-height: 1.72; color: var(--ink-600); margin: 0 0 14px; }
.qa-body strong { color: var(--ink-900); font-weight: 600; }
.qa-body ul { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 8px; }
.qa-body ul li { position: relative; padding-left: 22px; font-size: 15.5px; line-height: 1.6; color: var(--ink-600); }
.qa-body ul li::before { content: "—"; position: absolute; left: 0; color: var(--ink-400); }
.qa-body ol { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 8px; }
.qa-body ol li { font-size: 15.5px; line-height: 1.6; color: var(--ink-600); padding-left: 4px; }
.qa-meta { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--line-soft); display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; font-weight: 500; color: var(--ink-500); }
.qa-back { margin-top: 40px; }

/* directory foot — status (verified / in progress) + website link */
.betrieb-foot { justify-content: space-between; flex-wrap: wrap; gap: 10px 14px; }
.betrieb-status { display: inline-flex; align-items: center; gap: 8px; }
.betrieb-status.is-verified { color: var(--navy-900); }
.betrieb-status.is-progress { color: var(--ink-500); }
.betrieb-web { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--gold-text); white-space: nowrap; }
.betrieb-web .arr { transition: transform .2s var(--ease); }
.betrieb-web:hover .arr { transform: translateX(3px); }

/* SMART AI watermark overlay — translucent mark, bottom-right of each card photo */
.betrieb-photo::before {
  content: ""; position: absolute; z-index: 2; pointer-events: none;
  right: -4px; bottom: -10px; width: 37%; aspect-ratio: 1 / 1;
  background: #fff;
  -webkit-mask: url(assets/smart-ai-mark.png) no-repeat bottom right / contain;
  mask: url(assets/smart-ai-mark.png) no-repeat bottom right / contain;
  opacity: .34;
}

/* ── Mobile: solide Navbar ──────────────────────────────────────────────────
   iOS rendert backdrop-filter auf sticky-Elementen unzuverlässig — die milchige
   Bar wirkt dann fast transparent und der Seiteninhalt scheint beim Scrollen
   durch. Auf Touch-Grössen darum: deckende Bar und kompaktere Höhe. */
@media (max-width: 860px) {
  .nav {
    /* iOS: sticky hinkt beim Ein-/Ausfahren der Safari-Adressleiste nach und
       gibt oben einen Streifen Seiteninhalt frei — fixed klebt an der Kante.
       Das Milchglas zieht per Safe-Area-Polster bis ÜBER Statusleiste/Kamera
       (braucht viewport-fit=cover im Viewport-Meta der Seiten). */
    position: fixed;
    left: 0; right: 0; top: 0;
  }
  body { padding-top: 64px; }
  .nav-inner { height: 64px; padding: 0 20px; gap: 20px; }
  .wrap { padding: 0 20px; }
  section { padding: 72px 0; scroll-margin-top: 64px; }
  .sec-head { margin-bottom: 36px; }
}



/* ── Sprachumschalter (6 Sprachen) ──────────────────────────────────────────
   <details>-basiert: kein JavaScript, funktioniert auch ohne JS und mit
   Tastatur. Bei sechs Sprachen ist eine Kürzel-Reihe zu breit — daher Dropdown. */
.lang-switch { position: relative; margin-left: 10px; }
.lang-switch > summary {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 6px 10px; border-radius: var(--radius-sm); list-style: none;
  background: rgba(30, 43, 54, .06); color: var(--ink-700);
  font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
}
.lang-switch > summary::-webkit-details-marker { display: none; }
.lang-switch > summary:hover { color: var(--ink-900); }
.lang-switch > summary svg { opacity: .55; transition: transform .18s var(--ease); }
.lang-switch[open] > summary svg { transform: rotate(180deg); }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40;
  min-width: 172px; padding: 6px; border-radius: var(--radius);
  background: var(--white); border: 1px solid var(--line);
  box-shadow: 0 12px 34px rgba(30, 43, 54, .14);
}
.lang-menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 10px; border-radius: 6px; font-size: 13.5px; font-weight: 500;
  color: var(--ink-700);
}
.lang-menu a:hover { background: var(--fill-quiet); color: var(--ink-900); }
.lang-menu a[aria-current] { background: var(--fill-quiet); color: var(--ink-900); font-weight: 600; }
.lang-menu a::after { display: none !important; }
.lang-menu .code { font-size: 11.5px; font-weight: 600; color: var(--ink-400); letter-spacing: .04em; }
/* Auf Mobile bleibt der Umschalter sichtbar, auch wenn die Nav-Links ausblenden. */
@media (max-width: 860px) {
  .lang-switch { margin-left: auto; }
  .lang-switch > summary { padding: 6px 9px; }
}