/* ============================================================
   easylocal — Sichtbarkeits-Check

   Ergaenzt die Basis-Styles der Seite, ersetzt sie NICHT. Kopf, Fuss,
   Typografie, Knoepfe (.pill) und Karten kommen aus dem eingebetteten
   <style> der Seite – hier stehen nur die Bausteine, die es dort nicht
   gibt: Formular, Score-Ring, Geo-Grid-Karte, Wettbewerbertabellen.

   Die Variablen unten sind Bruecken: Das Tool wurde mit anderen Namen
   gebaut, easylocal benennt dieselben Dinge anders. Statt 450 Zeilen
   umzuschreiben, zeigen die alten Namen hier auf die echten Tokens.
   ============================================================ */

:root{
  --surface:       #ffffff;
  --surface-2:     #faf8f4;
  --surface-3:     var(--cream, #f5f2ec);
  --line-strong:   rgba(13,58,45,.20);

  --text:          var(--el-green-house, #0d3a2d);
  --text-mute:     rgba(13,58,45,.66);
  --text-dim:      rgba(13,58,45,.48);

  /* Im Original hiess der Akzent „purple". Hier ist er gruen. */
  --purple:        var(--el-green-deep, #00936d);
  --purple-light:  #00875f;
  --purple-pale:   var(--el-green-house, #0d3a2d);
  --purple-border: rgba(0,147,109,.40);
  --green:         #00875f;

  --grad-cta:      linear-gradient(189deg, #00c795 0%, #00875f 76%);
  --grad-accent:   linear-gradient(80deg, #14543f 8%, #00936d 40%, #00b789 72%, #00b789 100%);

  --radius:        12px;
  --radius-lg:     var(--r-card, 16px);

  --ff-head:  var(--font-sans);
  --ff-body:  var(--font-sans);
  --ff-mono:  var(--font-mono);
  --ff-fancy: var(--font-serif);

  --maxw: 1180px;
  --ease: cubic-bezier(.22,1,.36,1);

  /* Ranking-Skala – auf hellem Grund abgedunkelt, sonst zu blass */
  --rank-1:   #00734f;
  --rank-3:   #1f9c66;
  --rank-7:   #6d9b22;
  --rank-10:  #b98a00;
  --rank-15:  #cc6f22;
  --rank-20:  #c93f33;
  --rank-40:  #a82828;
  --rank-60:  #7d1f3c;
  --rank-none:#a9a498;

  /* Warn- und Fehlerfarben: Die Vorlage war fuer dunklen Grund gebaut,
     dort funktionieren helles Rot und Gelb. Auf Cream sind sie
     unlesbar – hier die abgedunkelten Entsprechungen. */
  --warn:      #a8760a;
  --warn-bg:   rgba(201,151,0,.10);
  --warn-line: rgba(201,151,0,.32);
  --bad:       #c0392b;
  --bad-bg:    rgba(192,57,43,.09);
  --bad-line:  rgba(192,57,43,.30);
}

/* Abschnittsraster – easylocal kennt .container, aber keine .section-Abstaende
   fuer eine reine Werkzeugseite. */
.section{padding:56px 0}
.section--tight{padding:36px 0}
.section:first-of-type{padding-top:24px}


/* ------------------------------------------------------------
   Aus dem Basis-Style der Startseite uebernommen.
   Die Checkout-Vorlage, auf der diese Seite aufsetzt, traegt nur
   einen Teil davon – diese Regeln fehlten deshalb.
   ------------------------------------------------------------ */
.display{
  font:700 clamp(40px, 5.2vw, 68px)/1.04 var(--font-sans);
  letter-spacing:-0.035em; color:var(--el-green-house);
}
.display em{font-style:italic; font-family:var(--font-serif); font-weight:500; color:var(--el-green)}
.h2{font:700 clamp(28px, 3.2vw, 44px)/1.08 var(--font-sans); letter-spacing:-0.03em; color:var(--el-green-house)}
.h2 em{font-style:italic; font-family:var(--font-serif); font-weight:500; color:var(--el-green)}
.h3{font:600 21px/1.25 var(--font-sans); letter-spacing:-0.02em; color:var(--el-green-house)}

/* Abschnittsueberschrift im Report.
   .h2 ist fuer Landingpage-Sektionen gebaut (bis 44px). Ein Report hat
   neun davon untereinander – in dieser Groesse schreien alle gleich laut
   und die Rangfolge verschwindet. Eine Stufe darunter genuegt: der Score
   oben bleibt der Hauptdarsteller. */
.head-block .h2{
  font:700 clamp(24px, 2.2vw, 30px)/1.15 var(--font-sans);
  letter-spacing:-0.025em;
}
.h4{font:600 17px/1.3 var(--font-sans); letter-spacing:-0.015em; color:var(--el-green-house)}
.lede{font:400 18px/1.6 var(--font-sans); color:var(--ink-soft); max-width:60ch; letter-spacing:var(--tracking-body)}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font:500 12px/1 var(--font-mono); letter-spacing:0.14em; text-transform:uppercase;
  color:var(--el-green-deep); background:var(--el-green-wash);
  padding:7px 12px; border-radius:var(--r-pill);
}
.eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--el-green); display:inline-block}
.pill--lg{height:52px; padding:0 26px; font-size:16px}
.pill--sm{height:36px; padding:0 14px; font-size:13px}
.pill--inverted{background:#fff; color:var(--el-green-deep); border-color:#fff}
.micro{font:500 12px/1 var(--font-mono); letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-faint)}

/* ------------------------------------------------------------
   Bausteine, die es nur hier gibt
   ------------------------------------------------------------ */
/* Knopf ueber die volle Breite – .pill ist inline-flex */
.tool-btn-block{display:flex; width:100%; justify-content:center}
/* Hinweiszeile unter einem Knopf */
.btn-note{
  margin-top:12px; font:400 13px/1.55 var(--font-sans); color:var(--ink-faint);
}
.btn-note a{color:var(--el-green-deep)}
/* Ueberschriftenblock eines Abschnitts */
.head-block{max-width:60ch; margin-bottom:22px}
.head-block .h2, .head-block .h3{margin:0 0 10px}
.head-block .lede{margin:0}
/* Bewertungskategorie im Score-Block */
.cat{margin-bottom:16px}
.cat:last-child{margin-bottom:0}
/* Textspalte einer Wettbewerberzeile */
.rival__body{min-width:0}


/* ------------------------------------------------------------
   BROWSER-OBERFLAECHEN

   Textauswahl, Schreibmarke, Fokusring, Bildlaufleiste und die
   Ziffernbreite liefert der Browser in Grautoenen, die zu keinem
   Design-System gehoeren. Sie hier mitzunehmen ist der billigste
   Unterschied zwischen einer gebauten und einer zusammengesetzten
   Seite.
   ------------------------------------------------------------ */
::selection{background:rgba(0,183,137,.22); color:var(--el-green-house)}

.audit-form input, .audit-form select, #gate-form input, #send-form input, #lead-form input{
  caret-color:var(--el-green-deep);
}

/* Sichtbar nur bei Tastaturbedienung – mit der Maus stoert der Ring. */
main :focus-visible{
  outline:2px solid var(--el-green-deep);
  outline-offset:2px;
  border-radius:4px;
}

/* Zahlen in Tabellen und Kennwerten duerfen nicht springen. */
table td, table th, .rank-pill, .rival__rank, .score-ring__num, .cat__val, .gap__count{
  font-variant-numeric:tabular-nums;
}

@supports (scrollbar-color: auto) {
  main{scrollbar-color:rgba(13,58,45,.28) transparent; scrollbar-width:thin}
}
main ::-webkit-scrollbar{width:10px; height:10px}
main ::-webkit-scrollbar-track{background:transparent}
main ::-webkit-scrollbar-thumb{
  background:rgba(13,58,45,.22); border-radius:99px;
  border:3px solid var(--cream); background-clip:padding-box;
}
main ::-webkit-scrollbar-thumb:hover{background:rgba(13,58,45,.36); background-clip:padding-box}

/* ============================================================
   TOOLSPEZIFISCH
   ============================================================ */

/* Gleiche Optik wie .hero der uebrigen Seiten – die Kopfzeile ist
   sticky, kein Vorlauf noetig. */
.tool-hero{
  padding:72px 0 36px; text-align:center; position:relative;
  background:
    radial-gradient(900px 460px at 92% 0%, var(--el-green-wash), transparent 70%),
    var(--cream);
}
.tool-hero .display{max-width:940px; margin:18px auto 22px}
.tool-hero .lede{max-width:640px; margin:0 auto}

/* --- Formular ------------------------------------------------ */
.audit-form{
  max-width:760px; margin:44px auto 0; text-align:left;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:32px;
  box-shadow:0 30px 70px rgba(13,58,45,.18);
}
.field{margin-bottom:22px}
.field:last-of-type{margin-bottom:0}
.field label{
  display:block; font-family:var(--ff-mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-dim); margin-bottom:9px;
}
.field .hint{font-size:13px; color:var(--text-dim); margin-top:7px; line-height:1.5}
.input, select.input{
  /* 16px ist Untergrenze: iOS zoomt bei kleineren Feldern beim Antippen. */
  width:100%; padding:15px 17px; font:inherit; font-size:16px; color:var(--text);
  background:var(--surface-3); border:1px solid var(--line-strong);
  border-radius:var(--radius); transition:border-color .18s, box-shadow .18s;
}
.input::placeholder{color:#6b6b6b}
.input:focus{outline:none; border-color:var(--purple-border); box-shadow:0 0 0 3px rgba(0,147,109,.18)}
.input:disabled{opacity:.5}
select.input{appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a8a8a' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 17px center; padding-right:44px;
}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.field-error{color:var(--bad); font-size:13px; margin-top:7px}
.input.is-invalid{border-color:var(--bad); box-shadow:0 0 0 3px var(--bad-bg)}

/* Checkbox-Zeilen sind selbst <label> und dürfen die Feld-Label-Optik
   (Mono, Uppercase, Sperrsatz) nicht erben – sonst wird Fließtext
   zu gesperrten Großbuchstaben. */
.field label.checkline, .checkline{
  display:flex; gap:11px; align-items:flex-start;
  font-family:var(--ff-body); font-size:16px; font-weight:400;
  letter-spacing:normal; text-transform:none;
  color:var(--text-mute); line-height:1.55; cursor:pointer; margin-bottom:0;
}
.checkline input{margin-top:3px; width:17px; height:17px; accent-color:var(--purple); flex:none; cursor:pointer}
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}

/* SAB-Hinweis */
.notice{
  display:flex; gap:12px; align-items:flex-start;
  background:rgba(0,147,109,.07); border:1px solid rgba(0,147,109,.26);
  border-radius:var(--radius); padding:15px 17px; font-size:16px;
  color:var(--text-mute); line-height:1.6; margin-top:20px;
}
.notice svg{flex:none; color:var(--purple-light); margin-top:2px}
.notice strong{color:var(--text); font-weight:600}
.notice--warn{background:var(--warn-bg); border-color:var(--warn-line)}
.notice--warn svg{color:var(--warn)}
.notice--err{background:var(--bad-bg); border-color:var(--bad-line)}
.notice--err svg{color:var(--bad)}

/* --- Ladezustand --------------------------------------------- */
.loading{text-align:center; padding:70px 0}
.spinner{
  width:44px; height:44px; margin:0 auto 22px; border-radius:50%;
  border:3px solid rgba(0,147,109,.2); border-top-color:var(--purple-light);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.loading__step{font-family:var(--ff-mono); font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim)}

/* --- Ergebnis: Score ----------------------------------------- */
.result{display:none}
.result.is-visible{display:block; animation:fade .5s var(--ease)}
@keyframes fade{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}

.score-head{
  display:grid; grid-template-columns:auto 1fr; gap:38px; align-items:center;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:36px;
}
.score-ring{position:relative; width:168px; height:168px; flex:none; container-type:inline-size}
.score-ring svg{width:100%; height:100%; display:block; transform:rotate(-90deg)}
.score-ring__val{
  position:absolute; inset:0; display:grid; place-items:center; text-align:center;
}
.score-ring__num{font-family:var(--ff-head); font-size:clamp(30px,26cqw,46px); font-weight:500; line-height:1; letter-spacing:-.03em}
.score-ring__max{font-family:var(--ff-mono); font-size:11px; color:var(--text-dim); letter-spacing:.14em; margin-top:5px}
/* Der Betriebsname ist das Subjekt des ganzen Reports und steht
   ueber den Abschnittsueberschriften. */
.score-biz h2{
  font:700 clamp(27px, 2.6vw, 34px)/1.12 var(--font-sans);
  letter-spacing:-0.03em; margin-bottom:6px;
}
.score-biz__meta{font-size:16px; color:var(--text-dim); margin-bottom:18px}
.score-label{
  display:inline-flex; align-items:center; gap:9px; font-size:16px;
  padding:7px 15px; border-radius:999px; font-family:var(--ff-mono);
  letter-spacing:.06em; margin-bottom:20px;
}
.score-label[data-tone="good"]{background:rgba(74,222,128,.12); border:1px solid rgba(74,222,128,.35); color:var(--green)}
.score-label[data-tone="ok"]{background:rgba(163,230,53,.1); border:1px solid rgba(163,230,53,.3); color:#a3e635}
.score-label[data-tone="warn"]{background:var(--warn-bg); border:1px solid var(--warn-line); color:var(--warn)}
.score-label[data-tone="bad"]{background:var(--bad-bg); border:1px solid var(--bad-line); color:var(--bad)}
.score-label[data-tone="neutral"]{background:rgba(13,58,45,.05); border:1px solid var(--line-strong); color:var(--text-mute)}

.cats{display:grid; gap:15px}
.cat__top{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:7px; font-size:16px}
.cat__name{color:var(--text-mute)}
.cat__weight{font-family:var(--ff-mono); font-size:11px; color:var(--text-dim); letter-spacing:.08em}
.cat__val{font-family:var(--ff-head); font-size:16px; color:var(--text)}
.cat__bar{height:7px; border-radius:99px; background:rgba(13,58,45,.07); overflow:hidden}
/* scaleX statt width: der Balken waechst ohne Layout-Neuberechnung.
   Die Fuellung wird per --fill (0..1) von aussen gesetzt. */
.cat__fill{
  height:100%; border-radius:99px; background-image:var(--grad-cta);
  width:100%; transform:scaleX(var(--fill,0)); transform-origin:left center;
  transition:transform .9s var(--ease);
}

/* --- Kennzahlen ---------------------------------------------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:22px}
.stat{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:18px 18px 16px;
}
/* Der Zustand steckt in der Zahl, nicht in einem Streifen daneben.
   Ein farbiger Balken an der Kartenkante ist Dekoration – die Zahl
   ist ohnehin das Erste, worauf das Auge landet. */
.stat[data-tone="good"] .stat__v{color:var(--green)}
.stat[data-tone="ok"]   .stat__v{color:var(--warn)}
.stat[data-tone="bad"]  .stat__v{color:var(--bad)}
.stat__k{
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-dim); margin-bottom:10px;
}
.stat__v{
  font-family:var(--ff-head); font-size:34px; line-height:1;
  letter-spacing:-.025em; color:var(--text);
  font-variant-numeric:tabular-nums;
}
.stat__unit{font-size:.55em; color:var(--text-mute); margin-left:3px; letter-spacing:0}
.stat__sub{font-size:11px; color:var(--text-dim); margin-top:8px; line-height:1.4}

/* --- Geo-Grid-Karte ------------------------------------------ */
.map-wrap{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--line-strong); background:var(--surface-2);
}
#map{height:520px; width:100%; background:var(--cream)}
.leaflet-container{background:var(--cream) !important; font-family:var(--ff-body) !important}
.leaflet-control-attribution{
  background:rgba(255,255,255,.85) !important; color:rgba(13,58,45,.55) !important; font-size:11px !important;
}
.leaflet-control-attribution a{color:#8a8a8a !important}
.leaflet-control-zoom a{
  background:var(--surface-3) !important; color:var(--text) !important;
  border-color:var(--line-strong) !important;
}
.leaflet-control-zoom a:hover{background:var(--el-green-wash) !important}
.leaflet-popup-content-wrapper, .leaflet-popup-tip{
  background:var(--surface-3) !important; color:var(--text) !important;
  border:1px solid var(--line-strong); border-radius:12px !important;
}
.leaflet-popup-content{margin:13px 15px !important; font-size:13px !important; line-height:1.5 !important}

.dot-marker{
  display:grid; place-items:center; border-radius:50%;
  font-family:var(--ff-head); font-weight:600; font-size:11px; color:#0c0c0c;
  border:2px solid rgba(12,12,12,.55); box-shadow:0 3px 10px rgba(13,58,45,.18);
}
.dot-marker--none{color:#fff}
.dot-marker--self{
  border:3px solid #fff; box-shadow:0 0 0 4px rgba(0,147,109,.45), 0 4px 14px rgba(13,58,45,.18);
  z-index:1000;
}

/* Vorschaltung: Kartenkacheln werden erst nach Zustimmung geladen,
   weil dabei die IP an den Kartenanbieter übertragen wird. */
.map-consent{
  display:grid; place-items:center; align-content:center; gap:13px;
  height:100%; padding:32px 26px; text-align:center;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(0,147,109,.1), rgba(0,147,109,0) 62%),
    var(--surface-2);
}
.map-consent svg{color:var(--purple-light); opacity:.85}
.map-consent h3{font-size:21px}
.map-consent p{
  color:var(--text-mute); font-size:16px; line-height:1.6; max-width:430px;
}
.map-consent .btn{padding:13px 26px; font-size:16px}
.map-consent .btn--ghost{padding:11px 22px; font-size:13px}

.legend{
  display:flex; flex-wrap:wrap; gap:9px; align-items:center;
  padding:16px 20px; border-top:1px solid var(--line); background:var(--surface);
  font-size:13px; color:var(--text-mute);
}
.legend__item{display:inline-flex; align-items:center; gap:7px}
.legend__swatch{width:15px; height:15px; border-radius:50%; border:1px solid rgba(13,58,45,.18)}
.legend__label{font-family:var(--ff-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); margin-right:4px}

/* --- Suchbegriff-Umschalter ----------------------------------- */
.kw-switch__label{
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--text-dim); margin-bottom:12px;
}
.kw-switch{display:flex; flex-wrap:wrap; gap:9px}
.kw-chip{
  font-family:var(--ff-body); font-size:16px; cursor:pointer;
  padding:11px 20px; border-radius:999px;
  background:rgba(13,58,45,.04); border:1px solid var(--line-strong);
  color:var(--text-mute); transition:border-color .18s, color .18s, background .18s;
}
.kw-chip:hover:not(:disabled){background:rgba(13,58,45,.07); color:var(--text)}
.kw-chip.is-active{
  background-image:var(--grad-cta); border-color:var(--purple-border);
  color:var(--text); box-shadow:0 4px 12px rgba(10,4,24,.45);
}
.kw-chip:disabled{opacity:.5; cursor:wait}
/* Punkt zeigt an, dass die Messung schon bereitliegt. */
.kw-chip.is-ready:not(.is-active)::after{
  content:""; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--green); margin-left:9px; vertical-align:middle;
}

/* --- Die drei staerksten Wettbewerber ------------------------- */
.top3{display:grid; gap:14px}
.rival{
  display:grid; grid-template-columns:auto 1fr; gap:18px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:24px 26px;
}
.rival__rank{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--ff-head); font-size:16px; font-weight:600; color:var(--text);
  background-image:var(--grad-cta); border:2px solid var(--purple-border);
  box-shadow:0 4px 12px rgba(10,4,24,.45);
}
.rival__name{font-family:var(--ff-head); font-size:21px; color:var(--text); line-height:1.25}
.rival__addr{font-size:13px; color:var(--text-dim); margin-top:4px}
.rival__nums{
  display:flex; flex-wrap:wrap; gap:18px; margin:14px 0 16px;
  font-size:13px; color:var(--text-dim);
}
.rival__nums b{
  font-family:var(--ff-head); font-size:21px; color:var(--text);
  display:block; margin-bottom:2px;
}
.rival__why{
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--purple-light); margin-bottom:9px;
}
.rival__list{display:grid; gap:7px}
.rival__list li{
  position:relative; padding-left:20px; font-size:16px;
  color:var(--text-mute); line-height:1.55;
}
.rival__list li::before{
  content:""; position:absolute; left:5px; top:9px;
  width:5px; height:5px; border-radius:50%; background:var(--purple);
}

/* --- Tabellen ------------------------------------------------ */
.table-scroll{overflow-x:auto; border-radius:var(--radius-lg); border:1px solid var(--line); background:var(--surface)}
table{width:100%; border-collapse:collapse; font-size:16px; min-width:620px}
thead th{
  text-align:left; padding:15px 18px; font-family:var(--ff-mono); font-size:11px;
  letter-spacing:.15em; text-transform:uppercase; color:var(--text-dim);
  border-bottom:1px solid var(--line); white-space:nowrap; font-weight:500;
}
tbody td{padding:15px 18px; border-bottom:1px solid var(--line); color:var(--text-mute); vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:rgba(13,58,45,.02)}
td.name{color:var(--text); font-weight:500}
td.num{font-family:var(--ff-mono); font-size:13px; white-space:nowrap}
.rank-pill{
  display:inline-grid; place-items:center; min-width:32px; height:26px; padding:0 9px;
  border-radius:8px; font-family:var(--ff-head); font-weight:600; font-size:13px; color:#0c0c0c;
}
.kw-tags{display:flex; flex-wrap:wrap; gap:5px}
.kw-tag{
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.05em;
  background:rgba(13,58,45,.05); border:1px solid var(--line); color:var(--text-dim);
  padding:3px 8px; border-radius:6px; white-space:nowrap;
}
.self-row td{background:rgba(0,147,109,.09) !important}
.self-row td.name{color:var(--purple-pale)}

/* --- To-dos --------------------------------------------------- */
.todos{display:grid; gap:13px}
.todo{
  display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:start;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:19px 22px;
  transition:border-color .2s;
}
.todo:hover{border-color:var(--line-strong)}
.todo__n{
  width:27px; height:27px; border-radius:50%; display:grid; place-items:center; flex:none;
  font-family:var(--ff-mono); font-size:11px; color:var(--text-dim);
  border:1px solid var(--line-strong); background:var(--surface-3);
}
.todo__text{font-size:16px; color:var(--text); line-height:1.6}
.todo__cat{font-family:var(--ff-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-dim); margin-top:6px}
.impact{
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  padding:5px 10px; border-radius:7px; white-space:nowrap; flex:none;
}
.impact[data-i="hoch"]{background:var(--bad-bg); color:var(--bad); border:1px solid var(--bad-line)}
.impact[data-i="mittel"]{background:var(--warn-bg); color:var(--warn); border:1px solid var(--warn-line)}
.impact[data-i="niedrig"]{background:rgba(13,58,45,.05); color:var(--text-dim); border:1px solid var(--line-strong)}

/* --- Onpage-Vergleich ----------------------------------------- */
.onpage{display:grid; gap:12px}
.gap{
  background:linear-gradient(180deg, var(--warn-bg), var(--surface) 58%);
  border:1px solid var(--line); border-radius:var(--radius); padding:19px 22px;
}
.gap__top{display:flex; justify-content:space-between; align-items:baseline; gap:14px; flex-wrap:wrap}
.gap__label{font-family:var(--ff-head); font-size:16px; color:var(--text)}
.gap__count{
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--warn); white-space:nowrap;
  background:var(--warn-bg); border:1px solid var(--warn-line);
  padding:4px 9px; border-radius:7px;
}
.gap__tip{color:var(--text-mute); font-size:16px; line-height:1.6; margin-top:8px}
.gap__who{color:var(--text-dim); font-size:11px; margin-top:7px; font-family:var(--ff-mono)}
.onpage__ok{display:flex; gap:14px; align-items:flex-start; color:var(--text-mute); font-size:16px; line-height:1.6}
.onpage__ok svg{color:var(--green); flex:none; margin-top:1px}
.onpage__ok strong{color:var(--text)}
.onpage__src{
  font-size:11px; color:var(--text-dim); margin-top:14px;
  font-family:var(--ff-mono); word-break:break-all;
}

/* --- Profil-Checkliste ---------------------------------------- */
.checks{display:grid; grid-template-columns:repeat(2,1fr); gap:11px}
.check{display:flex; align-items:center; gap:11px; font-size:16px; color:var(--text-mute)}
.check__ico{width:20px; height:20px; border-radius:50%; display:grid; place-items:center; flex:none}
.check--ok .check__ico{background:rgba(74,222,128,.15); color:var(--green)}
.check--no .check__ico{background:var(--bad-bg); color:var(--bad)}
.check--no{color:var(--text)}

/* --- CTA-Block ------------------------------------------------ */
.cta-box{
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(0,147,109,.16), rgba(0,147,109,0) 62%),
    var(--surface);
  border:1px solid var(--line-strong); border-radius:var(--radius-lg);
  padding:46px 38px; text-align:center;
}
.cta-box h2{margin-bottom:14px}
.cta-box .lead{max-width:560px; margin:0 auto 28px}

.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* --- Responsive ----------------------------------------------- */
@media (max-width:980px){
  .stats{grid-template-columns:1fr 1fr}
  .score-head{grid-template-columns:1fr; gap:28px; text-align:center; justify-items:center}
  .cats{width:100%}
}
@media (max-width:700px){
  body{font-size:16px}
  .section{padding:44px 0}
  .tool-hero{padding:44px 0 28px}
  .result .section:first-child{padding-top:26px}
  #gate{padding-top:26px}
  .audit-form{padding:24px}
  .card{padding:24px}
  .field-row{grid-template-columns:1fr}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .checks{grid-template-columns:1fr}
  .score-ring{width:128px; height:128px}
  .score-head{padding:24px 20px}
  .score-biz__meta{font-size:13px; line-height:1.45}
  .stats{grid-template-columns:1fr 1fr; gap:10px; margin-top:16px}
  .stat{padding:14px 14px 13px}
  .stat__v{font-size:27px}
  .stat__k{font-size:11px; letter-spacing:.1em}
  .stat__sub{font-size:11px; margin-top:6px}
  #map{height:420px}
  /* Legende bricht sonst aus dem Kartenrahmen heraus. */
  .legend{padding:12px 14px; gap:7px; font-size:11px}
  .legend__item{gap:5px}
  .legend__swatch{width:13px; height:13px}
  .map-consent{padding:26px 18px}
  .map-consent p{font-size:13px}
  .kw-chip{font-size:13px; padding:9px 15px}
  .kw-switch{gap:7px}
  .gap{padding:15px 16px}
  .gap__label{font-size:16px}
  .gap__tip{font-size:13px}
  .rival{grid-template-columns:auto 1fr; gap:13px; padding:18px}
  .rival__name{font-size:16px}
  .rival__rank{width:32px; height:32px; font-size:16px}
  .rival__nums{gap:14px; margin:11px 0 13px; font-size:11px}
  .rival__nums b{font-size:16px}
  .rival__list li{font-size:13px; padding-left:17px}
  table{font-size:13px; min-width:0}
  thead th, tbody td{padding:11px 12px}
  .todo{grid-template-columns:auto 1fr; gap:13px}
  .todo .impact{grid-column:2; justify-self:start; margin-top:8px}
  .cta-box{padding:34px 22px}
}
@media (hover:none){
  .footer li{margin-bottom:2px}
  .footer li a{display:inline-block; padding:11px 0; line-height:1.2}
  .footer__bot nav a{display:inline-block; padding:11px 4px}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}


/* ============================================================
   DRUCK — schlanker Fallback
   Die PDF-Funktion wurde entfernt. Was bleibt, ist genug, damit
   ein spontanes Strg+P keine tiefschwarze Seite ausgibt: heller
   Grund, dunkle Schrift, Bedienelemente raus.
   ============================================================ */
@media print{
  @page{ size:A4 portrait; margin:15mm 13mm; }

  /* Ranking-Farben müssen erhalten bleiben – eine Heatmap in
     Graustufen wäre wertlos. */
  *{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }

  html,body{ background:#fff !important; color:#111 !important; font-size:10.5pt; line-height:1.5; }

  .nav, .topstrip, .tool-hero, .audit-form, .loading, #lead-view, .cta-box,
  .pill, .burger, .skip, .foot, .mobnav, #send-block, #kw-switch, #gate,
  .leaflet-control-zoom, .map-consent{
    display:none !important;
  }

  .section{ padding:0 0 8mm !important; }
  .wrap{ max-width:none; padding-inline:0; }
  .result{ display:block !important; }

  /* Verlaufstexte werden auf Papier zu echtem Schwarz */
  .metal, .accent{
    background:none !important; -webkit-text-fill-color:#111 !important; color:#111 !important;
  }
  h1,h2,h3{ color:#111 !important; break-after:avoid; }
  .lead, .dim, .mute{ color:#444 !important; }
  .card, .map-wrap{ background:#fafafa !important; border:1px solid #ddd !important; }
  thead th{ color:#333 !important; border-bottom:1px solid #999 !important; }
  tbody td{ color:#333 !important; border-bottom:1px solid #e2e2e2 !important; }
  #map, .leaflet-container{ height:100mm !important; background:#fff !important; }
  .section, .map-wrap, .card{ break-inside:avoid; }
  a{ color:#111 !important; text-decoration:none; }
}