/* Konzept: Stadtmagazin. Riesige Großschrift auf Vollbildfotos, Beige als ruhige Fläche, Beere als Hauptfarbe, drei Türen nach Anlass. */
@font-face { font-family: "Outfit"; font-weight: 100 900; font-display: swap; src: url(schrift/outfit-normal-latin.woff2) format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 200 900; font-display: swap; src: url(schrift/sourcesans3-normal-latin.woff2) format("woff2"); }

:root {
  color-scheme: light;
  --nacht: #2A0A20;      /* tiefste Beere: Kopf, Fuß, Übersicht */
  --beere: #6E1546;      /* Hauptfarbe */
  --akzent: #C2276F;     /* kräftige Himbeere, sparsam */
  --rosa: #E3B9C6;       /* Akzent auf dunklem Grund */
  --beige: #EADFCF;      /* Fläche */
  --beige-hell: #F6F0E7; /* helle Fläche */
  --sand: #CDBBA4;       /* Linien und leise Schrift auf dunkel */
  --tinte: #24101C;      /* Text auf hell */
  --anzeige: "Outfit", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --text: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
  --rand: max(20px, env(safe-area-inset-left, 0px));
  --rand-r: max(20px, env(safe-area-inset-right, 0px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
@view-transition { navigation: auto; }
body {
  margin: 0; background: var(--beige-hell); color: var(--tinte);
  font: 400 1.125rem/1.6 var(--text);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
picture { display: contents; }
a { color: inherit; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3 { font-family: var(--anzeige); margin: 0; text-wrap: balance; }
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; }

/* Flächen */
.auf-hell  { background: var(--beige-hell); color: var(--tinte); --fg: var(--tinte); --kopf: var(--beere); --leise: #66505D; --linie: #D9CDBC; --mark: var(--beere); }
.auf-beige { background: var(--beige);      color: var(--tinte); --fg: var(--tinte); --kopf: var(--beere); --leise: #5F4A56; --linie: #CDBBA4; --mark: var(--beere); }
.auf-beere { background: var(--beere);      color: var(--beige-hell); --fg: var(--beige-hell); --kopf: var(--beige-hell); --leise: #E8D8DE; --linie: rgba(246, 240, 231, .24); --mark: var(--beige-hell); }
.auf-nacht { background: var(--nacht);      color: var(--beige-hell); --fg: var(--beige-hell); --kopf: var(--beige); --leise: var(--beige); --linie: rgba(234, 223, 207, .18); --mark: var(--beige-hell); }

.innen { max-width: 1360px; margin-inline: auto; padding-left: var(--rand); padding-right: var(--rand-r); }
.band { padding-block: clamp(64px, 10vw, 156px); }
.etikett {
  font: 500 .86rem/1.3 var(--anzeige); letter-spacing: .1em; text-transform: uppercase; color: var(--mark);
}
.grosskopf {
  font-weight: 400; font-size: clamp(2.3rem, 5.6vw, 5.2rem); line-height: 1;
  letter-spacing: -.012em; text-transform: uppercase; color: var(--kopf);
}

/* Vorschau-Balken, vor dem Live-Gang weg */
.vorschau { background: var(--nacht); color: var(--sand); text-align: center; font: 500 .85rem/1.3 var(--anzeige); padding: 5px 16px; }
mark { background: #F5D98A; color: var(--tinte); padding: 0 4px; }

.sprung { position: absolute; left: -999px; }
.sprung:focus { left: 16px; top: 10px; z-index: 30; background: var(--beige-hell); padding: 8px 14px; }

/* Kopf */
.kopf {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: color-mix(in srgb, var(--nacht) 88%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  color: var(--beige-hell);
}
.kopf .innen { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; }
.marke {
  font: 600 1.02rem/1 var(--anzeige); letter-spacing: .2em; text-transform: uppercase;
  text-decoration: none; color: var(--beige-hell); white-space: nowrap;
}
.kopf nav { display: flex; gap: clamp(12px, 2.4vw, 34px); font: 500 .82rem/1 var(--anzeige); letter-spacing: .08em; text-transform: uppercase; }
.kopf nav a { text-decoration: none; padding: 8px 0; border-bottom: 1px solid transparent; }
.kopf nav a:hover, .kopf nav a[aria-current] { border-bottom-color: var(--rosa); }
.kopf nav { align-items: center; }
.kopf nav a.kopf-knopf { background: var(--beige-hell); color: var(--nacht); padding: 11px 16px; margin-left: clamp(4px, 1vw, 14px); border: 0; white-space: nowrap; transition: background-color .18s; }
.kopf nav a.kopf-knopf:hover { background: var(--rosa); }

/* Vollbild oben */
.held {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end; color: var(--beige-hell);
  min-height: min(88svh, 960px); background: linear-gradient(180deg, #3D2436 0%, #A2553C 32%, #4A2A2A 62%, var(--nacht) 100%);
}
.held.klein { min-height: min(74svh, 780px); background: var(--nacht); }
.held:not(.klein) .vollbild { object-position: center 38%; }
.held .vollbild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; object-position: center 62%; }
.held::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(42, 10, 32, .26) 0%, rgba(42, 10, 32, .06) 28%, rgba(42, 10, 32, .58) 58%, rgba(42, 10, 32, .9) 100%);
}
.held .innen { width: 100%; padding-block: clamp(28px, 5vw, 64px); display: grid; gap: clamp(18px, 3vw, 40px); }
.held h1 {
  font-weight: 500; text-transform: uppercase; color: var(--beige-hell);
  font-size: clamp(2.5rem, 12.2vw, 12.2rem); line-height: .9; letter-spacing: -.03em;
}
.held h1 span { display: block; }
.held h1 .h1-klein { font: 500 clamp(.78rem, 1vw, .9rem)/1.4 var(--anzeige); letter-spacing: .1em; text-shadow: 0 1px 10px rgba(42, 10, 32, .8); color: var(--beige-hell); margin-bottom: clamp(10px, 1.5vw, 20px); max-width: 44rem; text-wrap: balance; }
.held.klein h1 { font-size: clamp(2.5rem, 9.2vw, 8.6rem); line-height: .94; letter-spacing: -.025em; }
.held .etikett { color: var(--beige-hell); text-shadow: 0 1px 10px rgba(42, 10, 32, .8); }
.held-zeile { font: 400 clamp(1.55rem, 3.4vw, 3.2rem)/1.08 var(--anzeige); letter-spacing: -.012em; margin-top: calc(-1 * clamp(4px, 1vw, 14px)); }
.held-unter { display: flex; flex-wrap: wrap; gap: 12px 40px; justify-content: space-between; align-items: end; }
.held-unter p { max-width: 38rem; font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.4; }
.sterne { font: 500 clamp(1rem, 1.5vw, 1.25rem)/1.25 var(--anzeige); color: var(--beige-hell); text-decoration: none; width: fit-content; }
.sterne span { color: #F2C879; }
a.sterne { text-decoration: underline; text-decoration-color: var(--rosa); text-underline-offset: 5px; text-decoration-thickness: 1px; }
a.sterne:hover { color: var(--rosa); }
.himmel { position: absolute; inset: clamp(10px, 1vw, 14px) 0 auto 0; }
.himmel .sterne {
  display: inline-block; padding: 9px 15px; font-size: clamp(.95rem, 1.3vw, 1.1rem); color: var(--beige-hell); text-decoration: none;
  background: color-mix(in srgb, var(--nacht) 78%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.himmel .sterne:hover { background: var(--nacht); color: var(--beige-hell); }
.himmel .sterne span { color: #F2C879; }
.lage-kurz { font: 500 .86rem/1.4 var(--anzeige); letter-spacing: .1em; text-transform: uppercase; color: var(--beige); white-space: nowrap; text-shadow: 0 1px 10px rgba(42, 10, 32, .8); }

/* Drei Türen */
.tueren { display: grid; grid-template-columns: repeat(3, 1fr); }
.tuer {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end;
  min-height: clamp(340px, 46vw, 640px); text-decoration: none; color: var(--beige-hell); background: var(--nacht);
}
.tuer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.tuer::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(42, 10, 32, .04) 28%, rgba(42, 10, 32, .62) 62%, rgba(42, 10, 32, .92) 100%); transition: background-color .3s; }
.tuer:hover img { transform: scale(1.05); }
.tuer:hover::after { background-color: rgba(110, 21, 70, .34); }
.tuer div { padding: clamp(18px, 2.4vw, 32px); display: grid; gap: 6px; }
.tuer h2 { font-weight: 400; font-size: clamp(2.3rem, 4.4vw, 4.2rem); line-height: .95; letter-spacing: -.015em; text-transform: uppercase; }
.tuer p { line-height: 1.35; max-width: 24rem; }
.tuer .etikett { color: var(--beige-hell); text-shadow: 0 1px 8px rgba(42, 10, 32, .85); }

/* Angebote je Bereich */
.bereich-kopf { display: grid; gap: 16px; margin-bottom: clamp(36px, 5vw, 72px); max-width: 56rem; }
.bereich-kopf p:not(.etikett) { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.45; max-width: 40rem; }
.kacheln { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(10px, 1.4vw, 20px); }
.bereich.dreh .kacheln { grid-template-columns: 5fr 7fr; }
.kacheln.eins { grid-template-columns: 1fr; }
.kachel {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end;
  min-height: clamp(380px, 44vw, 640px); color: var(--beige-hell); text-decoration: none; background: var(--nacht);
}
.foto-hinweis { position: absolute; top: 10px; right: 12px; z-index: 1; font: 400 .78rem/1.2 var(--text); color: var(--beige-hell); background: rgba(42, 10, 32, .62); padding: 3px 8px; }
.held .foto-hinweis { top: 12px; right: max(20px, env(safe-area-inset-right, 0px)); }
.kachel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.kachel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(42, 10, 32, 0) 34%, rgba(42, 10, 32, .66) 64%, rgba(42, 10, 32, .94) 100%); }
.kachel:hover img { transform: scale(1.04); }
.kachel div { padding: clamp(18px, 2.4vw, 30px); display: grid; gap: 6px; width: 100%; }
.bald-kachel { background: var(--beere); align-items: stretch; }
.bald-kachel::after { display: none; }
.bald-kachel div { align-content: end; }
.vormerken { margin-top: 10px; font: 500 1rem/1.2 var(--anzeige); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--rosa); }
.kachel h3 { font-weight: 400; font-size: clamp(1.8rem, 3.2vw, 3rem); line-height: 1; letter-spacing: -.01em; text-transform: uppercase; }
.kachel p { line-height: 1.35; max-width: 30rem; }
.kachel .zahlen { font: 500 .84rem/1.3 var(--anzeige); letter-spacing: .08em; text-transform: uppercase; color: var(--beige-hell); text-shadow: 0 1px 8px rgba(42, 10, 32, .85); }

/* Ein Foto über die ganze Breite */
.aussage {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center;
  min-height: clamp(380px, 56vw, 760px); color: var(--beige-hell); background: var(--nacht);
}
.aussage .vollbild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }

/* Direkt bei uns, Region */
.zweispalten { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 6vw, 96px); align-items: start; }
.zweispalten .gross { font: 400 clamp(1.4rem, 2.5vw, 2.3rem)/1.25 var(--anzeige); letter-spacing: -.005em; margin-top: 12px; }
.zweispalten .nah { margin-top: 16px; max-width: 34rem; color: var(--leise); }
.wege { display: grid; gap: 0; margin: 0; }
.wege div { display: flex; justify-content: space-between; gap: 18px; padding-block: 13px; border-top: 1px solid var(--linie); }
.wege div:last-child { border-bottom: 1px solid var(--linie); }
.wege dt { font: 500 1.05rem/1.3 var(--anzeige); }
.wege dd { margin: 0; color: var(--leise); text-align: right; font-variant-numeric: tabular-nums; }

/* Übersicht aller Angebote */
.tafel { list-style: none; margin: clamp(22px, 3vw, 36px) 0 0; padding: 0; border-top: 1px solid var(--linie); }
.zeile {
  display: grid; grid-template-columns: 104px 2fr 1fr 1.2fr 1fr 28px; align-items: center; gap: clamp(12px, 2vw, 28px);
  padding-block: 12px; border-bottom: 1px solid var(--linie); color: var(--fg); text-decoration: none;
  transition: background-color .18s, padding .18s;
}
.zeile:hover { background: var(--beere); padding-inline: 12px; }
.zeile img { width: 104px; height: 70px; object-fit: cover; }
.z-platz { width: 104px; height: 70px; background: var(--beere); }
.z-name { font: 400 clamp(1.25rem, 2.1vw, 1.95rem)/1.05 var(--anzeige); text-transform: uppercase; letter-spacing: -.005em; }
.z-klein { font-size: 1rem; line-height: 1.3; color: var(--leise); }
.zeile:hover .z-klein { color: var(--beige); }
.z-status { font: 500 .78rem/1.3 var(--anzeige); letter-spacing: .08em; text-transform: uppercase; display: flex; gap: 8px; align-items: center; }
.z-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rosa); flex: none; }
.z-status.bald::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--sand); }
.z-pfeil { font: 400 1.4rem/1 var(--anzeige); text-align: right; }

/* Kontakt */
.kontakt .innen { display: grid; gap: 12px; }
.kontakt-mail { font: 400 clamp(1.3rem, 4.6vw, 4.4rem)/1.1 var(--anzeige); letter-spacing: -.015em; color: var(--beige-hell); text-decoration: none; overflow-wrap: anywhere; width: fit-content; }
.kontakt-mail:hover { color: var(--rosa); }

/* Fuß */
.fuss { padding-block: clamp(36px, 5vw, 64px) calc(clamp(36px, 5vw, 64px) + env(safe-area-inset-bottom, 0px)); }
.fuss .innen { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 28px; }
.fuss ul { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 4px; font-size: 1rem; }
.fuss a { text-decoration: none; }
.fuss a:hover { text-decoration: underline; }
.fuss .satz { color: var(--leise); max-width: 26rem; margin-top: 10px; font-size: 1rem; line-height: 1.45; }

/* Unterseite */
.fakten { display: grid; grid-template-columns: repeat(4, 1fr); }
.fakt { padding: clamp(18px, 2.6vw, 34px) clamp(14px, 2vw, 28px); border-left: 1px solid var(--linie); display: grid; gap: 6px; align-content: start; }
.fakt:first-child { border-left: 0; padding-left: 0; }
.fakt b { font: 400 clamp(1.9rem, 4.2vw, 4rem)/1 var(--anzeige); letter-spacing: -.015em; color: var(--beige-hell); }
.fakt span { font: 500 .82rem/1.3 var(--anzeige); letter-spacing: .08em; text-transform: uppercase; color: var(--beige-hell); }

.einstieg { display: grid; grid-template-columns: 7fr 4fr; gap: clamp(28px, 6vw, 90px); align-items: start; }
.einstieg .gross { font: 400 clamp(1.5rem, 2.9vw, 2.7rem)/1.2 var(--anzeige); letter-spacing: -.01em; color: var(--beere); }
.lead-zahl { margin-top: clamp(16px, 2vw, 26px); padding-top: clamp(14px, 1.6vw, 20px); border-top: 1px solid var(--linie); font: 500 clamp(1.05rem, 1.5vw, 1.3rem)/1.35 var(--anzeige); max-width: 44rem; }
.buchen { background: var(--beere); color: var(--beige-hell); padding: clamp(20px, 2.4vw, 32px); display: grid; gap: 14px; }
.buchen p { line-height: 1.35; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
.knopf {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 20px;
  font: 500 1.05rem/1.2 var(--anzeige); text-decoration: none; background: var(--beige-hell); color: var(--nacht);
  transition: background-color .18s, color .18s;
}
.knopf::after { content: "→"; transition: transform .18s; }
.knopf:hover { background: var(--rosa); }
.knopf:hover::after { transform: translateX(4px); }
.knopf.zweit { background: transparent; color: var(--beige-hell); box-shadow: inset 0 0 0 1px var(--rosa); }
.knopf.zweit:hover { background: rgba(246, 240, 231, .12); }
.buchen .knoepfe { display: grid; }
.mail-klein { font-size: .92rem; color: var(--rosa); overflow-wrap: anywhere; }
.buchen a:not(.knopf) { color: var(--beige-hell); }
.buchen.leise { background: var(--beige); color: var(--tinte); }
.buchen.leise b { font: 500 1.2rem/1.2 var(--anzeige); color: var(--beere); }

.galerie { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(120px, 15.5vw, 240px); gap: clamp(6px, .8vw, 12px); }
.galerie figure { margin: 0; position: relative; overflow: hidden; background: var(--nacht); }
.g4r2 { grid-column: span 4; grid-row: span 2; }
.g2 { grid-column: span 2; }
.g3 { grid-column: span 3; }
.g6 { grid-column: span 6; }
.oeffnen { all: unset; display: block; width: 100%; height: 100%; cursor: zoom-in; }
.oeffnen:focus-visible { outline: 3px solid var(--akzent); outline-offset: -3px; }
.oeffnen img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.oeffnen:hover img { transform: scale(1.04); }
.galerie figcaption {
  position: absolute; inset: auto 0 0 0; pointer-events: none; color: var(--beige-hell);
  font-size: .86rem; line-height: 1.25; padding: 22px 10px 8px;
  background: linear-gradient(180deg, transparent, rgba(42, 10, 32, .82));
}
.zoom { border: 0; padding: 0; margin: 0; background: rgba(28, 6, 21, .96); color: var(--beige-hell); width: 100vw; height: 100dvh; max-width: none; max-height: none; inset: 0; }
.zoom:popover-open { display: grid; grid-template-rows: 1fr auto; }
.zoom img { width: 100%; height: 100%; min-height: 0; object-fit: contain; padding: 14px; }
.zoom div { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 12px max(20px, env(safe-area-inset-left, 0px)) calc(14px + env(safe-area-inset-bottom, 0px)); }
.zu { font: 500 .85rem/1 var(--anzeige); letter-spacing: .08em; text-transform: uppercase; background: var(--beige-hell); color: var(--nacht); border: 0; padding: 12px 18px; cursor: pointer; }
.luft { height: clamp(64px, 10vw, 156px); }
.hinweis-klein { font-size: .95rem; color: var(--leise); margin-top: 10px; }

.passung { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 6vw, 90px); }
.passung.eins { grid-template-columns: 1fr; }
.passung.eins > div { max-width: 52rem; }
.passung h2 { font-weight: 500; font-size: clamp(1.6rem, 2.6vw, 2.5rem); line-height: 1; text-transform: uppercase; color: var(--kopf); margin-bottom: 16px; }
.passung ul { list-style: none; margin: 0; padding: 0; }
.passung li { padding: 12px 0 12px 28px; position: relative; border-top: 1px solid var(--linie); line-height: 1.4; }
.passung li::before { content: "+"; position: absolute; left: 2px; top: 10px; font: 500 1.2rem/1.4 var(--anzeige); color: var(--mark); }
.passung .nein li::before { content: "×"; }

.block { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(14px, 5vw, 80px); padding-block: clamp(22px, 3vw, 38px); border-top: 1px solid var(--linie); }
.block h2 { font-weight: 500; font-size: clamp(1.3rem, 2vw, 1.8rem); line-height: 1.1; text-transform: uppercase; color: var(--kopf); }
.block p, .block ul { max-width: 44rem; }
.block ul { margin: 0; padding-left: 20px; }
.block li { margin-bottom: 4px; }

.preise { margin: 0; display: grid; max-width: 44rem; }
.preise div { display: flex; justify-content: space-between; gap: 18px; padding-block: 10px; border-bottom: 1px solid var(--linie); }
.preise dt { line-height: 1.35; }
.preise dd { margin: 0; font: 500 1.08rem/1.35 var(--anzeige); color: var(--beere); white-space: nowrap; font-variant-numeric: tabular-nums; }
.preise + p { margin-top: 12px; }

.fragen details { border-top: 1px solid var(--linie); }
.fragen details:last-child { border-bottom: 1px solid var(--linie); }
.fragen summary {
  cursor: pointer; list-style: none; padding-block: 15px; display: flex; justify-content: space-between; gap: 18px;
  font: 500 clamp(1.05rem, 1.5vw, 1.3rem)/1.25 var(--anzeige); color: var(--kopf);
}
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: "+"; font-weight: 400; color: var(--mark); transition: transform .2s; }
.fragen details[open] summary::after { transform: rotate(45deg); }
.fragen details p { padding-bottom: 18px; max-width: 44rem; }
.quer { padding-block: 22px; border-top: 1px solid var(--linie); }
.vermieter { font-size: .95rem; color: var(--leise); margin-top: 16px; }

.mobil-cta { display: none; }

/* Letzter Schritt auf jeder Angebotsseite */
.schluss-innen { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(24px, 5vw, 80px); align-items: end; }
.schluss-satz { font: 400 clamp(1.6rem, 3.4vw, 3.2rem)/1.12 var(--anzeige); letter-spacing: -.012em; text-wrap: balance; }
.schluss-wege { display: grid; gap: 14px; justify-items: start; }
.schluss-frage a { color: var(--beige-hell); text-underline-offset: 4px; text-decoration-color: var(--rosa); }

/* Rechtstexte */
.rechtstext { max-width: 760px; margin-inline: auto; padding-left: var(--rand); padding-right: var(--rand-r); padding-block: clamp(36px, 6vw, 72px); }
.rechtstext h1 { font-weight: 500; font-size: clamp(2.3rem, 5vw, 4rem); line-height: 1; text-transform: uppercase; color: var(--beere); margin-bottom: 20px; }
.rechtstext h2 { font-weight: 500; font-size: 1.25rem; margin: 26px 0 6px; color: var(--beere); }
.rechtstext p { margin-bottom: 10px; }

/* Bewegung: nur beim Laden der Kopfzeile und ein leichtes Auftauchen */
@media (prefers-reduced-motion: no-preference) {
  .held .vollbild { animation: ruhig 1.8s cubic-bezier(.2, .7, .2, 1) both; }
  .held h1 span { animation: steigt .85s cubic-bezier(.2, .7, .2, 1) both; }
  .held h1 span:nth-child(2) { animation-delay: .09s; }
  .held h1 span:nth-child(3) { animation-delay: .18s; }
  @keyframes ruhig { from { transform: scale(1.07); } to { transform: none; } }
  @keyframes steigt { from { transform: translateY(.14em); } to { transform: none; } }
  @supports (animation-timeline: view()) {
    .auftauchen { animation: auf linear both; animation-timeline: view(); animation-range: entry 0% entry 26%; }
    @keyframes auf { from { opacity: .25; transform: translateY(26px); } to { opacity: 1; transform: none; } }
  }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } @view-transition { navigation: none; } }

@media (max-width: 900px) {
  .tueren, .kacheln, .bereich.dreh .kacheln, .zweispalten, .einstieg, .passung, .schluss-innen { grid-template-columns: 1fr; }
  .kopf nav a.kopf-knopf { display: none; }
  .tuer { min-height: 62vw; }
  .kachel { min-height: 92vw; }
  .fuss .innen { grid-template-columns: 1fr 1fr; }
  .fuss .innen > :first-child { grid-column: 1 / -1; }
  .fakten { grid-template-columns: repeat(2, 1fr); }
  .fakt { border-top: 1px solid var(--linie); }
  .fakt:nth-child(odd) { border-left: 0; padding-left: 0; }
  .fakt:nth-child(-n+2) { border-top: 0; }
  .block { grid-template-columns: 1fr; }
  .galerie { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 42vw; }
  .g4r2, .g6, .m2 { grid-column: span 2; }
  .g4r2 { grid-row: span 2; }
  .g2, .g3 { grid-column: span 1; }
  .zeile { grid-template-columns: 76px 1fr 22px; row-gap: 3px; padding-block: 11px; }
  .zeile:hover { padding-inline: 8px; }
  .zeile img, .z-platz { width: 76px; height: 76px; grid-row: span 3; align-self: start; }
  .z-name { grid-column: 2; grid-row: 1; }
  .z-kat { display: none; }
  .z-fuer { grid-column: 2; grid-row: 2; }
  .z-status { grid-column: 2; grid-row: 3; }
  .z-pfeil { grid-column: 3; grid-row: 1 / span 3; align-self: center; }
  .kopf nav a.nur-gross { display: none; }
  .hat-cta { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
  .mobil-cta {
    display: flex; position: fixed; inset: auto 0 0 0; z-index: 25; justify-content: space-between; align-items: center; gap: 12px;
    background: var(--beere); color: var(--beige-hell); font: 500 .98rem/1.2 var(--anzeige);
    padding: 11px max(16px, env(safe-area-inset-right, 0px)) calc(11px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  }
  .mobil-cta a { color: var(--beige-hell); text-underline-offset: 4px; }
  .mobil-cta span { color: var(--beige); font-size: .84rem; font-weight: 400; }
}
@media (max-width: 900px) {
  .held.klein h1 { font-size: 12vw; line-height: .94; }
  .held.klein.lang h1 { font-size: 8.6vw; }
}
@media (max-width: 420px) {
  .himmel .sterne { font-size: .8rem; padding: 8px 10px; }
  .marke { letter-spacing: .14em; font-size: .92rem; }
  .kopf nav { gap: 11px; font-size: .74rem; letter-spacing: .05em; }
}