/* ==========================================================================
   Franchise1.de — Relaunch 2026
   Ein Stylesheet, keine Frameworks. Farben: Grün (Marke) + Anthrazit + Weiß.
   ========================================================================== */

:root {
  --gruen: #37801e;
  --gruen-dunkel: #2f6e1a;
  --gruen-hell: #eaf5e4;
  --anthrazit: #23282d;
  --grau: #5c646b;
  --grau-hell: #f5f7f4;
  --linie: #e3e7e1;
  --weiss: #ffffff;
  --rot: #c0392b;
  --radius: 12px;
  --schatten: 0 2px 12px rgba(35, 40, 45, 0.08);
  --schatten-hover: 0 6px 24px rgba(35, 40, 45, 0.14);
  --max-breite: 1080px;
}

/* Lokal gehostete Schrift (variabel 100–900), keine externen Requests */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--anthrazit);
  background: var(--weiss);
  line-height: 1.65;
  font-size: 17px;
}

img { max-width: 100%; height: auto; }

a { color: var(--gruen-dunkel); }

.container {
  max-width: var(--max-breite);
  margin: 0 auto;
  padding: 0 20px;
}

/* --------------------------------------------------------------------------
   Header & Navigation
   -------------------------------------------------------------------------- */

header {
  border-bottom: 1px solid var(--linie);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  max-width: var(--max-breite);
  margin: 0 auto;
}

.logo img { height: 52px; width: auto; display: block; }

nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

nav a {
  text-decoration: none;
  color: var(--anthrazit);
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 16px;
  transition: background 0.15s;
}

nav a:hover { background: var(--grau-hell); }

nav a.aktiv { background: var(--gruen); color: var(--weiss); }

nav a.nav-cta {
  background: var(--anthrazit);
  color: var(--weiss);
}

nav a.nav-cta:hover { background: var(--gruen-dunkel); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  background: var(--gruen);
  color: var(--weiss);
  text-decoration: none;
  font-weight: 700;
  font-size: 17px;
  padding: 14px 28px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

.btn:hover { background: var(--gruen-dunkel); transform: translateY(-1px); }

.btn.gross { font-size: 19px; padding: 16px 36px; }

.btn.sekundaer {
  background: var(--weiss);
  color: var(--anthrazit);
  border: 2px solid var(--linie);
}

.btn.sekundaer:hover { border-color: var(--gruen); color: var(--gruen-dunkel); background: var(--weiss); }

/* --------------------------------------------------------------------------
   Hero (Startseite)
   -------------------------------------------------------------------------- */

.hero {
  background: linear-gradient(180deg, var(--gruen-hell) 0%, var(--weiss) 100%);
  padding: 72px 0 56px;
  text-align: center;
}

.hero h1 {
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.2;
  max-width: 760px;
  margin: 0 auto 20px;
  letter-spacing: -0.5px;
}

.hero .unterzeile {
  font-size: clamp(17px, 2.4vw, 21px);
  color: var(--grau);
  max-width: 640px;
  margin: 0 auto 32px;
}

.hero .cta-gruppe { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.hero .hinweis { margin-top: 14px; font-size: 14px; color: var(--grau); }

/* Bildband unter dem Hero (zugeschnittene Banner der alten Seite) */

.hero-bild { max-width: var(--max-breite); margin: 44px auto 0; padding: 0 20px; }

.hero-bild img {
  display: block;
  width: 100%;
  height: clamp(160px, 26vw, 280px);
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}

/* Zahlen-Band (Proof) */

.zahlen-band {
  display: flex;
  justify-content: center;
  gap: clamp(24px, 6vw, 72px);
  flex-wrap: wrap;
  padding: 36px 20px;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  background: var(--weiss);
}

.zahl { text-align: center; }

.zahl strong { display: block; font-size: 30px; color: var(--gruen-dunkel); }

.zahl span { font-size: 15px; color: var(--grau); }

/* --------------------------------------------------------------------------
   Abschnitte
   -------------------------------------------------------------------------- */

section { padding: 56px 0; }

section.hell { background: var(--grau-hell); }

.section-kopf { text-align: center; max-width: 680px; margin: 0 auto 40px; }

.section-kopf h2 { font-size: clamp(24px, 3.6vw, 34px); margin-bottom: 12px; letter-spacing: -0.3px; }

.section-kopf p { color: var(--grau); font-size: 18px; }

/* Schmerz/Wunsch-Block (Startseite) */

.kontrast {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
}

.kontrast .karte { padding: 28px; }

.karte {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}

.karte h3 { margin-bottom: 10px; font-size: 20px; }

.karte.dunkel { background: var(--anthrazit); color: var(--weiss); border-color: var(--anthrazit); }

.karte.dunkel h3 { color: var(--weiss); }

.karte.dunkel p { color: #c9cfd4; }

.karte.gruen { background: var(--gruen-dunkel); color: var(--weiss); border-color: var(--gruen-dunkel); }

.karte.gruen h3 { color: var(--weiss); }

.karte.gruen p, .karte.gruen li { color: #ddefd4; }

/* Verweis-Karten ("Alle Systeme" / "Wissen") */

.weiter-karte { padding: 26px; text-decoration: none; color: inherit; display: block; transition: box-shadow 0.15s, transform 0.1s; }

.weiter-karte:hover { box-shadow: var(--schatten-hover); transform: translateY(-2px); }

.weiter-karte h3 { color: var(--gruen-dunkel); }

.weiter-karte p { color: var(--grau); margin-top: 8px; }

.karte ul { padding-left: 20px; margin-top: 8px; }

.karte li { margin-bottom: 6px; }

/* --------------------------------------------------------------------------
   Finder (Quiz)
   -------------------------------------------------------------------------- */

#finder { scroll-margin-top: 90px; }

.finder-box {
  max-width: 720px;
  margin: 0 auto;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 36px;
  min-height: 380px;
}

.finder-fortschritt {
  height: 6px;
  background: var(--linie);
  border-radius: 999px;
  margin-bottom: 28px;
  overflow: hidden;
}

.finder-fortschritt > div {
  height: 100%;
  background: var(--gruen);
  border-radius: 999px;
  transition: width 0.3s;
}

.finder-frage h3 { font-size: 22px; margin-bottom: 6px; }

.finder-frage .frage-hinweis { color: var(--grau); font-size: 15px; margin-bottom: 20px; }

.antworten { display: grid; gap: 10px; }

.antwort {
  display: block;
  width: 100%;
  text-align: left;
  padding: 14px 18px;
  background: var(--grau-hell);
  border: 2px solid transparent;
  border-radius: 10px;
  font-size: 16.5px;
  font-family: inherit;
  color: var(--anthrazit);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.antwort:hover { border-color: var(--gruen); background: var(--gruen-hell); }

.antwort.gewaehlt { border-color: var(--gruen); background: var(--gruen-hell); font-weight: 600; }

.finder-nav { display: flex; justify-content: space-between; margin-top: 26px; align-items: center; }

.finder-nav .zurueck {
  background: none;
  border: none;
  color: var(--grau);
  cursor: pointer;
  font-size: 15px;
  font-family: inherit;
  padding: 8px;
}

.finder-nav .zurueck:hover { color: var(--anthrazit); }

/* Finder-Ergebnis */

.ergebnis-kopf { text-align: center; margin-bottom: 24px; }

.ergebnis-kopf h3 { font-size: 24px; margin-bottom: 8px; }

.ergebnis-kopf p { color: var(--grau); }

.treffer { display: grid; gap: 14px; }

.treffer-karte {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--linie);
  border-radius: 10px;
  background: var(--weiss);
}

.treffer-karte .t-thumb {
  width: 128px;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.treffer-karte .t-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.treffer-karte .t-thumb span { font-size: 22px; font-weight: 800; opacity: 0.55; letter-spacing: 2px; }

.treffer-karte .t-text { flex: 1; min-width: 0; }

.treffer-karte .pitch {
  font-size: 14px;
  color: var(--grau);
  margin-top: 3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.treffer-karte .platz {
  font-size: 13px;
  font-weight: 700;
  color: var(--gruen-dunkel);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.treffer-karte h4 { font-size: 19px; margin: 2px 0 4px; }

.treffer-karte .details { font-size: 14.5px; color: var(--grau); }

.treffer-karte .btn { white-space: nowrap; padding: 10px 20px; font-size: 15px; }

.ergebnis-fuss { text-align: center; margin-top: 26px; font-size: 15px; color: var(--grau); }

/* --------------------------------------------------------------------------
   Systemliste (systeme.html)
   -------------------------------------------------------------------------- */

.filter-leiste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px 18px;
  align-items: start;
  margin-bottom: 28px;
  padding: 18px 20px;
  background: var(--grau-hell);
  border-radius: var(--radius);
}

.filter-gruppe { min-width: 0; }

.filter-leiste label { font-size: 14px; font-weight: 600; color: var(--grau); display: block; margin-bottom: 4px; }

.filter-leiste select,
.filter-leiste input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--linie);
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  background: var(--weiss);
  color: var(--anthrazit);
}

.filter-checks .check {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14.5px;
  font-weight: 400;
  color: var(--anthrazit);
  margin: 5px 0 0;
  cursor: pointer;
  line-height: 1.3;
}

.filter-checks .check input { accent-color: var(--gruen); width: 16px; height: 16px; flex-shrink: 0; }

.merkmal-badges { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 0; }

.merkmal {
  font-size: 13px;
  font-weight: 600;
  color: var(--gruen-dunkel);
  background: var(--gruen-hell);
  padding: 3px 10px;
  border-radius: 999px;
}

.treffer-anzahl { font-size: 15px; color: var(--grau); margin-bottom: 18px; }

/* Zuletzt angesehene Profile */

.zuletzt { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -6px 0 14px; }

.zuletzt-titel { font-size: 14px; color: var(--grau); }

.zuletzt-chip {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--anthrazit);
  background: var(--weiss);
  border: 1px solid var(--linie);
  padding: 5px 13px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
}

.zuletzt-chip:hover { border-color: var(--gruen); color: var(--gruen-dunkel); }

.system-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}

.system-karte {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 22px;
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.1s;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.system-karte { position: relative; }

.system-karte:hover { box-shadow: var(--schatten-hover); transform: translateY(-2px); }

/* Merken-Herz oben rechts auf der Karte */

.merken-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--weiss);
  border: 1px solid var(--linie);
  color: var(--grau);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--schatten);
}

.merken-btn:hover { border-color: #c0392b; color: #c0392b; }

.merken-btn.aktiv { color: #c0392b; border-color: #c0392b; }

/* Titelbild (16:9) bzw. Farb-Platzhalter oben auf der Karte */

.karte-medien {
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.karte-medien img { width: 100%; height: 100%; object-fit: cover; display: block; }

.karte-medien .platzhalter-initialen {
  font-size: 46px;
  font-weight: 800;
  letter-spacing: 3px;
  opacity: 0.55;
}

/* Avatar kann statt Initialen ein Logo zeigen */
.avatar img { width: 100%; height: 100%; object-fit: contain; border-radius: 10px; background: var(--weiss); }

/* Kopfzeile der Karte: Avatar + Branche + Name — feste Höhe für gleichmäßige Karten */

.karte-kopf { display: flex; align-items: center; gap: 12px; min-height: 72px; }

.avatar {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.karte-kopf h3 {
  font-size: 18px;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.system-karte .karte-kopf .branche-tag { margin-bottom: 3px; font-size: 11px; padding: 2px 8px; }

/* Beschreibung: immer exakt 8 Zeilen hoch — kurze Texte lassen Freiraum */
.system-karte .beschreibung {
  font-size: 14.5px;
  line-height: 1.5;
  height: calc(8 * 1.5em);
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: none;
}

/* Chips-Zeile: feste Mindesthöhe, auch wenn keine Merkmale vorhanden sind */
.karte-chips { display: flex; gap: 6px; flex-wrap: wrap; min-height: 24px; }

.chip {
  font-size: 12px;
  font-weight: 600;
  color: var(--grau);
  background: var(--grau-hell);
  border: 1px solid var(--linie);
  padding: 2px 9px;
  border-radius: 999px;
}

/* Kennzahlen einspaltig: Label links, Wert rechts */

.kennzahlen-liste { border-top: 1px solid var(--linie); padding-top: 6px; }

.kz {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 5px 0;
  font-size: 14px;
  border-bottom: 1px solid var(--grau-hell);
}

.kz:last-child { border-bottom: none; }

.kz span { color: var(--grau); flex-shrink: 0; }

.kz strong { text-align: right; font-weight: 600; }

.details-hinweis { font-size: 13.5px; color: var(--gruen-dunkel); font-weight: 600; }

.mehr-laden { grid-column: 1 / -1; justify-self: center; margin-top: 8px; }

.system-karte .branche-tag {
  align-self: flex-start;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--bf-t, var(--gruen-dunkel));
  background: var(--bf-b, var(--gruen-hell));
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.system-karte h3 { font-size: 20px; }

.system-karte .beschreibung { color: var(--grau); }

/* Galerie im Detail-Fenster (Titelbild + weitere Bilder, durchklickbar) */

.galerie {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  margin: 14px 0 4px;
  background: var(--grau-hell);
}

.galerie img { width: 100%; height: 100%; object-fit: cover; display: block; }

.galerie .g-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(35, 40, 45, 0.55);
  color: #fff;
  border: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.galerie .g-nav:hover { background: rgba(35, 40, 45, 0.8); }

.galerie .g-zurueck { left: 10px; }
.galerie .g-vor { right: 10px; }

.galerie .g-punkte {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  display: flex;
  gap: 6px;
  justify-content: center;
}

.galerie .g-punkte span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); }
.galerie .g-punkte span.aktiv { background: #fff; }

/* Video: Zwei-Klick-Lösung — erst nach Klick wird YouTube geladen */

.video-facade {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  margin: 12px 0 4px;
  background: var(--anthrazit);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  color: #fff;
  border: none;
  width: 100%;
  font-family: inherit;
  font-size: 15px;
}

.video-facade .play {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--gruen);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  padding-left: 5px;
}

.video-facade small { color: #c9cfd4; font-size: 12.5px; max-width: 80%; }

.video-einbettung iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 10px; display: block; margin: 12px 0 4px; }

/* --------------------------------------------------------------------------
   Wissen (wissen.html)
   -------------------------------------------------------------------------- */

.artikel { max-width: 760px; margin: 0 auto; }

.artikel h1 { font-size: clamp(28px, 4.5vw, 40px); line-height: 1.25; margin-bottom: 14px; }

.artikel .einleitung { font-size: 19px; color: var(--grau); margin-bottom: 36px; }

.artikel h2 { font-size: 25px; margin: 44px 0 14px; }

.artikel h3 { font-size: 19px; margin: 26px 0 10px; }

.artikel p { margin-bottom: 16px; }

.artikel ul, .artikel ol { padding-left: 24px; margin-bottom: 16px; }

.artikel li { margin-bottom: 8px; }

.schritt-nummer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: var(--gruen);
  color: var(--weiss);
  border-radius: 50%;
  font-weight: 700;
  font-size: 17px;
  margin-right: 10px;
  flex-shrink: 0;
}

.merkbox {
  background: var(--gruen-hell);
  border-left: 4px solid var(--gruen);
  border-radius: 0 10px 10px 0;
  padding: 18px 22px;
  margin: 24px 0;
}

.merkbox strong { color: var(--gruen-dunkel); }

.warnbox {
  background: #fdf0ee;
  border-left: 4px solid var(--rot);
  border-radius: 0 10px 10px 0;
  padding: 18px 22px;
  margin: 24px 0;
}

/* FAQ */

details.faq {
  border: 1px solid var(--linie);
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 10px;
  background: var(--weiss);
}

details.faq summary { font-weight: 600; cursor: pointer; font-size: 17px; }

details.faq[open] summary { margin-bottom: 10px; color: var(--gruen-dunkel); }

/* --------------------------------------------------------------------------
   Für Anbieter (fuer-anbieter.html)
   -------------------------------------------------------------------------- */

.preis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  max-width: 960px;
  margin: 0 auto;
}

.preis-karte {
  background: var(--weiss);
  border: 2px solid var(--linie);
  border-radius: var(--radius);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
}

.preis-karte.empfohlen { border-color: var(--gruen); position: relative; }

.preis-karte.empfohlen::before {
  content: "Beliebt";
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gruen);
  color: var(--weiss);
  font-size: 13px;
  font-weight: 700;
  padding: 3px 14px;
  border-radius: 999px;
}

.preis-karte h3 { font-size: 21px; margin-bottom: 4px; }

.preis-karte .preis { font-size: 34px; font-weight: 800; margin: 10px 0 2px; }

.preis-karte .preis small { font-size: 15px; font-weight: 500; color: var(--grau); }

.preis-karte .preis-hinweis { font-size: 13.5px; color: var(--grau); margin-bottom: 16px; }

.preis-karte ul { list-style: none; margin: 0 0 22px; flex: 1; }

.preis-karte li { padding: 7px 0 7px 28px; position: relative; font-size: 15.5px; border-bottom: 1px solid var(--grau-hell); }

.preis-karte li::before { content: "✓"; position: absolute; left: 4px; color: var(--gruen); font-weight: 700; }

.preis-karte li.nein { color: #6b737a; }

.preis-karte li.nein::before { content: "—"; color: #c4cad0; }

/* --------------------------------------------------------------------------
   Startseite 2.0: Hero mit Bild, Trust-Zeile, Branchen-Pills, Schritte
   -------------------------------------------------------------------------- */

.hero-v2 {
  position: relative;
  color: var(--weiss);
  overflow: hidden;
  background: var(--anthrazit);
}

.hero-v2 .hero-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

.hero-v2 .hero-schleier {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(18, 34, 12, 0.92) 0%,
    rgba(23, 40, 16, 0.82) 34%,
    rgba(25, 42, 18, 0.45) 62%,
    rgba(25, 42, 18, 0.15) 100%);
}

.hero-v2 .hero-inhalt {
  position: relative;
  max-width: var(--max-breite);
  margin: 0 auto;
  padding: clamp(64px, 10vw, 120px) 20px;
}

.hero-v2 .hero-text { max-width: 640px; }

.hero-v2 .dachzeile {
  display: inline-block;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #b8e29a;
  margin-bottom: 18px;
}

.hero-v2 h1 {
  font-size: clamp(34px, 5.6vw, 58px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -1.5px;
  margin-bottom: 20px;
}

.hero-v2 h1 .betont {
  background: linear-gradient(0deg, rgba(94, 179, 52, 0.55) 0 32%, transparent 32%);
  border-radius: 2px;
  padding: 0 4px;
}

.hero-v2 .unterzeile {
  font-size: clamp(17px, 2.2vw, 20px);
  color: #e4ecdd;
  max-width: 540px;
  margin-bottom: 30px;
  line-height: 1.6;
}

.hero-v2 .cta-gruppe { display: flex; gap: 14px; flex-wrap: wrap; }

.btn.glas {
  background: rgba(255, 255, 255, 0.12);
  color: var(--weiss);
  border: 1px solid rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(4px);
}

.btn.glas:hover { background: rgba(255, 255, 255, 0.22); }

.trust-zeile {
  display: flex;
  gap: 20px 28px;
  flex-wrap: wrap;
  margin-top: 30px;
  font-size: 14.5px;
  color: #dcead2;
}

.trust-zeile span::before { content: "✓ "; color: #9fd97a; font-weight: 800; }

/* Zahlen-Band 2.0 */

.zahlen-band .zahl strong { font-size: clamp(26px, 3.4vw, 36px); font-weight: 800; letter-spacing: -0.5px; }

/* Branchen-Pills */

.branchen-pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 860px;
  margin: 0 auto;
}

.branchen-pills a {
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--anthrazit);
  background: var(--weiss);
  border: 1px solid var(--linie);
  padding: 10px 20px;
  border-radius: 999px;
  transition: border-color 0.15s, color 0.15s, transform 0.1s, box-shadow 0.15s;
}

.branchen-pills a:hover {
  border-color: var(--gruen);
  color: var(--gruen-dunkel);
  transform: translateY(-2px);
  box-shadow: var(--schatten);
}

.branchen-pills a.alle { background: var(--anthrazit); color: var(--weiss); border-color: var(--anthrazit); }

.branchen-pills a.alle:hover { background: var(--gruen-dunkel); border-color: var(--gruen-dunkel); color: var(--weiss); }

/* So funktioniert's: drei Schritte */

.schritte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
  max-width: 960px;
  margin: 0 auto;
}

.schritt {
  text-align: center;
  padding: 30px 22px;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}

.schritt .nr {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--gruen);
  color: var(--weiss);
  font-weight: 800;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}

.schritt h3 { font-size: 18.5px; margin-bottom: 8px; }

.schritt p { font-size: 15px; color: var(--grau); }

/* Sanftes Einblenden beim Scrollen */

@media (scripting: enabled) {
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
}

@media (scripting: enabled) {
  .reveal.sichtbar { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 720px) {
  .header-inner { flex-direction: column; gap: 10px; }
  .kontrast { grid-template-columns: 1fr; }
  .finder-box { padding: 24px 18px; }
  .treffer-karte { flex-direction: column; align-items: flex-start; }
  .treffer-karte .t-thumb { width: 100%; }
  section { padding: 40px 0; }
  .footer-inner { flex-direction: column; text-align: center; }
  .footer-inner a { margin: 0 8px; }
}

/* ==========================================================================
   Modernisierung 2026-09
   Bedienbarkeit (Tastatur, Screenreader), Profilseiten, Profil-Fenster (<dialog>),
   Branchenseiten, neuer Footer, weiche Seitenübergänge, Handy-Feinschliff.
   ========================================================================== */

:root {
  --fokus: #1f5a10;
  --gruen-hell-2: #f4faf0;
}

html { scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }

h1, h2, h3, h4 { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* Branchenfarben (feste Zuordnung, siehe js/common.js). Klassen statt Inline-Styles. */
.bf-0  { --bf-t: hsl(0, 45%, 32%);   --bf-b: hsl(0, 55%, 93%); }
.bf-1  { --bf-t: hsl(23, 45%, 32%);  --bf-b: hsl(23, 55%, 93%); }
.bf-2  { --bf-t: hsl(45, 45%, 32%);  --bf-b: hsl(45, 55%, 93%); }
.bf-3  { --bf-t: hsl(68, 45%, 32%);  --bf-b: hsl(68, 55%, 93%); }
.bf-4  { --bf-t: hsl(90, 45%, 32%);  --bf-b: hsl(90, 55%, 93%); }
.bf-5  { --bf-t: hsl(113, 45%, 32%); --bf-b: hsl(113, 55%, 93%); }
.bf-6  { --bf-t: hsl(135, 45%, 32%); --bf-b: hsl(135, 55%, 93%); }
.bf-7  { --bf-t: hsl(158, 45%, 32%); --bf-b: hsl(158, 55%, 93%); }
.bf-8  { --bf-t: hsl(180, 45%, 32%); --bf-b: hsl(180, 55%, 93%); }
.bf-9  { --bf-t: hsl(203, 45%, 32%); --bf-b: hsl(203, 55%, 93%); }
.bf-10 { --bf-t: hsl(225, 45%, 32%); --bf-b: hsl(225, 55%, 93%); }
.bf-11 { --bf-t: hsl(248, 45%, 32%); --bf-b: hsl(248, 55%, 93%); }
.bf-12 { --bf-t: hsl(270, 45%, 32%); --bf-b: hsl(270, 55%, 93%); }
.bf-13 { --bf-t: hsl(293, 45%, 32%); --bf-b: hsl(293, 55%, 93%); }
.bf-14 { --bf-t: hsl(315, 45%, 32%); --bf-b: hsl(315, 55%, 93%); }
.bf-15 { --bf-t: hsl(338, 45%, 32%); --bf-b: hsl(338, 55%, 93%); }
.bf-x  { --bf-t: var(--gruen-dunkel); --bf-b: var(--gruen-hell); }

.branche-tag {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--bf-t, var(--gruen-dunkel));
  background: var(--bf-b, var(--gruen-hell));
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.avatar.bf-0, .avatar.bf-1, .avatar.bf-2, .avatar.bf-3, .avatar.bf-4, .avatar.bf-5, .avatar.bf-6, .avatar.bf-7,
.avatar.bf-8, .avatar.bf-9, .avatar.bf-10, .avatar.bf-11, .avatar.bf-12, .avatar.bf-13, .avatar.bf-14, .avatar.bf-15, .avatar.bf-x {
  background: var(--bf-b);
  color: var(--bf-t);
}

/* --------------------------------------------------------------------------
   Barrierefreiheit: Fokus, Sprunglink, nur für Screenreader
   -------------------------------------------------------------------------- */

:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.hero-v2 :focus-visible, .hero-dunkel :focus-visible { outline-color: #fff; }

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

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  background: var(--anthrazit);
  color: var(--weiss);
  padding: 10px 18px;
  border-radius: 0 0 10px 10px;
  text-decoration: none;
  font-weight: 600;
  transition: top 0.15s;
}
.skip-link:focus { top: 0; }

.btn-text {
  background: none;
  border: none;
  font: inherit;
  font-size: 14.5px;
  color: var(--gruen-dunkel);
  text-decoration: underline;
  cursor: pointer;
  padding: 6px 2px;
}
.btn-text:hover { color: var(--anthrazit); }

/* --------------------------------------------------------------------------
   Header / Navigation
   -------------------------------------------------------------------------- */

nav a[aria-current="page"] { background: var(--gruen); color: var(--weiss); }
.logo { flex-shrink: 0; }

/* Weiche Seitenübergänge zwischen den Seiten (Browser ohne Unterstützung: normale Navigation) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  header.kopf { view-transition-name: kopf; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.16s; }
}

/* --------------------------------------------------------------------------
   Startseite: Vorgestellte Partner (Pro-Paket), Quelle unter den Zahlen
   -------------------------------------------------------------------------- */

.zahlen-quelle { text-align: center; font-size: 13px; color: var(--grau); padding: 10px 20px 0; }
.zahlen-quelle + * { margin-top: 0; }

.partner-kopf { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.partner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  max-width: 960px;
  margin: 0 auto;
}
.partner-karte {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: linear-gradient(var(--gruen-hell-2), var(--weiss) 45%);
  border: 1px solid var(--gruen);
  border-radius: var(--radius);
  padding: 22px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s, transform 0.1s;
}
.partner-karte:hover { box-shadow: var(--schatten-hover); transform: translateY(-2px); }
.partner-karte[hidden] { display: none; }
.partner-karte img.p-logo { width: 52px; height: 52px; object-fit: contain; border-radius: 10px; border: 1px solid var(--linie); background: var(--weiss); }
.partner-karte .branche-tag { align-self: flex-start; }
.partner-karte h3 { font-size: 19px; }
.partner-karte p { color: var(--grau); font-size: 15px; }
.partner-karte .mehr { font-weight: 600; color: var(--gruen-dunkel); font-size: 14.5px; margin-top: auto; }

.chip.anzeige, .anzeige-label {
  background: var(--weiss);
  border: 1px dashed var(--grau);
  color: var(--grau);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}

/* --------------------------------------------------------------------------
   Finder
   -------------------------------------------------------------------------- */

.finder-frage h3:focus { outline: none; }
.finder-frage, .ergebnis-kopf, .treffer { animation: einblenden 0.28s ease both; }
@keyframes einblenden { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .finder-frage, .ergebnis-kopf, .treffer { animation: none; } }

.antwort:focus-visible { border-color: var(--gruen); }
.finder-laedt { text-align: center; color: var(--grau); padding: 60px 0; }

ol.treffer { list-style: none; }
.treffer-karte .gruende { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.treffer-karte .gruende li {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gruen-dunkel);
  background: var(--gruen-hell);
  padding: 2px 10px;
  border-radius: 999px;
}

/* --------------------------------------------------------------------------
   Systemliste: Filter (auf dem Handy einklappbar), Karten als Links
   -------------------------------------------------------------------------- */

.filter-box { margin-bottom: 28px; }
.filter-box > summary {
  display: none;
  list-style: none;
  cursor: pointer;
  font-weight: 700;
  padding: 14px 18px;
  background: var(--grau-hell);
  border-radius: var(--radius);
  border: 1px solid var(--linie);
}
.filter-box > summary::-webkit-details-marker { display: none; }
.filter-box > summary::after { content: "▾"; float: right; }
.filter-box[open] > summary::after { content: "▴"; }
.filter-box .filter-leiste { margin-bottom: 0; }
.filter-aktionen { text-align: right; min-height: 26px; margin-top: 4px; }

.keine-treffer { grid-column: 1 / -1; text-align: center; padding: 40px 10px; color: var(--grau); }
.keine-treffer .btn { margin-top: 14px; }

.system-karte:has(.karte-titel-link:focus-visible) { outline: 3px solid var(--fokus); outline-offset: 2px; }
.karte-titel-link { color: inherit; text-decoration: none; }
.karte-titel-link:focus-visible { outline: none; }
.karte-titel-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.merken-btn { z-index: 3; }
.system-karte .karte-kopf h3 { font-size: 18px; }

.system-karte.pro {
  border-color: var(--gruen);
  box-shadow: 0 0 0 1px var(--gruen), var(--schatten);
  background: linear-gradient(var(--gruen-hell-2), var(--weiss) 40%);
}

/* Fenster für Profile — nutzt das native <dialog>-Element */
dialog.profil-dialog {
  margin: auto; /* der globale Reset (* { margin: 0 }) würde sonst die Zentrierung aufheben */
  border: none;
  border-radius: 16px;
  padding: 0;
  width: min(680px, calc(100% - 24px));
  max-width: none;
  max-height: min(90vh, 900px);
  max-height: min(90dvh, 900px);
  overflow: auto;
  color: var(--anthrazit);
  background: var(--weiss);
  box-shadow: 0 24px 70px rgba(15, 25, 12, 0.35);
}
dialog.profil-dialog::backdrop { background: rgba(20, 28, 18, 0.6); backdrop-filter: blur(3px); }
dialog.profil-dialog[open] { animation: dialog-auf 0.2s ease; }
@keyframes dialog-auf { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { dialog.profil-dialog[open] { animation: none; } }
body:has(dialog[open]) { overflow: hidden; }
.dialog-inhalt { padding: 32px; }
.dialog-laedt { color: var(--grau); padding: 40px 0; text-align: center; }
dialog.profil-dialog .schliessen {
  position: sticky;
  top: 10px;
  float: right;
  margin: 10px 12px 0 0;
  z-index: 5;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--linie);
  background: rgba(255, 255, 255, 0.95);
  font-size: 26px;
  line-height: 1;
  color: var(--grau);
  cursor: pointer;
}
dialog.profil-dialog .schliessen:hover { color: var(--anthrazit); border-color: var(--grau); }

/* --------------------------------------------------------------------------
   Profil (eigene Seite /system/<slug>.html und Profil-Fenster: dasselbe Markup)
   -------------------------------------------------------------------------- */

.krumen { font-size: 14px; color: var(--grau); margin-bottom: 18px; }
.krumen ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.krumen li + li::before { content: "›"; margin-right: 8px; color: #a6adb3; }
.krumen a { color: var(--grau); }
.krumen a:hover { color: var(--anthrazit); }

article.profil { container-type: inline-size; max-width: 820px; margin: 0 auto; }
.profil-kopf { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.profil-kopf .avatar { width: 64px; height: 64px; border-radius: 14px; font-size: 22px; }
.profil-kopf .avatar img, .profil-logo { width: 64px; height: 64px; object-fit: contain; border-radius: 14px; border: 1px solid var(--linie); background: var(--weiss); }
.profil-kopf h1, .profil-kopf h2 { font-size: clamp(24px, 4.2vw, 34px); line-height: 1.2; margin-top: 4px; letter-spacing: -0.3px; }
.profil-unter { color: var(--grau); font-size: 15.5px; margin: 6px 0 14px; }
article.profil .beschreibung-voll { font-size: 17px; margin: 14px 0; }
article.profil p { margin-bottom: 12px; }
.zurueck-finder { display: inline-block; font-size: 14.5px; margin-bottom: 12px; }

.kennzahlen { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; margin: 22px 0; padding: 18px 20px; background: var(--grau-hell); border-radius: var(--radius); }
.kennzahlen dt { font-size: 12.5px; color: var(--grau); }
.kennzahlen dd { font-size: 15.5px; font-weight: 700; overflow-wrap: anywhere; }
@container (min-width: 620px) { .kennzahlen { grid-template-columns: repeat(3, 1fr); } }

.kontakt-box { margin: 20px 0; padding: 16px 20px; border: 1px solid var(--gruen); border-radius: var(--radius); background: var(--gruen-hell-2); }
.kontakt-box h2, .kontakt-box h3 { font-size: 16px; margin-bottom: 6px; }
.kontakt-box p { margin: 2px 0; font-size: 15.5px; }

article.profil .cta-gruppe { display: flex; gap: 12px; flex-wrap: wrap; margin: 22px 0 8px; }
.profil-hinweis { font-size: 13.5px; color: var(--grau); }

.profil-aehnlich { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--linie); }
.profil-aehnlich h2, .profil-aehnlich h3 { font-size: 18px; margin-bottom: 12px; }
.aehnlich-liste { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.aehnlich-liste a {
  display: block;
  height: 100%;
  padding: 12px 14px;
  border: 1px solid var(--linie);
  border-radius: 10px;
  text-decoration: none;
  color: var(--anthrazit);
  font-weight: 600;
  font-size: 15px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.aehnlich-liste a:hover { border-color: var(--gruen); box-shadow: var(--schatten); }
.aehnlich-liste small { display: block; font-weight: 400; color: var(--grau); font-size: 13px; margin-top: 2px; }

.galerie img[hidden] { display: none; }
.galerie .g-nav:focus-visible { outline-color: #fff; }

/* --------------------------------------------------------------------------
   Branchenseiten (/branche/<name>.html)
   -------------------------------------------------------------------------- */

.branchen-fakten { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 18px 0 8px; }
.branchen-fakten div { min-width: 140px; }
.branchen-fakten strong { display: block; font-size: 24px; color: var(--gruen-dunkel); letter-spacing: -0.3px; }
.branchen-fakten span { font-size: 14px; color: var(--grau); }

.tabelle-wrap { overflow-x: auto; margin: 22px 0; border: 1px solid var(--linie); border-radius: var(--radius); }
table.systeme-tabelle { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; }
.systeme-tabelle caption { text-align: left; padding: 14px 16px; font-weight: 700; }
.systeme-tabelle th { text-align: left; font-size: 13px; color: var(--grau); background: var(--grau-hell); padding: 10px 16px; white-space: nowrap; }
.systeme-tabelle td { padding: 10px 16px; border-top: 1px solid var(--grau-hell); vertical-align: top; }
.systeme-tabelle td a { font-weight: 600; }
.systeme-tabelle .zahl-spalte { white-space: nowrap; text-align: right; }
.systeme-tabelle th.zahl-spalte { text-align: right; }

.branchen-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 26px; }
.branchen-nav a { font-size: 14px; font-weight: 600; text-decoration: none; padding: 6px 14px; border: 1px solid var(--linie); border-radius: 999px; color: var(--anthrazit); }
.branchen-nav a:hover, .branchen-nav a[aria-current="page"] { border-color: var(--gruen); background: var(--gruen-hell); color: var(--gruen-dunkel); }

.link-index { margin-top: 36px; }
.link-index summary { cursor: pointer; font-weight: 600; }
.link-index ul { list-style: none; columns: 3 220px; column-gap: 24px; margin-top: 14px; font-size: 14.5px; }
.link-index li { break-inside: avoid; margin-bottom: 4px; }
.link-index a { color: var(--anthrazit); }

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */

.seite-404 { text-align: center; padding: 56px 0 24px; }
.seite-404 .gross-404 { font-size: clamp(64px, 14vw, 120px); font-weight: 800; color: var(--gruen); letter-spacing: -3px; line-height: 1; }
.seite-404 form { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 26px auto; max-width: 520px; }
.seite-404 input[type="search"] { flex: 1 1 240px; padding: 13px 16px; border: 2px solid var(--linie); border-radius: 999px; font: inherit; }
.seite-404 input[type="search"]:focus { border-color: var(--gruen); outline: none; }

/* --------------------------------------------------------------------------
   Footer (ersetzt den einfachen Footer)
   -------------------------------------------------------------------------- */

footer { border-top: 1px solid var(--linie); margin-top: 40px; background: var(--grau-hell); padding: 44px 0 0; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.3fr 1fr;
  gap: 28px 36px;
  max-width: var(--max-breite);
  margin: 0 auto;
  padding: 0 20px 34px;
  font-size: 15px;
  color: var(--grau);
}
.footer-spalte strong { display: block; color: var(--anthrazit); margin-bottom: 10px; font-size: 15px; }
.footer-spalte p { font-size: 14.5px; }
.footer-spalte a { display: block; color: var(--grau); text-decoration: none; padding: 3px 0; }
.footer-spalte a:hover { color: var(--anthrazit); text-decoration: underline; }
.footer-spalte.zweispaltig .footer-links { columns: 2; column-gap: 18px; }
.footer-spalte.zweispaltig a { break-inside: avoid; font-size: 14px; }
.footer-fuss {
  border-top: 1px solid var(--linie);
  padding: 16px 20px;
  font-size: 14px;
  color: var(--grau);
  display: flex;
  justify-content: space-between;
  gap: 12px 24px;
  flex-wrap: wrap;
  max-width: var(--max-breite);
  margin: 0 auto;
}
.footer-fuss a { color: var(--grau); text-decoration: none; margin-left: 16px; }
.footer-fuss a:first-child { margin-left: 0; }
.footer-fuss a:hover { color: var(--anthrazit); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Handy und Druck
   -------------------------------------------------------------------------- */

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

@media (max-width: 720px) {
  header { position: static; }
  .header-inner { flex-direction: column; align-items: center; gap: 4px; padding: 10px 12px 8px; }
  .logo img { height: 44px; }
  nav { width: 100%; flex-wrap: wrap; justify-content: center; gap: 4px 2px; padding-bottom: 4px; }
  nav a { padding: 6px 9px; font-size: 14px; white-space: nowrap; }
  .nav-mehr { display: none; }
  nav a.nav-start { display: none; }
  .zuletzt { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .zuletzt::-webkit-scrollbar { display: none; }
  .zuletzt-titel { white-space: nowrap; }
  #zuletzt-chips { display: flex; gap: 8px; }
  .zuletzt-chip { white-space: nowrap; }

  .filter-box > summary { display: block; }
  .filter-box:not([open]) .filter-aktionen { display: none; }

  .dialog-inhalt { padding: 20px 18px 24px; }
  dialog.profil-dialog { width: calc(100% - 12px); max-height: 94dvh; }
  .profil-kopf .avatar, .profil-kopf .avatar img, .profil-logo { width: 52px; height: 52px; }
  .footer-grid { grid-template-columns: 1fr; padding-bottom: 20px; }
  .footer-fuss { flex-direction: column; text-align: center; }
  .footer-fuss a { margin: 0 8px; }
}

@media print {
  header, footer, .cta-gruppe, .skip-link, .profil-aehnlich, .zurueck-finder, .krumen { display: none !important; }
  body { font-size: 12pt; }
  a { color: inherit; }
}

.filter-titel { font-size: 14px; font-weight: 600; color: var(--grau); display: block; margin-bottom: 4px; }
article.profil .nur-dialog { display: none; }
dialog.profil-dialog article.profil .nur-dialog { display: inline-block; }
dialog.profil-dialog article.profil { max-width: none; }

/* ==========================================================================
   Merkliste (Vergleich), Franchise-Rechner, dreispaltige Wege-Karten
   ========================================================================== */

.kontrast.drei { grid-template-columns: repeat(3, 1fr); max-width: 1040px; }
@media (max-width: 900px) { .kontrast.drei { grid-template-columns: 1fr; max-width: 900px; } }

/* Merkliste */
.ml-aktionen { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.ml-aktionen .btn { font-size: 15px; padding: 11px 22px; }
.ml-hinweis { font-size: 14px; color: var(--grau); margin-bottom: 6px; max-width: 820px; }
.ml-leer { text-align: center; padding: 30px 0; color: var(--grau); }
.ml-leer .btn { margin: 14px 4px 0; }
.ml-leeren { margin-top: 18px; }
.ml-druckfuss { display: none; }

.vergleich { margin-top: 16px; }
.vergleich-tabelle { border-collapse: separate; border-spacing: 0; font-size: 15px; min-width: 100%; }
.vergleich-tabelle th, .vergleich-tabelle td { padding: 12px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--grau-hell); min-width: 190px; }
.vergleich-tabelle thead th, .vergleich-tabelle thead td { border-top: none; background: var(--grau-hell); }
.vergleich-tabelle tbody th { font-size: 13px; font-weight: 600; color: var(--grau); background: var(--weiss); min-width: 130px; position: sticky; left: 0; z-index: 1; border-right: 1px solid var(--grau-hell); }
.vergleich-tabelle thead td:first-child { position: sticky; left: 0; z-index: 2; min-width: 130px; }
.v-kopf { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-size: 16px; }
.v-kopf a { font-weight: 700; color: var(--anthrazit); }
.v-kopf .avatar { width: 40px; height: 40px; font-size: 14px; border-radius: 10px; }
.v-logo { width: 40px; height: 40px; object-fit: contain; border-radius: 8px; border: 1px solid var(--linie); background: var(--weiss); }
.v-entfernen { font-size: 13px; color: var(--grau); }
.vergleich-tabelle td.bester { background: var(--gruen-hell); font-weight: 700; color: var(--gruen-dunkel); }

@media print {
  @page { size: A4 landscape; margin: 12mm; }
  .ml-aktionen, .ml-hinweis, .ml-leeren, .v-entfernen, .skip-link { display: none !important; }
  .ml-druckfuss { display: block; margin-top: 10px; font-size: 10pt; color: #555; }
  .tabelle-wrap { overflow: visible; border: none; }
  .vergleich-tabelle { font-size: 10pt; }
  .vergleich-tabelle th, .vergleich-tabelle td { min-width: 0; padding: 6px 8px; }
  .vergleich-tabelle tbody th { position: static; }
  section { padding: 0; }
}

/* Franchise-Rechner */
.rechner { max-width: 860px; margin: 0 auto; }
.rechner-eingabe { display: grid; grid-template-columns: 1fr; gap: 22px; background: var(--grau-hell); border-radius: var(--radius); padding: 26px; }
.r-feld label { display: block; font-weight: 700; margin-bottom: 8px; }
.r-zahl { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.r-zahl input, .r-feld select { font: inherit; font-size: 20px; font-weight: 700; padding: 10px 14px; border: 2px solid var(--linie); border-radius: 10px; background: var(--weiss); color: var(--anthrazit); }
.r-zahl input { width: 190px; }
.r-feld select { font-size: 17px; font-weight: 600; width: 100%; max-width: 320px; }
.r-zahl input:focus, .r-feld select:focus { border-color: var(--gruen); outline: none; }
.r-zahl span { font-size: 20px; font-weight: 700; color: var(--grau); }
.r-feld input[type="range"] { width: 100%; accent-color: var(--gruen); }
.r-hinweis { font-size: 14px; color: var(--grau); margin-top: 4px; }

.rechner-ergebnis { margin-top: 26px; }
.r-karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.r-karte { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--schatten); display: flex; flex-direction: column; gap: 4px; }
.r-karte span { font-size: 13.5px; color: var(--grau); font-weight: 600; }
.r-karte strong { font-size: clamp(20px, 3vw, 26px); letter-spacing: -0.3px; }
.r-karte small { font-size: 13px; color: var(--grau); }
.r-karte.hervor { background: var(--gruen-hell-2); border-color: var(--gruen); }
.r-karte.hervor strong { color: var(--gruen-dunkel); }
.r-treffer { margin-top: 26px; text-align: center; }
.r-zahl-gross { font-size: 20px; }
.r-zahl-gross strong { font-size: clamp(38px, 7vw, 56px); color: var(--gruen-dunkel); letter-spacing: -1px; display: inline-block; margin-right: 6px; line-height: 1.1; }
.r-branchen-titel { margin: 18px 0 10px; font-weight: 600; }
.r-branchen { max-width: none; }
.r-cta { justify-content: center; display: flex; gap: 14px; flex-wrap: wrap; margin-top: 22px; }
.rechner-ergebnis .warnbox { margin-top: 18px; text-align: left; }
@media (max-width: 720px) { .r-karten { grid-template-columns: 1fr; } .rechner-eingabe { padding: 18px; } }

.merkliste-link { margin-left: 4px; align-self: center; }

/* ==========================================================================
   Feinschliff Oktober 2026: Filter als Panel, Ergebnisleiste, Listenansicht,
   Finder-Ergebnis, Budget-Schnellstart
   ========================================================================== */

/* Filter-Panel */
.filter-panel { background: var(--weiss); border: 1px solid var(--linie); border-radius: 16px; padding: 18px 20px; box-shadow: var(--schatten); }
.filter-box .filter-leiste { background: none; padding: 0; margin: 0; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.filter-leiste select, .filter-leiste input[type="text"] { border-radius: 10px; padding: 11px 12px; }
.filter-leiste select:focus, .filter-leiste input[type="text"]:focus { border-color: var(--gruen); outline: none; box-shadow: 0 0 0 3px rgba(55, 128, 30, 0.18); }

.chip-checks { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 2px; }
.chip-checks .check { position: relative; display: inline-flex; cursor: pointer; }
.chip-checks .check input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip-checks .check span {
  padding: 7px 15px;
  border: 1px solid var(--linie);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  background: var(--weiss);
  color: var(--anthrazit);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.chip-checks .check:hover span { border-color: var(--gruen); }
.chip-checks .check input:checked + span { background: var(--gruen); border-color: var(--gruen); color: var(--weiss); }
.chip-checks .check input:focus-visible + span { outline: 3px solid var(--fokus); outline-offset: 2px; }

.mehr-filter { margin-top: 12px; }
.mehr-filter > summary { cursor: pointer; font-size: 14.5px; font-weight: 600; color: var(--gruen-dunkel); list-style: none; padding: 4px 0; display: inline-block; }
.mehr-filter > summary::-webkit-details-marker { display: none; }
.mehr-filter > summary::before { content: "+ "; font-weight: 800; }
.mehr-filter[open] > summary::before { content: "\2212  "; }
.mehr-filter .filter-leiste { margin-top: 12px; }

/* Ergebnisleiste: Anzahl, Sortierung, Ansicht */
.ergebnis-leiste { display: flex; justify-content: space-between; align-items: center; gap: 10px 22px; flex-wrap: wrap; margin: 4px 0 18px; }
.ergebnis-leiste .treffer-anzahl { margin: 0; font-weight: 600; color: var(--anthrazit); }
.ergebnis-optionen { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; }
.sortier-gruppe { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--grau); }
.sortier-gruppe select { padding: 8px 10px; border: 1px solid var(--linie); border-radius: 10px; font: inherit; font-size: 14.5px; background: var(--weiss); color: var(--anthrazit); }
.ansicht-umschalter { display: inline-flex; border: 1px solid var(--linie); border-radius: 999px; padding: 3px; background: var(--grau-hell); }
.ansicht-umschalter button { border: none; background: none; font: inherit; font-size: 14px; font-weight: 600; padding: 6px 16px; border-radius: 999px; cursor: pointer; color: var(--grau); }
.ansicht-umschalter button[aria-pressed="true"] { background: var(--weiss); color: var(--anthrazit); box-shadow: var(--schatten); }

/* Karten: etwas ruhiger und moderner */
.system-karte { border-radius: 16px; transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s; }
.system-karte:hover { border-color: #cfd8cb; }
.avatar { border-radius: 14px; }

/* Listenansicht */
.system-liste { border: 1px solid var(--linie); border-radius: 16px; background: var(--weiss); overflow: hidden; box-shadow: var(--schatten); }
.zeilen-kopf, .system-zeile { display: grid; grid-template-columns: minmax(0, 2.6fr) 1.1fr 1.2fr 0.7fr 44px; gap: 12px; align-items: center; padding: 12px 18px; }
.zeilen-kopf { background: var(--grau-hell); border-bottom: 1px solid var(--linie); }
.zeilen-kopf button { background: none; border: none; font: inherit; font-size: 13px; font-weight: 700; color: var(--grau); text-align: left; cursor: pointer; padding: 4px 0; }
.zeilen-kopf button:hover, .zeilen-kopf button.aktiv { color: var(--gruen-dunkel); }
.system-zeile { position: relative; border-top: 1px solid var(--grau-hell); transition: background 0.12s; }
.zeilen-kopf + .system-zeile { border-top: none; }
.system-zeile:hover { background: var(--gruen-hell-2); }
.system-zeile:has(.karte-titel-link:focus-visible) { outline: 3px solid var(--fokus); outline-offset: -3px; }
.system-zeile .karte-titel-link::after { border-radius: 0; }
.system-zeile.pro { box-shadow: inset 4px 0 0 var(--gruen); background: linear-gradient(90deg, var(--gruen-hell-2), var(--weiss) 40%); }
.z-name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.z-name .avatar { width: 40px; height: 40px; font-size: 14px; border-radius: 10px; flex-shrink: 0; }
.z-name h3 { font-size: 16px; line-height: 1.25; margin: 0; }
.z-name .branche-tag { font-size: 11px; padding: 2px 8px; margin-top: 3px; }
.z-wert { font-size: 14.5px; font-weight: 600; }
.system-zeile .merken-btn { position: static; justify-self: end; box-shadow: none; }

@media (max-width: 720px) {
  .ergebnis-leiste { align-items: flex-start; }
  .zeilen-kopf { display: none; }
  .system-zeile { grid-template-columns: repeat(3, 1fr) 40px; gap: 8px 10px; padding: 14px; }
  .z-name { grid-column: 1 / 4; }
  .system-zeile .merken-btn { grid-column: 4; grid-row: 1; }
  .z-wert { font-size: 14px; }
  .z-wert::before { content: attr(data-label); display: block; font-size: 11.5px; font-weight: 500; color: var(--grau); }
}

/* Finder-Ergebnis */
ol.treffer { gap: 16px; }
.treffer-karte { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 8px 18px; align-items: start; padding: 20px; border-radius: 16px; transition: box-shadow 0.18s, transform 0.18s; }
.treffer-karte:hover { box-shadow: var(--schatten-hover); transform: translateY(-1px); }
.treffer-karte.erste { border-color: var(--gruen); background: linear-gradient(var(--gruen-hell-2), var(--weiss) 55%); box-shadow: 0 0 0 1px var(--gruen), var(--schatten); }
.t-rang { width: 40px; height: 40px; border-radius: 50%; background: var(--gruen-hell); color: var(--gruen-dunkel); font-weight: 800; font-size: 18px; display: flex; align-items: center; justify-content: center; }
.treffer-karte.erste .t-rang { background: var(--gruen); color: var(--weiss); }
.treffer-karte .t-thumb { display: none; }
.treffer-karte > .btn { align-self: center; }
.treffer-karte h4 { font-size: 20px; margin: 2px 0 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.treffer-karte h4 .branche-tag { font-size: 11px; padding: 2px 9px; }
.t-zahlen { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 10px 0 2px; }
.t-zahlen dt { font-size: 12px; color: var(--grau); }
.t-zahlen dd { font-size: 15px; font-weight: 700; }
.treffer-karte .gruende { margin-top: 10px; }

@media (max-width: 720px) {
  .treffer-karte { grid-template-columns: auto 1fr; padding: 16px; }
  .treffer-karte .btn { grid-column: 1 / -1; text-align: center; }
}

/* Budget-Schnellstart (Startseite) */
.schnellstart-titel { text-align: center; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--grau); margin: 0 0 12px; }
.budget-wahl { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; max-width: 960px; margin: 0 auto 30px; }
.budget-wahl a { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--anthrazit); background: var(--weiss); border: 1px solid var(--linie); border-radius: 14px; padding: 16px 14px; text-align: center; transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s; }
.budget-wahl a strong { font-size: 17px; letter-spacing: -0.2px; }
.budget-wahl a span { font-size: 13px; color: var(--grau); }
.budget-wahl a:hover { border-color: var(--gruen); box-shadow: var(--schatten); transform: translateY(-2px); }
.budget-wahl a.rechner { background: var(--anthrazit); border-color: var(--anthrazit); color: var(--weiss); }
.budget-wahl a.rechner span { color: #c9cfd4; }
.budget-wahl a.rechner:hover { background: var(--gruen-dunkel); border-color: var(--gruen-dunkel); }
@media (max-width: 720px) { .budget-wahl { grid-template-columns: 1fr 1fr; } .budget-wahl a.rechner { grid-column: 1 / -1; } }

/* ==========================================================================
   Checkliste und Glossar
   ========================================================================== */

.ck-leiste { display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; flex-wrap: wrap; background: var(--gruen-hell-2); border: 1px solid var(--gruen); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 8px; position: sticky; top: 76px; z-index: 5; }
.ck-fortschritt { font-weight: 700; color: var(--gruen-dunkel); margin: 0 !important; }
.ck-aktionen { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ck-aktionen .btn { font-size: 14.5px; padding: 9px 20px; }
.artikel .ck-gruppe h2 { margin-top: 34px; }
.artikel ul.ck-liste { list-style: none; padding-left: 0; }
.ck-liste li { margin-bottom: 8px; }
.ck { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--linie); border-radius: 12px; cursor: pointer; background: var(--weiss); transition: border-color 0.15s, background 0.15s; }
.ck:hover { border-color: var(--gruen); }
.ck input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--gruen); flex-shrink: 0; cursor: pointer; }
.ck:has(input:checked) { background: var(--gruen-hell-2); border-color: var(--gruen); }
.ck:has(input:checked) span { color: var(--grau); text-decoration: line-through; text-decoration-color: rgba(92, 100, 107, 0.45); }
.ck:has(input:focus-visible) { outline: 3px solid var(--fokus); outline-offset: 2px; }

.glossar { margin-top: 10px; }
.glossar > div { padding: 16px 0; border-top: 1px solid var(--linie); }
.glossar > div:first-child { border-top: none; }
.glossar dt { font-weight: 800; font-size: 18px; margin-bottom: 4px; color: var(--gruen-dunkel); }
.glossar dd { margin: 0; }
.glossar > div:target { background: var(--gruen-hell-2); border-radius: 10px; padding-left: 14px; padding-right: 14px; }

@media (max-width: 720px) { .ck-leiste { top: 0; position: static; } }
@media print {
  .ck-leiste .ck-aktionen, .ck-leiste { box-shadow: none; }
  .ck-aktionen { display: none !important; }
  .ck-leiste { position: static; border: none; padding: 0; background: none; }
  .ck { border: none; padding: 4px 0; break-inside: avoid; }
  .ck:has(input:checked) span { text-decoration: none; }
  .artikel h2 { break-after: avoid; }
}

.preis-karte .preis-jahr { font-size: 14px; font-weight: 600; color: var(--gruen-dunkel); margin: -8px 0 16px; }

/* ==========================================================================
   Formulare (Kontakt, Anfragen) und Mailto-Buttons
   ========================================================================== */

.f1-formular-box { max-width: 720px; margin: 0 auto; background: var(--weiss); border: 1px solid var(--linie); border-radius: 16px; box-shadow: var(--schatten); padding: 30px; }
.f-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.f-feld { margin-bottom: 18px; }
.f-feld label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.f-feld input[type="text"], .f-feld input[type="email"], .f-feld input[type="tel"], .f-feld select, .f-feld textarea {
  width: 100%;
  font: inherit;
  font-size: 16px;
  padding: 12px 14px;
  border: 1.5px solid var(--linie);
  border-radius: 10px;
  background: var(--weiss);
  color: var(--anthrazit);
}
.f-feld textarea { resize: vertical; min-height: 150px; line-height: 1.5; }
.f-feld input:focus, .f-feld select:focus, .f-feld textarea:focus { border-color: var(--gruen); outline: none; box-shadow: 0 0 0 3px rgba(55, 128, 30, 0.18); }
.pflicht { color: var(--rot); }
.f-optional { font-weight: 400; color: var(--grau); font-size: 13.5px; }
.f-falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.f-einwilligung { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; color: var(--grau); margin: 4px 0 20px; cursor: pointer; }
.f-einwilligung input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--gruen); flex-shrink: 0; }
.f-aktionen { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.f-status { margin-top: 14px; font-weight: 600; min-height: 1.4em; color: var(--gruen-dunkel); }
.f-status.fehler { color: var(--rot); }
.f-hinweis { max-width: 720px; margin: 18px auto 0; font-size: 14.5px; color: var(--grau); text-align: center; }
.f1-erfolg { text-align: center; padding: 20px 0; }
.f1-erfolg h2 { margin-bottom: 10px; color: var(--gruen-dunkel); }
.f1-erfolg p { margin-bottom: 14px; color: var(--grau); }
.f1-erfolg:focus { outline: none; }
@media (max-width: 720px) { .f-zeile { grid-template-columns: 1fr; } .f1-formular-box { padding: 20px 16px; } }

/* Mailto-Buttons sind als solche erkennbar (Briefumschlag) */
.mailto-btn::before { content: "\2709"; margin-right: 8px; font-size: 1.05em; }

.preis-aktion { display: flex; flex-direction: column; gap: 10px; }
.preis-aktion .btn { text-align: center; }
.preis-aktion.zentriert { flex-direction: row; justify-content: center; flex-wrap: wrap; }
.preis-aktion .mailto-btn { font-size: 15px; padding: 11px 24px; }