/* Räumlotse · Website (Betriebsseite), Stand 31.10.2026
   Farben und Schrift nur aus marken/raeumung (tokens.css, schrift.css werden davor geladen).
   Richtung C · Stilles Altbauzimmer: viel Leinen, Packpapier als zweite Fläche, Schilf als einziger Akzent.
   Radius: 6 px aus der Marke für Bilder und Karten, Knöpfe ebenso. Kein Theme-Wechsel auf der Seite. */

:root {
  --grund: var(--marke-grund, #F1ECE4);
  --flaeche: var(--marke-flaeche, #E8DFD1);
  --papier: var(--marke-haupt-200, #ECE1D4);
  --text: var(--marke-text, #2D2620);
  --text-2: var(--marke-text-2, #5E544B);
  --linie: var(--marke-linie, #D6CBBA);
  --akzent: var(--marke-akzent, #5F6B48);
  --akzent-dunkel: var(--marke-akzent-600, #545D3F);
  --auf-akzent: var(--marke-auf-akzent, #F1ECE4);
  --fehler: var(--marke-fehler, #A3392A);
  --r: var(--marke-radius, 6px);
  --schatten: var(--marke-schatten, 0 1px 2px rgba(45,38,32,.10), 0 12px 28px -16px rgba(45,38,32,.35));
  --kopf: var(--marke-kopf, 'Alegreya', Georgia, serif);
  --lauf: var(--marke-lauf, 'Alegreya Sans', 'Helvetica Neue', Arial, sans-serif);
  --breite: 1160px;
  --rand: clamp(16px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--grund); color: var(--text); font: 400 1.0625rem/1.65 var(--lauf); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--akzent-dunkel); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--text); }
:focus-visible { outline: 2px solid var(--akzent-dunkel); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { font-family: var(--kopf); font-weight: 500; line-height: 1.15; letter-spacing: -.01em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.25rem, 1.6rem + 2.2vw, 3.25rem); }
h2 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); }
h3 { font-size: 1.3rem; }
p { margin: 0; text-wrap: pretty; }
.huelle { width: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto; }
.schmal { max-width: 38rem; }
.leise { color: var(--text-2); }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprung { position: absolute; left: 16px; top: -60px; background: var(--text); color: var(--grund); padding: 10px 14px; border-radius: var(--r); z-index: 30; }
.sprung:focus { top: 12px; }

/* ---------- Knöpfe ---------- */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: var(--r); background: var(--akzent); color: var(--auf-akzent); font: 500 1rem/1 var(--lauf); text-decoration: none; white-space: nowrap; border: 0; cursor: pointer; transition: background-color .2s ease, transform .2s ease; }
.knopf:hover { background: var(--akzent-dunkel); color: var(--auf-akzent); }
.knopf:active { transform: translateY(1px); }
.knopf-leise { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--linie); }
.knopf-leise:hover { background: var(--flaeche); color: var(--text); }

/* ---------- Kopf ---------- */
.kopf { position: sticky; top: 0; z-index: 20; background: color-mix(in oklab, var(--grund) 92%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s ease; }
.kopf.gerollt { border-bottom-color: var(--linie); }
.kopf .huelle { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 68px; }
.kopf .marke img { height: 26px; width: auto; }
.kopf nav ul { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.kopf nav a { color: var(--text); text-decoration: none; font-size: .98rem; padding: 10px 0; }
.kopf nav a:hover { color: var(--akzent-dunkel); }
.kopf nav a[aria-current="page"] { text-decoration: underline; }
.kopf .knopf { min-height: 42px; padding: 0 18px; }
@media (max-width: 900px) { .kopf nav { display: none; } }
@media (max-width: 420px) { .kopf .knopf { padding: 0 14px; font-size: .95rem; } .kopf .marke img { height: 22px; } }

/* ---------- Hero ---------- */
.hero { padding: clamp(32px, 6vw, 72px) 0 clamp(48px, 7vw, 96px); }
.hero .huelle { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero-text { display: grid; gap: 22px; max-width: 40rem; }
.hero-text p { font-size: 1.2rem; color: var(--text-2); }
.hero-text .claim { color: var(--text); font-family: var(--kopf); font-size: 1.35rem; }
.hero-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.hero-bild img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; object-position: 30% 60%; border-radius: var(--r); box-shadow: var(--schatten); }
@media (max-width: 860px) {
  .hero .huelle { grid-template-columns: 1fr; }
  .hero-bild { order: -1; }
  .hero-bild img { aspect-ratio: 16 / 10; }
  .hero-text p { font-size: 1.1rem; }
}

/* ---------- Abschnitte ---------- */
.abschnitt { padding: clamp(56px, 8vw, 112px) 0; }
.abschnitt-kopf { display: grid; gap: 14px; margin-bottom: clamp(28px, 4vw, 48px); max-width: 40rem; }
.abschnitt-kopf p { color: var(--text-2); font-size: 1.1rem; }

/* Leistungen: Bild links, Liste rechts */
.leistungen .huelle { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.leistungen figure { margin: 0; position: sticky; top: 100px; }
.leistungen figure img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 60% 100%; border-radius: var(--r); }
.leistungs-liste { list-style: none; margin: 0; padding: 0; }
.leistungs-liste li { display: grid; gap: 4px; padding: 20px 0; border-top: 1px solid var(--linie); }
.leistungs-liste li:first-child { border-top: 0; padding-top: 0; }
.leistungs-liste h3 { font-size: 1.35rem; }
.leistungs-liste p { color: var(--text-2); }
@media (max-width: 860px) {
  .leistungen .huelle { grid-template-columns: 1fr; }
  .leistungen figure { position: static; }
  .leistungen figure img { aspect-ratio: 16 / 10; }
}

/* Ablauf: Packpapier-Band, vier Schritte nebeneinander */
.band { background: var(--papier); }
.ablauf ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); counter-reset: schritt; }
.ablauf li { display: grid; gap: 10px; align-content: start; padding-top: 22px; border-top: 2px solid var(--akzent); }
.ablauf li p { color: var(--text-2); }
@media (max-width: 960px) { .ablauf ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ablauf ol { grid-template-columns: 1fr; } }

/* Preis: schmale Textspalte, daneben Bindfaden */
.preis .huelle { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.preis-text { display: grid; gap: 18px; max-width: 36rem; }
.preis-text > p { font-size: 1.1rem; color: var(--text-2); }
.preis dl { display: grid; grid-template-columns: max-content 1fr; gap: 10px 24px; margin: 8px 0 0; padding: 22px 24px; background: color-mix(in oklab, var(--flaeche) 60%, var(--grund)); border-radius: var(--r); }
.preis dt { font-weight: 500; }
.preis dd { margin: 0; color: var(--text-2); }
.preis figure { margin: 0; }
.preis figure img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
@media (max-width: 860px) {
  .preis .huelle { grid-template-columns: 1fr; }
  .preis figure { max-width: 240px; order: -1; }
}
@media (max-width: 480px) { .preis dl { grid-template-columns: 1fr; gap: 2px; } .preis dd { margin-bottom: 10px; } }

/* Was bleibt: Text links, Bild rechts, Zitatgröße */
.bleibt .huelle { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.bleibt-text { display: grid; gap: 18px; }
.bleibt-text .gross { font-family: var(--kopf); font-size: clamp(1.35rem, 1.1rem + .9vw, 1.75rem); line-height: 1.35; }
.bleibt figure { margin: 0; }
.bleibt figure img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--r); }
@media (max-width: 860px) { .bleibt .huelle { grid-template-columns: 1fr; } }

/* Verkauf danach: ruhiger Kasten mit Linie, keine Werbung */
.verkauf .kasten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); padding: clamp(24px, 4vw, 48px); border: 1px solid var(--linie); border-radius: var(--r); background: color-mix(in oklab, var(--grund) 50%, #FBF9F6); }
.verkauf .kasten > div { display: grid; gap: 14px; align-content: start; }
.offenlegung { font-size: .95rem; color: var(--text-2); border-left: 2px solid var(--marke-haupt, #C9AD88); padding-left: 16px; }
@media (max-width: 860px) { .verkauf .kasten { grid-template-columns: 1fr; } }

/* ---------- Anfrage ---------- */
.anfrage .huelle { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.anfrage-info { display: grid; gap: 18px; position: sticky; top: 100px; }
.anfrage-info ol { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; color: var(--text-2); }
.formular { display: grid; gap: 20px; padding: clamp(20px, 3vw, 36px); background: #FBF9F6; border: 1px solid var(--linie); border-radius: var(--r); box-shadow: var(--schatten); }
.zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.feld { display: grid; gap: 6px; }
.feld label, .feld legend { font-weight: 500; }
.feld .hilfe { font-size: .92rem; color: var(--text-2); }
.feld input, .feld select, .feld textarea { width: 100%; font: inherit; color: var(--text); background: #fff; border: 1px solid var(--marke-haupt-700, #917C62); border-radius: var(--r); padding: 11px 13px; min-height: 48px; }
.feld textarea { min-height: 112px; resize: vertical; }
.feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible { outline: 2px solid var(--akzent-dunkel); outline-offset: 1px; }
.feld [aria-invalid="true"] { border-color: var(--fehler); }
.fehler-text { color: var(--fehler); font-size: .92rem; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.wahl { display: flex; flex-wrap: wrap; gap: 8px; }
.wahl label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--linie); border-radius: var(--r); background: #fff; cursor: pointer; font-weight: 400; }
.wahl label:has(input:checked) { border-color: var(--akzent); background: color-mix(in oklab, var(--akzent) 10%, #fff); }
.haken { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: .97rem; }
.haken input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--akzent); }
.verkauf-frage { display: grid; gap: 14px; padding: 18px; border-radius: var(--r); background: color-mix(in oklab, var(--papier) 70%, #fff); }
.verkauf-frage .weitergabe { display: none; }
.verkauf-frage:has(#verkaufen:checked) .weitergabe { display: grid; }
.formular .knopf { justify-self: start; }
.formular .klein { font-size: .9rem; color: var(--text-2); }
.falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.meldung { padding: 16px 18px; border-radius: var(--r); background: color-mix(in oklab, var(--akzent) 12%, #fff); }
.meldung.fehler { background: color-mix(in oklab, var(--fehler) 10%, #fff); color: var(--text); }
@media (max-width: 860px) {
  .anfrage .huelle { grid-template-columns: 1fr; }
  .anfrage-info { position: static; }
}
@media (max-width: 520px) { .zeile { grid-template-columns: 1fr; } }

/* ---------- Fragen ---------- */
.fragen .huelle { max-width: 48rem; }
.fragen details { border-top: 1px solid var(--linie); }
.fragen details:last-of-type { border-bottom: 1px solid var(--linie); }
.fragen summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 20px 0; font-family: var(--kopf); font-size: 1.25rem; min-height: 48px; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform .25s ease; }
.fragen details[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.fragen details p { padding: 0 0 22px; color: var(--text-2); max-width: 42rem; }
@media (prefers-reduced-motion: reduce) { .fragen summary::after { transition: none; } }

/* ---------- Fuß ---------- */
.fuss { padding: 56px 0 40px; border-top: 1px solid var(--linie); background: color-mix(in oklab, var(--flaeche) 45%, var(--grund)); }
.fuss .huelle { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
.fuss .marke img { height: 24px; width: auto; margin-bottom: 12px; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fuss a { color: var(--text); }
.fuss h2 { font-family: var(--lauf); font-size: 1rem; font-weight: 500; margin-bottom: 10px; }
.fuss .unten { grid-column: 1 / -1; display: grid; gap: 10px; font-size: .9rem; color: var(--text-2); padding-top: 24px; border-top: 1px solid var(--linie); }
.fuss .unten a { color: var(--text-2); }
@media (max-width: 760px) { .fuss .huelle { grid-template-columns: 1fr 1fr; } .fuss .huelle > :first-child { grid-column: 1 / -1; } }

/* ---------- Ruhiges Erscheinen (nur Deckkraft und Weg, einmal) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .zeigen { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
  .js .zeigen.da { opacity: 1; transform: none; }
}

/* Rechtstexte (Impressum, Datenschutz) */
.recht h1 { margin-bottom: 1.25rem; }
.recht h2 { font-size: 1.35rem; margin: 2.25rem 0 .6rem; }
.recht p { margin: 0 0 1rem; }