/* Ihr-Bester-Gutachter.de – Gestaltung. Eigene Datei, keine Fremdbausteine. */

@font-face { font-family: Poppins; font-weight: 400; font-style: normal; font-display: swap; src: url("/schrift/poppins-v5-latin-regular.woff2") format("woff2"); }
@font-face { font-family: Poppins; font-weight: 500; font-style: normal; font-display: swap; src: url("/schrift/poppins-v5-latin-500.woff2") format("woff2"); }
@font-face { font-family: Poppins; font-weight: 600; font-style: normal; font-display: swap; src: url("/schrift/poppins-v5-latin-600.woff2") format("woff2"); }
@font-face { font-family: Poppins; font-weight: 700; font-style: normal; font-display: swap; src: url("/schrift/poppins-v5-latin-700.woff2") format("woff2"); }

:root {
  --blau: #0068b4;
  --blau-dunkel: #00508c;
  --blau-hell: #e8f1f9;
  --dunkel: #20252b;
  --dunkel-2: #2b3138;
  --text: #4a4f55;
  --ueberschrift: #262a2f;
  --grau: #f5f6f7;
  --linie: #dfe2e6;
  --gruen: #25d366;
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --titelschrift: Poppins, var(--schrift);
  --breite: 1170px;
  --rund: 6px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; font: 16px/1.7 var(--schrift); color: var(--text); background: #fff; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blau); }
a:hover { color: var(--blau-dunkel); }
h1, h2, h3 { font-family: var(--titelschrift); color: var(--ueberschrift); line-height: 1.3; font-weight: 600; margin: 1.6em 0 .6em; }
h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); margin-top: 0; }
h2 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.65rem); }
h3 { font-size: 1.12rem; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid #f2a900; outline-offset: 2px; }
.sym { width: 1.2em; height: 1.2em; flex: none; vertical-align: -.2em; }
.rahmen { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 16px; }
.mittig { text-align: center; }
.unsichtbar { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sprung { position: absolute; left: -9999px; top: 0; background: var(--blau); color: #fff; padding: 10px 16px; z-index: 100; }
.sprung:focus { left: 8px; top: 8px; }

/* Knöpfe */
.knopf { display: inline-flex; align-items: center; gap: .5em; background: var(--blau); color: #fff; font: 500 .95rem/1.2 var(--titelschrift); padding: .85em 1.5em; border-radius: var(--rund); text-decoration: none; border: 2px solid var(--blau); cursor: pointer; transition: background .15s, color .15s; }
.knopf:hover { background: var(--blau-dunkel); border-color: var(--blau-dunkel); color: #fff; }
.knopf-klein { padding: .55em 1.1em; font-size: .9rem; }
.knopf-weiss { background: #fff; color: var(--blau); border-color: #fff; }
.knopf-weiss:hover { background: var(--blau-hell); border-color: var(--blau-hell); color: var(--blau-dunkel); }
.knopf-rand { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.knopf-rand:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }
.knopf-rand-blau { background: transparent; color: var(--blau); }
.knopf-rand-blau:hover { background: var(--blau); color: #fff; }

/* Kopf */
.kopf { background: #fff; border-bottom: 1px solid var(--linie); position: sticky; top: 0; z-index: 50; }
.kopf-oben { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px 24px; padding-top: 14px; padding-bottom: 0; }
.logo img { width: 300px; max-width: 100%; }
.kopf-info { display: flex; justify-content: flex-end; align-items: center; gap: 28px; }
.kopf-kontakt { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; line-height: 1.25; }
.kopf-kontakt .sym { width: 30px; height: 30px; color: var(--blau); }
.kopf-kontakt strong { display: block; font-family: var(--titelschrift); font-weight: 600; color: var(--ueberschrift); }
.kopf-kontakt small { font-size: .8rem; }
.navigation { grid-column: 1 / -1; }
.navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.navigation a { display: block; padding: 14px 16px 16px; font: 500 .95rem var(--titelschrift); color: var(--ueberschrift); text-decoration: none; border-bottom: 3px solid transparent; }
.navigation li:first-child a { padding-left: 0; }
.navigation a:hover, .navigation a[aria-current] { color: var(--blau); border-bottom-color: var(--blau); }
.menue-schalter, .menue-knopf { display: none; }

@media (max-width: 900px) {
  .kopf-oben { grid-template-columns: 1fr auto; padding-bottom: 12px; }
  .logo img { width: 230px; }
  .kopf-info { display: none; }
  .menue-knopf { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; cursor: pointer; border-radius: var(--rund); }
  .menue-knopf span, .menue-knopf span::before, .menue-knopf span::after { content: ""; display: block; width: 24px; height: 2px; background: var(--ueberschrift); position: relative; transition: transform .2s; }
  .menue-knopf span::before { position: absolute; top: -7px; }
  .menue-knopf span::after { position: absolute; top: 7px; }
  .menue-schalter { display: block; position: absolute; right: 16px; top: 14px; width: 44px; height: 44px; opacity: 0; margin: 0; cursor: pointer; z-index: 2; }
  .menue-schalter:focus-visible + .menue-knopf { outline: 3px solid #f2a900; }
  .menue-schalter:checked + .menue-knopf span { background: transparent; }
  .menue-schalter:checked + .menue-knopf span::before { transform: translateY(7px) rotate(45deg); }
  .menue-schalter:checked + .menue-knopf span::after { transform: translateY(-7px) rotate(-45deg); }
  .navigation { display: none; }
  .menue-schalter:checked ~ .navigation { display: block; }
  .navigation ul { flex-direction: column; border-top: 1px solid var(--linie); }
  .navigation a, .navigation li:first-child a { padding: 12px 0; border-bottom: 1px solid var(--linie); }
}

/* Titelband und Brotkrumen */
.titelband { background: var(--grau); padding: 38px 0 30px; border-bottom: 1px solid var(--linie); }
.titelband h1 { margin: 0 0 .3em; }
.krumen { font-size: .88rem; }
.krumen a { color: var(--text); }

/* Bühne (Startseite) */
.buehne { position: relative; background: var(--dunkel); color: #fff; min-height: 460px; overflow: hidden; }
.buehne-folie { position: absolute; inset: 0; display: flex; align-items: center; background-size: cover; background-position: center; opacity: 0; visibility: hidden; transition: opacity .8s, visibility .8s; }
/* Wie auf der alten Seite: Bild fast unverändert, nur hinter dem Text ein leichter Schatten für die Lesbarkeit */
.buehne-folie::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,20,35,.45) 0%, rgba(10,20,35,.18) 55%, rgba(10,20,35,0) 80%); }
.buehne-2::before { background: url("/bilder/2018/11/AdobeStock_84582413.jpg") center / cover; filter: brightness(1.45) contrast(.95); }
.buehne-2 .buehne-text { text-shadow: 0 1px 4px rgba(0,0,0,.7), 0 0 18px rgba(0,0,0,.35); }
.buehne-3::before { background: linear-gradient(270deg, rgba(10,20,35,.45) 0%, rgba(10,20,35,.18) 55%, rgba(10,20,35,0) 80%); }
.buehne-text { text-shadow: 0 1px 3px rgba(0,0,0,.45); }
.buehne-text .knopf { text-shadow: none; }
.buehne-folie.aktiv { opacity: 1; visibility: visible; position: relative; min-height: 460px; }
.buehne-1 { background-image: url("/bilder/2019/02/FCED78C8-81EA-4C03-A8C0-C4CC4206EEF2-1.jpg"); background-position: top center; }
.buehne-2 { background-image: url("/bilder/2018/11/AdobeStock_84582413.jpg"); }
.buehne-3 { background-image: url("/bilder/2018/11/calculator-385506_1920-1.jpg"); }
.buehne-text { position: relative; padding-top: 60px; padding-bottom: 70px; max-width: var(--breite); }
.buehne-text > * { max-width: 640px; }
.buehne-mitte { text-align: center; }
.buehne-mitte > * { margin-left: auto; margin-right: auto; }
.buehne-rechts { text-align: right; }
.buehne-rechts > * { margin-left: auto; }
.buehne .buehne-klein { font: 400 clamp(1.5rem, 1rem + 2.4vw, 3.1rem)/1.15 var(--titelschrift); margin-top: 0; margin-bottom: 0; }
.buehne .buehne-gross { font: 700 clamp(1.8rem, 1.1rem + 3vw, 3.4rem)/1.15 var(--titelschrift); margin-top: 0; margin-bottom: .5em; }
.buehne p { font-size: 1.08rem; }
.buehne-punkte { position: absolute; left: 0; right: 0; bottom: 22px; display: flex; justify-content: center; gap: 10px; }
.buehne-punkte button { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; background: transparent; padding: 0; cursor: pointer; }
.buehne-punkte button[aria-current="true"] { background: #fff; }

/* Abschnitte */
.abschnitt { padding: 56px 0; }
.rahmen > .abschnitt { padding: 36px 0; }
.abschnitt-grau { background: var(--grau); padding: 56px 0; }
.abschnitt-dunkel { background: var(--dunkel); color: #d6dae0; }
.abschnitt-dunkel h2 { color: #fff; margin-top: .3em; }
.abschnitt-titel { text-align: center; margin-top: 0; }
.abschnitt-titel::after { content: ""; display: block; width: 60px; height: 3px; background: var(--blau); margin: 14px auto 0; }
.untertitel { text-align: center; max-width: 720px; margin: 0 auto 32px; }
.haupttitel { margin-top: 36px; }
.leitspruch { font: 600 .9rem var(--titelschrift); letter-spacing: .12em; text-transform: uppercase; color: #8fc3ee; margin: 0; }
.zweispaltig { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.zweispaltig.ausgerichtet { align-items: start; }
@media (max-width: 760px) { .zweispaltig { grid-template-columns: 1fr; gap: 24px; } }
.abschnitt-dunkel .zweispaltig img { margin: 0 auto; max-width: 260px; }

/* Bewertung */
.bewertung { display: inline-flex; align-items: center; gap: 16px; background: #fff; border: 1px solid var(--linie); border-radius: var(--rund); padding: 14px 22px; text-decoration: none; color: var(--text); box-shadow: 0 2px 10px rgba(0,0,0,.05); text-align: left; }
.bewertung:hover { border-color: var(--blau); color: var(--text); }
.bewertung-sterne { display: flex; color: #f2a900; }
.stern { width: 22px; height: 22px; }
.bewertung-text { line-height: 1.4; }
.bewertung-text strong { color: var(--ueberschrift); font-family: var(--titelschrift); }
.bewertung-text small { display: block; font-size: .8rem; color: #777; }
@media (max-width: 520px) { .bewertung { flex-direction: column; text-align: center; } }

/* Kästen (Startseite) */
.kastenraster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 12px; }
@media (max-width: 760px) { .kastenraster { grid-template-columns: 1fr; } }
.kasten { background: #fff; border: 1px solid var(--linie); border-radius: var(--rund); padding: 30px 20px; text-decoration: none; color: var(--text); transition: border-color .15s, transform .15s; }
.kasten:hover { border-color: var(--blau); transform: translateY(-2px); color: var(--text); }
.kasten h2 { font-size: 1.15rem; margin: .7em 0 .3em; }
.kasten p { margin: 0; }
.kasten-sym { width: 64px; height: 64px; padding: 14px; border: 2px solid var(--linie); border-radius: 50%; color: var(--blau); margin: 0 auto; }

/* WhatsApp */
.whatsapp-band { background: var(--blau); color: #fff; padding: 30px 0; }
.whatsapp-inhalt { display: flex; align-items: center; gap: 24px; }
.whatsapp-inhalt h2 { color: #fff; margin: 0 0 .2em; font-size: 1.3rem; }
.whatsapp-inhalt p { margin: 0; }
.whatsapp-inhalt > div { flex: 1; }
.whatsapp-kreis { width: 70px; height: 70px; border-radius: 50%; background: var(--gruen); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.whatsapp-kreis .sym { width: 38px; height: 38px; }
@media (max-width: 700px) { .whatsapp-inhalt { flex-direction: column; text-align: center; } }

/* Ablauf */
.ablauf { list-style: none; padding: 0; margin: 30px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; counter-reset: schritt; }
.ablauf li { background: var(--grau); border-radius: var(--rund); padding: 26px; border-top: 4px solid var(--blau); }
.ablauf h3 { margin: .5em 0 .3em; }
.ablauf p { margin: 0; }
.ablauf-sym { width: 40px; height: 40px; color: var(--blau); }
@media (max-width: 760px) { .ablauf { grid-template-columns: 1fr; } }

/* Karten (Beiträge) */
.kartenraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 26px; margin: 10px 0 30px; }
.karte { background: #fff; border: 1px solid var(--linie); border-radius: var(--rund); overflow: hidden; transition: box-shadow .15s, transform .15s; }
.karte:hover { box-shadow: 0 6px 20px rgba(0,0,0,.08); transform: translateY(-2px); }
.karte-link { display: flex; flex-direction: column; height: 100%; color: var(--text); text-decoration: none; }
.karte-link:hover { color: var(--text); }
.karte-bild { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--grau); }
.karte-bild-leer { background: linear-gradient(135deg, var(--blau-hell), #fff); }
.karte-text { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.karte-text h3 { margin: 0 0 .4em; font-size: 1.05rem; }
.karte-text p { font-size: .93rem; }
.karte-datum { font-size: .8rem !important; color: #888; margin: 0 0 .3em; }
.weiter { margin-top: auto; color: var(--blau); font: 500 .9rem var(--titelschrift); display: inline-flex; align-items: center; gap: 6px; }

/* Städte */
.stadtwolke { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 10px 0 24px; }
.stadtwolke a { background: var(--blau-hell); padding: .4em 1em; border-radius: 99px; text-decoration: none; font-weight: 500; }
.stadtwolke a:hover { background: var(--blau); color: #fff; }
.stadtraster { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin: 20px 0 40px; }
.stadtraster > * { flex: 0 0 100%; min-width: 0; }
@media (min-width: 480px) { .stadtraster > * { flex-basis: calc((100% - 18px) / 2); } }
@media (min-width: 720px) { .stadtraster > * { flex-basis: calc((100% - 36px) / 3); } }
@media (min-width: 900px) { .stadtraster > * { flex-basis: calc((100% - 54px) / 4); } }
@media (min-width: 1100px) { .stadtraster > * { flex-basis: calc((100% - 72px) / 5); } }
.stadt-karte { display: block; border: 1px solid var(--linie); border-radius: var(--rund); overflow: hidden; text-decoration: none; font: 500 .95rem var(--titelschrift); color: var(--ueberschrift); background: #fff; }
.stadt-karte:hover { border-color: var(--blau); color: var(--blau); }
.stadt-karte span { display: block; padding: 12px 14px; }
.stadt-bild { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.stadt-bild-leer { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--blau), var(--blau-dunkel)); color: rgba(255,255,255,.85); }
.stadt-bild-leer .sym { width: 44px; height: 44px; }
.ortliste { columns: 4 170px; padding-left: 1.1em; margin: 10px 0 24px; }
.ortliste li { break-inside: avoid; }
.stadt-einstieg { display: grid; grid-template-columns: 3fr 2fr; gap: 40px; padding-top: 40px; align-items: start; }
.stadt-figur { margin: 0; }
.stadt-kopfbild { border-radius: var(--rund); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 760px) { .stadt-einstieg { grid-template-columns: 1fr; gap: 20px; } }
.nachbarn a { white-space: nowrap; }
.vorspann { font-size: 1.12rem; color: var(--ueberschrift); }

/* Leistungen */
.leistungsraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px; margin-top: 20px; }
.leistung { border: 1px solid var(--linie); border-radius: var(--rund); padding: 20px; }
.leistung h3 { margin: .5em 0 .3em; font-size: 1.02rem; }
.leistung p { margin: 0; font-size: .93rem; }
.leistung-sym { width: 34px; height: 34px; color: var(--blau); }

/* Inhaltsseiten */
.inhalt-text { padding-top: 36px; padding-bottom: 50px; }
.inhalt-text > *:first-child { margin-top: 0; }
.inhalt-text h2.klein { font-size: 1.1rem; }
.hakenliste { list-style: none; padding: 0; }
.hakenliste li { position: relative; padding-left: 32px; margin-bottom: .7em; }
.hakenliste li::before { content: ""; position: absolute; left: 0; top: .35em; width: 20px; height: 20px; border-radius: 50%; background: var(--blau) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4L18 8' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.team-bild { margin: 0; }
.team-bild img { border-radius: var(--rund); }
.team-bild figcaption { font-size: .85rem; margin-top: 8px; }
.siegelreihe { display: flex; flex-wrap: wrap; gap: 40px; justify-content: center; margin: 30px 0; }
.siegelreihe figure { margin: 0; text-align: center; font: 500 .9rem var(--titelschrift); }
.siegelreihe img { max-height: 200px; width: auto; margin: 0 auto 8px; }
.zertifikate { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 20px; }
.zertifikate a { display: block; text-decoration: none; color: var(--text); font-size: .88rem; text-align: center; border: 1px solid var(--linie); border-radius: var(--rund); padding: 10px; background: #fff; }
.zertifikate a:hover { border-color: var(--blau); }
.zertifikate img { aspect-ratio: 5 / 7; object-fit: cover; width: 100%; background: var(--grau); margin-bottom: 8px; }
.hinweis-kasten { background: var(--blau-hell); border-left: 4px solid var(--blau); padding: 16px 20px; border-radius: 0 var(--rund) var(--rund) 0; margin-top: 30px; }

/* FAQ */
.faq-verzeichnis { columns: 2 300px; padding-left: 1.1em; margin-bottom: 40px; }
.faq-verzeichnis li { break-inside: avoid; margin-bottom: .3em; }
.faq details { border: 1px solid var(--linie); border-radius: var(--rund); margin-bottom: 12px; background: #fff; }
.faq details[open] { border-color: var(--blau); }
.faq summary { cursor: pointer; list-style: none; padding: 16px 52px 16px 20px; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font: 500 1.5rem var(--titelschrift); color: var(--blau); }
.faq details[open] summary::after { content: "–"; }
.faq summary h2 { font-size: 1.05rem; margin: 0; display: inline; }
.faq details > p { padding: 0 20px; }
.faq details > p:last-child { padding-bottom: 6px; }

/* Kontakt */
.kontaktwege { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; margin: 24px 0 40px; }
.kontaktweg { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; border: 1px solid var(--linie); border-radius: var(--rund); padding: 24px 16px; text-decoration: none; color: var(--text); }
a.kontaktweg:hover { border-color: var(--blau); color: var(--text); }
.kontaktweg strong { font-family: var(--titelschrift); color: var(--ueberschrift); font-size: 1.05rem; }
.kontaktweg .kasten-sym { width: 58px; height: 58px; padding: 12px; }
.formular { background: var(--grau); border-radius: var(--rund); padding: 26px; max-width: 820px; }
.formular-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
@media (max-width: 640px) { .formular-raster { grid-template-columns: 1fr; } }
.formular label { display: block; font-weight: 600; color: var(--ueberschrift); margin-bottom: 4px; font-size: .95rem; }
.formular input, .formular textarea { width: 100%; font: inherit; padding: 11px 12px; border: 1px solid #c4c9cf; border-radius: var(--rund); background: #fff; color: var(--ueberschrift); }
.formular input:focus, .formular textarea:focus { border-color: var(--blau); outline: 2px solid var(--blau-hell); }
.formular-hinweis { font-size: .88rem; }

/* Aktuelles */
.spalten { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 40px; padding-top: 36px; padding-bottom: 20px; }
@media (max-width: 900px) { .spalten { grid-template-columns: 1fr; } }
.spalten .kartenraster { margin-top: 0; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.spalten .inhalt-text { padding-top: 0; }
.kategorien { background: var(--grau); border-radius: var(--rund); padding: 20px 22px; }
.kategorien h2 { font-size: 1.1rem; margin: 0 0 .6em; }
.kategorien ul { list-style: none; margin: 0; padding: 0; }
.kategorien a { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--linie); text-decoration: none; color: var(--text); }
.kategorien a:hover, .kategorien a[aria-current] { color: var(--blau); }
.anzahl { color: #999; font-size: .85rem; }
.blaettern { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 30px; }
.blaettern a, .blaettern span { padding: 6px 12px; border: 1px solid var(--linie); border-radius: var(--rund); text-decoration: none; }
.blaettern span { background: var(--blau); color: #fff; border-color: var(--blau); }
.beitrag-meta { color: #888; font-size: .9rem; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.marke { background: var(--blau-hell); padding: 2px 10px; border-radius: 99px; text-decoration: none; font-size: .82rem; }
.beitrag h2 { font-size: 1.3rem; }
.beitrag figure { margin: 1.4em 0; }
.beitrag figure img { border-radius: var(--rund); }
.beitrag ul li strong { color: var(--blau); }
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin: 1.4em 0; }
.galerie figure { margin: 0; }
.galerie img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; border-radius: 4px; background: var(--grau); }
.beitrag table { border-collapse: collapse; width: 100%; margin: 1em 0; }
.beitrag td, .beitrag th { border: 1px solid var(--linie); padding: 6px 10px; text-align: left; }

/* Kontaktband */
.kontaktband { background: linear-gradient(135deg, var(--blau), var(--blau-dunkel)); color: #fff; padding: 46px 0; }
.kontaktband h2 { color: #fff; margin-top: 0; }
.kontaktband-raster { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 40px; align-items: center; }
@media (max-width: 860px) { .kontaktband-raster { grid-template-columns: minmax(0, 1fr); } }
.kontaktband-knoepfe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.kontaktband-knoepfe .knopf { justify-content: center; padding-left: .8em; padding-right: .8em; white-space: nowrap; }
@media (max-width: 560px) { .kontaktband-knoepfe { grid-template-columns: minmax(0, 1fr); } }
.plz-pruefung { background: rgba(255,255,255,.1); border-radius: var(--rund); padding: 20px; }
.plz-pruefung label { display: block; margin-bottom: 10px; }
.plz-zeile { display: flex; gap: 10px; }
.plz-zeile input { flex: 1; min-width: 0; font: inherit; padding: 10px 12px; border-radius: var(--rund); border: 0; }
.plz-antwort { margin: 12px 0 0; font-weight: 600; min-height: 1.2em; }
.plz-antwort a { color: #fff; }

/* Fuß */
.fuss { background: var(--dunkel); color: #aab1b9; font-size: .95rem; padding-top: 50px; }
.fuss a { color: #d6dae0; text-decoration: none; }
.fuss a:hover { color: #fff; text-decoration: underline; }
.fuss h2 { color: #fff; font-size: 1.05rem; margin: 0 0 1em; }
.fuss-raster { display: grid; grid-template-columns: 2fr 1fr 1.3fr; gap: 40px; padding-bottom: 40px; }
@media (max-width: 760px) { .fuss-raster { grid-template-columns: 1fr; gap: 26px; } }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: .5em; }
.fuss-kontakt li, .fuss-kontakt a { display: flex; align-items: center; gap: 10px; }
.fuss-logo { width: 260px; margin-bottom: 18px; filter: brightness(0) invert(1); opacity: .9; }
.fuss-unten { background: #181c21; padding: 16px 0; font-size: .88rem; }
.fuss-unten .rahmen { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }

/* Leiste auf dem Handy */
.handyleiste { display: none; }
@media (max-width: 760px) {
  body { padding-bottom: 56px; }
  .handyleiste { display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; box-shadow: 0 -2px 10px rgba(0,0,0,.15); }
  .handyleiste a { display: flex; align-items: center; justify-content: center; gap: 8px; height: 56px; color: #fff; text-decoration: none; font: 600 1rem var(--titelschrift); }
  .handyleiste a:first-child { background: #1fa855; }
  .handyleiste a:last-child { background: var(--blau); }
}
@media print { .kopf, .kontaktband, .fuss, .handyleiste, .buehne { display: none; } }

/* Siegelband (Startseite): blaues Band, Siegel ragen oben und unten hinaus */
.siegelband { background: linear-gradient(135deg, #12355f, #0d2a4d); color: #dbe6f3; margin: 90px 0 70px; }
.siegelband-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; }
.siegel-paar { display: flex; justify-content: center; gap: 26px; margin: -56px 0; }
.siegel-paar img { width: 210px; height: auto; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .35)); }
.siegel-text { padding: 30px 0 0; }
.siegelband h2 { color: #fff; font-weight: 700; font-size: clamp(1.35rem, .9rem + 1.8vw, 2rem); margin: 0 0 .6em; letter-spacing: -.01em; }
.siegel-frage { color: #fff; font-size: 1.12rem; }
.siegel-knopf { margin: 26px 0 -26px; }
.knopf-band { background: var(--blau); border-color: #fff; box-shadow: 0 8px 20px rgba(0, 0, 0, .25); }
.knopf-band:hover { background: #fff; color: var(--blau); border-color: #fff; }
@media (max-width: 860px) {
  .siegelband { margin: 70px 0 50px; }
  .siegelband-raster { grid-template-columns: 1fr; gap: 10px; }
  .siegel-paar { margin: -60px 0 0; }
  .siegel-paar img { width: 140px; }
  .siegel-text { padding: 10px 0 0; text-align: center; }
}
/* Einflug der Siegel beim Scrollen (nur mit JavaScript und ohne „Bewegung reduzieren“) */
.mit-animation .einflug { opacity: 0; transform: translateX(-160px) rotate(-6deg); transition: opacity .7s ease-out, transform .9s cubic-bezier(.2, .8, .25, 1); }
.mit-animation .einflug-2 { transition-delay: .2s; }
.mit-animation .einflug.sichtbar { opacity: 1; transform: none; }

/* Kundenmeinungen: ProvenExpert erst nach Klick (Datenschutz) */
.kundenmeinungen { max-width: 1050px; margin: 0 auto; }
.km-hinweis { text-align: center; background: var(--grau, #f7f7f7); border: 1px solid #e3e8ef; border-radius: 6px; padding: 28px 22px; }
.km-hinweis p { max-width: 640px; margin-left: auto; margin-right: auto; }
.km-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 18px; }
.km-rahmen { display: block; width: 100%; height: 260px; border: 0; }
.km-fuss { text-align: center; font-size: .9rem; margin-top: 10px; }

/* ---- Handy (Feinschliff 09.11.2026): kürzere Startseite, größere Tippflächen ---- */
.logo { display: inline-block; padding: 8px 0; }
.buehne-punkte button { position: relative; }
.buehne-punkte button::after { content: ""; position: absolute; inset: -14px; }
@media (max-width: 640px) {
  /* Beispiele und Beiträge auf der Startseite: seitlich wischen statt endlos scrollen */
  .kartenraster-wischen { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px;
    margin-left: -16px; margin-right: -16px; padding: 4px 16px 14px; scroll-padding-left: 16px; -webkit-overflow-scrolling: touch; }
  .kartenraster-wischen .karte { flex: 0 0 82%; scroll-snap-align: start; }
  .kartenraster-wischen .karte:hover { transform: none; }
  .kartenraster-wischen + .mittig { margin-top: 0; }
  /* Drei Kästen unter der Bühne: kompakt, Symbol links */
  .kastenraster { gap: 12px; }
  .kasten { display: grid; grid-template-columns: 56px 1fr; column-gap: 14px; align-items: center; text-align: left; padding: 14px 16px; }
  .kasten .kasten-sym { width: 52px; height: 52px; padding: 11px; grid-row: span 2; margin: 0; }
  .kasten h2 { margin: 0; font-size: 1.05rem; }
  .kasten p { font-size: .93rem; }
  /* „So einfach geht's“: kompakter */
  .ablauf { gap: 14px; margin-top: 20px; }
  .ablauf li { padding: 16px 18px; }
  .ablauf h3 { margin-top: .3em; }
  .abschnitt { padding-top: 40px; padding-bottom: 40px; }
  .abschnitt-grau { padding: 40px 0; }
  /* Kontaktseite: Kontaktwege kompakt, Symbol links */
  .kontaktwege { gap: 10px; margin: 18px 0 30px; }
  .kontaktweg { display: grid; grid-template-columns: 52px 1fr; column-gap: 14px; align-items: center; text-align: left; padding: 12px 16px; gap: 0 14px; }
  .kontaktweg .kasten-sym { width: 50px; height: 50px; padding: 11px; grid-row: span 2; margin: 0; }
  .kontaktweg span { font-size: .93rem; }
  /* Fußbereich: Links leichter zu treffen */
  .fuss li { margin-bottom: 0; }
  .fuss li a { display: inline-block; padding: 8px 0; }
  .fuss-unten a { display: inline-block; padding: 8px 4px; }
}

/* Ergebnisseite der PLZ-Prüfung (/vor-ort/) */
.vor-ort { max-width: 760px; margin: 0 auto; }
.vor-ort-ergebnis { text-align: center; border-radius: 12px; padding: 36px 28px 30px; margin: 8px 0 28px; }
.vor-ort-ja { background: #eaf7ef; border: 2px solid #1f9d55; }
.vor-ort-anfrage { background: var(--blau-hell); border: 2px solid var(--blau); }
.vor-ort-leer { background: var(--grau); border: 1px solid var(--linie); }
.vor-ort-zeichen { width: 84px; height: 84px; margin: 0 auto 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; background: #1f9d55; }
.vor-ort-anfrage .vor-ort-zeichen { background: var(--blau); }
.vor-ort-sym { width: 46px; height: 46px; }
.vor-ort-ja .vor-ort-zeichen { animation: vor-ort-auf .45s ease-out both; }
@keyframes vor-ort-auf { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.vor-ort-plz { margin: 0 0 .2em; font-size: .95rem; letter-spacing: .02em; }
.vor-ort-ergebnis h2 { margin: 0 0 .5em; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); }
.vor-ort-ja h2 { color: #17723e; }
.vor-ort-ergebnis h2:focus { outline: none; }
.vor-ort-punkte { list-style: none; padding: 0; margin: 0 auto 1.4em; display: inline-block; text-align: left; }
.vor-ort-punkte li { display: flex; gap: .5em; align-items: baseline; margin: .3em 0; }
.vor-ort-punkte .sym { color: #1f9d55; }
.vor-ort-knoepfe { margin: 0 0 .8em; }
.knopf-gross { font-size: 1.1rem; padding: 1em 1.8em; }
.vor-ort-weitere, .vor-ort-stadtlink { margin: 0 0 .4em; }
.vor-ort-neu { background: #fff; border: 1px solid var(--linie); border-radius: var(--rund); padding: 18px 20px; }
.vor-ort-neu label { display: block; margin-bottom: 8px; font-weight: 600; }
.vor-ort-neu input { border: 1px solid var(--linie); }
.vor-ort-neu .plz-antwort { color: #b42318; }
.vor-ort-gebiete { text-align: center; margin-top: 18px; }
@media (max-width: 520px) { .vor-ort-ergebnis { padding: 28px 16px 24px; } .knopf-gross { width: 100%; justify-content: center; font-size: 1rem; } }
.fuss-version { color: #7d858e; white-space: nowrap; }
.vor-ort-unbekannt { background: #fff7e6; border: 2px solid #d99a00; }
.vor-ort-orte { font-weight: 600; }
.vor-ort-quelle { text-align: center; font-size: .8rem; color: #8a9097; margin-top: 6px; }
.vor-ort-quelle a { color: inherit; }
.stadt-bildrahmen { margin: 0; }
.stadt-bildrahmen figcaption, .bildnachweise { font-size: .78rem; color: #8a9097; margin-top: 6px; line-height: 1.5; }
.stadt-bildrahmen figcaption a, .bildnachweise a { color: inherit; }
.bildnachweise { margin-top: 40px; }

/* Einsatzgebiete: PLZ-Prüfung als Werbekasten */
.plz-werbung { max-width: 820px; margin: 50px auto 10px; text-align: center; background: linear-gradient(135deg, var(--blau-hell), #fff); border: 2px solid var(--blau); border-radius: 12px; padding: 38px 30px 30px; scroll-margin-top: 100px; }
.plz-werbung h2 { margin: 0 0 .4em; }
.plz-werbung-zeichen { width: 76px; height: 76px; margin: 0 auto 14px; border-radius: 50%; background: var(--blau); color: #fff; display: flex; align-items: center; justify-content: center; }
.plz-werbung-sym { width: 40px; height: 40px; }
.plz-werbung-formular { max-width: 560px; margin: 22px auto 0; }
.plz-werbung-formular input { border: 2px solid var(--blau); font-size: 1.1rem; padding: 12px 14px; }
.plz-werbung-formular .plz-antwort { color: #b42318; min-height: 1.4em; margin: 8px 0 0; }
.plz-werbung-telefon { margin: 6px 0 0; font-size: .95rem; }
@media (max-width: 520px) { .plz-werbung { padding: 28px 16px 22px; } .plz-werbung-formular .plz-zeile { flex-direction: column; } .plz-werbung-formular .knopf { justify-content: center; } }

/* ---- Handy (Feinschliff 15.11.2026) ---- */
/* Lange Wörter (z. B. „Stundenverrechnungssätze“) trennen statt die Seite zu verbreitern */
h1, h2, h3, .karte-text h3, .faq summary h2 { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
main p, main li, main td, main figcaption { overflow-wrap: break-word; }
/* Wischen auf der Bühne nicht durch Zoomen per Doppeltipp verzögern */
a, button, label, summary, input, textarea { touch-action: manipulation; }
/* Tablets und große Handys quer (761–900 px): Telefon im Kopf ist ausgeblendet, daher Handyleiste schon hier */
@media screen and (max-width: 900px) {
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
  .handyleiste { display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    box-shadow: 0 -2px 10px rgba(0,0,0,.15); background: var(--blau); padding-bottom: env(safe-area-inset-bottom, 0px); transition: transform .2s; }
  .handyleiste a { display: flex; align-items: center; justify-content: center; gap: 8px; height: 56px; color: #fff; text-decoration: none; font: 600 1rem var(--titelschrift); }
  .handyleiste a:first-child { background: #1fa855; }
  .handyleiste a:last-child { background: var(--blau); }
  /* Beim Tippen ins Formular (Bildschirmtastatur offen) verdeckt die Leiste nichts */
  .tippt .handyleiste { transform: translateY(110%); }
  /* iPhone mit Aussparung: Inhalt nicht unter die Ränder */
  .rahmen { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  /* Brotkrumen, Inhaltsverzeichnis, Bildnachweise: größere Tippflächen */
  .krumen { line-height: 2.2; }
  .krumen a { display: inline-block; padding: 4px 0; }
  .faq-verzeichnis li { margin-bottom: .55em; }
  .bildnachweise, .stadt-bildrahmen figcaption, .vor-ort-quelle { line-height: 2; }
  .blaettern a, .blaettern span { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .kategorien a { padding: 10px 0; }
  .marke { display: inline-block; padding: 6px 12px; }
  /* Offenes Menü: bei kleinen Bildschirmen scrollbar statt abgeschnitten */
  .menue-schalter:checked ~ .navigation { max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); overflow-y: auto; }
  .navigation a, .navigation li:first-child a { padding: 14px 0; font-size: 1.05rem; }
  /* Tabellen in Beiträgen seitlich wischbar */
  .beitrag table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 640px) {
  /* Bühne: etwas niedriger, damit darunter schon die Bewertung sichtbar ist */
  .buehne, .buehne-folie.aktiv { min-height: 400px; }
  .buehne-text { padding-top: 40px; padding-bottom: 60px; }
  .buehne-text .knopf { width: 100%; justify-content: center; }
  /* Formularfelder: 16 px Schrift, sonst zoomt das iPhone beim Antippen hinein */
  .formular input, .formular textarea, .plz-zeile input { font-size: 16px; }
  .formular { padding: 20px 16px; margin-left: -4px; margin-right: -4px; }
  .formular button, .formular .knopf { width: 100%; justify-content: center; }
  .titelband { padding: 26px 0 20px; }
  .inhalt-text { padding-top: 26px; }
  .fuss-version { white-space: normal; }
}
/* Handy quer (wenig Höhe): Kopf scrollt mit weg, damit genug Platz für den Inhalt bleibt */
@media (max-height: 500px) and (orientation: landscape) {
  .kopf { position: static; }
  html { scroll-padding-top: 10px; }
  .buehne, .buehne-folie.aktiv { min-height: 0; }
}