/* ==========================================================================
   rheinweb — Rheintaler Webdesign
   Gemeinsames Stylesheet für index.html und pdf-analyse.html.
   Farben & Schriften strikt nach CD-Manual/CD-Manual.md:
     Tinte #10171C · Tiefenblau #16344A · Flussblau #2C7BA6 / #5FA8CC
     Nebelgrau #8FA9B8 / #6E8794 · Papierweiss #F6F8F9
     Manrope (Display, 400 + 800 wie in der Wortmarke)
     JetBrains Mono (Claim-/Label-Schrift, wie im Logo-Claim)
     Inter (Fliesstext)
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */
:root{
  /* Marke */
  --ink:#10171C;
  --navy:#16344A;
  --navy-deep:#0D2537;
  --accent:#2C7BA6;
  --accent-light:#5FA8CC;
  --accent-dark:#1F5C7D;
  --mist:#8FA9B8;
  --mist-strong:#6E8794;
  --paper:#F6F8F9;
  --line:#E1E8EC;
  --white:#FFFFFF;

  /* Signalfarben für Scores (harmonisiert auf die Markenpalette) */
  --good:#1F8A5B;
  --warn:#D08A12;
  --bad:#C2503A;

  /* Typografie */
  --display:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Raster */
  --wrap:1160px;
  --gutter:24px;
  --radius:16px;
  --radius-lg:22px;
  --header-h:88px;

  /* Schatten */
  --shadow-sm:0 1px 2px rgba(13,37,55,.06);
  --shadow-md:0 14px 34px -18px rgba(13,37,55,.30);
  --shadow-lg:0 34px 70px -34px rgba(13,37,55,.42);

  --ease:cubic-bezier(.22,1,.36,1);
}

/* --- 2. Reset ----------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
*{margin:0;padding:0;}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px);-webkit-text-size-adjust:100%;}
body{
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button,input,select,textarea{font:inherit;color:inherit;}
button{background:none;border:none;cursor:pointer;}
ul{list-style:none;}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;}

/* --- 3. Layout & Typografie -------------------------------------------- */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);}
.wrap--narrow{max-width:820px;}

section{padding:clamp(68px,8.5vw,116px) 0;position:relative;}

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:400;
  color:var(--navy);
  line-height:1.08;
  letter-spacing:-.025em;
}
/* Gewichtskontrast wie in der Wortmarke: "rheın" 400 + "web" 800 */
h1 strong,h2 strong,h3 strong,h4 strong{font-weight:800;color:inherit;}
h1 em,h2 em{font-style:normal;font-weight:800;color:var(--accent);}

h1{font-size:clamp(38px,5.4vw,64px);}
h2{font-size:clamp(30px,3.8vw,46px);}
h3{font-size:clamp(19px,1.5vw,22px);line-height:1.25;letter-spacing:-.015em;}
h4{font-size:17px;line-height:1.3;}

p{color:var(--mist-strong);}
.lead{font-size:clamp(16.5px,1.35vw,19px);color:var(--mist-strong);line-height:1.62;}

/* Claim-/Label-Stil — greift die Logo-Zeile "RHEINTALER WEBDESIGN" auf */
.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--accent);
  display:inline-flex;
  align-items:center;
  gap:11px;
  margin-bottom:18px;
}
.eyebrow::before{content:"";width:24px;height:2px;background:currentColor;border-radius:2px;flex-shrink:0;}
.eyebrow--center{justify-content:center;}

.section-head{max-width:760px;margin-bottom:clamp(38px,4.5vw,60px);}
.section-head--center{margin-inline:auto;text-align:center;}
.section-head--center .eyebrow{justify-content:center;}
.section-head p{margin-top:18px;font-size:17px;}

.section-head--split{
  max-width:none;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:44px;align-items:end;
}
.section-head--split p{margin-top:0;padding-bottom:6px;}

/* Flächen-Modifier */
.bg-paper{background:var(--paper);}
.bg-dark{background:var(--navy-deep);color:#D7E3EA;overflow:hidden;}
.bg-dark > .wrap{position:relative;z-index:2;}
.bg-dark h1,.bg-dark h2,.bg-dark h3,.bg-dark h4{color:var(--white);}
.bg-dark p{color:#9FB6C4;}
.bg-dark .eyebrow{color:var(--accent-light);}

/* --- 4. Buttons --------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 24px;border-radius:11px;
  font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:-.005em;
  border:1.5px solid transparent;white-space:nowrap;cursor:pointer;
  transition:transform .18s var(--ease),background .2s ease,color .2s ease,
             border-color .2s ease,box-shadow .25s ease;
}
.btn svg{width:16px;height:16px;flex-shrink:0;transition:transform .25s var(--ease);}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);}
.btn:hover svg:last-child{transform:translateX(3px);}

.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover{background:var(--accent-dark);box-shadow:0 14px 30px -12px rgba(44,123,166,.75);}
.btn-dark{background:var(--navy);color:#fff;}
.btn-dark:hover{background:var(--navy-deep);box-shadow:0 14px 30px -14px rgba(13,37,55,.7);}
.btn-outline{background:transparent;border-color:var(--line);color:var(--navy);}
.btn-outline:hover{border-color:var(--navy);background:var(--navy);color:#fff;}
.btn-ghost{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.28);color:#fff;}
.btn-ghost:hover{background:#fff;color:var(--navy);border-color:#fff;}
.btn-light{background:#fff;color:var(--navy);}
.btn-light:hover{background:var(--paper);box-shadow:0 14px 30px -14px rgba(0,0,0,.5);}
.btn-block{width:100%;}
.btn-sm{padding:11px 18px;font-size:14px;}
.btn[disabled]{opacity:.75;cursor:progress;transform:none;}

/* Textlink mit Pfeil */
.link-arrow{
  display:inline-flex;align-items:center;gap:7px;
  font-weight:600;font-size:15px;color:var(--accent);
  border-bottom:1.5px solid rgba(44,123,166,.3);padding-bottom:2px;
  transition:color .2s ease,border-color .2s ease;
}
.link-arrow svg{width:15px;height:15px;transition:transform .25s var(--ease);}
.link-arrow:hover{color:var(--accent-dark);border-color:var(--accent-dark);}
.link-arrow:hover svg{transform:translateX(4px);}

/* --- 5. Header ---------------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:80;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease,box-shadow .3s ease,background .3s ease;
}
.site-header.is-stuck{border-bottom-color:var(--line);box-shadow:0 6px 24px -18px rgba(13,37,55,.6);}
.site-header .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:28px;
  height:var(--header-h);transition:height .3s var(--ease);
}
.site-header.is-stuck .wrap{height:74px;}

/* Kopfzeile: die WORTMARKE (ohne Claim). Ihre SVG-Box misst 725.25 x 284 gegenüber
   725.25 x 362 beim Logo mit Claim. Bei gleicher Renderhöhe erscheint der Schriftzug
   dadurch um den Faktor 362/284 = 1.275 grösser — genau der gewünschte Effekt: die
   Höhe bleibt, die Marke wird deutlicher.

   Sichtbare Breite = 677.25/284 = 2.385 x Renderhöhe, bei 64px also rund 153px.
   Die 120-px-Mindestbreite aus dem CD-Manual gilt nur für die Fassung MIT Claim —
   die Wortmarke ist dort ausdrücklich die Alternative für kleinere Grössen.

   Die Fassung mit Claim steht weiterhin in der Fusszeile und auf dem gedruckten
   Report-Blatt, wo der Claim Sinn ergibt. */
.brand{display:flex;align-items:center;flex-shrink:0;}
.brand img{height:64px;width:auto;transition:height .3s var(--ease);}
.site-header.is-stuck .brand img{height:54px;}

.nav{display:flex;align-items:center;gap:34px;}
.nav-links{display:flex;align-items:center;gap:28px;}
.nav-links a{
  position:relative;font-size:14.5px;font-weight:500;color:var(--ink);
  padding:4px 0;transition:color .2s ease;
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:var(--accent);border-radius:2px;
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);
}
.nav-links a:hover{color:var(--accent);}
.nav-links a:hover::after{transform:scaleX(1);}

.nav-toggle{
  display:none;width:44px;height:44px;border-radius:11px;border:1px solid var(--line);
  align-items:center;justify-content:center;flex-direction:column;gap:5px;flex-shrink:0;
}
.nav-toggle span{
  display:block;width:18px;height:2px;background:var(--navy);border-radius:2px;
  transition:transform .3s var(--ease),opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* Mobile-Drawer */
.nav-drawer{
  position:fixed;inset:var(--header-h) 0 0;z-index:75;
  background:rgba(255,255,255,.98);backdrop-filter:blur(16px);
  padding:28px var(--gutter) 40px;
  display:none;flex-direction:column;gap:4px;
  overflow-y:auto;
}
.nav-drawer.is-open{display:flex;animation:drawerIn .32s var(--ease);}
.nav-drawer a{
  font-family:var(--display);font-size:22px;font-weight:400;color:var(--navy);
  padding:14px 0;border-bottom:1px solid var(--line);
}
.nav-drawer a:last-of-type{border-bottom:none;}
.nav-drawer .btn{margin-top:22px;}
@keyframes drawerIn{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:none;}}

/* --- 6. Hero ------------------------------------------------------------ */
.hero{
  position:relative;background:var(--paper);overflow:hidden;
  padding:clamp(48px,6vw,80px) 0 clamp(72px,9vw,116px);
}
/* Aurora aus zwei Markenblautönen — bewegt sich sehr langsam */
.hero::before{
  content:"";position:absolute;inset:-40% -15% auto -15%;height:110%;
  background:
    radial-gradient(42% 52% at 20% 34%, rgba(44,123,166,.22), transparent 68%),
    radial-gradient(38% 48% at 80% 18%, rgba(95,168,204,.24), transparent 70%),
    radial-gradient(34% 44% at 58% 78%, rgba(22,52,74,.10), transparent 72%);
  filter:blur(14px);pointer-events:none;
  animation:drift 26s ease-in-out infinite alternate;
}
/* Feines Raster — bewusst auf die linke Textspalte begrenzt. Über der rechten
   Hälfte ist es ausgeblendet, sonst überlagert es den Globus und beides wird zu Rauschen. */
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:
    linear-gradient(rgba(22,52,74,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(22,52,74,.07) 1px,transparent 1px);
  background-size:68px 68px;
  -webkit-mask-image:radial-gradient(56% 78% at 14% 34%,#000 0%,rgba(0,0,0,.6) 46%,transparent 74%);
  mask-image:radial-gradient(56% 78% at 14% 34%,#000 0%,rgba(0,0,0,.6) 46%,transparent 74%);
}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1);}
  100%{transform:translate3d(-3%,3%,0) scale(1.1);}
}
.hero .wrap{position:relative;z-index:2;}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(38px,5vw,72px);align-items:center;}

.hero h1{margin-bottom:22px;}
.hero .lead{max-width:520px;margin-bottom:30px;}

.region-strip{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mist-strong);margin-bottom:22px;
}
.region-strip span{display:inline-flex;align-items:center;gap:14px;}
.region-strip span::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--accent);opacity:.55;}
.region-strip span:last-child::after{display:none;}

.usp-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:32px;}
.usp{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 15px;border-radius:999px;background:rgba(255,255,255,.85);
  border:1px solid var(--line);font-size:13.5px;font-weight:600;color:var(--navy);
  box-shadow:var(--shadow-sm);
}
.usp svg{width:15px;height:15px;color:var(--accent);flex-shrink:0;}

.hero-actions{display:flex;flex-wrap:wrap;gap:12px;}

/* --- 7. Gratis-Check-Karte --------------------------------------------- */
.check-card{
  position:relative;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:clamp(22px,2.4vw,30px);
  box-shadow:var(--shadow-lg);
}
.check-card::before{
  content:"";position:absolute;left:26px;right:26px;top:0;height:3px;border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-light),var(--navy));
}
.check-card-head{display:flex;align-items:center;gap:11px;margin-bottom:6px;}
.check-card-head .drop{
  width:10px;height:10px;border-radius:50%;background:var(--accent);flex-shrink:0;
  position:relative;
}
.check-card-head .drop::after{
  content:"";position:absolute;inset:0;border-radius:50%;background:var(--accent);
  animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{
  0%{transform:scale(1);opacity:.55;}
  70%,100%{transform:scale(3.2);opacity:0;}
}
.check-card-head .label{
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);
}
.check-card h2{font-size:clamp(22px,2vw,26px);margin-bottom:6px;}
.check-card .check-sub{font-size:14.5px;margin-bottom:20px;}

.field{margin-bottom:12px;}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--navy);margin-bottom:7px;}
.field input,.field select,.field textarea{
  width:100%;padding:14px 16px;border:1.5px solid var(--line);border-radius:11px;
  font-family:var(--sans);font-size:15px;background:var(--white);
  transition:border-color .2s ease,box-shadow .2s ease;
}
.field textarea{resize:vertical;min-height:120px;line-height:1.55;}
.field input::placeholder,.field textarea::placeholder{color:#A9BAC4;}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(44,123,166,.12);
}
.field-row{display:flex;gap:12px;}
.field-row .field{flex:1;min-width:0;}

.consent{
  display:flex;align-items:flex-start;gap:10px;
  margin:14px 0 18px;font-size:13px;line-height:1.5;color:var(--mist-strong);cursor:pointer;
}
.consent input{margin-top:3px;accent-color:var(--accent);flex-shrink:0;width:16px;height:16px;}
.consent a{color:var(--accent);text-decoration:underline;}

.check-note{
  display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:16px;
  font-size:12.5px;color:var(--mist-strong);
}
.check-note span{display:inline-flex;align-items:center;gap:6px;}
.check-note svg{width:13px;height:13px;color:var(--good);flex-shrink:0;}

.spinner{
  width:16px;height:16px;border-radius:50%;flex-shrink:0;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

.form-error{
  display:none;margin-top:14px;padding:11px 14px;border-radius:10px;
  background:rgba(194,80,58,.08);border:1px solid rgba(194,80,58,.25);
  font-size:13px;color:var(--bad);font-weight:500;
}
.form-error.show{display:block;}

/* --- Rechtstexte (Impressum, Datenschutz, AGB) -------------------------- */
/* Bewusst schmale Zeilen und ruhige Typografie: Diese Seiten werden gelesen,
   nicht überflogen. */
.rechtstext{max-width:760px;margin-inline:auto;padding-inline:var(--gutter);}
.rechtstext-kopf{padding:clamp(40px,6vw,72px) 0 clamp(24px,3vw,36px);}
.rechtstext-kopf h1{font-size:clamp(30px,4vw,44px);margin-bottom:14px;}
.rechtstext-kopf .lead{max-width:640px;}
.rechtstext-stand{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mist-strong);margin-top:18px;display:block;
}

.rechtstext h2{
  font-size:clamp(21px,2.2vw,26px);
  margin:clamp(38px,4vw,54px) 0 14px;
  padding-bottom:10px;border-bottom:1px solid var(--line);
}
.rechtstext h3{font-size:17px;margin:26px 0 8px;}
.rechtstext p{margin-bottom:14px;font-size:15.5px;line-height:1.68;}
.rechtstext ul,.rechtstext ol{margin:0 0 16px 2px;padding-left:22px;}
.rechtstext ul{list-style:disc;}
.rechtstext ol{list-style:decimal;}
.rechtstext li{margin-bottom:7px;font-size:15.5px;line-height:1.6;color:var(--mist-strong);}
.rechtstext li::marker{color:var(--accent);}
.rechtstext strong{color:var(--navy);}
.rechtstext a{color:var(--accent);text-decoration:underline;overflow-wrap:anywhere;}
.rechtstext address{font-style:normal;line-height:1.7;font-size:15.5px;color:var(--mist-strong);}

.rechtstext-tabelle{overflow-x:auto;margin-bottom:20px;}
.rechtstext-tabelle table{border-collapse:collapse;width:100%;font-size:14px;min-width:520px;}
.rechtstext-tabelle th,.rechtstext-tabelle td{
  border:1px solid var(--line);padding:9px 12px;text-align:left;vertical-align:top;
  color:var(--mist-strong);
}
.rechtstext-tabelle th{background:var(--paper);color:var(--navy);font-weight:700;}

/* Für Punkte, die man wirklich nicht überlesen soll. */
.rechtstext-kasten{
  background:var(--paper);border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:0 12px 12px 0;
  padding:18px 22px;margin:0 0 20px;
}
.rechtstext-kasten p:last-child{margin-bottom:0;}
.rechtstext-kasten p{font-size:14.5px;}

.rechtstext-ende{
  margin:clamp(44px,5vw,64px) 0 clamp(60px,7vw,90px);
  padding-top:24px;border-top:1px solid var(--line);
  display:flex;gap:20px;flex-wrap:wrap;font-size:14px;
}
.rechtstext-ende a{color:var(--accent);}

/* Hinweis nach einer bei Stripe abgebrochenen Bestellung */
.abbruch-hinweis{
  background:#FFF8E8;border:1px solid #E8D5A8;border-radius:12px;
  padding:15px 18px;margin-bottom:28px;font-size:14.5px;color:#7A5A12;
  line-height:1.55;
}
.abbruch-hinweis strong{color:#5C4409;}

/* --- 8. Ergebnis-Sektion ------------------------------------------------ */
.results{display:none;background:var(--white);border-top:1px solid var(--line);}
.results.is-visible{display:block;animation:fadeUp .6s var(--ease);}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}

.results-notice{
  display:none;margin:0 auto 26px;max-width:640px;text-align:center;
  padding:11px 16px;border-radius:11px;background:rgba(208,138,18,.09);
  border:1px solid rgba(208,138,18,.28);font-size:13px;color:#96650D;font-weight:500;
}
.results-notice.show{display:block;}

.score-panel{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,3.4vw,48px);
  align-items:center;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(26px,3.2vw,40px);margin-bottom:26px;
}
/* Ohne @property ist --pct nur ein Text-Token und der Ring würde springen.
   Registriert als <number> kann der Browser ihn interpolieren. Browser ohne
   @property-Unterstützung zeigen den Endwert einfach sofort an. */
@property --pct{syntax:'<number>';inherits:false;initial-value:0;}

.score-ring{
  --pct:0;--ring:var(--good);
  width:156px;height:156px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  background:conic-gradient(var(--ring) calc(var(--pct) * 3.6deg), var(--line) 0);
  transition:--pct 1.2s var(--ease), background-color .4s ease;
}
.score-ring-inner{
  width:122px;height:122px;border-radius:50%;background:var(--white);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:inset 0 0 0 1px rgba(22,52,74,.05);
}
.score-ring-num{font-family:var(--display);font-size:42px;font-weight:800;color:var(--navy);line-height:1;}
.score-ring-label{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mist-strong);margin-top:6px;}

.score-domain{
  font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--accent);
  margin-bottom:10px;word-break:break-all;
}
.score-verdict{font-size:16px;color:var(--mist-strong);line-height:1.6;margin-bottom:18px;}
.score-verdict b{color:var(--navy);font-weight:700;}

/* Der vom Kunden gewünschte Hinweis direkt beim Score */
.pdf-hint{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:16px 18px;border-radius:13px;
  background:var(--white);border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
}
.pdf-hint-icon{
  width:38px;height:38px;border-radius:10px;flex-shrink:0;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--accent),var(--accent-dark));color:#fff;
}
.pdf-hint-icon svg{width:18px;height:18px;}
.pdf-hint-text{flex:1;min-width:200px;}
.pdf-hint-text strong{display:block;font-size:14.5px;color:var(--navy);font-weight:700;}
.pdf-hint-text span{font-size:13px;color:var(--mist-strong);}

.results-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:30px;
}
.result-card{
  background:var(--white);border:1px solid var(--line);border-radius:14px;padding:20px;
  transition:border-color .25s ease,transform .25s var(--ease),box-shadow .25s ease;
}
.result-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:#CFDCE4;}
.result-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.result-icon{
  width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  background:var(--navy);color:#fff;
}
.result-icon svg{width:17px;height:17px;}
.result-num{font-family:var(--display);font-weight:800;font-size:20px;color:var(--navy);}
.result-card h4{font-family:var(--sans);font-size:13.5px;font-weight:700;color:var(--navy);margin-bottom:11px;}
.result-track{height:6px;border-radius:999px;background:var(--line);overflow:hidden;}

/* Karte ohne Bewertung — entweder grundsätzlich nicht gewertet
   (Verkaufspotenzial) oder im Einzelfall nicht messbar (Ladezeit ohne Antwort
   von Google).
   BEWUSST NUR ZURÜCKGENOMMEN, NICHT ROT: Es ist kein schlechtes Ergebnis,
   sondern gar keines. Ein Warnton würde genau den falschen Eindruck erzeugen,
   den wir hier vermeiden wollen. */
.result-card--neutral{background:var(--paper);}
.result-card--neutral .result-track{opacity:.45;}
.result-card--neutral .result-verdict{font-size:11.5px;line-height:1.45;}
.result-fill{height:100%;width:0;border-radius:999px;background:var(--good);transition:width 1.1s var(--ease);}
.result-verdict{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-top:10px;}

/* Handy gegen Computer auf der Geschwindigkeits-Kachel.
   -------------------------------------------------------------------------
   ERSTE FASSUNG WAR FALSCH GEBAUT (04.08.2026): Label über Zahl, beide Paare
   nebeneinander. In einer Kachel, die im Viererraster nur gut 250 px breit ist,
   lief die gesperrte Versalschrift "COMPUTER" in die Zahl daneben.

   Jetzt untereinander, Beschriftung links, Zahl rechts — wie eine kleine
   Tabelle. Das kann bei keiner Kachelbreite kollidieren, weil die Zeile
   umbrechen darf statt zu überlappen.

   Schrift wie im Rest der Kachel: Beschriftung in der Fliesstextschrift wie die
   Überschrift darüber, die Zahl in der Displayschrift wie die grosse Zahl oben.
   Vorher stand hier gesperrte Monoschrift — die gehört auf dieser Kachel nur
   der Bewertungszeile ganz unten. */
.result-split{
  display:flex;flex-direction:column;gap:7px;
  margin-top:12px;padding-top:11px;border-top:1px solid var(--line);
}
.result-split[hidden]{display:none;}
.result-split span{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  min-width:0;
}
.result-split i{
  font-family:var(--sans);font-style:normal;font-size:12.5px;font-weight:600;
  color:var(--mist-strong);
}
.result-split b{
  font-family:var(--display);font-size:16px;font-weight:800;color:var(--navy);
  font-variant-numeric:tabular-nums;flex:0 0 auto;
}

/* Prüfliste — derzeit auf der Sicherheits-Kachel.
   -------------------------------------------------------------------------
   Grüner Haken für bestanden, rotes Ausrufezeichen für fehlend. WICHTIG: Die
   Farbe trägt nie allein. Jede Zeile hat zusätzlich ein eigenes Symbol (Haken
   gegen Ausrufezeichen) und ihren Text — rund jeder zwölfte Mann unterscheidet
   Rot und Grün schlecht, und für ihn wäre eine reine Farbcodierung wertlos.

   Der Fachbegriff steht als title-Attribut an der Zeile, nicht im Text: Ein
   Betriebsinhaber soll "Schutz gegen Klickfallen" lesen, sein IT-Betreuer beim
   Darüberfahren "X-Frame-Options" finden. */
.pruefliste{
  display:flex;flex-direction:column;gap:6px;
  margin-top:13px;padding-top:12px;border-top:1px solid var(--line);
}
.pruefliste[hidden]{display:none;}
.pruefliste li{
  display:flex;align-items:center;gap:8px;
  font-size:12.5px;line-height:1.35;color:var(--mist-strong);
}
.pruefliste svg{width:15px;height:15px;flex:0 0 auto;}
.pl-kreis{fill:currentColor;opacity:.13;}
.pl-zeichen{
  fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;
}
.pruefliste li.is-ok{color:var(--good);}
/* Bestandene Punkte treten zurück, fehlende stehen vorn — man liest die
   Liste, um zu sehen, was FEHLT. */
.pruefliste li.is-ok span{color:var(--mist-strong);}
.pruefliste li.is-weg{color:var(--bad);}
.pruefliste li.is-weg span{color:var(--ink);font-weight:600;}

/* Ein Befund im Klartext unter der Kachel. "SEO 89" sagt niemandem etwas —
   "Titel 72 Zeichen, Google zeigt etwa 60" schon. Erscheint nur, wenn es
   wirklich etwas zu sagen gibt. */
.result-note{
  margin-top:10px;font-size:12px;line-height:1.5;color:var(--mist-strong);
}
.result-note[hidden]{display:none;}

.results-cta{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center;
  background:var(--navy-deep);border-radius:var(--radius-lg);
  padding:clamp(26px,3.2vw,40px);color:#fff;overflow:hidden;position:relative;
}
.results-cta::after{
  content:"";position:absolute;right:-90px;top:-90px;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(95,168,204,.30),transparent 68%);pointer-events:none;
}
.results-cta h3{color:#fff;margin-bottom:9px;position:relative;}
.results-cta p{color:#9FB6C4;font-size:14.5px;max-width:520px;position:relative;}
.results-cta-actions{display:flex;flex-wrap:wrap;gap:11px;position:relative;}

.results-reset{
  display:block;width:fit-content;margin:22px auto 0;
  font-size:13.5px;color:var(--mist-strong);text-decoration:underline;
  text-underline-offset:3px;transition:color .2s ease;
}
.results-reset:hover{color:var(--accent);}

/* --- 9. Ablauf (So läuft's ab) ------------------------------------------ */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;position:relative;}
.step{
  position:relative;padding:28px 24px 26px;border-radius:var(--radius);
  background:var(--white);border:1px solid var(--line);
  transition:transform .3s var(--ease),box-shadow .3s ease,border-color .3s ease;
}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#CFDCE4;}
.step-num{
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.2em;
  color:var(--accent);margin-bottom:16px;display:block;
}
.step h3{margin-bottom:9px;}
.step p{font-size:14.5px;}
.step::after{
  content:"";position:absolute;top:34px;right:-9px;width:18px;height:1px;
  background:var(--line);z-index:1;
}
.step:last-child::after{display:none;}

.deadline-strip{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 32px;
  margin-top:34px;padding:22px 28px;border-radius:var(--radius);
  background:linear-gradient(135deg,var(--navy),var(--accent-dark));color:#fff;
  box-shadow:var(--shadow-md);
}
.deadline-strip .item{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:600;}
.deadline-strip svg{width:18px;height:18px;color:var(--accent-light);flex-shrink:0;}

/* --- 10. Leistungen (dunkles Band) -------------------------------------- */
.svc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;}
.svc{
  padding:28px 24px;border-radius:var(--radius);
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.10);
  transition:transform .3s var(--ease),background .3s ease,border-color .3s ease;
}
.svc:hover{transform:translateY(-5px);background:rgba(255,255,255,.08);border-color:rgba(95,168,204,.45);}
.svc-icon{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:18px;
  background:linear-gradient(140deg,var(--accent),var(--accent-dark));color:#fff;
  box-shadow:0 10px 24px -12px rgba(44,123,166,.9);
}
.svc-icon svg{width:20px;height:20px;}
.svc h3{margin-bottom:9px;}
.svc p{font-size:14.5px;}

/* --- 11. Vorher / Nachher ----------------------------------------------- */
.ba-toggle{
  position:relative;display:inline-flex;padding:5px;border-radius:999px;
  background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-sm);
  margin-bottom:32px;
}
.ba-thumb{
  position:absolute;top:5px;left:5px;bottom:5px;width:calc(50% - 5px);border-radius:999px;
  background:var(--navy);transition:transform .38s var(--ease);z-index:0;
}
.ba-toggle[data-state="after"] .ba-thumb{transform:translateX(100%);background:var(--accent);}
.ba-btn{
  position:relative;z-index:1;min-width:132px;padding:11px 22px;border-radius:999px;
  font-size:14px;font-weight:600;color:var(--mist-strong);transition:color .3s ease;
}
.ba-btn.is-active{color:#fff;}

.ba-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;}
.ba-metric{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px;
}
.ba-metric h4{
  font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.02em;
  color:var(--mist-strong);text-transform:uppercase;margin-bottom:14px;
}
.ba-value{display:flex;align-items:baseline;gap:4px;margin-bottom:16px;}
.ba-num{
  font-family:var(--display);font-size:clamp(34px,3.4vw,44px);font-weight:800;
  color:var(--navy);line-height:1;font-variant-numeric:tabular-nums;
  transition:color .45s ease;
}
.ba-unit{font-family:var(--display);font-size:17px;font-weight:700;color:var(--mist);}
.ba-track{height:8px;border-radius:999px;background:var(--line);overflow:hidden;}
.ba-fill{height:100%;width:0;border-radius:999px;background:var(--bad);transition:width .8s var(--ease),background .45s ease;}
.ba-metric.is-after .ba-num{color:var(--accent);}
.ba-metric.is-after .ba-fill{background:var(--good);}
.ba-caption{margin-top:14px;font-size:12.5px;color:var(--mist-strong);}
.ba-disclaimer{
  margin-top:22px;font-size:12.5px;color:var(--mist-strong);font-style:italic;
}

/* --- 12. Pakete --------------------------------------------------------- */
.pkg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch;}
.pkg{
  position:relative;display:flex;flex-direction:column;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:32px 28px 30px;
  transition:transform .3s var(--ease),box-shadow .3s ease,border-color .3s ease;
}
.pkg:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:#CFDCE4;}
.pkg--featured{
  background:linear-gradient(165deg,var(--navy),var(--navy-deep));border-color:var(--navy);
  box-shadow:var(--shadow-lg);
}
.pkg--featured h3,.pkg--featured .pkg-price{color:#fff;}
.pkg--featured .pkg-tagline,.pkg--featured .pkg-meta{color:#9FB6C4;}
.pkg--featured .pkg-list li{color:#D7E3EA;}
.pkg--featured .pkg-list svg{color:var(--accent-light);}
.pkg--featured .pkg-label{color:var(--accent-light);}

.pkg-flag{
  position:absolute;top:-12px;left:28px;
  background:var(--accent);color:#fff;border-radius:999px;padding:5px 14px;
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  box-shadow:0 8px 20px -10px rgba(44,123,166,.9);
}
.pkg-label{
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mist-strong);margin-bottom:12px;display:block;
}
.pkg h3{font-size:23px;margin-bottom:8px;}
.pkg-tagline{font-size:14px;color:var(--mist-strong);margin-bottom:22px;}
.pkg-price{
  font-family:var(--display);font-weight:800;font-size:clamp(28px,2.6vw,34px);
  color:var(--navy);line-height:1;letter-spacing:-.03em;
}
.pkg-price .cur{font-size:16px;font-weight:700;color:var(--mist);margin-right:6px;letter-spacing:0;}
.pkg-meta{font-size:12.5px;color:var(--mist-strong);margin-top:8px;margin-bottom:24px;}
.pkg-list{margin-bottom:28px;display:grid;gap:11px;}
.pkg-list li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--ink);line-height:1.45;}
.pkg-list svg{width:16px;height:16px;color:var(--good);flex-shrink:0;margin-top:3px;}
.pkg .btn{margin-top:auto;}

.pkg-footnote{
  margin-top:30px;text-align:center;font-size:13.5px;color:var(--mist-strong);
}
.pkg-footnote strong{color:var(--navy);font-weight:600;}

/* Betreuungs-Pakete — kompaktere Variante */
.care-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
.care{
  display:flex;flex-direction:column;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px;
  transition:transform .3s var(--ease),box-shadow .3s ease,border-color .3s ease;
}
.care:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#CFDCE4;}
.care-icon{
  width:40px;height:40px;border-radius:11px;display:grid;place-items:center;margin-bottom:18px;
  background:var(--paper);border:1px solid var(--line);color:var(--accent);
}
.care-icon svg{width:18px;height:18px;}
.care h3{font-size:20px;margin-bottom:6px;}
.care .pkg-price{font-size:26px;margin:14px 0 4px;}
.care .pkg-price .per{font-size:14px;font-weight:600;color:var(--mist-strong);letter-spacing:0;}

/* --- 13. Warum rheinweb / Region ---------------------------------------- */
.why-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
.why{padding:26px 24px;border-radius:var(--radius);background:var(--paper);border:1px solid var(--line);}
.why-icon{
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;margin-bottom:16px;
  background:var(--white);border:1px solid var(--line);color:var(--accent);
}
.why-icon svg{width:17px;height:17px;}
.why h3{font-size:18px;margin-bottom:8px;}
.why p{font-size:14.5px;}

/* Kleine Zeile ueber den Regionskarten. Sie kostet fast nichts und nimmt die
   letzte Moeglichkeit, die vier Karten fuer vier Standorte zu halten. */
.region-hint{
  text-align:center;margin-top:34px;
  font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--mist);
}
.region-hint + .region-grid{margin-top:16px;}
.region-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:34px;}
.region-card{
  padding:22px 20px;border-radius:14px;text-align:center;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  transition:background .3s ease,transform .3s var(--ease),border-color .3s ease;
}
.region-card:hover{background:rgba(255,255,255,.09);transform:translateY(-4px);border-color:rgba(95,168,204,.45);}
.region-card strong{display:block;font-family:var(--display);font-size:19px;font-weight:800;color:#fff;margin-bottom:5px;}
.region-card span{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#8FA9B8;}

/* --- 14. FAQ ------------------------------------------------------------ */
.faq-list{max-width:820px;margin-inline:auto;}
.faq-item{
  border:1px solid var(--line);border-radius:14px;margin-bottom:12px;overflow:hidden;
  background:var(--white);transition:border-color .25s ease,box-shadow .25s ease;
}
.faq-item.is-open{border-color:#CFDCE4;box-shadow:var(--shadow-md);}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:20px 24px;text-align:left;
  font-family:var(--sans);font-size:16px;font-weight:600;color:var(--navy);
}
.faq-plus{position:relative;width:20px;height:20px;flex-shrink:0;}
.faq-plus::before,.faq-plus::after{
  content:"";position:absolute;background:var(--accent);border-radius:2px;
  transition:transform .3s var(--ease);
}
.faq-plus::before{width:14px;height:2px;top:9px;left:3px;}
.faq-plus::after{width:2px;height:14px;top:3px;left:9px;}
.faq-item.is-open .faq-plus::after{transform:rotate(90deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s var(--ease);}
.faq-a-inner{padding:0 24px 22px;font-size:15px;color:var(--mist-strong);line-height:1.65;}

/* --- 15. Kontakt -------------------------------------------------------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,4.5vw,64px);align-items:start;}
.contact-info .lead{margin-bottom:28px;}
.contact-points{display:grid;gap:16px;margin-bottom:30px;}
.contact-point{display:flex;gap:14px;align-items:flex-start;}
.contact-point-icon{
  width:38px;height:38px;border-radius:10px;flex-shrink:0;display:grid;place-items:center;
  background:var(--paper);border:1px solid var(--line);color:var(--accent);
}
.contact-point-icon svg{width:17px;height:17px;}
.contact-point strong{display:block;font-size:14.5px;color:var(--navy);font-weight:700;margin-bottom:2px;}
.contact-point span,.contact-point a{font-size:14px;color:var(--mist-strong);}
.contact-point a:hover{color:var(--accent);}

.contact-form{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(24px,2.8vw,34px);box-shadow:var(--shadow-md);
}
.form-success{
  display:none;text-align:center;padding:18px 0 6px;
}
.form-success.show{display:block;}
.success-circle{
  width:54px;height:54px;border-radius:50%;background:var(--good);color:#fff;
  display:grid;place-items:center;margin:0 auto 18px;
  animation:pop .45s var(--ease);
}
.success-circle svg{width:24px;height:24px;}
@keyframes pop{from{transform:scale(.6);opacity:0;}to{transform:scale(1);opacity:1;}}
.form-success h3{margin-bottom:8px;}
.form-success p{font-size:14.5px;}

/* --- 16. Footer --------------------------------------------------------- */
.site-footer{background:var(--navy-deep);color:#9FB6C4;padding:clamp(52px,6vw,76px) 0 0;}
.footer-grid{
  display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:36px;padding-bottom:44px;
}
.footer-brand img{height:70px;width:auto;margin-bottom:18px;margin-left:-6px;}
.footer-claim{font-size:14px;color:#9FB6C4;max-width:290px;line-height:1.6;}
.footer-col h4{
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent-light);margin-bottom:16px;
}
.footer-col a,.footer-col span{
  display:block;font-size:14px;color:#9FB6C4;margin-bottom:11px;transition:color .2s ease;
}
.footer-col a:hover{color:#fff;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.10);padding:22px 0 26px;
  display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;justify-content:space-between;
  font-size:13px;color:#7A94A4;
}
.footer-bottom a:hover{color:#fff;}

/* --- 17. Modal ---------------------------------------------------------- */
.modal{
  position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  padding:20px;background:rgba(13,37,55,.62);backdrop-filter:blur(4px);
}
.modal.is-open{display:flex;animation:fadeIn .22s ease;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
.modal-card{
  position:relative;width:100%;max-width:480px;max-height:92vh;overflow-y:auto;
  background:var(--white);border-radius:var(--radius-lg);padding:32px 30px 30px;
  box-shadow:0 40px 90px -30px rgba(13,37,55,.7);
  animation:modalIn .3s var(--ease);
}
@keyframes modalIn{from{opacity:0;transform:translateY(18px) scale(.98);}to{opacity:1;transform:none;}}
.modal-close{
  position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:10px;
  background:var(--paper);color:var(--mist-strong);display:grid;place-items:center;
  transition:background .2s ease,color .2s ease;
}
.modal-close:hover{background:var(--line);color:var(--navy);}
.modal-card h3{margin-bottom:6px;padding-right:30px;}
.modal-sub{font-size:14px;margin-bottom:22px;}
.modal-plan{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:var(--paper);border:1px solid var(--line);border-radius:12px;
  padding:14px 17px;margin-bottom:22px;
}
.modal-plan .plan-name{font-size:14.5px;font-weight:700;color:var(--navy);}
.modal-plan .plan-price{font-family:var(--display);font-size:20px;font-weight:800;color:var(--accent);}
.modal-note{font-size:12px;color:var(--mist-strong);margin:-4px 0 18px;line-height:1.5;}

/* --- 18. Cookie-Banner -------------------------------------------------- */
.cookie{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:150;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;
  max-width:var(--wrap);margin-inline:auto;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 22px;box-shadow:var(--shadow-lg);
  animation:cookieIn .5s .6s var(--ease) backwards;
}
@keyframes cookieIn{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:none;}}
.cookie p{font-size:13px;max-width:660px;line-height:1.55;}
.cookie a{color:var(--accent);text-decoration:underline;}
.cookie-actions{display:flex;gap:10px;flex-shrink:0;}
.cookie.is-hidden{display:none;}

/* --- 19. Scroll-Reveal -------------------------------------------------- */
.reveal{
  opacity:0;transform:translateY(24px);
  transition:opacity .75s var(--ease),transform .75s var(--ease);
  transition-delay:calc(var(--i,0) * 85ms);
}
.reveal.is-in{opacity:1;transform:none;}

/* Der erste Bildschirm blendet NICHT ein.
   -------------------------------------------------------------------------
   GEMESSEN AM 04.08.2026 (Google Lighthouse, Mobil): Das LCP-Element der
   Startseite ist der Absatz ".hero-copy p.lead". Von seinen 3,4 Sekunden
   entfielen 3,3 auf "Element render delay" — der Absatz war längst geladen,
   stand aber noch auf opacity:0 und wartete auf 170 ms Verzögerung plus
   750 ms Überblendung.

   Eine Animation, die zeigt, was ohnehin schon da ist, kostet also eine ganze
   Sekunde in der Messung. Unterhalb der Falzkante ist das gratis — dort hat
   der Besucher die Zeit, hinzuscrollen. Im Hero nicht.

   Der Rest der Seite behält den Auftritt unverändert. */
.hero .reveal{
  opacity:1;transform:none;transition:none;
}

/* --- 20. Responsive ----------------------------------------------------- */
@media (max-width:1080px){
  .results-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .steps,.svc-grid,.ba-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .step::after{display:none;}
  .pkg-grid,.care-grid,.why-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .pkg-grid > :last-child:nth-child(odd),
  .care-grid > :last-child:nth-child(odd),
  .why-grid > :last-child:nth-child(odd){grid-column:span 2;}
}

@media (max-width:900px){
  :root{--header-h:76px;}
  .nav-links,.nav .btn{display:none;}
  .nav-toggle{display:flex;}
  .brand img{height:54px;}
  .site-header.is-stuck .brand img{height:50px;}
  .site-header.is-stuck .wrap{height:68px;}
  .hero-grid{grid-template-columns:1fr;}
  .section-head--split{grid-template-columns:1fr;gap:20px;}
  .section-head--split p{padding-bottom:0;}
  .score-panel{grid-template-columns:1fr;justify-items:center;text-align:center;}
  .score-domain,.score-verdict{text-align:center;}
  .pdf-hint{text-align:left;}
  .results-cta{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .region-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width:620px){
  :root{--gutter:18px;}
  .results-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .steps,.svc-grid,.ba-grid,.pkg-grid,.care-grid,.why-grid{grid-template-columns:1fr;}
  .pkg-grid > :last-child:nth-child(odd),
  .care-grid > :last-child:nth-child(odd),
  .why-grid > :last-child:nth-child(odd){grid-column:auto;}
  .field-row{flex-direction:column;gap:0;}
  .hero-actions .btn,.results-cta-actions .btn{width:100%;}
  .ba-btn{min-width:0;flex:1;}
  .ba-toggle{display:flex;width:100%;}
  .cookie{left:10px;right:10px;bottom:10px;padding:16px;}
  .cookie-actions{width:100%;}
  .cookie-actions .btn{flex:1;}
  .footer-bottom{flex-direction:column;align-items:flex-start;}
}

@media (max-width:420px){
  .results-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
}

/* --- 21. Reduzierte Bewegung -------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none;}
}

/* --- 22. Print ---------------------------------------------------------- */
@media print{
  .site-header,.cookie,.modal,.results-cta,.nav-drawer{display:none !important;}
  body{background:#fff;}
  .reveal{opacity:1;transform:none;}
}

/* Abschnitt 23 ("Unterseite Website PDF-Analyse") steht seit dem 04.08.2026 in
   assets/pdf-analyse.css. Er wurde nur von pdf-analyse.html gebraucht, die
   nicht mehr ausgeliefert wird — hier hielt er bei jedem Aufruf der Startseite
   4 KB lang das Rendern auf. */

/* --- 24. Globus (bewegter Hintergrund) ---------------------------------- */
/* Gezeichnet wird in assets/globe.js auf Canvas — orthografische Projektion
   mit echten Küstenlinien, Rückseiten-Verdeckung und taumelnder Achse.
   Hier steht nur noch Grösse und Platzierung. */
.globe{
  --gs:clamp(400px,46vw,660px);
  position:absolute;pointer-events:none;z-index:1;
  width:var(--gs);height:var(--gs);
}
.globe canvas{display:block;width:100%;height:100%;}

/* Hero: die Kugel schiebt sich hinter die Check-Karte, ihre freien Bögen liegen
   ober- und unterhalb davon im rechten Rand — dort ist das Raster ausgeblendet. */
.hero-globe{right:-11%;top:50%;transform:translateY(-50%);opacity:.85;}

/* Einsatzgebiet: mittig hinter den Regionskarten, freistehend auf Dunkelblau. */
.region-globe{
  --gs:clamp(460px,58vw,780px);
  left:50%;top:50%;transform:translate(-50%,-50%);opacity:.9;
}

/* --- 25. Über mich ------------------------------------------------------ */
.about-grid{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(32px,4.5vw,68px);align-items:center;
}
.about-media{position:relative;padding-bottom:34px;padding-right:26px;}
.about-photo{position:relative;width:220px;max-width:100%;}
/* Versetzte Farbfläche hinter dem Bild — greift den Verlauf der Marke auf. */
.about-photo::before{
  content:"";position:absolute;inset:18px -18px -18px 18px;border-radius:20px;
  background:linear-gradient(150deg,var(--accent),var(--navy));opacity:.18;
}
.about-photo img{
  position:relative;width:100%;height:auto;border-radius:20px;
  border:1px solid var(--line);box-shadow:var(--shadow-lg);
}
.about-card{
  position:absolute;left:96px;bottom:0;
  display:flex;flex-direction:column;gap:2px;
  background:var(--white);border:1px solid var(--line);border-radius:13px;
  padding:12px 18px;box-shadow:var(--shadow-md);white-space:nowrap;
}
.about-card strong{font-size:14.5px;font-weight:700;color:var(--navy);}
.about-card span{
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mist-strong);
}

.about-text p{font-size:16.5px;line-height:1.68;margin-bottom:16px;}
.about-text p:last-of-type{margin-bottom:0;}
.about-stats{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
  margin:30px 0 28px;padding:22px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.about-stats div{display:flex;flex-direction:column;gap:3px;}
.about-stats strong{
  font-family:var(--display);font-size:clamp(20px,2vw,25px);font-weight:800;
  color:var(--navy);line-height:1.1;letter-spacing:-.02em;
}
.about-stats span{font-size:13px;color:var(--mist-strong);line-height:1.4;}

/* Ansprechpartner im Kontaktbereich */
.contact-person{
  display:flex;align-items:center;gap:14px;margin-bottom:26px;
  padding:14px 16px;border-radius:14px;
  background:var(--paper);border:1px solid var(--line);
}
.contact-person picture{display:block;flex-shrink:0;}
.contact-person img{
  width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:center 22%;
  flex-shrink:0;border:2px solid var(--white);box-shadow:var(--shadow-sm);
}
.contact-person strong{display:block;font-size:15px;color:var(--navy);font-weight:700;}
.contact-person span{font-size:13.5px;color:var(--mist-strong);}

@media (max-width:900px){
  .about-grid{grid-template-columns:1fr;justify-items:start;}
  /* Auf schmalen Screens rutscht die Kugel unter die Check-Karte, sonst liegt sie
     komplett dahinter und man sieht wieder nur Linienfragmente. */
  .hero-globe{--gs:clamp(300px,76vw,440px);right:-20%;top:auto;bottom:-6%;transform:none;opacity:.55;}
  .region-globe{--gs:clamp(380px,92vw,560px);opacity:.75;}
}
@media (max-width:620px){
  .about-stats{grid-template-columns:1fr;gap:16px;}
  .about-media{padding-right:0;}
  .about-card{position:static;margin-top:16px;width:fit-content;max-width:100%;white-space:normal;}
  .about-photo::before{inset:14px -14px -14px 14px;}
}

/* Raster-Varianten für Seiten mit 3 Schritten bzw. 2 Paketen. Bewusst als Klasse
   und nicht als Inline-Style, damit die Media-Queries unten noch greifen können. */
.steps--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.pkg-grid--2{max-width:820px;margin-inline:auto;grid-template-columns:repeat(2,minmax(0,1fr));}

@media (max-width:900px){
  /* .page-hero-* gehört zu pdf-analyse.html und steht jetzt dort im eigenen
     Stylesheet — siehe assets/pdf-analyse.css. */
  .cta-band{grid-template-columns:1fr;}
  .steps--3{grid-template-columns:1fr;}
}
@media (max-width:820px){
  .pkg-grid--2{grid-template-columns:1fr;}
}
@media (max-width:620px){
  .cta-band-actions .btn{width:100%;}
  .doc{transform:none;}
}