/* Startseite: übernommene bildfüllende Vorschau vom 16.10.2026. Nur hier geladen. */
.startseite { --breite: 1380px; --rand: 60px; --kopf: 80px; --papier: #f6f4ef; --gold: #e2c38b; background: #fff; }
.startseite h1, .startseite h2 { font-weight: 450; }
.startseite .kopf { border-bottom: 0; }
.startseite .kopf-anfrage { display: none; }
.startseite .marke { font-size: 25px; }
.startseite .knopf { border-radius: 2px; padding: 15px 24px; min-height: 51px; }
.startseite .kopf .knopf { min-height: 44px; padding: 12px 19px; }
.startseite .hauptmenue { gap: 28px; }
.eingang { position: relative; min-height: 600px; height: min(780px, calc(100svh - 144px)); background: var(--navy-tief); isolation: isolate; }
.eingang-motiv { position: absolute; inset: 0; z-index: -2; }
.eingang-motiv > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.eingang-katalog > img { object-fit: contain; padding: 30px 5% 30px 48%; }
.eingang::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(12, 31, 47, .94) 0%, rgba(12, 31, 47, .75) 25%, rgba(12, 31, 47, .25) 49%, rgba(12, 31, 47, 0) 72%); }
.eingang-motiv figcaption { position: absolute; right: 22px; bottom: 14px; margin: 0; color: #fff; font-size: 12px; background: rgba(15, 36, 56, .82); padding: 3px 8px; }
.eingang-inhalt { height: 100%; display: flex; align-items: center; padding-block: 38px; }
.eingang-text { max-width: 560px; color: #fff; }
.eingang-zeile { font-size: 15px; font-weight: 550; letter-spacing: .07em; margin-bottom: 24px; color: #ecd7b0; }
.eingang h1 { color: #fff; font-size: clamp(57px, 5.4vw, 83px); line-height: 1.02; letter-spacing: -.025em; text-wrap: initial; }
.eingang-unterzeile { font-size: 19px; line-height: 1.5; color: #f3f3ee; margin-top: 26px; }
.eingang .aktion { margin-top: 31px; gap: 12px; }
.eingang .knopf-messing { color: #162e43; background: var(--gold); }
.eingang .knopf-messing:hover { background: #efd6a9; }
.eingang .knopf-hell { color: #fff; background: rgba(15, 36, 56, .22); border: 1px solid rgba(255, 255, 255, .72); }
.eingang .knopf-hell:hover { background: rgba(15, 36, 56, .65); }
.eingang :focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
.qualitaetszeile { background: var(--papier); }
.qualitaetszeile .rahmen { min-height: 64px; display: flex; align-items: center; justify-content: center; gap: 12vw; font-size: 14px; color: #3d4c58; }
.qualitaetszeile span + span { position: relative; }
.qualitaetszeile span + span::before { content: ""; position: absolute; left: -6vw; top: 5px; height: 14px; width: 1px; background: #c3bbaa; }
.modelle-abschnitt { padding-block: 96px 94px; }
.rubrik { color: #796035; font-size: 13px; letter-spacing: .09em; text-transform: uppercase; font-weight: 600; margin-bottom: 17px; }
.abschnitt-kopf h2, .gestalten-text h2, .fragen-einstieg h2 { font-size: clamp(34px, 3.5vw, 50px); line-height: 1.1; }
.abschnitt-kopf > p:last-child { color: var(--grau); margin-top: 18px; }
.modellgalerie { list-style: none; padding: 0; margin: 46px 0 34px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.modell { display: block; text-decoration: none; }
.modell-bild { display: flex; height: 350px; align-items: center; justify-content: center; padding: 27px 24px; background: #f3f1ec; overflow: hidden; }
.modell-bild img { width: auto; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .2s ease; }
.modell:hover img { transform: translateY(-4px); }
.modell-zeile { display: flex; justify-content: space-between; align-items: baseline; margin-top: 18px; color: var(--navy); }
.modell-zeile strong { font-family: var(--serif); font-weight: 500; font-size: 25px; }
.modell-zeile > span { font-size: 21px; }
.modell-beschreibung { display: block; font-size: 14px; color: var(--grau); margin-top: 5px; }
.modell-alle { display: inline-block; font-size: 16px; }
.modell-alle span { margin-left: 15px; }
.gestalten-abschnitt { background: var(--papier); }
.gestalten-innen { display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: 96px; padding-block: 66px; }
.gestalten-innen.ohne-detailmotiv { grid-template-columns: 1fr; }
.gestalten-text { max-width: 410px; }
.gestalten-text > p:not(.rubrik) { margin-top: 23px; color: var(--grau); line-height: 1.7; }
.gestalten-text .knopf { margin-top: 29px; }
.detailmotiv img { width: 100%; height: 460px; object-fit: cover; object-position: 50% 50%; }
.detailmotiv figcaption { text-align: left; margin: 10px 0 0; font-size: 12px; }
.fragen-abschnitt { display: grid; grid-template-columns: 1fr 1.1fr; gap: 100px; padding-block: 100px; }
.fragen-einstieg > p:not(.rubrik) { color: var(--grau); max-width: 34ch; margin-top: 22px; }
.fragen-einstieg .textlink { display: inline-block; margin-top: 23px; }
.fragen-einstieg .textlink + .textlink { display: table; margin-top: 12px; }
.fragen-liste { align-self: center; }
.fragen-liste details { border-bottom: 1px solid var(--linie); }
.fragen-liste summary { list-style: none; position: relative; padding: 23px 34px 23px 0; cursor: pointer; font-size: 18px; color: var(--navy); }
.fragen-liste summary::-webkit-details-marker { display: none; }
.fragen-liste summary::after { content: "+"; position: absolute; right: 0; top: 19px; font-size: 25px; font-weight: 400; color: var(--navy); }
.fragen-liste details[open] summary::after { content: "−"; }
.fragen-liste details p { padding: 0 35px 23px 0; color: var(--grau); font-size: 16px; }
.abschluss-abschnitt { padding-block: 75px 80px; text-align: center; background: #f3f1ec; }
.abschluss-abschnitt h2 { font-size: clamp(35px, 3.6vw, 52px); line-height: 1.13; }
.abschluss-abschnitt .aktion { justify-content: center; margin-top: 30px; }
.abschluss-abschnitt h2 + p, .abschluss-abschnitt .klein { max-width: 65ch; margin: 20px auto 0; color: var(--grau); }
.startseite-fuss { padding-block: 48px 30px; background: #fff; }
.fuss-innen { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 38px; }
.fuss-innen > div p { font-size: 14px; color: var(--grau); margin-top: 9px; }
.fuss-innen nav { display: flex; gap: 25px; font-size: 14px; padding-top: 7px; }
.fuss-innen nav a { text-decoration: none; }
.fuss-innen nav a:hover { text-decoration: underline; }
.fuss-klein { grid-column: 1 / -1; color: var(--grau); font-size: 12px; }
@media (max-width: 1100px) {
  .startseite { --rand: 36px; }
  .startseite .hauptmenue { gap: 19px; }
  .eingang h1 { font-size: 62px; }
  .eingang-text { max-width: 450px; }
  .modellgalerie { gap: 20px; }
  .modell-bild { height: 300px; padding-inline: 16px; }
  .gestalten-innen, .fragen-abschnitt { gap: 50px; }
}
@media (max-width: 959px) {
  .startseite { --kopf: 68px; }
  .startseite .marke { font-size: 23px; }
  .startseite .hauptmenue { gap: 0; }
  .eingang { min-height: 590px; height: 650px; }
  .eingang h1 { font-size: 58px; }
  .eingang-motiv > img { object-position: 60% 50%; }
  .eingang::before { background: linear-gradient(90deg, rgba(12, 31, 47, .93), rgba(12, 31, 47, .65) 35%, rgba(12, 31, 47, .1) 85%); }
  .modellgalerie { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 24px; }
  .modell-bild { height: 340px; }
  .gestalten-innen { gap: 36px; }
  .detailmotiv img { height: 390px; }
  .fragen-abschnitt { grid-template-columns: 1fr; gap: 35px; }
  .fragen-einstieg > p:not(.rubrik) { max-width: 55ch; }
}
@media (max-width: 639px) {
  .startseite { --rand: 22px; --kopf: 64px; }
  .startseite .marke { font-size: 22px; }
  .startseite .knopf { font-size: 14px; min-height: 50px; padding: 14px 17px; }
  .eingang { display: flex; flex-direction: column; height: auto; min-height: 0; }
  .eingang-motiv { position: relative; z-index: auto; aspect-ratio: 6 / 5; }
  .eingang-motiv > img { object-position: 50% 48%; }
  .eingang-katalog > img { padding: 16px; }
  .eingang-motiv figcaption { right: 10px; bottom: 8px; font-size: 10px; }
  .eingang::before { display: none; }
  .eingang-inhalt { width: 100%; height: auto; padding-block: 29px 32px; }
  .eingang-text { max-width: none; width: 100%; }
  .eingang-zeile { font-size: 12px; margin-bottom: 15px; letter-spacing: .05em; }
  .eingang h1 { font-size: clamp(39px, 10vw, 48px); line-height: 1.07; }
  .eingang h1 br { display: none; }
  .eingang-unterzeile { font-size: 16px; margin-top: 16px; max-width: 28ch; }
  .nur-desktop { display: none; }
  .eingang .aktion { margin-top: 23px; gap: 10px; }
  .eingang .aktion .knopf { flex: 1 1 auto; }
  .qualitaetszeile .rahmen { min-height: 68px; font-size: 11px; padding-inline: 15px; gap: 18px; justify-content: space-between; }
  .qualitaetszeile span + span::before { display: none; }
  .modelle-abschnitt { padding-block: 58px; }
  .rubrik { font-size: 11px; margin-bottom: 13px; }
  .abschnitt-kopf h2, .gestalten-text h2, .fragen-einstieg h2 { font-size: 35px; }
  .abschnitt-kopf > p:last-child { font-size: 15px; max-width: 29ch; }
  .modellgalerie { margin: 30px 0; gap: 28px 14px; }
  .modell-bild { height: 235px; padding: 21px 13px; }
  .modell-zeile { margin-top: 12px; }
  .modell-zeile strong { font-size: 23px; }
  .modell-beschreibung { font-size: 12px; line-height: 1.45; }
  .gestalten-innen { grid-template-columns: 1fr; padding-block: 48px; gap: 32px; }
  .gestalten-text > p:not(.rubrik) { font-size: 16px; }
  .detailmotiv img { height: 350px; }
  .fragen-abschnitt { padding-block: 55px; gap: 24px; }
  .fragen-liste summary { font-size: 16px; padding-block: 19px; }
  .fragen-liste summary::after { top: 15px; }
  .abschluss-abschnitt { padding-block: 51px; }
  .abschluss-abschnitt h2 { font-size: 34px; }
  .abschluss-abschnitt h2 br { display: none; }
  .startseite-fuss { padding-block: 36px 24px; }
  .fuss-innen { grid-template-columns: 1fr; gap: 25px; }
  .fuss-innen nav { flex-wrap: wrap; gap: 24px; padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .startseite *, .startseite *::before, .startseite *::after { transition: none !important; }
  .modell:hover img { transform: none; }
}