/* volle Breite, auch wenn der Inhalt im Container steckt */
main:has(.hm){padding:0}
.hm{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw)}

/* Startseite. Abschnitte wechseln bewusst Grund, Dichte und Aufbau: hell, Farbe, Papier, dunkel.
   Schriften liegen bei uns, nichts wird von fremden Servern geladen. */
@font-face{font-family:'Sora';font-display:swap;font-weight:100 900;src:url(/fonts/sora.woff2) format('woff2')}
@font-face{font-family:'Inter';font-display:swap;font-weight:100 900;src:url(/fonts/inter.woff2) format('woff2')}

/* Die Startseite hat eigene Marken, sie leiten sich aber aus den zentralen ab.
   Vorher standen hier vier eigene Akzentfarben, die es sonst nirgends gab. */
.hm{--blau:var(--lagune);--gruen:var(--lagune-tief);--braun:var(--granit-hell);--lila:var(--granit);
  --creme:var(--papier);
  --tinte:var(--granit-tief);--grau:#3c4950;--leise:var(--muted);--linie:#e0e5e5;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;color:var(--tinte)}
.hm h1,.hm h2,.hm h3,.hm h4{font-family:'Sora','Inter',system-ui,sans-serif;letter-spacing:-.025em;margin:0;line-height:1.05}
.hm .mo{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}
.hm p{margin:0}
.hm .nurlesen{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hm a{text-decoration:none}
.hm .in{max-width:1240px;margin:0 auto;padding:0 24px}
.hm .knopf{display:inline-block;border-radius:999px;font-weight:600;font-size:1rem;padding:15px 28px;transition:transform .15s,box-shadow .15s}
.hm .knopf:hover{transform:translateY(-2px);text-decoration:none}
.hm .k-blau{background:var(--blau);color:#fff}
.hm .k-weiss{background:#fff;color:var(--blau);box-shadow:0 14px 30px rgba(0,0,0,.14)}
.hm .k-lila{background:var(--lila);color:#fff}
.hm .k-rand{border:1.5px solid rgba(255,255,255,.6);color:#fff}
.hm .kicker{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;margin-bottom:10px;display:block}

/* schweben, mit Rücksicht auf alle, die das nicht mögen */
@keyframes hm-schweb{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-22px) rotate(4deg)}}
.hm .schweb{animation:hm-schweb 9s ease-in-out infinite}
.hm .schweb2{animation:hm-schweb 13s ease-in-out infinite reverse}

/* 11b Vergleich */
.hm .vgl{background:linear-gradient(180deg,#FFFFFF 0%,var(--creme) 100%)}
.hm .vgl-reiter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.hm .vgl-knopf{font-family:'Sora',sans-serif;font-size:1.02rem;font-weight:700;padding:13px 24px;border-radius:999px;
  cursor:pointer;border:1.5px solid #e2e7e7;background:#fff;color:var(--grau)}
.hm .vgl-knopf[aria-selected=true]{color:#fff;border-color:transparent}
.hm .vgl-tafel[hidden]{display:none}
.hm .vgl-tafel{background:#fff;border:1px solid var(--linie);border-radius:22px;overflow:hidden;box-shadow:0 18px 44px rgba(17,19,26,.06)}
.hm .vgl-t{width:100%;border-collapse:collapse;font-size:.95rem}
.hm .vgl-t th,.hm .vgl-t td{text-align:left;vertical-align:top;padding:14px 16px;border-bottom:1px solid var(--linie);line-height:1.45}
.hm .vgl-t thead th{font-family:'Sora',sans-serif;font-size:.86rem;font-weight:700;color:var(--leise);background:#fbfcfc;white-space:nowrap}
.hm .vgl-t thead th.wir{background:linear-gradient(135deg,#12b2b0,#0a6e70);color:#fff;font-size:.92rem}
.hm .vgl-t tbody th{font-weight:600;color:var(--tinte);width:200px}
.hm .vgl-t td.wir{background:#e7f4f3;color:#0a6e70;font-weight:600}
.hm .vgl-t tbody tr:last-child th,.hm .vgl-t tbody tr:last-child td{border-bottom:0}
.hm .vgl-stand{margin-top:14px;font-size:.84rem;color:var(--leise);line-height:1.5}

/* 1 Kopf */
.hm .kopf{position:relative;overflow:hidden;background:
  radial-gradient(1100px 620px at 12% -10%,#dcecec 0%,rgba(220,236,236,0) 62%),
  radial-gradient(900px 560px at 92% 8%,#e6ebeb 0%,rgba(230,235,235,0) 60%),#f7f9f9}
.hm .kopf-in{position:relative;padding:80px 24px 66px}
.hm .kopf h1{font-size:clamp(2.6rem,6vw,5rem);font-weight:800;max-width:15ch;margin-bottom:20px}
.hm .kopf h1 em{font-style:normal;color:var(--blau)}
.hm .kopf-lead{font-size:1.3rem;line-height:1.5;color:#3c4950;max-width:56ch;margin-bottom:30px}
.hm .kopf-chip{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid #d5eceb;color:var(--blau);
  font-size:.9rem;font-weight:600;padding:8px 15px;border-radius:999px;margin-bottom:18px}
/* Suchfeld: eine grosse Fläche, links ein Funke, rechts der Knopf. Das Beispiel im Feld wechselt. */
.hm .gsuche{display:flex;align-items:center;gap:14px;max-width:860px;margin-bottom:22px;background:#fff;
  border:1.5px solid #bfdedd;border-radius:30px;padding:12px 12px 12px 26px;box-shadow:0 22px 48px rgba(31,75,224,.14)}
.hm .gsuche:focus-within{border-color:var(--blau);box-shadow:0 22px 52px rgba(14,156,156,.24)}
.hm .gsuche-funke{display:inline-flex;color:var(--lila);flex:none;animation:hm-funke 4s ease-in-out infinite}
.hm .gsuche-funke svg{width:26px;height:26px}
.hm .gsuche input{flex:999 1 200px;min-width:0;border:0;outline:0;background:transparent;font-size:1.5rem;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;padding:16px 4px;color:var(--tinte)}
.hm .gsuche input::placeholder{color:#44525a;opacity:1}
.hm .gsuche button{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;
  background:linear-gradient(135deg,#12b2b0,#0a6e70);color:#fff;font-family:'Sora',sans-serif;
  font-size:1.05rem;font-weight:700;padding:18px 32px;border-radius:22px;transition:transform .15s}
.hm .gsuche button:hover{transform:translateY(-1px)}
.hm .gsuche .gs-pfeil{display:none}
@keyframes hm-funke{0%,100%{opacity:1;transform:scale(1)}45%{opacity:.55;transform:scale(.86) rotate(-12deg)}}
@media (prefers-reduced-motion: reduce){.hm .gsuche-funke{animation:none}}
.hm .form{display:flex;flex-wrap:wrap;gap:10px;max-width:660px;margin-bottom:22px}
.hm .form input{flex:999 1 320px;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1rem;
  padding:16px 20px;border:1.5px solid #c6cfcf;border-radius:999px;background:#fff}
.hm .form button{flex:1 1 auto;border:0;cursor:pointer;font-family:inherit}
.hm .zweiweg{display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:1rem;color:var(--grau);margin-bottom:34px}
.hm .blob{position:absolute;border-radius:50%;pointer-events:none}
.hm .b1{left:-90px;top:180px;width:300px;height:300px;background:#c8e6e4;opacity:.75}
.hm .b2{right:60px;top:90px;width:180px;height:180px;border-radius:36px;background:#d3dcde;opacity:.8}
.hm .b3{right:280px;bottom:60px;width:94px;height:94px;background:#8fd6d2;opacity:.9}
.hm .wort{position:absolute;right:-140px;top:-70px;font-family:'Sora',sans-serif;font-weight:800;font-size:28rem;
  line-height:1;color:rgba(17,19,26,.035);user-select:none;pointer-events:none}
.hm .zahlen{display:flex;flex-wrap:wrap;gap:14px;margin:0;padding:0}
.hm .zahlen>div{background:#fff;border:1px solid var(--linie);border-radius:16px;padding:18px 24px;min-width:150px}
.hm .zahlen dt{font-size:.82rem;color:var(--leise);margin-bottom:4px}
.hm .zahlen dd{margin:0;font-size:2rem;font-weight:500;font-family:ui-monospace,Menlo,monospace}
.hm .zahlen .zahl-zu{margin:4px 0 0;font-size:.74rem;line-height:1.35;color:var(--leise);max-width:22ch}

/* 2 Laufband */
.hm .band{background:var(--creme);border-top:1px solid #e4e9e9;border-bottom:1px solid #e4e9e9}
.hm .band-kopf{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;padding:44px 24px 14px}
.hm .band-kopf h2{font-size:2rem;font-weight:700;margin-bottom:6px}
.hm .laufzeile{position:relative;display:flex;align-items:center;gap:0;margin:8px 0}
.hm .laufmarke{position:absolute;left:24px;z-index:2;display:inline-flex;align-items:center;background:linear-gradient(135deg,#12b2b0,#0a6e70);
  color:#fff;border-radius:999px;padding:10px 18px;font-size:.84rem;font-weight:700;letter-spacing:.02em;
  box-shadow:0 10px 26px rgba(31,75,224,.26)}
.hm .laufmarke.gruen{background:linear-gradient(135deg,#12b2b0,#0a6e70);box-shadow:0 10px 26px rgba(10,110,112,.28)}
.hm .laufzeile .lauf-aussen{flex:1 1 auto;min-width:0;padding-left:0}
.hm .lauf-aussen{overflow:hidden;padding:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 240px,#000 calc(100% - 70px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 240px,#000 calc(100% - 70px),transparent)}
.hm .lauf{display:flex;width:max-content;gap:0;animation:hm-lauf 150s linear infinite}
.hm .lauf.langsam{animation-duration:210s}
@keyframes hm-lauf{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.hm .lauf-aussen:hover .lauf,.hm .lauf:focus-within{animation-play-state:paused}
/* Eine durchgehende Pille statt vieler Kästchen, Einträge mit /// getrennt, wie bei den Top sales */
.hm .laufzeile .lauf-aussen{background:#fff;border:1px solid #e2e7e7;border-radius:999px}
.hm .lauf{align-items:center}
.hm .lchip{display:inline-flex;align-items:baseline;gap:9px;white-space:nowrap;border:0;background:transparent;border-radius:0;
  padding:12px 2px 12px 14px;color:var(--tinte);font-family:ui-monospace,Menlo,monospace;font-size:.98rem}
.hm .lchip b{font-weight:500}
.hm .lchip span{font-size:.82rem;color:var(--leise)}
.hm .lchip i{font-style:normal;color:#cdd6d6;letter-spacing:-.06em;padding-left:12px}
.hm .lchip:hover{color:var(--blau);text-decoration:none}
.hm .lchip:hover span{color:var(--blau)}

/* allgemeiner Abschnittskopf */
.hm .ab{padding:80px 0}
.hm .ab-kopf{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;margin-bottom:30px}
.hm .ab-kopf h2{font-size:clamp(1.9rem,3.4vw,3rem);font-weight:700}
.hm .ab-kopf p{flex:1 1 320px;font-size:1rem;line-height:1.55;color:var(--grau)}

/* 3 Neu im Angebot */
/* Neu im Angebot: direkt darueber laufen schon zwei Baender mit Domainnamen.
   Die Kacheln duerfen deshalb nicht noch einmal denselben Platz beanspruchen.
   Gemessen vorher bei 1024 Pixeln: 2 Spalten, 478 x 251 Pixel je Kachel,
   Name 24 Pixel, Polster 26. Das war doppelt so laut wie das Band darueber. */
.hm .karten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (min-width:1240px){.hm .karten{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:880px){.hm .karten{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.hm .karten{grid-template-columns:1fr}}
.hm .karte{display:block;border-radius:14px;padding:16px 18px;color:var(--tinte);transition:transform .18s,box-shadow .18s}
.hm .karte:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(17,19,26,.09);text-decoration:none}
.hm .karte .name{font-family:ui-monospace,Menlo,monospace;font-size:1.12rem;font-weight:500;margin-bottom:5px;word-break:break-all;display:block}
.hm .karte .was{font-size:.86rem;line-height:1.45;color:var(--grau);display:block;margin-bottom:10px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hm .karte .fuss{display:flex;align-items:baseline;gap:8px;padding-top:9px;flex-wrap:wrap}
.hm .karte .preis{font-family:ui-monospace,Menlo,monospace;font-size:1.05rem;font-weight:600}
.hm .karte .weg{font-size:.78rem;color:var(--leise)}

/* 4 Bewertung und Gutachten */
.hm .zwei{display:flex;flex-wrap:wrap;gap:26px}
.hm .bew{flex:999 1 460px;min-width:0;border-radius:24px;padding:46px;position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(145deg,#0a6e70 0%,#143036 52%,#122227 100%)}
.hm .bew h2{font-size:clamp(1.8rem,3vw,2.8rem);font-weight:800;max-width:16ch;color:#fff}
.hm .bew p{color:#c3e2e1;line-height:1.55;max-width:46ch;margin:18px 0 26px;font-size:1.05rem}
.hm .bew .form input{border:0}
.hm .gut{flex:1 1 320px;min-width:0;border-radius:24px;padding:40px;
  background:linear-gradient(160deg,var(--sand-zart) 0%,var(--sand) 60%,#e9d9b8 100%)}
.hm .gut h2{font-size:2rem;font-weight:700;margin-bottom:6px}
/* Der Preis ist hier das Argument, also steht er gross und nicht nur auf dem Knopf */
.hm .gut-preis{font-family:'Sora','Inter',system-ui,sans-serif;font-size:2.6rem;font-weight:800;
  line-height:1;letter-spacing:-.02em;color:var(--sand-ink);margin:0 0 12px}
.hm .gut p,.hm .gut li{color:#3b4a4a;line-height:1.55}
.hm .gut ul{margin:0 0 24px;padding-left:20px;line-height:1.9}

/* 5 Parkseiten, tiefes Band */
.hm .tief{background-color:var(--gruen);color:#fff;background-image:
  radial-gradient(900px 500px at 20% 30%,rgba(255,255,255,.14),rgba(255,255,255,0) 60%),
  radial-gradient(700px 420px at 80% 70%,rgba(255,208,138,.22),rgba(255,208,138,0) 60%);
  background-attachment:fixed;background-size:cover}
.hm .tief-in{display:flex;flex-wrap:wrap;gap:48px;align-items:center;padding:86px 24px}
.hm .tief h2{font-size:clamp(2rem,3.6vw,3.2rem);font-weight:800;color:#fff;max-width:17ch;margin-bottom:18px}
.hm .tief p{color:#cfe9e7;font-size:1.1rem;line-height:1.6;max-width:44ch;margin-bottom:26px}
.hm .tief .hinweis{font-size:.9rem;color:#8fd2cf}
.hm .schau{flex:1 1 440px;min-width:0;position:relative;min-height:420px}
.hm .schau figure{margin:0}
.hm .schau .schau-a{position:absolute;left:0;top:0;width:78%;transform:rotate(-2.5deg)}
.hm .schau .schau-b{position:absolute;right:0;bottom:0;width:66%;transform:rotate(3deg)}
.hm .schau .rahmen{border-radius:16px;overflow:hidden;box-shadow:0 34px 60px rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.3);background:#fff}
.hm .schau figcaption{margin-top:10px;font-family:ui-monospace,Menlo,monospace;font-size:.82rem;color:#cfe9e7}
.hm .schau figcaption a{color:#fff;text-decoration:underline}

/* 6 Zwei Sichten mit Reitern */
.hm .sicht{background:var(--creme)}
.hm .reiter{display:flex;justify-content:center;gap:8px;margin-bottom:32px}
.hm .reiter button{font-family:'Sora',sans-serif;font-size:1.2rem;font-weight:700;padding:15px 34px;border-radius:999px;cursor:pointer;border:1.5px solid #dbe2e2;background:#fff;color:var(--grau)}
.hm .reiter button[aria-selected=true]{border-color:transparent;color:#fff}
.hm .tafel{border-radius:28px;padding:46px}
.hm .tafel[hidden]{display:none}
.hm .tafel-oben{display:flex;flex-wrap:wrap;gap:46px;margin-bottom:38px}
.hm .tafel-oben>div:first-child{flex:1 1 340px;min-width:0}
.hm .tafel-oben>div:last-child{flex:999 1 460px;min-width:0}
.hm .tafel h3{font-size:clamp(1.6rem,2.6vw,2.4rem);font-weight:800;max-width:16ch}
.hm .tafel .lead{font-size:1.05rem;line-height:1.6;color:#3c4950;max-width:40ch;margin:18px 0 24px}
.hm .schritte{list-style:none;margin:0;padding:0}
.hm .schritte li{display:flex;gap:18px;padding:15px 0;border-top:1px solid rgba(17,19,26,.1)}
.hm .schritte .nr{flex:none;font-family:ui-monospace,Menlo,monospace;font-size:.92rem;padding-top:3px;font-weight:500}
.hm .schritte b{display:block;font-size:1.05rem;margin-bottom:4px}
.hm .schritte span{font-size:.95rem;line-height:1.55;color:var(--grau)}
.hm .kacheln{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:1040px){.hm .kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.hm .kacheln{grid-template-columns:1fr}}
.hm .kachel{background:linear-gradient(160deg,#fff 0%,rgba(255,255,255,.5) 100%);border-radius:16px;padding:20px}
.hm .kachel i{display:block;width:32px;height:32px;border-radius:10px;margin-bottom:13px}
.hm .kachel h4{font-size:1.05rem;font-weight:700;margin-bottom:6px}
.hm .kachel p{font-size:.9rem;line-height:1.5;color:var(--grau)}
.hm .gestaltungen{background:linear-gradient(160deg,#fff 0%,rgba(255,255,255,.6) 100%);border-radius:22px;padding:28px;margin-bottom:32px}
.hm .gest-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.hm .gest-raster a{display:block;border:1px solid #e2e7e7;border-radius:14px;overflow:hidden;color:var(--tinte);background:#fff}
.hm .gest-raster a:hover{border-color:var(--blau);text-decoration:none}

.hm .schutz{display:flex;flex-wrap:wrap;gap:22px;margin-bottom:34px}
.hm .schutz>div{flex:1 1 380px;min-width:0;background:linear-gradient(160deg,#fff 0%,#f1f8f8 100%);border-radius:20px;padding:28px}
.hm .schutz h4{font-size:1.35rem;font-weight:800;margin-bottom:10px}
.hm .schutz p{font-size:.98rem;line-height:1.6;color:var(--grau)}
.hm .haken{list-style:none;margin:16px 0 18px;padding:0}
.hm .haken li{position:relative;padding-left:26px;margin:9px 0;font-size:.96rem;line-height:1.5;color:var(--grau)}
.hm .haken li::before{content:"";position:absolute;left:3px;top:.45em;width:11px;height:6px;border-left:2px solid var(--blau);border-bottom:2px solid var(--blau);transform:rotate(-45deg)}
.hm .ratentabelle{width:100%;border-collapse:collapse;font-size:.95rem}
.hm .ratentabelle th{text-align:left;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--leise);font-weight:700;padding:0 10px 8px 0}
.hm .ratentabelle td{padding:10px 10px 10px 0;border-top:1px solid #e2e7e7}
.hm .ratentabelle td:first-child{font-weight:600}
.hm .klein{font-size:.84rem;color:var(--leise);margin-top:12px}

/* 7 Projekte */
.hm .projekte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:1040px){.hm .projekte{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.hm .projekte{grid-template-columns:1fr}}
.hm .projekt{border:1px solid var(--linie);border-radius:20px;overflow:hidden;background:#fff}
.hm .projekt .bild{height:150px;display:grid;place-items:center;color:#fff;font-family:'Sora',sans-serif;font-weight:800;font-size:1.5rem}
/* Vorschaubild der echten Seite statt Farbkasten: oben buendig, damit der Kopf der Seite zu sehen ist */
.hm .projekt .bild.hat-bild{height:auto;aspect-ratio:16/10;padding:0;background:var(--linie);overflow:hidden}
.hm .projekt .bild.hat-bild img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;transition:transform .5s ease}
.hm .projekt .bild.hat-bild:hover img{transform:scale(1.03)}
@media (prefers-reduced-motion: reduce){.hm .projekt .bild.hat-bild img{transition:none}.hm .projekt .bild.hat-bild:hover img{transform:none}}
.hm .projekt .inhalt{padding:22px}
.hm .projekt h3{font-size:1.2rem;font-weight:500;font-family:ui-monospace,Menlo,monospace;margin-bottom:6px}
.hm .projekt p{font-size:.95rem;line-height:1.5;color:var(--grau);margin-bottom:14px}
.hm .projekt .zahl{font-family:ui-monospace,Menlo,monospace;font-size:.82rem;color:var(--leise)}

/* 8 Verdienen */
.hm .verdienen{background:linear-gradient(180deg,var(--sand-zart) 0%,var(--sand) 100%);border-top:1px solid var(--sand-rand);border-bottom:1px solid var(--sand-rand)}
.hm .verd-oben{display:flex;flex-wrap:wrap;gap:46px;align-items:flex-start;margin-bottom:36px}
.hm .verd-oben>div{flex:1 1 420px;min-width:0}
.hm .zitat{margin:0;background:linear-gradient(155deg,#fff 0%,var(--sand-zart) 100%);border:1px solid var(--sand-rand);border-radius:22px;padding:30px 32px}
.hm .zitat p:first-child{font-family:'Sora',sans-serif;font-size:1.45rem;line-height:1.3;font-weight:700;letter-spacing:-.02em;margin-bottom:14px}
.hm .zitat p:last-child{font-size:1rem;line-height:1.6;color:var(--grau)}
.hm .verd-kacheln{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media (max-width:1040px){.hm .verd-kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.hm .verd-kacheln{grid-template-columns:1fr}}
.hm .verd-kacheln>div{background:linear-gradient(160deg,#fff 0%,var(--sand-zart) 100%);border:1px solid var(--sand-rand);border-radius:18px;padding:24px}
.hm .verd-kacheln h3{font-size:1.1rem;font-weight:700;margin-bottom:7px}
.hm .verd-kacheln p{font-size:.95rem;line-height:1.55;color:var(--grau)}

/* 9 Sprachen */
.hm .sprachen{background:#e3f1f0;border-top:1px solid #cfe6e5;border-bottom:1px solid #cfe6e5}
.hm .spr-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.hm .spr-raster>div{background:linear-gradient(160deg,#fff 0%,#f1f8f8 100%);border:1px solid #cfe6e5;border-radius:18px;padding:26px}
.hm .spr-raster h3{font-size:1.25rem;font-weight:700;margin-bottom:8px}
.hm .spr-raster p{font-size:.95rem;line-height:1.55;color:var(--grau);margin-bottom:14px}
.hm .spr-raster .mo{font-size:.82rem;color:var(--blau)}

/* 10 Auktionen */
.hm .auk{background:linear-gradient(180deg,var(--flieder-zart) 0%,var(--flieder) 100%);border-top:1px solid var(--flieder-rand);border-bottom:1px solid var(--flieder-rand)}
.hm .auk-in{display:flex;flex-wrap:wrap;gap:26px;align-items:center;padding:42px 24px}
.hm .auk h2{font-size:1.8rem;font-weight:700;margin-bottom:6px}
.hm .auk-liste{flex:999 1 460px;display:flex;flex-wrap:wrap;gap:12px}
.hm .auk-liste a{flex:1 1 200px;background:linear-gradient(150deg,#fff 0%,var(--flieder-zart) 100%);border:1px solid var(--flieder-rand);border-radius:14px;padding:16px 18px;color:var(--tinte)}

/* 11 Kosten */
.hm .kosten{background:linear-gradient(160deg,#223038 0%,#0a5558 55%,#1b2529 100%);color:#f0f4f4}
.hm .kosten-in{display:flex;flex-wrap:wrap;gap:60px;align-items:flex-start;padding:86px 24px}
.hm .kosten h2{font-size:clamp(2rem,4vw,3.4rem);font-weight:800;color:#fff}
.hm .kosten .lead{font-size:1.05rem;line-height:1.55;color:#cfd7d8;max-width:44ch;margin-top:20px}
.hm .kosten ol{list-style:none;margin:0;padding:0;flex:999 1 420px;min-width:0}
.hm .kosten li{display:flex;gap:20px;padding:22px 0;border-top:1px solid rgba(255,255,255,.18)}
.hm .kosten .nr{font-family:ui-monospace,Menlo,monospace;color:#86cfcc;padding-top:3px}
.hm .kosten h3{font-size:1.2rem;font-weight:700;color:#fff;margin-bottom:6px}
.hm .kosten p{color:#cfd7d8;font-size:.98rem;line-height:1.55}

/* 12 Loslegen */
.hm .los{position:relative;overflow:hidden;text-align:center;color:#fff;background:
  radial-gradient(900px 520px at 15% 0%,#0e9c9c 0%,rgba(46,92,240,0) 60%),
  radial-gradient(760px 480px at 88% 100%,#2cc7c2 0%,rgba(44,199,194,0) 58%),#0a6e70}
.hm .los-in{position:relative;padding:86px 24px}
.hm .los h2{font-size:clamp(2.2rem,5vw,3.9rem);font-weight:800;color:#fff;max-width:18ch;margin:0 auto 18px}
.hm .los p{font-size:1.2rem;line-height:1.55;color:#d5eceb;max-width:52ch;margin:0 auto 30px}
.hm .los .wege{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:center}
.hm .los ol{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 34px;margin:34px 0 0;padding:0;color:#c6e4e3}
.hm .los ol .nr{color:#fff;font-weight:500;font-family:ui-monospace,Menlo,monospace}

/* 12b Fragen */
.hm .fr-wahl{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.hm .fr-knopf{font-family:'Sora',sans-serif;font-size:1.02rem;font-weight:700;padding:13px 24px;border-radius:999px;
  cursor:pointer;border:1.5px solid #e2e7e7;background:#fff;color:var(--grau)}
.hm .fr-knopf:hover{border-color:var(--lila);color:var(--lila)}
.hm .fr-tafel[hidden]{display:none}
.hm .fr-start{font-family:'Sora',sans-serif;font-size:1.25rem;font-weight:700;line-height:1.35;border-left:3px solid;
  padding:4px 0 4px 18px;margin-bottom:22px;max-width:60ch}
.hm .fr-rede{margin:0;display:grid;gap:14px;max-width:860px}
.hm .fr-rede dt{justify-self:end;background:#eef2f2;border-radius:18px 18px 4px 18px;padding:13px 18px;font-weight:600;
  font-size:1rem;max-width:80%;text-align:right}
.hm .fr-rede dd{justify-self:start;margin:0;background:#fff;border:1px solid;border-radius:18px 18px 18px 4px;
  padding:14px 18px;font-size:.98rem;line-height:1.6;color:var(--grau);max-width:86%;box-shadow:0 10px 26px rgba(17,19,26,.05)}
.hm .fr-form{margin-top:34px;background:linear-gradient(150deg,#f3f6f6 0%,#eceff0 100%);border:1px solid #d7dfe0;border-radius:22px;padding:26px}
.hm .fr-form label strong{font-size:1.1rem}
.hm .fr-form label span{color:var(--leise);font-size:.92rem}
.hm .fr-zeile{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 10px}
.hm .fr-zeile input{flex:999 1 320px;min-width:0;font-size:1rem;padding:15px 18px;border:1px solid #c9d3d4;border-radius:999px;background:#fff}
.hm .fr-zeile button{flex:1 1 auto;border:0;cursor:pointer;font-family:inherit}
.hm .fr-mail{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.hm .fr-mail label{font-size:.88rem;color:var(--leise)}
.hm .fr-mail input{flex:0 1 280px;font-size:.95rem;padding:9px 14px;border:1px solid #c9d3d4;border-radius:999px;background:#fff}
.hm .fr-antwort{display:block;margin-top:16px;background:#fff;border:1px solid #d7dfe0;border-radius:18px 18px 18px 4px;
  padding:16px 18px;font-size:1rem;line-height:1.6;color:var(--tinte)}
.hm .fr-antwort[hidden]{display:none}
@media (max-width:640px){.hm .fr-rede dt,.hm .fr-rede dd{max-width:100%}}

/* 13 Stöbern */
.hm .stoebern{background:#fff;border-top:1px solid var(--linie)}
.hm .stb{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:34px}
.hm .stb h3{font-family:'Inter',sans-serif;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--leise);font-weight:700;margin-bottom:14px}
.hm .stb ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.hm .stb ul.unter{display:grid;gap:9px}
.hm .stb .pille{display:inline-block;border:1px solid var(--linie);border-radius:999px;padding:8px 14px;font-size:.9rem;color:var(--tinte)}
.hm .stb .pille:hover{border-color:var(--blau);color:var(--blau);text-decoration:none}

@media (max-width:640px){
  /* Suchfeld: auf dem Handy gehoert die ganze Breite dem Feld, der Knopf darunter */
  .hm .gsuche{flex-wrap:nowrap;border-radius:26px;padding:8px 8px 8px 16px;gap:8px}
  .hm .gsuche input{flex:999 1 80px;font-size:1.08rem;padding:12px 2px}
  .hm .gsuche-funke svg{width:22px;height:22px}
  .hm .gsuche button{flex:none;width:54px;height:54px;padding:0;border-radius:18px;font-size:1.3rem}
  .hm .gsuche .gs-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .hm .gsuche .gs-pfeil{display:inline}
  /* Zahlen nebeneinander statt untereinander */
  .hm .zahlen{gap:8px}
  .hm .zahlen>div{flex:1 1 calc(50% - 8px);min-width:0;padding:12px 14px}
  .hm .zahlen dd{font-size:1.5rem}
  .hm .zahlen dt{font-size:.76rem}
  .hm .zahlen .zahl-zu{font-size:.68rem;max-width:none}
  /* Auf dem Handy nehmen die Karten sonst halbe Bildschirme ein */
  .hm .karten{gap:10px}
  .hm .karte{padding:14px 16px;border-radius:14px}
  .hm .karte .name{font-size:1.15rem;margin-bottom:4px}
  .hm .karte .was{display:none}
  .hm .karte .fuss{padding-top:10px}
  .hm .karte .preis{font-size:1.1rem}
  .hm .kacheln{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .hm .kachel{padding:14px}
  .hm .kachel i{width:24px;height:24px;margin-bottom:9px}
  .hm .kachel h4{font-size:.98rem}
  .hm .kachel p{font-size:.84rem}
  .hm .verd-kacheln{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .hm .verd-kacheln>div{padding:16px}
  .hm .verd-kacheln h3{font-size:1rem}
  .hm .verd-kacheln p{font-size:.86rem}
  .hm .ab{padding:44px 0}
  .hm .kopf-in{padding:52px 24px 44px}
}
@media (max-width:860px){
  .hm .laufzeile .lauf-aussen{margin:0 12px}
  .hm .laufmarke{left:20px;padding:7px 12px;font-size:.72rem}
  .hm .lauf-aussen{-webkit-mask-image:linear-gradient(90deg,transparent,#000 118px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,transparent,#000 118px,#000 calc(100% - 24px),transparent)}
  .hm .lchip{padding:11px 2px 11px 11px;font-size:.92rem}
  .hm .lchip i{padding-left:9px}
  .hm .band-kopf{padding:34px 24px 10px}
  .hm .vgl-t thead{display:none}
  .hm .vgl-t,.hm .vgl-t tbody,.hm .vgl-t tr,.hm .vgl-t th,.hm .vgl-t td{display:block;width:auto}
  .hm .vgl-t tbody tr{border-bottom:1px solid var(--linie);padding:14px 16px}
  .hm .vgl-t tbody th{width:auto;padding:0 0 8px;border:0;font-family:'Sora',sans-serif;font-size:1.02rem}
  .hm .vgl-t td{padding:5px 0;border:0;display:flex;gap:12px;justify-content:space-between;background:none}
  .hm .vgl-t td.wir{background:none;border-radius:10px;padding:6px 10px;margin:2px 0}
  .hm .vgl-t td::before{content:attr(data-label);color:var(--leise);font-weight:600;flex:0 0 40%}
  .hm .wort{display:none}
  .hm .schau{min-height:0}
  .hm .schau .schau-a,.hm .schau .schau-b{position:static;width:100%;transform:none;margin-bottom:16px}
  .hm .tief{background-attachment:scroll}
  .hm .ab{padding:56px 0}
  .hm .tafel{padding:26px}
  .hm .bew,.hm .gut{padding:28px}
}
@media (prefers-reduced-motion:reduce){
  .hm .schweb,.hm .schweb2{animation:none}
  .hm .lauf{animation:none}
  .hm .lauf-aussen{overflow-x:auto}
  .hm .karte:hover,.hm .knopf:hover{transform:none}
}

/* Vergleichsseiten je Wettbewerber */
.hm .rech{background:#fff;border:1px solid var(--linie);border-radius:22px;padding:26px;box-shadow:0 18px 44px rgba(17,19,26,.06)}
.hm .rech-feld{display:block;max-width:320px;margin-bottom:22px}
.hm .rech-feld span{display:block;font-size:.86rem;font-weight:600;color:var(--leise);margin-bottom:7px}
.hm .rech-feld input{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.5rem;padding:14px 18px;
  border:1.5px solid #bfdedd;border-radius:16px;outline:0;background:#fff;color:var(--tinte)}
.hm .rech-feld input:focus{border-color:var(--blau)}
.hm .rech-karten{display:flex;flex-wrap:wrap;gap:16px}
.hm .rech-karte{flex:1 1 260px;min-width:0;border-radius:18px;padding:22px;background:linear-gradient(160deg,#fbfcfc,#eff3f3)}
.hm .rech-karte.wir{background:linear-gradient(160deg,#e7f4f3,#d6eceb)}
.hm .rech-karte h3{font-size:1.1rem;font-weight:700;margin-bottom:4px}
.hm .rech-satz{font-size:.9rem;color:var(--leise);margin-bottom:10px}
.hm .rech-wert{font-size:2.2rem;font-weight:700;letter-spacing:-.02em}
.hm .rech-karte.wir .rech-wert{color:#0a6e70}
.hm .rech-klein{font-size:.84rem;color:var(--leise);margin-top:8px;line-height:1.5}
.hm .rech-diff{margin-top:18px;font-size:1.05rem;font-weight:600;color:#0a6e70}
.hm .ehr{list-style:none;margin:0;padding:0}
.hm .ehr li{position:relative;padding:11px 0 11px 28px;border-top:1px solid var(--linie);line-height:1.55;color:var(--grau)}
.hm .ehr li:first-child{border-top:0}
.hm .ehr li::before{content:"";position:absolute;left:0;top:19px;width:10px;height:10px;border-radius:3px;background:var(--gruen);opacity:.5}
.hm .vgl-tief .schritte li{border-top-color:rgba(255,255,255,.22)}
.hm .vgl-tief .schritte b{color:#fff}
.hm .vgl-tief .schritte span,.hm .vgl-tief .schritte .nr{color:#cfe9e7}
.hm .vgl-tief .wege{display:flex;flex-wrap:wrap;gap:14px}
.hm .vgl-kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.hm .vgl-kachel{display:block;background:#fff;border:1px solid var(--linie);border-radius:16px;padding:18px;color:var(--tinte)}
.hm .vgl-kachel:hover{border-color:var(--blau);text-decoration:none}
.hm .vgl-kachel strong{display:block;font-family:'Sora',sans-serif;font-size:1.02rem;margin-bottom:6px}
.hm .vgl-kachel span{font-size:.88rem;color:var(--leise);line-height:1.5;display:block}
.hm .pr-ok{color:#0a6e70;font-weight:600}
.hm .pr-gesperrt{color:var(--amber);font-weight:600}
.hm .pr-parkseite{color:var(--amber);font-weight:600}
.hm .pr-leer{color:var(--leise);font-weight:600}
.hm .pr-fehler{color:var(--leise);font-weight:600}

/* Seitenkopf auf Unterseiten: dieselbe Formensprache wie die Startseite, nur etwas flacher.
   Die Startseite bleibt unberührt, hier greift nur .hm-nurkopf. */
.hm-nurkopf .kopf-in{padding:62px 24px 54px}
.hm-nurkopf .kopf h1{font-size:clamp(2.1rem,4.6vw,3.6rem);max-width:20ch;margin-bottom:16px}
.hm-nurkopf .kopf-lead{font-size:1.15rem;max-width:62ch;margin-bottom:22px}
.hm-nurkopf .kopf-slogan{font-family:'Sora','Inter',system-ui,sans-serif;font-weight:600;font-size:1.02rem;
  color:var(--gruen);margin:0 0 22px;max-width:60ch}
.hm-nurkopf .kopf-tasten{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 6px}
.hm-nurkopf .zahlen{margin-top:26px}
.hm-nurkopf .b1{top:120px;width:230px;height:230px}
.hm-nurkopf .b2{top:56px;width:140px;height:140px}
.hm-nurkopf .b3{right:220px;bottom:34px;width:72px;height:72px}
/* Der Kopf steht über dem Inhalt der Seite, der Abstand darunter kommt von hier */
.hm-nurkopf{margin-bottom:34px}
@media (max-width:760px){
  .hm-nurkopf .kopf-in{padding:44px 20px 38px}
  .hm-nurkopf .b2,.hm-nurkopf .b3{display:none}
}

/* Vergleich: die Kurzfassung in der eigenen Spalte steht fett ueber dem Satz */
.hm .vgl-t td.wir .vgl-kurz{display:block;font-weight:700;margin-bottom:2px}

/* Die beiden Tueren: Reiter zum Wechseln, als Verweise statt Schaltflaechen */
.tuer-reiter{display:flex;justify-content:center;gap:8px;margin:0 auto;padding:36px 24px 40px;max-width:1180px}
.tuer-reiter a{font-family:'Sora',sans-serif;font-size:1.05rem;font-weight:700;padding:13px 30px;border-radius:999px;
  border:1.5px solid #dbe2e2;background:#fff;color:var(--grau);text-decoration:none;white-space:nowrap}
.tuer-reiter a:hover{border-color:#b9c6c6;color:var(--tinte)}
.tuer-reiter a[aria-current=page]{border-color:transparent;background:var(--gruen);color:#fff}
@media (max-width:560px){.tuer-reiter a{font-size:.95rem;padding:11px 20px}}

.hm .tuer-merk{font-size:.8rem;color:var(--leise);margin:14px auto 0;max-width:1180px;padding:0 24px}

/* Das Wahlband: zwei Texte, sonst nichts.

   Karl: "der seitenbanner sollte auch nur zwei texte haben für käufer für verkäufer, alles
   andere soll weg, kein begleittext." Ein Band, das erklaert, ist kein Band mehr, sondern ein
   weiterer Abschnitt. Die Erklaerung steht hinter dem Klick. */
.hm .tuerband{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--linie);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
/* randlos: aus dem Innenrahmen des Kopfes heraus ueber die volle Fensterbreite.
   Ohne max-width:100vw entsteht auf Schirmen mit sichtbarem Rollbalken ein waagerechter
   Ueberlauf, weil 100vw den Balken mitzaehlt. */
.hm .tuerband.randlos{position:relative;width:100vw;max-width:100vw;margin:30px 0 26px;left:50%;transform:translateX(-50%)}
.hm .tb-haelfte{display:flex;align-items:center;justify-content:center;gap:16px;padding:46px 32px;text-decoration:none;color:inherit;transition:background .25s}
.hm .tb-v{background:linear-gradient(160deg,#eef7f6 0%,#dcefed 100%)}
.hm .tb-k{background:linear-gradient(160deg,var(--sand-zart) 0%,var(--sand) 100%)}
.hm .tb-v:hover{background:linear-gradient(160deg,#e4f3f1 0%,#cfe8e5 100%)}
.hm .tb-k:hover{background:linear-gradient(160deg,#f7efe0 0%,#efe0c6 100%)}
.hm .tb-haelfte b{font-family:'Sora',sans-serif;font-size:clamp(1.7rem,3.4vw,2.9rem);font-weight:800;line-height:1.1}
.hm .tb-pfeil{font-size:1.6rem;line-height:1;opacity:.4;transition:transform .25s,opacity .25s}
.hm .tb-haelfte:hover .tb-pfeil{opacity:1;transform:translateX(6px)}
.hm .tb-haelfte[data-zuletzt] b::after{content:'';display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--gruen);margin-left:12px;vertical-align:middle}
/* Die Haelfte, auf der man gerade steht: leise markiert, nicht ausgeschaltet. Anklickbar
   bleibt sie, weil ein Verweis auf die eigene Seite niemanden stoert und ein ausgegrauter
   Reiter nur die Frage aufwirft, warum er ausgegraut ist. */
.hm .tb-hier{box-shadow:inset 0 -4px 0 0 var(--gruen)}
.hm .tb-k.tb-hier{box-shadow:inset 0 -4px 0 0 var(--sand-ink)}
.hm .tb-hier .tb-pfeil{opacity:0}
@media (max-width:620px){
  .hm .tuerband{grid-template-columns:1fr}
  .hm .tb-haelfte{padding:28px 24px}
}


/* Themenkaesten.

   Karl: "die unterscheidung der themen sollte durch boxenfarben besser ersichtlich sein."
   Abschnitt auf Abschnitt in Weiss liest sich als ein langer Text; ein eigener Grund je Thema
   macht aus dem Text eine Gliederung, die man ueberfliegen kann. Vier Farbwelten aus der
   Palette des Hauses, kein Schwarz als Flaeche. */
.hm .tbox{border-radius:26px;padding:40px 44px;border:1px solid}
/* Ein Abschnitt, der einen Kasten traegt, braucht nicht zusaetzlich den vollen Abstand:
   sonst stehen 160 Pixel Weiss zwischen zwei Farbflaechen. Faellt :has aus, bleibt es beim
   alten Abstand, also nur luftiger. */
.hm .ab:has(> .in > .tbox){padding:44px 0}
.hm .tbox .schritte li{border-top-color:rgba(17,19,26,.12)}
.hm .tbox .schritte li:first-child{border-top:0;padding-top:4px}
.hm .tbox .kacheln>.kachel{background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9)}
@media (max-width:760px){.hm .tbox{padding:26px 22px;border-radius:20px}}

.hm .tbox-lagune{background:linear-gradient(158deg,#f1f9f8 0%,#e2f1ef 100%);border-color:#cfe4e1}
.hm .tbox-sand{background:linear-gradient(158deg,var(--sand-zart) 0%,var(--sand) 100%);border-color:var(--sand-rand)}
.hm .tbox-flieder{background:linear-gradient(158deg,var(--flieder-zart) 0%,var(--flieder) 100%);border-color:var(--flieder-rand)}
.hm .tbox-papier{background:linear-gradient(158deg,#fbfbf9 0%,var(--creme) 100%);border-color:var(--linie)}

/* Der Umzugsabschnitt als eigener Kasten.

   Karl: "gefällt mir gut, sollte aber eine box werden, also farblich". Er steht auf weissem
   Grund zwischen zwei farbigen Abschnitten und ging dort unter; als abgesetzte Flaeche ist er
   das, was er inhaltlich ist, naemlich der eine Schritt, der am Anfang steht. */
.hm .umzugbox{background:linear-gradient(158deg,#f1f9f8 0%,#e2f1ef 100%);border:1px solid #cfe4e1;
  border-radius:26px;padding:40px 44px}
.hm .umzugbox .schritte li{border-top-color:rgba(10,110,112,.16)}
.hm .umzugbox .schritte li:first-child{border-top:0;padding-top:4px}
@media (max-width:760px){.hm .umzugbox{padding:26px 22px;border-radius:20px}}