/* Bedang Umzüge – Stylesheet */

@font-face {
  font-family: "Public Sans";
  src: url("../fonts/public-sans.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque.woff") format("woff");
  font-weight: 700 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --blau: #0E2A47;
  --orange: #F97316;
  --orange-hell: #FB8C3C;
  --orange-text: #B23C0A;
  --text: #14202E;
  --text-leise: #4A5868;
  --hell-auf-blau: #D6E2EF;
  --grund: #F3F1EC;
  --flaeche: #F7F5F0;
  --linie: #E2DDD2;
  --feldrand: #C9C3B6;
  --gruen: #1F7A4D;
  --schatten: 0 6px 24px rgba(14, 42, 71, 0.10);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--blau); }
a:hover { color: var(--orange-text); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

h1, h2, .marke { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-weight: 800; }
h1, h2, h3, p { margin: 0; }
img, svg { display: block; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.wrap-schmal { max-width: 760px; margin: 0 auto; padding: 0 16px; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 10; background: #fff; padding: 10px 14px; border-radius: 8px; }

/* Kopfzeile */
.kopf { background: var(--blau); color: #fff; padding: 14px 0; }
.kopf .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 28px; }
.marke { color: #fff; text-decoration: none; font-size: 24px; padding: 4px 0; display: inline-flex; align-items: center; flex-shrink: 0; }
.marke:hover { color: #fff; }
.marke img { display: block; height: 60px; width: auto; }
@media (max-width: 720px) { .marke img { height: 48px; } }
.menu { display: flex; flex-wrap: wrap; gap: 0 22px; font-size: 16px; }
.menu a { color: #fff; text-decoration: none; font-weight: 600; padding: 10px 0; display: inline-block; }
.menu a:hover { color: #FDBA74; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 56px; padding: 0 26px; border-radius: 12px;
  font-weight: 800; font-size: 18px; text-decoration: none; border: 0; cursor: pointer;
  font-family: inherit;
}
.btn-orange { background: var(--orange); color: var(--blau); }
.btn-orange:hover { background: var(--orange-hell); color: var(--blau); }
.btn-blau { background: var(--blau); color: #fff; }
.btn-blau:hover { background: #17406A; color: #fff; }
.btn-rahmen { border: 1.5px solid #fff; color: #fff; font-weight: 700; font-size: 17px; }
.btn-rahmen:hover { background: rgba(255, 255, 255, 0.10); color: #fff; }

/* Startbereich */
.hero { background: var(--blau); color: #fff; padding: 44px 0 128px; }
.hero-text { max-width: 860px; }
.hero h1, .hero p.lead { max-width: 720px; }
.dachzeile { color: #FDBA74; font-weight: 700; font-size: 16px; letter-spacing: 0.02em; }
.hero h1 { margin-top: 14px; font-size: clamp(36px, 6vw, 62px); line-height: 1.05; }
.hero p.lead { margin-top: 20px; font-size: 19px; color: var(--hell-auf-blau); }
.knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* Abschnitte */
.abschnitt { padding: 56px 0; }
.titel { font-size: clamp(28px, 4vw, 38px); color: var(--blau); line-height: 1.15; }
.untertitel { margin-top: 8px; color: var(--text-leise); }

.karte { background: #fff; border-radius: 18px; padding: 32px 24px; box-shadow: var(--schatten); }
.leistungen { margin-top: -96px; padding-top: 0; }

.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 28px; }

.leistung { display: flex; gap: 14px; padding: 18px; border-radius: 14px; background: var(--flaeche); }
.leistung svg { flex: none; }
.leistung h3 { font-size: 18px; color: var(--blau); }
.leistung p { margin-top: 4px; font-size: 15px; color: var(--text-leise); }

.schritte { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.schritt { padding: 22px; border-radius: 14px; background: #fff; border: 1.5px solid var(--linie); }
.nr { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--blau); color: #fff; font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 20px; }
.nr-orange { background: var(--orange); color: var(--blau); }
.schritt h3 { margin-top: 14px; font-size: 19px; color: var(--blau); }
.schritt p { margin-top: 6px; font-size: 15px; color: var(--text-leise); }

.gebiet { display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: flex-start; }
.gebiet > div, .gebiet > ul { flex: 1 1 340px; }
.gebiet .gross { margin-top: 10px; font-size: 19px; }
.gebiet .klein { margin-top: 8px; color: var(--text-leise); }
.orte { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.orte li { padding: 10px 16px; border-radius: 999px; background: #fff; border: 1.5px solid var(--feldrand); font-weight: 600; }
.orte li.haupt { background: var(--blau); border-color: var(--blau); color: #fff; font-weight: 700; }

.aufruf { background: var(--orange); color: var(--blau); border-radius: 18px; padding: 36px 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.aufruf > div { flex: 1 1 380px; }
.aufruf h2 { font-size: clamp(26px, 3.6vw, 34px); }
.aufruf p { margin-top: 6px; font-size: 18px; font-weight: 500; }

.kontakt-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 24px; }
.kontakt { display: flex; align-items: center; gap: 14px; min-height: 88px; padding: 18px; border-radius: 14px; background: #fff; border: 1.5px solid var(--linie); text-decoration: none; color: var(--text); }
.kontakt:hover { border-color: var(--blau); color: var(--text); }
.kontakt svg { flex: none; }
.kontakt small { display: block; font-size: 14px; color: var(--text-leise); }
.kontakt strong { font-size: 18px; color: var(--blau); word-break: break-word; }

/* Fußzeile */
.fuss { background: var(--blau); color: var(--hell-auf-blau); padding: 32px 0; font-size: 15px; }
.fuss .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; }
.fuss nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.fuss a { color: var(--hell-auf-blau); }
.fuss a:hover { color: #fff; }

/* Rechtstexte */
.recht { padding: 48px 16px 72px; line-height: 1.6; }
.recht h1 { font-size: clamp(32px, 5vw, 44px); color: var(--blau); }
.recht .stand { margin-top: 10px; color: var(--text-leise); }
.recht .karte { margin-top: 28px; padding: 28px; display: flex; flex-direction: column; gap: 26px; box-shadow: none; }
.recht h2 { font-family: "Public Sans", sans-serif; font-weight: 700; font-size: 20px; color: var(--blau); margin-bottom: 6px; }
.recht p + p { margin-top: 10px; }
.offen { background: #FFF3E6; border-radius: 4px; padding: 0 4px; }

/* Anfrage-Formular */
.anfrage-kopf { background: var(--blau); color: #fff; padding: 14px 0 80px; }
.anfrage-kopf h1 { margin-top: 28px; font-size: clamp(30px, 5vw, 44px); line-height: 1.1; }
.anfrage-kopf p.lead { margin-top: 12px; font-size: 18px; color: var(--hell-auf-blau); }
.reiter { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; width: 100%; margin-top: 24px; padding: 5px; border-radius: 18px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.25); }
.reiter button, .reiter a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 60px; padding: 6px 6px; border: 0; border-radius: 14px; background: transparent; color: #fff; font: inherit; font-weight: 700; font-size: 16px; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; }
.reiter button:hover, .reiter a:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.reiter [aria-current="page"], .reiter [aria-current="page"]:hover { background: var(--orange); color: var(--blau); }
.reiter button:focus-visible, .reiter a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.reiter-preis { font-size: 13px; font-weight: 600; opacity: 0.85; }
.anfrage-kopf .reiter + h1, .anfrage-kopf .reiter + h1#seitenTitel { margin-top: 24px; }
@media (max-width: 720px) {
  .reiter { grid-template-columns: repeat(6, 1fr); }
  .reiter > :nth-child(-n+3) { grid-column: span 2; }
  .reiter > :nth-child(n+4) { grid-column: span 3; }
  .reiter button, .reiter a { gap: 0; min-height: 54px; padding: 6px 2px; font-size: 13.5px; }
  .reiter-preis { font-size: 12px; }
}
.mt-kueche-link { display: flex; flex-wrap: wrap; gap: 4px 8px; padding: 14px 16px; border-radius: 12px; background: #FFF3E6; border: 1.5px dashed var(--orange); color: var(--blau); text-decoration: none; }
.mt-kueche-link span { color: var(--orange-text); font-weight: 700; }
.mt-kueche-link:hover { background: #FFE8D1; }
/* Qualitätsversprechen */
.q-kopf .wrap { max-width: 1120px; }
.q-kopf h1 { max-width: 22ch; }
.q-kopf p.lead { max-width: 640px; }
.q-etikett { display: block; margin-top: 28px; margin-bottom: 0; color: #FDBA74; }
.q-kopf .q-etikett + h1 { margin-top: 10px; }
.q-main { margin-top: -48px; padding-bottom: 72px; display: flex; flex-direction: column; gap: 56px; }
.q-raster { margin-top: 0; }
.q-raster .kachel { cursor: default; }
.q-h { font-size: 19px; color: var(--blau); font-family: "Public Sans", sans-serif; font-weight: 700; }
.q-kueche { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; align-items: start; padding: 32px; border-radius: 20px; background: #fff; border: 1.5px solid var(--linie); }
@media (max-width: 820px) { .q-kueche { grid-template-columns: 1fr; padding: 22px; } }
.q-text { margin-top: 12px; color: var(--text); }
.q-liste { margin: 16px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.q-liste li { position: relative; padding-left: 30px; }
.q-liste li::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%230E2A47' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; }
.q-klein { margin-top: 14px; font-size: 14px; color: var(--text-leise); }
.q-preis { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 16px; background: var(--blau); color: #fff; }
.q-preis-titel { font-weight: 700; color: #CFE0F2; }
.q-preis-zeile { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.18); font-size: 17px; }
.q-preis-zeile strong { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-weight: 800; font-size: 26px; color: var(--orange); white-space: nowrap; }
.q-preis-hinweis { font-size: 14px; color: #B9CBDD; }
.q-preis .btn { align-self: stretch; justify-content: center; text-align: center; }
.q-schluss { text-align: center; display: flex; flex-direction: column; align-items: center; }
.q-knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }
.q-btn-rahmen { border: 1.5px solid var(--blau); color: var(--blau); font-weight: 700; }
.q-btn-rahmen:hover { background: #EAF0F6; color: var(--blau); }

/* Möbelmontage-Auswahl */
.mt-einleitung { font-size: 15px; color: var(--text-leise); }
.mt-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; }
.mt-teil { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "text preis" "text zahl"; align-items: center; gap: 6px 12px; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--linie); background: #fff; transition: border-color .2s ease, background-color .2s ease; }
.mt-teil.gewaehlt { border-color: var(--blau); background: #EAF0F6; }
.mt-text { grid-area: text; display: flex; flex-direction: column; gap: 2px; }
.mt-text strong { font-size: 16px; color: var(--blau); }
.mt-text span { font-size: 14px; color: var(--text-leise); }
.mt-preis { grid-area: preis; justify-self: end; font-weight: 800; font-size: 15px; color: var(--orange-text); white-space: nowrap; }
.mt-zahl { grid-area: zahl; justify-self: end; display: inline-flex; align-items: center; gap: 4px; }
.mt-zahl button { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--linie); background: #fff; color: var(--blau); font: inherit; font-size: 20px; font-weight: 700; line-height: 1; cursor: pointer; }
.mt-zahl button:hover { border-color: var(--blau); }
.mt-zahl input { width: 40px; height: 36px; border: 0; background: transparent; text-align: center; font: inherit; font-weight: 700; font-size: 17px; color: var(--text); -moz-appearance: textfield; }
.mt-zahl input::-webkit-outer-spin-button, .mt-zahl input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.kachel-link { margin-top: auto; font-weight: 700; font-size: 15px; color: var(--orange-text); text-decoration: none; }
.kachel-link:hover { text-decoration: underline; }
.anfrage-kopf .zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 20px; }
.anfrage-kopf .zurueck { color: #fff; font-weight: 600; padding: 10px 0; }
.anfrage-main { margin-top: -48px; padding-bottom: 64px; }

.formular { background: #fff; border-radius: 16px; padding: 28px; box-shadow: var(--schatten); display: flex; flex-direction: column; gap: 32px; }
@media (max-width: 480px) { .formular { padding: 22px 16px; } }
.formular section { display: flex; flex-direction: column; gap: 16px; }
.formular h2 { font-size: 20px; color: var(--blau); font-family: "Public Sans", sans-serif; font-weight: 700; }
.formular h2 span { color: var(--orange-text); }
.zwei { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.box { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 12px; background: var(--flaeche); }
.paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }

fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.lbl, legend { display: block; font-weight: 600; font-size: 15px; margin: 0 0 6px; color: var(--text); padding: 0; }
.lbl .leise, legend .leise { font-weight: 400; color: var(--text-leise); }
.pflicht { color: var(--orange-text); }

.fld {
  width: 100%; min-height: 48px; padding: 12px 14px;
  border: 1.5px solid var(--feldrand); border-radius: 10px; background: #fff; color: var(--text);
  font: inherit; font-size: 16px;
}
select.fld { appearance: none; -webkit-appearance: none; padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230E2A47' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }
.fld:focus { outline: 3px solid var(--orange); outline-offset: 1px; border-color: var(--blau); }
textarea.fld { min-height: 96px; resize: vertical; }

.stufen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.stufe { position: relative; display: block; min-height: 72px; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--feldrand); background: #fff; cursor: pointer; }
.stufe input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stufe strong { display: block; font-size: 17px; }
.stufe span { display: block; font-size: 14px; margin-top: 4px; color: var(--text-leise); }
.stufe:has(input:checked) { border: 2.5px solid var(--blau); background: #EAF0F6; padding: 11px 13px; }
.stufe:has(input:focus-visible) { outline: 3px solid var(--orange); outline-offset: 2px; }

.extras { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.haken { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 14px; border: 1.5px solid var(--feldrand); border-radius: 10px; cursor: pointer; }
.haken:has(input:checked) { border-color: var(--blau); background: #EAF0F6; }
.haken input, .zustimmung input { width: 20px; height: 20px; flex: none; accent-color: var(--blau); margin: 0; }

.upload { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 72px; padding: 12px; border: 2px dashed #9AA7B6; border-radius: 12px; color: var(--blau); font-weight: 600; cursor: pointer; background: var(--flaeche); text-align: center; }
.upload:hover { border-color: var(--blau); }
.upload:focus-within { outline: 3px solid var(--orange); outline-offset: 2px; }
.upload .zeile1 { display: flex; align-items: center; gap: 10px; }
.upload small { font-weight: 400; color: var(--text-leise); font-size: 14px; }
.upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }

.zustimmung { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--text-leise); }
.zustimmung input { margin-top: 2px; }

.senden { min-height: 56px; width: 100%; font-size: 19px; }
.hinweis { text-align: center; font-size: 15px; color: var(--text-leise); }

.fehlerbox { background: #FDECEC; border: 1.5px solid #B42318; color: #7A1A12; border-radius: 12px; padding: 14px 16px; }
.fehlerbox ul { margin: 6px 0 0; padding-left: 20px; }

.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.danke { background: #fff; border-radius: 16px; padding: 40px 28px; text-align: center; box-shadow: var(--schatten); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.danke h1 { font-size: clamp(26px, 4vw, 32px); color: var(--blau); }
.danke p { color: var(--text-leise); font-size: 17px; }

.unter-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin-top: 28px; font-size: 15px; }

/* WhatsApp */
.btn-wa { background: #25D366; color: var(--blau); font-size: 17px; }
.btn-wa:hover { background: #3BE077; color: var(--blau); }
.wa-float {
  position: fixed; right: 16px; bottom: 16px; z-index: 50;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 56px; padding: 0 20px 0 16px; border-radius: 999px;
  background: #25D366; color: var(--blau); font-weight: 800; font-size: 16px; text-decoration: none;
  box-shadow: 0 6px 20px rgba(14, 42, 71, 0.30);
}
.wa-float:hover { background: #3BE077; color: var(--blau); }
@media (max-width: 480px) { .wa-float span { display: none; } .wa-float { padding: 0 16px; } }
body { padding-bottom: env(safe-area-inset-bottom); }
.fuss { padding-bottom: 96px; }

/* Kostenübernahme: Jobcenter / Pflegegrad */
.auch { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 20px; }
.auch > span { color: var(--hell-auf-blau); font-weight: 600; font-size: 16px; }
.pill { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: rgba(255,255,255,0.12); border: 1.5px solid rgba(255,255,255,0.45); color: #fff; font-weight: 700; font-size: 16px; text-decoration: none; }
.pill:hover { background: rgba(255,255,255,0.22); color: #fff; }
.kosten-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-top: 24px; }
@media (max-width: 360px) { .kosten-raster { grid-template-columns: 1fr; } }
.kosten { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 16px; background: #fff; border: 1.5px solid var(--linie); scroll-margin-top: 16px; }
.kosten h3 { font-size: 21px; color: var(--blau); }
.erfolg { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 12px; background: var(--blau); color: #fff; }
.erfolg-zahl { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-weight: 800; font-size: 36px; line-height: 1; color: var(--orange); white-space: nowrap; }
.erfolg-text { font-weight: 700; font-size: 17px; line-height: 1.3; }
.erfahrung { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 10px; background: #EAF0F6; font-size: 15px; }
.erfahrung svg { flex-shrink: 0; margin-top: 1px; }
.kosten .wichtig { padding: 10px 12px; border-radius: 10px; background: #FFF3E6; font-size: 15px; }
.kosten .btn { margin-top: auto; align-self: flex-start; min-height: 52px; font-size: 17px; }

/* Abzeichen für Jobcenter / Pflegegrad */
.abzeichen { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: #EAF0F6; border: 2px solid #C5D3E2; }
.pill svg { margin-right: 8px; }
.pill img { display: block; width: 24px; height: 24px; margin-right: 9px; flex-shrink: 0; }
.pill-preis strong { margin-left: 2px; color: var(--orange); font-weight: 800; white-space: nowrap; }
.pill svg, .pill img { flex-shrink: 0; }
.pill > span { line-height: 1.25; }
@media (max-width: 600px) { .pill { padding: 8px 16px; } }
.pill img.rund { background: #FFFFFF; border-radius: 50%; padding: 2px; box-sizing: border-box; }
.abzeichen-logo { background: #FFFFFF; }
.hinweis-klein { margin-top: 12px; font-size: 13px; line-height: 1.45; color: #5B6B7D; }

/* Vollmacht-Option im Formular */
.vm-box { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 12px; background: #EAF0F6; border: 1.5px solid #C5D3E2; }
.vm-box p { font-size: 15px; color: var(--text); }

/* Richtpreis-Rechner */
.richtpreis { padding: 20px 22px; border-radius: 16px; background: var(--blau); color: #fff; display: flex; flex-direction: column; gap: 4px; }
.richtpreis .rp-titel { font-weight: 700; font-size: 17px; color: #CFE0F2; }
.richtpreis .rp-betrag { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-weight: 800; font-size: clamp(34px, 6vw, 48px); line-height: 1.1; }
.richtpreis .rp-betrag strong { color: var(--orange); font-weight: 800; }
.richtpreis .rp-spanne { font-size: 16px; color: #E3ECF6; }
.richtpreis .rp-fern { margin-top: 6px; font-size: 15px; color: #FDBA74; }
.richtpreis .rp-details { margin-top: 10px; font-size: 15px; }
.richtpreis .rp-details summary { cursor: pointer; font-weight: 600; color: #fff; }
.richtpreis .rp-details ul { margin: 8px 0 0; padding-left: 20px; color: #E3ECF6; display: flex; flex-direction: column; gap: 3px; }
.richtpreis .rp-hinweis { margin-top: 10px; font-size: 13px; line-height: 1.45; color: #B9CBDD; }

/* Vollmacht-Seite */
.anleitung { display: flex; flex-direction: column; gap: 16px; margin-bottom: 28px; }
.vm-schritte { margin: 0; padding-left: 22px; color: var(--text); }
.vm-schritte li + li { margin-top: 4px; }
.blatt { background: #fff; border-radius: 4px; padding: 40px 36px; box-shadow: var(--schatten); color: #111; font-size: 15px; line-height: 1.5; display: flex; flex-direction: column; gap: 20px; }
@media (max-width: 480px) { .blatt { padding: 24px 18px; } }
.blatt-firma { font-size: 13px; color: #444; border-bottom: 1px solid #ccc; padding-bottom: 8px; }
.blatt-titel { margin-top: 14px; font-size: 24px; color: var(--blau); }
.blatt h3 { font-size: 15px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--blau); margin: 0 0 8px; }
.z-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 20px; }
.z-feld { display: flex; flex-direction: column-reverse; gap: 2px; font-size: 12px; color: #555; }
.z-feld.z-breit { grid-column: 1 / -1; }
.z { border: 0; border-bottom: 1.5px solid #555; background: #FAFAF7; font: inherit; font-size: 16px; color: #111; padding: 8px 4px 4px; min-height: 38px; border-radius: 0; width: 100%; }
.z:focus { outline: 2px solid var(--orange); outline-offset: 1px; }
.vm-liste { margin: 6px 0 0; padding-left: 20px; }
.vm-option { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; }
.vm-option input { width: 20px; height: 20px; flex: none; margin: 2px 0 0; accent-color: var(--blau); }
.vm-klein { font-size: 13px; color: #444; }
.unterschrift-linie { display: block; height: 46px; border-bottom: 1.5px solid #555; }
[hidden] { display: none !important; }

@media print {
  @page { size: A4; margin: 15mm 16mm; }
  body { background: #fff; font-size: 10.5pt; }
  .nicht-drucken, .wa-float, .fuss { display: none !important; }
  main { padding: 0 !important; max-width: none !important; }
  .blatt { box-shadow: none; padding: 0; gap: 14px; font-size: 10.5pt; }
  .z { background: transparent; font-size: 11pt; }
  .z::placeholder { color: transparent; }
  .blatt-titel { font-size: 17pt; }
}
.vm-anlagen { display: flex; flex-direction: column; gap: 4px; }
.vm-anlagen .vm-option { margin-top: 4px; }
.vm-upload-hinweis { font-size: 14px; color: var(--text-leise); }
@media print { #hochladen { display: none !important; } }

/* Online-Unterschrift */
.sig-feld { position: relative; height: 150px; margin-top: 18px; border: 1.5px dashed #9AA7B6; border-radius: 8px; background: #fff; overflow: hidden; }
.sig { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.sig-platzhalter { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #6B7785; font-size: 15px; pointer-events: none; text-align: center; padding: 0 12px; }
.sig-druck { display: none; }
.sig-leiste { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 16px; margin-top: 6px; font-size: 12px; color: #555; }
.sig-loeschen, .link-knopf { background: none; border: 0; padding: 6px 0; min-height: 32px; color: var(--blau); text-decoration: underline; font: inherit; font-size: 15px; cursor: pointer; }
.sig-loeschen:hover, .link-knopf:hover { color: var(--orange-text); }

details.papier { margin-top: 24px; background: #fff; border-radius: 16px; padding: 18px 22px; border: 1.5px solid var(--linie); }
details.papier summary { cursor: pointer; font-weight: 700; color: var(--blau); font-size: 17px; min-height: 32px; display: flex; align-items: center; }

@media print {
  .sig-feld { height: auto; min-height: 64px; border: 0; border-bottom: 1.5px solid #555; border-radius: 0; margin-top: 10px; }
  .sig { display: none; }
  .sig-druck:not([hidden]) { display: block; height: 70px; width: auto; }
  details.papier { display: none !important; }
}

/* =================================================================
   Startseite – dynamische Gestaltung mit Hintergrundvideo
   ================================================================= */

/* Kopfzeile über dem Video: erst transparent, beim Scrollen dunkel */
.kopf-schwebend { position: fixed; inset: 0 0 auto 0; z-index: 40; background: transparent; transition: background-color .35s ease, box-shadow .35s ease, padding .35s ease; padding: 20px 0; }
.kopf-schwebend.gescrollt { background: rgba(14, 42, 71, 0.94); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25); padding: 10px 0; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.kopf-schwebend .menu-cta { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--orange); color: var(--blau); font-weight: 800; text-decoration: none; }
.kopf-schwebend .menu-cta:hover { background: var(--orange-hell); color: var(--blau); }
.kopf-schwebend .menu { align-items: center; }
@media (max-width: 720px) {
  .kopf-schwebend .menu a:not(.menu-cta) { display: none; }
  .kopf-schwebend .wrap { flex-wrap: nowrap; }
  .kopf-schwebend .menu-cta { min-height: 42px; padding: 0 16px; font-size: 15px; }
  .kopf-schwebend .menu-cta .lang { display: none; }
}
.kopf-schwebend .menu-cta .kurz { display: none; }
@media (max-width: 720px) { .kopf-schwebend .menu-cta .kurz { display: inline; } }

/* Videobühne */
.buehne { position: relative; min-height: min(100svh, 940px); min-height: min(100vh, 940px); display: flex; align-items: flex-end; overflow: hidden; background: #0B2340 url("../video/hero-poster.jpg") center / cover no-repeat; color: #fff; isolation: isolate; }
@supports (min-height: 100svh) { .buehne { min-height: min(100svh, 940px); } }
.buehne-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% center; z-index: -2; }
.buehne::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(6, 22, 41, 0.9) 0%, rgba(6, 22, 41, 0.62) 36%, rgba(6, 22, 41, 0.08) 58%, rgba(6, 22, 41, 0) 70%),
    linear-gradient(0deg, rgba(6, 22, 41, 0.55) 0%, rgba(6, 22, 41, 0) 22%); }
@media (max-width: 720px) {
  .buehne-video { object-position: 72% center; }
  .buehne::before { background: linear-gradient(0deg, rgba(6, 22, 41, 0.96) 0%, rgba(6, 22, 41, 0.75) 55%, rgba(6, 22, 41, 0.35) 100%); }
}
.buehne-inhalt { width: 100%; padding-top: 140px; padding-bottom: 72px; }
.buehne h1 { font-size: clamp(40px, 7vw, 84px); line-height: 1.02; letter-spacing: -0.01em; max-width: 13ch; margin-top: 16px; }
.buehne h1 .akzent { color: var(--orange); }
.buehne .lead { margin-top: 22px; font-size: clamp(17px, 2vw, 20px); color: var(--hell-auf-blau); max-width: 560px; }
.buehne .knoepfe { margin-top: 32px; }
.buehne .auch { margin-top: 22px; }
.pille-klein { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.25); font-size: 15px; font-weight: 600; color: #FDBA74; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pille-klein .punkt { width: 9px; height: 9px; border-radius: 50%; background: #EF2B2B; box-shadow: 0 0 0 0 rgba(239, 43, 43, 0.7); animation: puls 2s infinite; }
@keyframes puls { 0% { box-shadow: 0 0 0 0 rgba(239, 43, 43, 0.65); } 70% { box-shadow: 0 0 0 10px rgba(239, 43, 43, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 43, 43, 0); } }

/* Video anhalten / weiter */
.video-knopf { position: absolute; right: 170px; bottom: 20px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(6, 22, 41, 0.45); color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.video-knopf:hover { background: rgba(6, 22, 41, 0.7); }
@media (max-width: 480px) { .video-knopf { right: 84px; bottom: 16px; padding: 0 14px; } .video-knopf span { display: none; } }

/* Scroll-Hinweis */
.runter { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 2; color: rgba(255, 255, 255, 0.7); display: none; }
.runter svg { animation: wippen 1.8s ease-in-out infinite; }
@keyframes wippen { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
@media (min-width: 900px) { .runter { display: block; } }

/* Einstiegs-Animation im Video-Bereich */
.auftritt > * { opacity: 0; transform: translateY(24px); animation: auftauchen .8s cubic-bezier(.2, .7, .2, 1) forwards; }
.auftritt > *:nth-child(2) { animation-delay: .12s; }
.auftritt > *:nth-child(3) { animation-delay: .24s; }
.auftritt > *:nth-child(4) { animation-delay: .36s; }
.auftritt > *:nth-child(5) { animation-delay: .48s; }
@keyframes auftauchen { to { opacity: 1; transform: none; } }

/* Laufband mit Leistungen */
.laufband { background: var(--orange); color: var(--blau); overflow: hidden; white-space: nowrap; padding: 16px 0; border-block: 1px solid rgba(14, 42, 71, 0.15); }
.laufband-spur { display: inline-flex; gap: 0; animation: laufen 38s linear infinite; }
.laufband-spur span { display: inline-flex; align-items: center; font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: clamp(20px, 2.6vw, 30px); padding: 0 22px; }
.laufband-spur span::after { content: ""; width: 10px; height: 10px; margin-left: 44px; border-radius: 50%; background: var(--blau); }
@keyframes laufen { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.laufband:hover .laufband-spur { animation-play-state: paused; }

/* Leistungen neu: Kacheln mit Hover */
.leistungen-neu { padding-top: 80px; }
.kopfzeile-abschnitt { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 32px; }
.kopfzeile-abschnitt .titel { max-width: 18ch; }
.etikett { display: inline-block; font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange-text); margin-bottom: 10px; }
.kachel-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; margin-top: 32px; }
.kachel { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 18px; background: #fff; border: 1.5px solid var(--linie); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; overflow: hidden; }
.kachel::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
.kachel:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(14, 42, 71, 0.14); border-color: transparent; }
.kachel:hover::after { transform: scaleX(1); }
.kachel .symbol { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 16px; background: #EAF0F6; transition: background-color .3s ease, transform .3s ease; }
.kachel:hover .symbol { background: var(--orange); transform: rotate(-6deg); }
.kachel h3 { font-size: 19px; color: var(--blau); }
.kachel p { font-size: 15px; color: var(--text-leise); }
.kachel-cta { justify-content: space-between; background: var(--blau); border-color: var(--blau); color: #fff; }
.kachel-cta h3 { color: #fff; font-size: 22px; }
.kachel-cta p { color: var(--hell-auf-blau); }
.kachel-cta .btn { align-self: flex-start; min-height: 48px; font-size: 16px; }

/* Ablauf mit Linie, die sich beim Scrollen füllt */
.ablauf-neu { background: var(--blau); color: #fff; padding: 88px 0; margin-top: 72px; overflow: hidden; }
.ablauf-neu .titel { color: #fff; }
.ablauf-neu .etikett { color: #FDBA74; }
.zeitstrahl { position: relative; list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.zeitstrahl::before, .zeitstrahl::after { content: ""; position: absolute; top: 27px; left: 28px; right: 28px; height: 3px; border-radius: 3px; }
.zeitstrahl::before { background: rgba(255, 255, 255, 0.15); }
.zeitstrahl::after { background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform 1.6s cubic-bezier(.3, .7, .2, 1) .2s; }
.zeitstrahl.sichtbar::after { transform: scaleX(1); }
.zeitstrahl li { position: relative; }
.zeitstrahl .nr { position: relative; z-index: 1; width: 56px; height: 56px; font-size: 22px; background: #163E66; border: 3px solid var(--blau); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2); transition: background-color .4s ease, color .4s ease; }
.zeitstrahl.sichtbar .nr { background: var(--orange); color: var(--blau); }
.zeitstrahl.sichtbar li:nth-child(2) .nr { transition-delay: .5s; }
.zeitstrahl.sichtbar li:nth-child(3) .nr { transition-delay: .9s; }
.zeitstrahl.sichtbar li:nth-child(4) .nr { transition-delay: 1.3s; }
.zeitstrahl h3 { margin-top: 18px; font-size: 20px; color: #fff; }
.zeitstrahl p { margin-top: 6px; font-size: 15px; color: var(--hell-auf-blau); }
@media (max-width: 820px) {
  .zeitstrahl { grid-template-columns: 1fr; gap: 28px; padding-left: 0; }
  .zeitstrahl::before, .zeitstrahl::after { top: 28px; bottom: 28px; left: 27px; right: auto; width: 3px; height: auto; }
  .zeitstrahl::after { transform: scaleY(0); transform-origin: top; }
  .zeitstrahl.sichtbar::after { transform: scaleY(1); }
  .zeitstrahl li { display: grid; grid-template-columns: 56px 1fr; column-gap: 18px; }
  .zeitstrahl li .nr { grid-row: span 2; }
  .zeitstrahl h3 { margin-top: 12px; }
}

/* Kostenübernahme neu */
.kosten-neu { padding-top: 88px; }
.kosten-neu .kosten { transition: transform .3s ease, box-shadow .3s ease; }
.kosten-neu .kosten:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(14, 42, 71, 0.12); }

/* Einblenden beim Scrollen (nur mit JavaScript aktiv) */
.js [data-einblenden] { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.js [data-einblenden].sichtbar { opacity: 1; transform: none; }
.js [data-einblenden="links"] { transform: translateX(-32px); }
.js [data-einblenden="rechts"] { transform: translateX(32px); }
.js [data-einblenden="links"].sichtbar, .js [data-einblenden="rechts"].sichtbar { transform: none; }

/* Weniger Bewegung, wenn gewünscht */
@media (prefers-reduced-motion: reduce) {
  .auftritt > *, .js [data-einblenden] { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .laufband-spur, .pille-klein .punkt, .runter svg { animation: none !important; }
  .zeitstrahl::after { transition: none; }
  .kachel, .kachel::after, .kachel .symbol { transition: none; }
}

/* Einblende-Versatz darf keine Querverschiebung der Seite erzeugen */
main, .laufband { overflow-x: clip; }
@supports not (overflow: clip) { main { overflow-x: hidden; } }

/* Qualitätsversprechen auf der Startseite */
.qv-neu { padding-top: 88px; scroll-margin-top: 72px; }
.qv { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 24px; padding: 32px; border-radius: 20px; background: #fff; border: 1.5px solid var(--linie); }
@media (max-width: 960px) { .qv { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .qv { grid-template-columns: 1fr; gap: 22px; padding: 22px; } }
.qv-punkt { display: flex; flex-direction: column; gap: 8px; }
.qv-symbol { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: #FFF3E6; margin-bottom: 4px; }
.qv-zahl { width: auto; min-width: 52px; padding: 0 12px; align-self: flex-start; font-family: "Bricolage Grotesque", system-ui, sans-serif; font-weight: 800; font-size: 22px; color: var(--orange-text); white-space: nowrap; }
.qv-punkt h3 { font-size: 18px; line-height: 1.3; color: var(--blau); }
.qv-punkt p { font-size: 15px; color: var(--text-leise); }
.qv-mehr { margin-top: 16px; font-weight: 700; }
.qv-mehr a { color: var(--orange-text); }
/* Band mit Erfolgsquote auf der Qualitätsseite */
.q-band { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding: 24px 28px; border-radius: 20px; background: var(--blau); color: #fff; }
.q-band .erfolg-zahl { font-size: 48px; }
.q-band div { flex: 1 1 320px; }
.q-band strong { display: block; font-size: 19px; }
.q-band p { color: #CFE0F2; margin-top: 4px; }
.q-band a { color: #FDBA74; font-weight: 700; white-space: nowrap; }

/* Kopfbereich der Anfrage-Seiten */
.weitere-anfragen { margin-top: 16px; font-size: 15px; color: var(--hell-auf-blau); }
.weitere-anfragen a { color: #FDBA74; font-weight: 700; }
.kopf-punkte { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.kopf-punkte li { padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.25); font-size: 15px; }
.kopf-punkte strong { color: #FDBA74; }

/* Küchenmontage */
.upload-gross { min-height: 104px; border-color: var(--orange); background: #FFF8F1; }
.upload-gross .zeile1 { font-size: 18px; }
.km-auswertung { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border-radius: 12px; background: #EAF0F6; border: 1.5px solid #C5D3E2; }
.km-auswertung-titel { font-weight: 700; color: var(--blau); }
.km-auswertung ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 3px; }
.km-auswertung .haken { background: #fff; }
.km-auswertung-hinweis { font-size: 14px; color: var(--text-leise); }
.km-laengen { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.km-laengen [hidden] { display: none; }
.km-meter { display: flex; align-items: center; gap: 8px; }
.km-meter .fld { flex: 1; min-width: 0; }
.km-meter span { font-weight: 700; color: var(--blau); }
.km-tipp { font-size: 14px; color: var(--text-leise); }
.km-summe { font-size: 17px; color: var(--blau); }
.km-summe strong { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-size: 20px; }

/* WhatsApp- und Telefon-Knöpfe auf allen Seiten */
.btn-wa, .btn-tel, .q-btn-rahmen { gap: 8px; }
.btn-wa svg, .btn-tel svg, .q-btn-rahmen svg { flex-shrink: 0; }
.btn-tel { border: 1.5px solid var(--blau); color: var(--blau); font-weight: 700; background: #fff; }
.btn-tel:hover { background: #EAF0F6; color: var(--blau); }
.direkt { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 12px; margin-top: 4px; }
.direkt > span { width: 100%; text-align: center; color: var(--text-leise); font-size: 15px; }
.direkt .btn { min-height: 48px; font-size: 16px; }
.wa-link { display: inline-flex; align-items: center; gap: 5px; vertical-align: bottom; }
.wa-link svg { color: #128C4A; }
.anfrage-main { padding-bottom: 104px; }
@media print { .wa-float { display: none !important; } }
.q-preis-unter { margin-top: -10px; font-size: 14px; color: #CFE0F2; }

/* Küchenmontage: Rundum-Begleitung */
.km-begleitung { position: relative; display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; padding: 28px; border-radius: 16px; background: #fff; box-shadow: var(--schatten); border-top: 5px solid var(--orange); }
@media (max-width: 480px) { .km-begleitung { padding: 22px 16px; } }
.km-begleitung .etikett { margin-bottom: 0; }
.km-begleitung h2 { font-size: clamp(24px, 3.4vw, 30px); color: var(--blau); line-height: 1.15; }
.km-begleitung-text { color: var(--text-leise); }
.km-schritte { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 600px) { .km-schritte { grid-template-columns: 1fr; } }
.km-schritte li { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 12px; background: var(--flaeche); }
.km-schritte .nr { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--blau); color: #fff; font-weight: 800; }
.km-schritte strong { color: var(--blau); }
.km-schritte p { margin-top: 2px; font-size: 15px; color: var(--text-leise); }
.km-begleitung-knoepfe { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 4px; }
.km-begleitung-knoepfe .btn { min-height: 52px; font-size: 17px; }
.km-termin { display: flex; flex-direction: column; gap: 14px; padding: 14px; border-radius: 12px; background: #FFF3E6; scroll-margin-top: 24px; }
.km-termin > .haken { background: #fff; }
.km-termin-felder { display: flex; flex-direction: column; gap: 14px; }
.km-termin-felder[hidden] { display: none; }
.q-link { color: var(--orange-text); font-weight: 700; }
.km-begleitung-knoepfe .btn { flex: 1 1 220px; }

/* Hintergrundvideo im Kopf der Anfrage-Seiten */
.anfrage-kopf.mit-video { position: relative; overflow: hidden; isolation: isolate; }
.kopf-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.anfrage-kopf.mit-video::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(14, 42, 71, 0.72) 0%, rgba(14, 42, 71, 0.50) 45%, rgba(14, 42, 71, 0.78) 85%, rgba(14, 42, 71, 0.92) 100%); }
.anfrage-kopf.mit-video { padding-bottom: 130px; }
@media (max-width: 600px) { .anfrage-kopf.mit-video { padding-bottom: 96px; } }
.anfrage-kopf .zeile-rechts { display: inline-flex; align-items: center; gap: 12px; }
.kopf-video-knopf { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.45); background: rgba(14, 42, 71, 0.45); color: #fff; cursor: pointer; }
.kopf-video-knopf:hover { background: rgba(255, 255, 255, 0.18); }
.kopf-video-knopf:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.kopf-video-knopf[hidden] { display: none; }
.kopf-video-knopf .ikon-play { display: none; }
.kopf-video-knopf.pausiert .ikon-play { display: block; }
.kopf-video-knopf.pausiert .ikon-pause { display: none; }
.anfrage-kopf.mit-video .reiter { background: rgba(14, 42, 71, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.anfrage-kopf.mit-video h1, .anfrage-kopf.mit-video p.lead { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35); }
.anfrage-main { position: relative; z-index: 1; }

/* Startseite "Alles aus einer Hand": 3 Leistungen + Qualitätsversprechen + Preis-Kachel */
.leistungen-raster { grid-template-columns: repeat(4, 1fr); grid-auto-flow: dense; }
.leistungen-raster .kachel-qualitaet { grid-column: span 3; background: #FFF8F1; border-color: #FBD5B0; }
.leistungen-raster .kachel-qualitaet .kq-liste { grid-template-columns: repeat(2, minmax(0, max-content)); column-gap: 40px; }
@media (max-width: 1060px) { .leistungen-raster { grid-template-columns: repeat(2, 1fr); } .leistungen-raster .kachel-qualitaet, .leistungen-raster .kachel-cta { grid-column: span 2; } }
@media (max-width: 560px) { .leistungen-raster { grid-template-columns: 1fr; } .leistungen-raster .kachel-qualitaet { grid-column: auto; } }
.kq-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
@media (max-width: 560px) { .kq-liste { grid-template-columns: 1fr; } }
.kq-liste li { position: relative; padding-left: 28px; font-weight: 600; color: var(--blau); }
.kq-liste li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%230E2A47' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; }
/* Handy: alle Leistungs-Kacheln eine Spalte, Liste untereinander */
@media (max-width: 560px) {
  .leistungen-raster { grid-template-columns: minmax(0, 1fr); }
  .leistungen-raster .kachel-qualitaet, .leistungen-raster .kachel-cta { grid-column: auto; }
  .leistungen-raster .kachel-qualitaet .kq-liste { grid-template-columns: minmax(0, 1fr); }
}

/* --- Korrekturen nach der Gesamtprüfung --- */
/* Knöpfe mit zwei Zeilen (Handy) sauber mittig */
.btn { text-align: center; line-height: 1.25; padding-top: 10px; padding-bottom: 10px; }
/* Sprung zu Jobcenter/Pflegegrad: Karte nicht unter der festen Kopfzeile */
.kosten { scroll-margin-top: 100px; }
/* Startseite: Preis-Knöpfe und Menü auch vor hellem Video gut lesbar */
.buehne .pill { background: rgba(10, 30, 54, 0.78); border-color: rgba(255, 255, 255, 0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.buehne .pill:hover { background: rgba(10, 30, 54, 0.92); }
.buehne::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 160px; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(6, 22, 41, 0.6) 0%, rgba(6, 22, 41, 0) 100%); }
@media (min-width: 721px) {
  .buehne::before { background:
    linear-gradient(90deg, rgba(6, 22, 41, 0.92) 0%, rgba(6, 22, 41, 0.72) 38%, rgba(6, 22, 41, 0.25) 62%, rgba(6, 22, 41, 0.05) 78%),
    linear-gradient(0deg, rgba(6, 22, 41, 0.6) 0%, rgba(6, 22, 41, 0) 26%); }
}
/* Vollmacht: beim Drucken auf eine A4-Seite */
@media print {
  @page { size: A4; margin: 9mm 13mm; }
  body, .blatt { font-size: 9.5pt; line-height: 1.32; }
  .blatt { gap: 7px; }
  .blatt-titel { font-size: 15pt; }
  .z { font-size: 10pt; }
  .vm-liste { margin-top: 2px; }
  .sig-druck:not([hidden]) { height: 56px; }
  .z { min-height: 24px; padding: 3px 2px 1px; }
  .z-raster { gap: 4px 16px; }
  .vm-anlagen { gap: 1px; }
  .vm-anlagen .vm-option { margin-top: 1px; }
  .z-feld { font-size: 7.5pt; gap: 1px; }
  .blatt h3 { font-size: 9.5pt; margin-bottom: 4px; }
  .sig-feld { min-height: 48px; margin-top: 6px; }
}
/* Qualitätsseite: 6 Versprechen gleichmäßig in 3 Spalten */
.q-raster { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .q-raster { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .q-raster { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Formular-Hilfen: Vorschau der ausgewählten Fotos/Dateien ---------- */
.upload.hat-dateien { border-style: solid; border-color: var(--gruen); background: #EEF7F1; }
.vorschau { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.vorschau[hidden] { display: none; }
.vs-kachel { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 6px; border: 1.5px solid var(--linie); border-radius: 10px; background: #fff; }
.vs-bild { aspect-ratio: 1 / 1; border-radius: 6px; overflow: hidden; background: var(--flaeche); display: grid; place-items: center; color: var(--blau); }
.vs-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vs-name { margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs-gr { font-size: 12px; color: var(--text-leise); }
.vs-gr.vs-zu-gross { color: var(--orange-text); font-weight: 700; }
.vs-weg { position: absolute; top: 2px; right: 2px; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: rgba(14, 42, 71, 0.86); color: #fff; font: inherit; font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.vs-weg:hover { background: var(--orange-text); }
.vs-weg:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.vs-info { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--gruen); }
.vs-info svg { flex: none; }

/* ---------- Formular-Hilfen: Adress-Vorschläge ---------- */
.adr-liste { position: absolute; z-index: 40; margin: 0; padding: 4px 0; list-style: none; background: #fff; border: 1.5px solid var(--blau); border-radius: 10px; box-shadow: 0 10px 30px rgba(14, 42, 71, 0.18); max-height: 330px; overflow-y: auto; text-align: left; }
.adr-liste[hidden] { display: none; }
.adr-liste [role="option"] { display: flex; flex-direction: column; gap: 1px; padding: 10px 14px; cursor: pointer; }
.adr-liste [role="option"] strong { font-size: 16px; color: var(--text); }
.adr-liste [role="option"] span { font-size: 14px; color: var(--text-leise); }
.adr-liste [role="option"]:hover, .adr-liste [aria-selected="true"] { background: #EAF0F6; }
.adr-quelle { margin-top: 4px; padding: 6px 14px 4px; border-top: 1px solid var(--linie); font-size: 11px; color: var(--text-leise); }
.fld.adr-ok, .z.adr-ok { border-color: var(--gruen); padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231F7A4D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.fld.adr-fast, .z.adr-fast { border-color: var(--orange); }
.adr-status { display: block; margin-top: 6px; font-size: 14px; font-weight: 600; line-height: 1.35; }
.adr-status[hidden] { display: none; }
.adr-status-ok { color: var(--gruen); }
.adr-status-fast { color: var(--orange-text); }
.adr-status-label { margin-top: 2px; font-size: 12px; }
@media print { .adr-liste, .adr-status, .vorschau { display: none !important; } }