/* ==========================================================================
   Sofastil Berlin · Designsystem 2027 · 3/3 Bausteine
   Knöpfe, Kopfleiste, Menü, Handy-Leiste, Bühne, Kacheln, Galerie,
   Häufige Fragen, Formulare, Fußzeile. Jeder Baustein ist unten kurz erklärt.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Ziernagel · das einzige Schmuckelement der Marke (Messing-Nagelkopf)
   -------------------------------------------------------------------------- */
.nagel { display: inline-block; inline-size: 9px; block-size: 9px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 34% 30%, #F1DDB0 0 12%, #CDA866 32%, var(--messing) 55%, #6E5026 100%);
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.25); }
.nagelreihe { block-size: 9px; border: 0; background-image: radial-gradient(circle at 50% 50%, var(--messing) 0 3.2px, transparent 3.6px); background-size: 18px 9px; background-repeat: repeat-x; opacity: 0.9; }
.auf-dunkel .nagelreihe, .abschnitt--gruen .nagelreihe { opacity: 0.75; }

/* --------------------------------------------------------------------------
   2. Knöpfe · Pillenform. Nur drei Arten: Haupt, Zweit, Glas (auf Fotos).
   -------------------------------------------------------------------------- */
.knopf {
  --k-hg: transparent; --k-schrift: var(--tinte); --k-rand: rgb(29 31 28 / 0.55);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem;
  min-block-size: var(--knopf-h); padding-inline: 1.55rem; border-radius: var(--rund-pille);
  border: 1px solid var(--k-rand); background: var(--k-hg); color: var(--k-schrift);
  font-family: var(--schrift-text); font-size: 1rem; font-weight: 400; letter-spacing: 0.005em; line-height: 1;
  text-decoration: none; white-space: normal; text-align: center; padding-block: 0.8rem; max-inline-size: 100%; overflow-wrap: anywhere; isolation: isolate; overflow: hidden;
  transition: background-color var(--dauer) var(--kurve), border-color var(--dauer) var(--kurve), color var(--dauer) var(--kurve), transform var(--dauer-kurz) var(--kurve);
}
.knopf:active { transform: scale(0.975); }
.knopf:hover { --k-rand: var(--tinte); }
/* Hauptknopf: Chesterfield-Grün mit Messing-Nagel */
.knopf--haupt { --k-hg: var(--gruen); --k-schrift: var(--grund); --k-rand: var(--gruen); padding-inline-start: 1.2rem; }
.knopf--haupt::before { content: ""; inline-size: 9px; block-size: 9px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 34% 30%, #F1DDB0 0 12%, #CDA866 32%, var(--messing) 55%, #6E5026 100%);
  box-shadow: 0 0 0 0 rgb(179 138 79 / 0.0); transition: box-shadow var(--dauer) var(--kurve), transform var(--dauer) var(--kurve); }
.knopf--haupt:hover { --k-hg: var(--gruen-hell); --k-rand: var(--gruen-hell); }
.knopf--haupt:hover::before { transform: scale(1.15); box-shadow: 0 0 0 5px rgb(179 138 79 / 0.18); }
/* Glanz, der beim Überfahren einmal über den Knopf läuft */
.knopf--haupt::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / 0.14) 50%, transparent 65%); transform: translateX(-120%); }
.knopf--haupt:hover::after { transform: translateX(120%); transition: transform 900ms var(--kurve); }
/* Zweitknopf: Umriss */
.knopf--zweit { --k-hg: transparent; }
.knopf--zweit:hover { --k-hg: rgb(29 31 28 / 0.05); }
/* Glasknopf: auf Fotos und dunklen Flächen */
.knopf--glas { --k-hg: rgb(29 31 28 / 0.76); --k-schrift: var(--weiss); --k-rand: rgb(255 255 255 / 0.45); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); }
.knopf--glas:hover { --k-hg: rgb(29 31 28 / 0.86); --k-rand: rgb(255 255 255 / 0.8); }
/* Heller Knopf auf Grün */
.knopf--hell { --k-hg: var(--grund); --k-schrift: var(--gruen); --k-rand: var(--grund); padding-inline-start: 1.2rem; }
.knopf--hell::before { content: ""; inline-size: 9px; block-size: 9px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #F1DDB0 0 12%, #CDA866 32%, var(--messing) 55%, #6E5026 100%); }
.knopf--hell:hover { --k-hg: var(--weiss); }
.knopf--klein { min-block-size: 2.5rem; padding-inline: 1.1rem; font-size: 0.9380rem; gap: 0.55rem; }
.knopf--klein.knopf--haupt { padding-inline-start: 0.95rem; }
.knopf--voll { inline-size: 100%; }
.knopf-gruppe { display: flex; flex-wrap: wrap; gap: var(--r-3); align-items: center; }
/* Symbolknopf (rund) */
.symbolknopf { display: inline-grid; place-items: center; inline-size: 2.80rem; block-size: 2.80rem; border-radius: 50%; color: inherit; transition: background-color var(--dauer-kurz); }
.symbolknopf:hover { background: rgb(29 31 28 / 0.06); }
.symbolknopf svg { inline-size: 1.35rem; block-size: 1.35rem; }
/* Textlink mit wachsender Unterstreichung */
.link { color: inherit; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-block-end: 2px; transition: background-size var(--dauer) var(--kurve); }
.link:hover { background-size: 100% 2px; }
.link--leise { color: var(--grau); }

/* --------------------------------------------------------------------------
   3. Kopfleiste · schwebende Glas-Kapsel
   -------------------------------------------------------------------------- */
.kopf { position: fixed; inset-block-start: 0.80rem; inset-inline: 0; z-index: 50; pointer-events: none; }
.kopf__leiste { pointer-events: auto; position: relative; inline-size: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto;
  display: flex; align-items: center; gap: var(--r-4); block-size: var(--kopf-h); padding-inline: 1.25rem 0.5rem;
  border-radius: var(--rund-pille); background: var(--glas); border: 1px solid var(--glas-rand); box-shadow: var(--schatten-schwebend);
  backdrop-filter: blur(var(--glas-unschaerfe)) saturate(1.5); -webkit-backdrop-filter: blur(var(--glas-unschaerfe)) saturate(1.5);
  transition: block-size var(--dauer) var(--kurve), inline-size var(--dauer) var(--kurve); }
.kopf[data-gescrollt="ja"] .kopf__leiste { block-size: calc(var(--kopf-h) - 0.380rem); }
.marke { display: inline-flex; align-items: baseline; gap: 0.45rem; text-decoration: none; color: var(--tinte); white-space: nowrap; }
.marke__name { font-family: var(--schrift-titel); font-size: 1.7rem; line-height: 1; letter-spacing: -0.01em; }
.marke__ort { font-size: 0.8125rem; color: var(--grau); letter-spacing: 0.02em; }
.kopf__nav { display: none; position: relative; margin-inline: auto; }
.kopf__nav ul { display: flex; gap: 0.15rem; list-style: none; padding: 0; }
.kopf__punkt { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 0.35rem; block-size: 2.5rem; padding-inline: 0.85rem; border-radius: var(--rund-pille); color: var(--tinte); text-decoration: none; font-size: 0.96880rem; white-space: nowrap; }
.kopf__punkt svg { inline-size: 0.8rem; block-size: 0.8rem; transition: transform var(--dauer) var(--kurve); }
.kopf__punkt[aria-expanded="true"] svg { transform: rotate(180deg); }
.kopf__punkt[aria-current="page"]::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 5px; margin-inline: auto; inline-size: 5px; block-size: 5px; border-radius: 50%; background: var(--messing); }
/* gleitende Markierung hinter dem Menüpunkt (CSS-Ankerpositionierung, 2026 in allen großen Browsern) */
.kopf__markierung { position: absolute; z-index: 0; border-radius: var(--rund-pille); background: rgb(29 31 28 / 0.07); opacity: 0; pointer-events: none; }
@supports (anchor-name: --a) {
  .kopf__punkt:is(:hover, :focus-visible, [aria-expanded="true"]) { anchor-name: --menue-aktiv; }
  .kopf__markierung { position-anchor: --menue-aktiv; inset-block-start: anchor(top); inset-block-end: anchor(bottom); inset-inline-start: anchor(start); inset-inline-end: anchor(end);
    transition: inset var(--dauer) var(--kurve), opacity var(--dauer-kurz); }
  .kopf__nav:has(.kopf__punkt:is(:hover, :focus-visible, [aria-expanded="true"])) .kopf__markierung { opacity: 1; }
}
@supports not (anchor-name: --a) {
  .kopf__punkt:hover, .kopf__punkt[aria-expanded="true"] { background: rgb(29 31 28 / 0.07); }
}
.kopf__aktionen { display: flex; align-items: center; gap: 0.25rem; margin-inline-start: auto; }
@media (min-width: 80rem) { .kopf__nav ~ .kopf__aktionen { margin-inline-start: 0; } }
.kopf__termin { display: none; }
.kopf__menueknopf { display: inline-flex; align-items: center; gap: 0.55rem; block-size: 2.80rem; padding-inline: 1rem; border-radius: var(--rund-pille); background: var(--tinte); color: var(--grund); font-size: 0.9380rem; }
.kopf__menueknopf span.striche { display: grid; gap: 4px; }
.kopf__menueknopf span.striche i { display: block; inline-size: 16px; block-size: 1.5px; background: currentColor; border-radius: 2px; }
@media (min-width: 80rem) {
  .kopf__nav { display: block; }
  .kopf__termin { display: inline-flex; }
  .kopf__menueknopf { display: none; }
  .kopf__leiste { padding-inline: 1.5rem 0.4rem; }
}

/* Großes Auswahlfeld unter der Kopfleiste (Computer) */
.mega { pointer-events: auto; position: relative; inline-size: min(100% - 2 * var(--rand), var(--breite)); margin: 0.5rem auto 0; border-radius: var(--rund-flaeche);
  background: var(--glas); border: 1px solid var(--glas-rand); box-shadow: var(--schatten-fenster);
  backdrop-filter: blur(28px) saturate(1.4); -webkit-backdrop-filter: blur(28px) saturate(1.4);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); display: grid; grid-template-columns: 1.15fr 1fr 1.05fr; gap: var(--r-7);
  opacity: 1; transform: none; transition: opacity var(--dauer) var(--kurve), transform var(--dauer) var(--kurve), display var(--dauer) allow-discrete; }
.mega[hidden] { display: none; opacity: 0; transform: translateY(-8px); }
@starting-style { .mega:not([hidden]) { opacity: 0; transform: translateY(-8px); } }
.mega__liste { list-style: none; padding: 0; display: grid; gap: 0.15rem; }
.mega__liste a { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-block: 0.45rem; text-decoration: none; font-family: var(--schrift-titel); font-size: 1.80rem; line-height: 1.1; color: var(--tinte); border-bottom: 1px solid transparent; }
.mega__liste a span { font-family: var(--schrift-text); font-size: var(--gr-mini); color: var(--grau); }
.mega__liste a:hover { border-bottom-color: var(--linie); }
.mega__klein { list-style: none; padding: 0; display: grid; gap: 0.6rem; align-content: start; }
.mega__klein a { text-decoration: none; color: var(--tinte); }
.mega__klein a:hover { text-decoration: underline; }
.mega__titel { font-size: var(--gr-mini); color: var(--grau); margin-bottom: 0.9rem; }
.mega__karte { display: grid; grid-template-rows: 1fr auto; border-radius: 14px; overflow: hidden; background: var(--gruen); color: var(--grund); text-decoration: none; min-block-size: 16rem; }
.mega__karte .bild { border-radius: 0; background: #1A3229; }
.mega__karte p { padding: 1rem 1.2rem 1.2rem; display: grid; gap: 0.2rem; }
.mega__karte strong { font-family: var(--schrift-titel); font-weight: 400; font-size: 1.6rem; line-height: 1.05; }

/* --------------------------------------------------------------------------
   4. Menü auf dem Handy · ganzer Bildschirm
   -------------------------------------------------------------------------- */
.menue { inline-size: 100%; max-inline-size: none; block-size: 100dvh; max-block-size: none; margin: 0; padding: 0; border: 0; background: var(--grund); color: var(--tinte);
  opacity: 1; transform: none; transition: opacity var(--dauer) var(--kurve), transform var(--dauer) var(--kurve), overlay var(--dauer) allow-discrete, display var(--dauer) allow-discrete; }
.menue:not([open]) { opacity: 0; transform: translateY(12px); }
@starting-style { .menue[open] { opacity: 0; transform: translateY(12px); } }
.menue::backdrop { background: rgb(29 31 28 / 0.3); }
.menue__innen { display: grid; grid-template-rows: auto 1fr auto; min-block-size: 100%; padding: 0.80rem var(--rand) calc(1.5rem + env(safe-area-inset-bottom)); }
.menue__kopf { display: flex; align-items: center; justify-content: space-between; block-size: var(--kopf-h); padding-inline: 1.25rem 0.5rem; }
.menue__liste { list-style: none; padding: 1.5rem 0 0; margin: 0; }
.menue__liste > li { border-bottom: 1px solid var(--linie); }
.menue__liste summary, .menue__liste > li > a { display: flex; align-items: center; justify-content: space-between; padding-block: 0.95rem; list-style: none; cursor: pointer; text-decoration: none; color: var(--tinte); font-family: var(--schrift-titel); font-size: 2.125rem; line-height: 1.05; }
.menue__liste summary::-webkit-details-marker { display: none; }
.menue__liste summary svg { inline-size: 1.1rem; block-size: 1.1rem; transition: transform var(--dauer) var(--kurve); }
.menue__liste details[open] summary svg { transform: rotate(180deg); }
.menue__liste details ul { list-style: none; padding: 0 0 1rem; display: grid; gap: 0.15rem; }
.menue__liste details ul a { display: block; padding-block: 0.5rem; text-decoration: none; color: var(--tinte); font-size: 1.0625rem; }
.menue__liste details::details-content { block-size: 0; overflow: clip; transition: block-size var(--dauer) var(--kurve), content-visibility var(--dauer) allow-discrete; }
.menue__liste details[open]::details-content { block-size: auto; }
.menue__karte { margin-top: 1.80rem; border-radius: var(--rund-flaeche); background: var(--gruen); color: var(--grund); padding: 1.25rem; display: grid; gap: 0.9rem; }
.menue__karte p { color: var(--gruen-zart); font-size: var(--gr-klein); }
.menue__karte strong { display: block; color: var(--grund); font-family: var(--schrift-titel); font-weight: 400; font-size: 1.5rem; line-height: 1.1; }
.menue__fuss { display: flex; justify-content: space-between; gap: 1rem; padding-top: 1.25rem; font-size: var(--gr-klein); color: var(--grau); }

/* --------------------------------------------------------------------------
   5. Leiste unten auf dem Handy: Termin · Anrufen · WhatsApp
   -------------------------------------------------------------------------- */
.handyleiste { position: fixed; inset-inline: 0.80rem; inset-block-end: calc(0.80rem + env(safe-area-inset-bottom)); z-index: 40;
  display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 0.35rem; padding: 0.35rem; border-radius: var(--rund-pille);
  background: var(--glas); border: 1px solid var(--glas-rand); box-shadow: var(--schatten-schwebend);
  backdrop-filter: blur(var(--glas-unschaerfe)) saturate(1.5); -webkit-backdrop-filter: blur(var(--glas-unschaerfe)) saturate(1.5);
  transition: transform var(--dauer) var(--kurve), opacity var(--dauer); }
.handyleiste a { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-block-size: 3rem; border-radius: var(--rund-pille); text-decoration: none; color: var(--tinte); font-size: 0.9380rem; }
.handyleiste a:first-child { background: var(--gruen); color: var(--grund); }
.handyleiste a:first-child::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #F1DDB0 0 12%, #CDA866 32%, var(--messing) 55%, #6E5026 100%); }
.handyleiste svg { inline-size: 1.15rem; block-size: 1.15rem; }
.handyleiste[data-versteckt="ja"] { transform: translateY(calc(100% + 1.5rem)); opacity: 0; }
@media (min-width: 80rem) { .handyleiste { display: none; } }

@media (min-width: 80rem) { body:has(.handyleiste) { padding-block-end: 0; } }

/* --------------------------------------------------------------------------
   6. Bühne (Startbild) · großes Foto, Titel unten links
   -------------------------------------------------------------------------- */
.buehne { position: relative; min-block-size: 100svh; display: grid; align-items: end; color: var(--weiss); overflow: clip; background: #24302A; }
.buehne__bild { position: absolute; inset: 0; }
.buehne__bild > picture { display: block; inline-size: 100%; block-size: 100%; }
.buehne__bild > img, .buehne__bild > canvas, .buehne__bild > picture img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: var(--fokus, 50% 60%); }
.buehne__bild::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(180deg, rgb(15 21 18 / 0.28) 0%, rgb(15 21 18 / 0) 22%, rgb(15 21 18 / 0) 42%, rgb(15 21 18 / 0.62) 78%, rgb(15 21 18 / 0.78) 100%); }
.buehne__inhalt { position: relative; z-index: 1; inline-size: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto; padding-block: 9rem clamp(2rem, 1rem + 4vw, 4.5rem); display: grid; gap: var(--r-5); }
.buehne__inhalt .titel-buehne { max-inline-size: 13ch; }
.buehne__unterzeile { font-size: var(--gr-gross); line-height: 1.45; max-inline-size: 34rem; color: rgb(255 255 255 / 0.9); }
.buehne__fuss { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--r-5); }
.buehne__ort { display: grid; gap: 0.15rem; font-size: var(--gr-klein); color: rgb(255 255 255 / 0.82); text-align: end; }
.buehne__ort .nagelreihe { inline-size: 9.5rem; margin-inline-start: auto; margin-bottom: 0.4rem; }
@media (max-width: 47.99rem) {
  .buehne__ort { display: none; }
  .buehne .knopf-gruppe { inline-size: 100%; }
  .buehne .knopf-gruppe .knopf { flex: 1 1 100%; }
  .buehne__inhalt { padding-block-start: 44svh; gap: var(--r-4); }
  .buehne__unterzeile { font-size: 1.0625rem; }
}
.buehne .ki-hinweis { inset-block-start: calc(var(--kopf-h) + 1.5rem); inset-block-end: auto; inset-inline-start: auto; inset-inline-end: var(--rand); }
/* einmaliger Auftritt beim Laden */
@media (prefers-reduced-motion: no-preference) {
  .buehne__bild > * { animation: buehne-bild 1800ms var(--kurve) both; }
  .buehne__inhalt > * { animation: buehne-text 900ms var(--kurve) both; }
  .buehne__inhalt > :nth-child(2) { animation-delay: 120ms; }
  .buehne__inhalt > :nth-child(3) { animation-delay: 240ms; }
  .buehne__inhalt > :nth-child(4) { animation-delay: 360ms; }
}
@keyframes buehne-bild { from { transform: scale(1.06); } }
@keyframes buehne-text { from { opacity: 0; transform: translateY(18px); } }

/* --------------------------------------------------------------------------
   7. Vorteile-Zeile · drei kurze Versprechen mit Ziernagel
   -------------------------------------------------------------------------- */
.vorteile { display: grid; gap: var(--r-5); padding-block: clamp(1.80rem, 1.2rem + 2vw, 2.80rem); border-bottom: 1px solid var(--linie); }
.vorteile li { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.9rem; align-items: baseline; list-style: none; }
.vorteile li .nagel { transform: translateY(-1px); }
.vorteile strong { font-weight: 400; font-family: var(--schrift-titel); font-size: 1.5rem; line-height: 1.1; }
.vorteile span.leise { grid-column: 2; font-size: var(--gr-klein); }
.vorteile { padding-inline: 0; margin: 0; }
@media (min-width: 48rem) { .vorteile { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------------------------------------------------------
   8. Kacheln (Formen, Kategorien, Modelle)
   -------------------------------------------------------------------------- */
.kacheln { display: grid; gap: clamp(0.80rem, 0.4rem + 1.4vw, 1.5rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 64rem) { .kacheln--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .kacheln--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kacheln--schiene { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--rand) * -1); padding-inline: var(--rand); scroll-padding-inline: var(--rand); }
.kacheln--schiene::-webkit-scrollbar { display: none; }
.kacheln--schiene > * { flex: 0 0 min(72vw, 21rem); scroll-snap-align: start; }
@media (min-width: 64rem) { .kacheln--schiene { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; margin-inline: 0; padding-inline: 0; } }
.kachel { display: grid; gap: 0.85rem; text-decoration: none; color: var(--tinte); }
.kachel .bild { aspect-ratio: 4 / 5; }
.kachel .bild img, .kachel .bild canvas { transition: transform 900ms var(--kurve); }
.kachel:hover .bild canvas { transform: scale(1.025); }
.kachel__text { display: grid; gap: 0.15rem; }
.kachel__name { font-family: var(--schrift-titel); font-size: clamp(1.5rem, 1.3rem + 0.6vw, 1.880rem); line-height: 1.05; }
.kachel__zeile { color: var(--grau); font-size: var(--gr-klein); }
.kachel:hover .kachel__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.kachel--breit .bild { aspect-ratio: 3 / 2; }
.merken { position: absolute; inset-block-start: 0.6rem; inset-inline-end: 0.6rem; display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: 50%; background: var(--glas); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--tinte); }
.merken svg { inline-size: 1.1rem; block-size: 1.1rem; }
.merken[aria-pressed="true"] svg { fill: var(--gruen); stroke: var(--gruen); }

/* --------------------------------------------------------------------------
   9. Ablauf · Schritte untereinander ohne sichtbare Nummern
   -------------------------------------------------------------------------- */
.ablauf { list-style: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--r-6); }
.ablauf li { display: grid; gap: 0.7rem; align-content: start; }
.ablauf li::before, .ablauf li::after { content: none; display: none; }
.ablauf__linie { display: none; }
.ablauf :is(h3,:where([data-seo-heading="h3"],[data-seo-caption="h3"])) { font-size: 1.380rem; }
.ablauf p { color: var(--grau); font-size: var(--gr-klein); line-height: 1.55; max-inline-size: 30ch; }

/* --------------------------------------------------------------------------
   10. Planer-Band · dunkles Grün mit Knopfheftungs-Muster und echtem 3D-Sofa
   -------------------------------------------------------------------------- */
.planerband { position: relative; background: var(--gruen); color: var(--grund); overflow: clip; }
.planerband::before { content: ""; position: absolute; inset: 0; opacity: 0.07; pointer-events: none;
  background-image: repeating-linear-gradient(45deg, transparent 0 58px, rgb(255 255 255 / 0.9) 58px 59px), repeating-linear-gradient(-45deg, transparent 0 58px, rgb(255 255 255 / 0.9) 58px 59px); }
.planerband__innen { position: relative; display: grid; gap: var(--r-6); align-items: center; }
@media (min-width: 64rem) { .planerband__innen { grid-template-columns: 0.8fr 1.2fr; gap: var(--r-8); } }
.planerband .einleitung { color: var(--gruen-zart); }
.planerband__buehne { position: relative; aspect-ratio: 16 / 11; border-radius: var(--rund-flaeche); overflow: hidden; background: radial-gradient(120% 90% at 50% 70%, #2B4A3E, #1A3128 70%); }
.planerband__buehne canvas { inline-size: 100%; block-size: 100%; cursor: grab; }
.planerband__buehne canvas:active { cursor: grabbing; }
.planerband__hinweis { position: absolute; inset-block-start: 1rem; inset-inline-start: 1rem; font-size: var(--gr-mini); color: var(--gruen-zart); display: inline-flex; gap: 0.4rem; align-items: center; background: rgb(15 25 20 / 0.45); padding: 0.35rem 0.7rem; border-radius: var(--rund-pille); }
.farbwahl { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.farbwahl button { inline-size: 2.5rem; block-size: 2.5rem; border-radius: 50%; background: var(--f); border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15), inset 0 -6px 10px rgb(0 0 0 / 0.18), inset 0 6px 10px rgb(255 255 255 / 0.12); position: relative; transition: transform var(--dauer-kurz) var(--kurve); }
.farbwahl button:hover { transform: scale(1.06); }
.farbwahl button[aria-pressed="true"] { border-color: var(--messing); outline: 2px solid var(--messing); outline-offset: 3px; }
.farbwahl__name { font-size: var(--gr-klein); color: var(--gruen-zart); min-inline-size: 12ch; }

/* --------------------------------------------------------------------------
   11. Stoffe · Mosaik aus großen Musterflächen
   -------------------------------------------------------------------------- */
.mosaik { display: grid; gap: 0.6rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 48rem) { .mosaik { grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(8rem, 5rem + 6vw, 11rem); } .mosaik > * { grid-column: span 3; } .mosaik > :nth-child(1) { grid-row: span 2; } .mosaik > :nth-child(3) { grid-column: span 2; } .mosaik > :nth-child(4) { grid-column: span 1; } }
.muster { position: relative; border-radius: var(--rund-bild); overflow: hidden; min-block-size: 8rem; background: var(--kalk); color: var(--weiss); text-decoration: none; }
.muster img, .muster canvas { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.muster span { position: absolute; inset-inline-start: 0.80rem; inset-block-end: 0.7rem; font-size: var(--gr-mini); background: rgb(15 21 18 / 0.42); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 0.18rem 0.55rem; border-radius: var(--rund-pille); }

/* --------------------------------------------------------------------------
   12. Zitat · Person
   -------------------------------------------------------------------------- */
.zitat { display: grid; gap: var(--r-6); align-items: center; }
@media (min-width: 64rem) { .zitat { grid-template-columns: 0.85fr 1.15fr; gap: var(--r-9); } }
.zitat blockquote { font-family: var(--schrift-titel); font-size: clamp(2rem, 1.5rem + 2.2vw, 3.5rem); line-height: 1.08; letter-spacing: -0.01em; text-wrap: balance; }
.zitat blockquote::before { content: "„"; }
.zitat blockquote::after { content: "“"; }
.zitat figcaption { margin-top: var(--r-5); display: flex; align-items: center; gap: 0.80rem; color: var(--grau); }

/* --------------------------------------------------------------------------
   13. Showroom · Visitenkarte
   -------------------------------------------------------------------------- */
.showroom { display: grid; gap: var(--r-6); }
@media (min-width: 64rem) { .showroom { grid-template-columns: 1.1fr 0.9fr; align-items: stretch; } }
.showroom__adresse { font-family: var(--schrift-titel); font-size: clamp(2.25rem, 1.6rem + 2.6vw, 4.25rem); line-height: 1; font-style: normal; }
.showroom__karte { border-radius: var(--rund-flaeche); background: var(--kalk); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); display: grid; gap: var(--r-5); align-content: space-between; }
.showroom__zeilen { display: grid; gap: 0.6rem; font-size: var(--gr-klein); }
.showroom__zeilen div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--linie); padding-bottom: 0.6rem; }

/* --------------------------------------------------------------------------
   14. Fußzeile · Grün, großer Schriftzug
   -------------------------------------------------------------------------- */
.fuss { background: var(--gruen); color: var(--grund); padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem) calc(2rem + env(safe-area-inset-bottom)); overflow: clip; }
.fuss a { color: var(--grund); text-decoration: none; }
.fuss a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.fuss__oben { display: grid; gap: var(--r-7); }
@media (min-width: 64rem) { .fuss__oben { grid-template-columns: 1.3fr repeat(3, 1fr); } }
.fuss__titel { font-size: var(--gr-mini); color: var(--gruen-zart); margin-bottom: 0.9rem; }
.fuss ul { list-style: none; padding: 0; display: grid; gap: 0.5rem; font-size: var(--gr-klein); }
.fuss__marke { font-family: var(--schrift-titel); font-size: clamp(4rem, 1rem + 13.5vw, 15rem); line-height: 0.82; letter-spacing: -0.03em; color: rgb(246 246 242 / 0.92); margin-top: clamp(3rem, 2rem + 4vw, 6rem); white-space: nowrap; }
.fuss__unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: var(--r-6); padding-top: var(--r-5); border-top: 1px solid rgb(201 214 204 / 0.25); font-size: var(--gr-mini); color: var(--gruen-zart); }
.fuss__unten ul { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }
.fuss details summary { list-style: none; }
@media (max-width: 63.99rem) {
  .fuss details { border-top: 1px solid rgb(201 214 204 / 0.25); padding-block: 0.9rem; }
  .fuss details summary { display: flex; justify-content: space-between; cursor: pointer; font-size: 1rem; color: var(--grund); }
  .fuss details summary::after { content: "+"; font-size: 1.2rem; line-height: 1; color: var(--gruen-zart); }
  .fuss details[open] summary::after { content: "–"; }
  .fuss details ul { margin-top: 0.8rem; }
  .fuss .fuss__titel { margin: 0; }
}
@media (min-width: 64rem) { .fuss details summary { pointer-events: none; } .fuss details > ul { display: grid !important; } }

/* --------------------------------------------------------------------------
   15. Seitenkopf für Kategorie- und Modellseiten
   -------------------------------------------------------------------------- */
.brotkrumen { font-size: var(--gr-mini); color: var(--grau); }
.brotkrumen ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.brotkrumen li + li::before { content: "/"; margin-inline-end: 0.4rem; color: var(--linie); }
.brotkrumen a { color: var(--grau); text-decoration: none; }
.brotkrumen a:hover { color: var(--tinte); text-decoration: underline; }
.seitenkopf { padding-block: 0 clamp(1.25rem, 1rem + 1vw, 2rem); display: grid; gap: var(--r-5); align-items: end; }
@media (min-width: 64rem) { .seitenkopf { grid-template-columns: 0.95fr 1.05fr; gap: var(--r-8); align-items: center; } }
.seitenkopf:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.seitenkopf__text { display: grid; gap: var(--r-3); align-content: start; }
.seitenkopf .bild { aspect-ratio: 5 / 4; }
.fakten { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; }
.fakten li { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.9rem 0.45rem 0.80rem; border-radius: var(--rund-pille); border: 1px solid var(--linie); font-size: var(--gr-klein); background: rgb(255 255 255 / 0.4); }
.fakten li .nagel { inline-size: 7px; block-size: 7px; }

/* --------------------------------------------------------------------------
   16. Häufige Fragen (natives <details>, nur eine offen: name="faq")
   -------------------------------------------------------------------------- */
.fragen { border-top: 1px solid var(--linie); }
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen summary { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding-block: 1.3rem; cursor: pointer; list-style: none; font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem); }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: ""; flex: none; inline-size: 2.25rem; block-size: 2.25rem; border-radius: 50%; border: 1px solid var(--linie);
  background: linear-gradient(var(--tinte), var(--tinte)) center / 11px 1.5px no-repeat, linear-gradient(var(--tinte), var(--tinte)) center / 1.5px 11px no-repeat; transition: transform var(--dauer) var(--kurve), background-color var(--dauer); }
.fragen details[open] summary::after { transform: rotate(45deg); background-color: var(--kalk); }
.fragen details::details-content { block-size: 0; overflow: clip; transition: block-size var(--dauer) var(--kurve), content-visibility var(--dauer) allow-discrete; }
.fragen details[open]::details-content { block-size: auto; }
.fragen details > div { padding: 0 3.5rem 1.4rem 0; color: var(--grau); max-inline-size: 62ch; }

/* --------------------------------------------------------------------------
   17. Abschluss-Kasten · auf jeder Seite gleich
   -------------------------------------------------------------------------- */
.abschluss { border-radius: var(--rund-flaeche); background: var(--gruen); color: var(--grund); padding: clamp(2rem, 1.2rem + 3.5vw, 4.5rem); display: grid; gap: var(--r-6); position: relative; overflow: clip; }
.abschluss::before { content: ""; position: absolute; inset: 0; opacity: 0.06; pointer-events: none; background-image: repeating-linear-gradient(45deg, transparent 0 46px, #fff 46px 47px), repeating-linear-gradient(-45deg, transparent 0 46px, #fff 46px 47px); }
.abschluss > * { position: relative; }
@media (min-width: 64rem) { .abschluss { grid-template-columns: 1.2fr 0.8fr; align-items: end; } }
.abschluss p { color: var(--gruen-zart); max-inline-size: 42ch; }
.abschluss .knopf-gruppe { justify-content: flex-start; }
@media (min-width: 64rem) { .abschluss .knopf-gruppe { justify-content: flex-end; } }
.abschluss .link { color: var(--grund); }

/* --------------------------------------------------------------------------
   18. Formulare
   -------------------------------------------------------------------------- */
.feld { display: grid; gap: 0.4rem; }
.feld label { font-size: var(--gr-klein); color: var(--grau); }
.eingabe, .feld input, .feld textarea, .feld select { min-block-size: var(--knopf-h); padding: 0.80rem 1rem; border-radius: 14px; border: 1px solid var(--linie); background: var(--weiss); color: var(--tinte); transition: border-color var(--dauer-kurz), box-shadow var(--dauer-kurz); }
textarea.eingabe, .feld textarea { min-block-size: 8rem; field-sizing: content; resize: vertical; }
.eingabe:focus-visible, .feld input:focus-visible, .feld textarea:focus-visible, .feld select:focus-visible { outline: none; border-color: var(--gruen); box-shadow: 0 0 0 3px rgb(31 59 48 / 0.18); }
.feld select { appearance: none; background: var(--weiss) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%231D1F1C' stroke-width='1.5'%3E%3Cpath d='M2 5l5 5 5-5'/%3E%3C/svg%3E") right 1rem center no-repeat; padding-inline-end: 2.80rem; }
@supports (appearance: base-select) { .feld select { appearance: base-select; } .feld select::picker(select) { border-radius: 14px; border: 1px solid var(--linie); box-shadow: var(--schatten-fenster); } }

/* Auswahl als Pillen (z. B. Stoffart, Armlehne) */
.wahl { display: flex; flex-wrap: wrap; gap: 0.5rem; border: 0; padding: 0; }
.wahl legend { font-size: var(--gr-klein); color: var(--grau); margin-bottom: 0.7rem; }
.wahl label { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; min-block-size: 2.80rem; padding-inline: 1.1rem; border-radius: var(--rund-pille); border: 1px solid var(--linie); background: var(--weiss); cursor: pointer; font-size: 0.9380rem; transition: border-color var(--dauer-kurz), background-color var(--dauer-kurz); }
.wahl input { position: absolute; opacity: 0; pointer-events: none; }
.wahl label:hover { border-color: var(--grau); }
.wahl label:has(input:checked) { border-color: var(--gruen); background: var(--gruen); color: var(--grund); }
.wahl label:has(input:focus-visible) { outline: 2px solid var(--gruen); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   19. Galerie auf Modellseiten
   -------------------------------------------------------------------------- */
.galerie { display: grid; gap: 0.6rem; grid-template-columns: repeat(2, 1fr); }
.galerie > :first-child { grid-column: 1 / -1; }
.galerie .bild { aspect-ratio: 4 / 5; }
.galerie > .bild:first-child { aspect-ratio: 5 / 4; }
.alle-ansichten { margin-top: 0.80rem; }
.modell { display: grid; gap: var(--r-7); padding-block: calc(var(--kopf-h) + 2.5rem) var(--abschnitt); }
@media (min-width: 64rem) { .modell { grid-template-columns: 1.25fr 0.75fr; gap: var(--r-8); align-items: start; } .modell__info { position: sticky; inset-block-start: calc(var(--kopf-h) + 2rem); } }
.modell__info { display: grid; gap: var(--r-5); }
.masse { inline-size: 100%; border-collapse: collapse; font-size: var(--gr-klein); }
.masse th, .masse td { text-align: start; padding: 0.65rem 0; border-bottom: 1px solid var(--linie); font-weight: 400; }
.masse td { text-align: end; font-variant-numeric: tabular-nums; }
.masse caption { text-align: start; color: var(--grau); font-size: var(--gr-mini); padding-bottom: 0.5rem; }
.preiszeile { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.preiszeile strong { font-family: var(--schrift-titel); font-weight: 400; font-size: 2rem; line-height: 1; }

/* Light hero: complete photograph, transparent title over the empty wall. */
.buehne--hell { min-block-size: auto; display: block; background: var(--grund); color: var(--tinte); padding: calc(var(--kopf-h) + 1.5rem) var(--rand) 0; }
.buehne--hell .buehne__rahmen { display: grid; grid-template-columns: minmax(0, 1fr); position: relative; inline-size: min(100%, calc(var(--breite) + 8rem)); margin-inline: auto; }
.buehne--hell .buehne__bild { grid-area: 1 / 1; position: relative; inset: auto; border-radius: var(--rund-flaeche); overflow: hidden; aspect-ratio: auto; block-size: auto; max-block-size: none; background: var(--kalk); }
.buehne--hell .buehne__bild::after { display: none; }
.buehne--hell .buehne__bild > picture { block-size: auto; animation: none; transform: none; }
.buehne--hell .buehne__bild > img, .buehne--hell .buehne__bild > picture img { inline-size: 100%; block-size: auto; object-fit: contain; animation: none; transform: none; }
.buehne--hell .buehne__inhalt { display: contents; }
.buehne--hell .buehne__inhalt > .zeile-oben, .buehne--hell .titel-buehne { grid-area: 1 / 1; position: relative; z-index: 1; align-self: start; justify-self: center; text-align: center; color: var(--tinte); background: transparent; text-shadow: 0 1px 12px rgb(255 255 255 / .4); }
.buehne--hell .buehne__inhalt > .zeile-oben { margin: 2% 1rem 0; font-size: clamp(.625rem, 1.25vw, 1rem); line-height: 1.3; }
.buehne--hell .titel-buehne { margin: 7% .5rem 0; max-inline-size: none; font-size: clamp(1.6rem, 6.5vw, 5.5rem); line-height: 1; }
.buehne--hell .buehne__unterzeile { color: var(--grau); max-inline-size: 62ch; justify-self: center; text-align: center; margin: 1rem 0 0; font-size: clamp(1rem, 1.5vw, 1.25rem); line-height: 1.5; }
.buehne--hell .knopf-gruppe { justify-content: center; margin-block-start: 1rem; }
.buehne--hell .ki-hinweis { inset-block-start: auto; inset-block-end: .5rem; inset-inline-end: .5rem; inset-inline-start: auto; font-size: .625rem; }
@media (max-width: 47.99rem) {
  .buehne--hell { padding-top: 6rem; padding-inline: .5rem; }
  .buehne--hell .buehne__bild { border-radius: 12px; }
  .buehne--hell .buehne__unterzeile, .buehne--hell .knopf-gruppe { margin-inline: .5rem; }
  .buehne--hell .knopf-gruppe { inline-size: auto; }
  .buehne--hell .knopf-gruppe .knopf { flex: 1 1 100%; }
}

/* Existing templates retain their structure and functional selectors. */
.knopf:disabled,.knopf[aria-disabled="true"]{cursor:not-allowed;--k-hg:var(--kalk);--k-schrift:var(--grau);--k-rand:var(--linie)}
.knopf--zweit[aria-pressed="true"],.knopf--zweit[aria-selected="true"],.knopf--zweit[aria-current="step"]{--k-hg:var(--gruen);--k-schrift:var(--grund);--k-rand:var(--gruen)}
.link:has(img,svg){background:none;padding:0}
.eingabe{min-inline-size:0;max-inline-size:100%}
input:is([type="checkbox"],[type="radio"],[type="range"]){accent-color:var(--gruen)}
.wahl input{min-block-size:0}
.fragen details>div{padding-inline:0 3.5rem}
[dir="rtl"] .feld select{background-position:left 1rem center}

/* Bauplan 2027 · integration with the existing public pages. */
.kopf .kopf__aktionen{flex-shrink:0}
.kopf svg,.menue svg,.handyleiste svg{inline-size:1.35rem;block-size:1.35rem;flex-shrink:0}
.kopf .mega{max-block-size:calc(100dvh - 6.5rem);overflow-y:auto;overscroll-behavior:contain}
.kopf .mega[hidden],[data-cart-count][hidden]{display:none!important}
.kopf .mega__karte .klein{color:var(--gruen-zart)}
.kopf .mega__klein + .mega__titel{margin-block-start:1.5rem}
.kopf__warenkorb{position:relative}
[data-cart-count]{min-inline-size:1.1rem;padding:0 .25rem;border-radius:999px;background:var(--gruen);color:white;font-size:.68rem;line-height:1.1rem;text-align:center}
.kopf__warenkorb [data-cart-count]{position:absolute;inset-block-start:.1rem;inset-inline-end:0}
.menue{max-width:none;max-height:none;border-radius:0;overscroll-behavior:contain}
.menue__fuss{flex-wrap:wrap;gap:1rem}
/* Account access uses the existing menu; management remains server protected. */
.kopf .kopf__konto{display:none}
.kopf .mega--konto{position:absolute;inset-block-start:calc(var(--kopf-h) + .5rem);inset-inline-end:max(var(--rand),calc((100% - var(--breite))/2));grid-template-columns:minmax(0,1fr);gap:.25rem;inline-size:min(22rem,calc(100% - 2 * var(--rand)));margin:0;padding:1rem 1.25rem}
.kopf[data-gescrollt="ja"] .mega--konto{inset-block-start:calc(var(--kopf-h) + .12rem)}
.mega--konto a,.menue__konto a{display:flex;align-items:center;min-block-size:44px;padding-block:.6rem;color:var(--tinte);text-decoration:none;overflow-wrap:anywhere}
.mega--konto a:hover,.menue__konto a:hover{text-decoration:underline}
.menue__konto{display:grid;gap:.15rem;padding-block:1rem .5rem;border-bottom:1px solid var(--linie)}
@media(min-width:80rem){.kopf .kopf__konto{display:inline-flex}}
/* Reserve the fixed header once; sections do not repeat this clearance. */
body:has(>.kopf)>main{padding-block:calc(var(--kopf-h) + 2rem) 1rem}
body:has(>.kopf)>main>.abschnitt:last-of-type{padding-block-end:1rem}
body>main .kopf-abschnitt :is(.zeile-oben,:is(h2,:where([data-seo-heading="h2"],[data-seo-caption="h2"])),:is(h3,:where([data-seo-heading="h3"],[data-seo-caption="h3"]))){margin:0}
body>main .kopf-abschnitt>div>.zeile-oben{margin-block-end:.5rem}
body>main .abschnitt>:is(h2,:where([data-seo-heading="h2"],[data-seo-caption="h2"])){margin-block:0 1rem}
body>main .seitenkopf :is(:is(h1,:where([data-seo-heading="h1"],[data-seo-caption="h1"])),:is(h2,:where([data-seo-heading="h2"],[data-seo-caption="h2"]))){margin-block:.75rem}
body>main .seitenkopf .zeile-oben{margin-block:0}
body>main .seitenkopf .brotkrumen{margin-block-end:.5rem}
body>main .seitenkopf__text>:is(:is(h1,:where([data-seo-heading="h1"],[data-seo-caption="h1"])),:is(h2,:where([data-seo-heading="h2"],[data-seo-caption="h2"])),p){margin:0}
body>main .stapel>.zeile-oben{margin-block-end:0}
body>main .page-shell>:is(h1,:where([data-seo-heading="h1"],[data-seo-caption="h1"])):first-child{margin-block-start:0}
#termin,#anfahrt{scroll-margin-block-start:7rem}
.handyleiste[data-versteckt="ja"]{pointer-events:none}
@media(max-width:74.999rem){.kopf .kopf__aktionen{margin-inline-start:auto}.kopf__warenkorb{display:none!important}}
@media(min-width:80rem) and (max-width:89.999rem){.kopf__leiste{gap:.5rem;padding-inline:1rem}.kopf__nav ul{gap:0}.kopf__punkt{padding-inline:.55rem;font-size:.880rem}.kopf__aktionen{gap:.3rem}.kopf__termin{padding-inline:1rem}.marke__name{font-size:1.7rem}}
@media(prefers-reduced-motion:reduce){.handyleiste{transition:none}}
.handyleiste a{white-space:nowrap;font-size:.880rem;gap:.35rem;padding-inline:.55rem}
@media(max-width:23rem){.handyleiste{grid-template-columns:1fr 1fr 1.15fr}.handyleiste a{font-size:.8rem;padding-inline:.35rem}}
.fuss__intro{font-family:var(--schrift-titel);font-size:1.80rem;line-height:1.1}.fuss address{font-style:normal}.fuss__oben>.stapel>a{overflow-wrap:anywhere}.fuss__unten nav{display:flex;gap:.7rem;flex-wrap:wrap}.not-found-page{max-width:54rem;margin:auto;padding:5rem 0;min-height:60vh}.not-found-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-block:2rem}
.catalogue-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}.catalogue-model{margin:0;min-width:0}.catalogue-model img{aspect-ratio:auto;width:100%;height:auto;object-fit:contain;background:var(--kalk)}.catalogue-model figcaption{padding-block:1rem}.modell-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:3rem}.modell-information{position:sticky;top:6rem;align-self:start}.modell-information .seitenkopf{display:block;padding-top:0}.galerie{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.galerie__bild:first-child{grid-column:1/-1}.galerie__bild{margin:0}.galerie__bild img{aspect-ratio:auto;object-fit:contain;width:100%;height:auto}.galerie__bild:first-child img{aspect-ratio:auto}.text-kachel{padding:1.5rem;background:var(--kalk);display:grid;gap:.5rem}.brotkrumen{display:flex;gap:1rem;flex-wrap:wrap}.fakten{display:flex;flex-wrap:wrap;gap:1rem}.seitenkopf .knopf-gruppe{margin-top:1rem}@media(max-width:47.99rem){.catalogue-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.modell-layout{display:flex;flex-direction:column;gap:1.5rem}.modell-information{position:static;order:-1}.seitenkopf .bild{max-height:none}.text-kachel{padding:1rem}}
/* Material catalogue: stable photo and favourite identifiers remain intact. */
.material-mosaic{display:grid;grid-template-columns:repeat(6,1fr);gap:.5rem;margin-block:2rem}.material-mosaic img{width:100%;height:auto;aspect-ratio:1;object-fit:cover}.material-policy{max-width:48rem;margin-block:2rem}.fabric-group-chips{display:flex;gap:.5rem;flex-wrap:wrap}.fabric-group-chip{padding:.7rem 1rem;border:1px solid var(--linie);border-radius:99px}.fabric-group-chip[aria-current]{background:var(--akzent);color:var(--hintergrund)}.material-photo-group .fabric-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}.material-photo-group{margin-block:1.5rem}.fabric-collection{min-width:0}.material-collapsed{display:none!important}.fabric-collection-links,.fabric-photo-sequence figure:not(:first-child),.fabric-card-information :is(h3,:where([data-seo-heading="h3"],[data-seo-caption="h3"])),.fabric-atlas-advice{display:none}.fabric-photo-sequence figure{margin:0}.fabric-photo-sequence img{max-width:100%}.fabric-collection-heading :is(h3,:where([data-seo-heading="h3"],[data-seo-caption="h3"])){font-size:1.6rem}.fabric-card-information{font-size:.9rem}.fabric-collection .favorite-count:empty{display:none}@media(max-width:48rem){.material-mosaic{grid-template-columns:repeat(3,1fr)}.material-photo-group .fabric-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}}
.guide-article{max-width:38rem;margin-inline:auto;padding:0 1rem 1rem}.guide-article .guide-section{margin-block:1.5rem}.guide-preview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem}.guide-note{padding:1.5rem;background:var(--flaeche)}@media(max-width:48rem){.guide-preview-grid{grid-template-columns:1fr}}
[hidden]{display:none!important}html{scroll-padding-top:7rem}main{min-width:0}img{max-width:100%}a,button,input,select,textarea{touch-action:manipulation}.fuss a{display:inline-flex;align-items:center;min-height:44px}.fragen summary,details>summary{cursor:pointer;min-height:44px;padding-block:.80rem}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--gruen);outline-offset:3px}.auf-dunkel :focus-visible{outline-color:var(--grund)}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}@media(prefers-reduced-transparency:reduce){.kopf,.handyleiste,.menue{background:var(--grund)!important;backdrop-filter:none!important}}

/* Complete category photo sequences, with independent save controls on the photo. */
main[data-template-2027] .catalogue-photo-sequence { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; width: 100%; align-items: start; }
main[data-template-2027] .catalogue-photo-sequence > figure { grid-column: auto; margin: 0; min-width: 0; align-self: start; }
main[data-template-2027] .catalogue-photo-sequence img { display: block; width: 100%; height: auto; max-height: none; aspect-ratio: auto; object-fit: contain; }
main[data-template-2027] .catalogue-photo-sequence .studio-photo-link { display: block; height: auto; aspect-ratio: auto; }
main[data-template-2027="modell"] .modell-layout { display: flex; flex-direction: column; }
main[data-template-2027="modell"] .modell-information { position: static; order: -1; width: 100%; }
:is(main[data-template-2027], body[data-hn-public="true"]) .favorite-photo-shell { position: relative; display: block; width: 100%; min-width: 0; }
:is(main[data-template-2027], body[data-hn-public="true"]) :is(.favorite-photo-shell > .favorite-save, .favorite-photo-actions > .favorite-save) { position: absolute; z-index: 2; top: auto; left: auto; right: var(--favorite-photo-right, 10px); bottom: var(--favorite-photo-bottom, 10px); display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 44px; min-height: 44px; width: auto; height: 44px; margin: 0; padding: 0 10px; border: 1px solid rgb(29 31 28 / .2); border-radius: 99px; background: var(--grund); color: var(--tinte); font: inherit; font-size: 12px; line-height: 1; cursor: pointer; }
:is(main[data-template-2027], body[data-hn-public="true"]) .favorite-save svg { width: 18px; height: 18px; flex: none; }
:is(main[data-template-2027], body[data-hn-public="true"]) .favorite-save[aria-pressed="true"] svg { fill: var(--gruen); stroke: var(--gruen); }
:is(main[data-template-2027], body[data-hn-public="true"]) .favorite-save:disabled { opacity: .65; cursor: wait; }
.favorite-like-count { font-variant-numeric: tabular-nums; }



.request-trap{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%);pointer-events:none}
main:has(>.buehne){padding:0!important;max-width:none!important}
@media(max-width:48rem){.knopf{min-height:56px}}

/* Sprachwahl: unveränderte Vorgabe vom 21.10.2026 */
.sprachknopf { display: inline-flex; align-items: center; gap: 0.3rem; block-size: 2.75rem; padding-inline: 0.6rem 0.7rem; border-radius: var(--rund-pille); color: var(--tinte); font-size: 0.9375rem; white-space: nowrap; transition: background-color var(--dauer-kurz); }
.sprachknopf:hover { background: rgb(29 31 28 / 0.06); }
.sprachknopf > svg:first-child { inline-size: 1.3rem; block-size: 1.3rem; flex: none; }
.sprachknopf__code { font-size: 0.8125rem; letter-spacing: 0.04em; }
.sprachknopf__name, .sprachknopf__pfeil { display: none; }
.sprachknopf__pfeil { inline-size: 0.75rem; block-size: 0.75rem; }
@media (min-width: 90rem) { .kopf .sprachknopf__code { display: none; } .kopf .sprachknopf__name { display: inline; } .kopf .sprachknopf__pfeil { display: block; } }
.sprachfeld { position: fixed; inset: auto; inset-block-start: calc(0.75rem + var(--kopf-h) + 0.5rem); inset-inline-end: max(var(--rand), (100vw - var(--breite)) / 2); margin: 0; inline-size: min(22rem, 100vw - 2 * var(--rand)); max-block-size: calc(100dvh - var(--kopf-h) - 2rem); overflow: auto; padding: 0.9rem; border-radius: var(--rund-flaeche); border: 1px solid var(--glas-rand); background: var(--glas); color: var(--tinte); box-shadow: var(--schatten-fenster); backdrop-filter: blur(28px) saturate(1.4); -webkit-backdrop-filter: blur(28px) saturate(1.4); opacity: 1; transform: none; transition: opacity var(--dauer) var(--kurve), transform var(--dauer) var(--kurve), overlay var(--dauer) allow-discrete, display var(--dauer) allow-discrete; }
.sprachfeld:not(:popover-open) { opacity: 0; transform: translateY(-8px); }
@starting-style { .sprachfeld:popover-open { opacity: 0; transform: translateY(-8px); } }
.sprachfeld::backdrop { background: transparent; }
.sprachfeld__titel { display: flex; align-items: center; gap: 0.5rem; padding: 0.2rem 0.6rem 0.7rem; font-size: var(--gr-mini); color: var(--grau); }
.sprachfeld__titel svg { inline-size: 1rem; block-size: 1rem; }
.sprachliste { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.1rem; }
.sprachliste a { display: grid; grid-template-columns: 0.85rem 1fr auto; align-items: center; gap: 0.6rem; min-block-size: 3rem; padding-inline: 0.6rem 0.75rem; border-radius: 14px; text-decoration: none; color: var(--tinte); }
.sprachliste a:hover { background: rgb(29 31 28 / 0.05); }
.sprachliste a::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; }
.sprachliste a[aria-current="true"] { background: rgb(31 59 48 / 0.07); }
.sprachliste a[aria-current="true"]::before { background: radial-gradient(circle at 34% 30%, #F1DDB0 0 12%, #CDA866 32%, var(--messing) 55%, #6E5026 100%); }
.sprachliste__name { font-family: var(--schrift-titel); font-size: 1.5rem; line-height: 1.15; }
.sprachliste__zusatz { font-size: var(--gr-mini); color: var(--grau); }
.sprachfeld__notiz { margin: 0.8rem 0.6rem 0.4rem; padding-top: 0.8rem; border-top: 1px solid var(--linie); font-size: var(--gr-mini); color: var(--grau); }
.sprachfeld__weitere { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; padding: 0 0.6rem 0.3rem; font-size: var(--gr-klein); }
.sprachfeld__weitere a { color: var(--tinte); }
.menue__sprachen { display: flex; align-items: flex-start; gap: 0.7rem; margin-top: 1.4rem; }
.menue__sprachen > svg { flex: none; inline-size: 1.25rem; block-size: 1.25rem; margin-top: 0.6rem; color: var(--grau); }
.menue__sprachen ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.menue__sprachen a { display: inline-flex; align-items: center; min-block-size: 2.5rem; padding-inline: 0.9rem; border-radius: var(--rund-pille); border: 1px solid var(--linie); background: var(--weiss); text-decoration: none; color: var(--tinte); font-size: 0.9375rem; }
.menue__sprachen a[aria-current="true"] { border-color: var(--gruen); background: var(--gruen); color: var(--grund); }
.fuss__sprachen { display: flex; align-items: center; gap: 0.6rem; }
.fuss__sprachen > svg { flex: none; inline-size: 1rem; block-size: 1rem; }
.fuss .fuss__sprachen ul { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; font-size: var(--gr-mini); }
.fuss__sprachen a[aria-current="true"] { text-decoration: underline; text-underline-offset: 0.25em; }
.sprachhinweis { position: fixed; z-index: 45; inset-block-start: calc(0.75rem + var(--kopf-h) + 0.5rem); inset-inline: var(--rand); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.5rem 0.75rem; padding: 0.8rem 0.5rem 0.9rem 0.9rem; border-radius: var(--rund-flaeche); border: 1px solid var(--glas-rand); background: var(--glas); color: var(--tinte); box-shadow: var(--schatten-fenster); backdrop-filter: blur(var(--glas-unschaerfe)) saturate(1.5); -webkit-backdrop-filter: blur(var(--glas-unschaerfe)) saturate(1.5); animation: sprachhinweis-rein var(--dauer-lang) var(--kurve) both; }
.sprachhinweis__symbol { inline-size: 1.35rem; block-size: 1.35rem; color: var(--messing-dunkel); align-self: start; margin-top: 0.15rem; }
.sprachhinweis p { font-size: var(--gr-klein); line-height: 1.4; }
.sprachhinweis .knopf { grid-column: 2; justify-self: start; }
.sprachhinweis .symbolknopf { grid-column: 3; grid-row: 1; align-self: start; margin-top: -0.35rem; }
@media (min-width: 48rem) { .sprachhinweis { inset-inline: auto; inline-size: 25rem; } .sprachhinweis[data-seite="ltr"] { left: auto; right: max(var(--rand), (100vw - var(--breite)) / 2); } .sprachhinweis[data-seite="rtl"] { right: auto; left: max(var(--rand), (100vw - var(--breite)) / 2); } }
@keyframes sprachhinweis-rein { from { opacity: 0; transform: translateY(-10px); } }
.kopf__merken { display: none; }
@media (min-width: 48rem) { .kopf__merken { display: inline-grid; } }
@media (max-width: 23.99rem) { .kopf .marke__ort { display: none; } }
.kopf__punkt svg { flex: none; }
.kopf__termin-zusatz { display: none; }
@media (min-width: 90rem) { .kopf__termin-zusatz { display: inline; } }
@media (min-width: 80rem) and (max-width: 89.99rem) { .kopf__punkt { padding-inline: 0.62rem; } .kopf__leiste { gap: var(--r-3); } }
body:has(.handyleiste) .fuss { padding-block-end: calc(2rem + 5.5rem + env(safe-area-inset-bottom)); }
@media (min-width: 80rem) { body:has(.handyleiste) .fuss { padding-block-end: calc(2rem + env(safe-area-inset-bottom)); } }
:root:lang(bg) { --schrift-titel: "Instrument Serif", Georgia, "Noto Serif", "Times New Roman", serif; }
:root:lang(ar) { --schrift-titel: "Instrument Serif", "Noto Naskh Arabic", "Geeza Pro", "Sakkal Majalla", "Traditional Arabic", "Times New Roman", serif; --schrift-text: "Instrument Sans", "Noto Sans Arabic", "SF Arabic", "Segoe UI", Tahoma, system-ui, sans-serif; --zeile-titel: 1.3; --zeile-text: 1.8; --laufweite-titel: 0; }
:root { quotes: "„" "“" "‚" "‘"; }
:root:lang(en), :root:lang(tr) { quotes: "“" "”" "‘" "’"; }
:root:lang(ar) { quotes: "«" "»" "‹" "›"; }
:root:lang(sr) { quotes: "„" "”" "’" "’"; }
:root:lang(sq) { quotes: "„" "“" "‘" "’"; }
:root:lang(bg) { quotes: "„" "“" "‚" "‘"; }
.zitat blockquote::before { content: open-quote; }
.zitat blockquote::after { content: close-quote; }
:lang(ar) { letter-spacing: 0 !important; }
:root:lang(ar) :is(.titel-buehne, :is(h1,:where([data-seo-heading="h1"],[data-seo-caption="h1"])), :is(h2,:where([data-seo-heading="h2"],[data-seo-caption="h2"])), .titel-1, .titel-2, .mega__liste a, .menue__liste summary, .menue__liste > li > a, .kachel__name, .zitat blockquote, .showroom__adresse, .vorteile strong, .mega__karte strong, .menue__karte strong, .sprachliste__name) { line-height: 1.35; }
:root:lang(ar) .titel-buehne { max-inline-size: 18ch; }
[dir="rtl"] .knopf--haupt::after { background: linear-gradient(255deg, transparent 35%, rgb(255 255 255 / 0.14) 50%, transparent 65%); transform: translateX(120%); }
[dir="rtl"] .knopf--haupt:hover::after { transform: translateX(-120%); }
[dir="rtl"] .feld select { background-position: left 1rem center; }
[dir="rtl"] .spiegeln { transform: scaleX(-1); }
/* Menu close ring from the supplied mobile reference. */
.menue__kopf [data-menue-zu] { border: 2px solid var(--gruen); }

/* Content photographs determine their own frame; canvas/planner surfaces keep their geometry. */
.bild:has(img):not(:has(canvas)),
.kachel .bild:has(img), .kachel--breit .bild:has(img),
.seitenkopf .bild:has(img), .galerie .bild:has(img), .galerie > .bild:first-child:has(img) {
  aspect-ratio: auto; block-size: auto; max-block-size: none; align-self: start;
}
.bild:has(img):not(:has(canvas)) img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: auto; object-fit: contain; }
.kachel { align-content: start; }

/* The four process steps read consecutively without large heading or section gaps. */
.abschnitt:has(.ablauf) { padding-block: 1.5rem; }
.abschnitt:has(.ablauf) .kopf-abschnitt { gap: .4rem; margin-block-end: 1.1rem; }
.abschnitt:has(.ablauf) .kopf-abschnitt :is(.zeile-oben, :is(h2,:where([data-seo-heading="h2"],[data-seo-caption="h2"]))) { margin: 0; }
.ablauf { gap: 1rem; margin: 0; }
.ablauf li { gap: .35rem; }
.abschnitt .ablauf :is(h3,:where([data-seo-heading="h3"],[data-seo-caption="h3"])), .abschnitt .ablauf p { margin: 0; }
.ablauf p { max-inline-size: 65ch; }
/* Arabic lettering uses the full wall width above the sofa. */
:root:lang(ar) .buehne--hell .titel-buehne { max-inline-size: none; inline-size: calc(100% - 1rem); font-size: clamp(1rem, 4.5vw, 4rem); line-height: 1.35; }
/* Recognizable social marks with accessible touch targets and existing labels. */
.brand-link { display: inline-flex; align-items: center; gap: .55rem; min-inline-size: 44px; min-block-size: 44px; text-decoration: none; }
.brand-link .brand-icon { display: block; inline-size: 24px; block-size: 24px; flex: 0 0 24px; }
.brand-link__label { min-inline-size: 0; }
.fuss__unten .brand-link { border-bottom: 0; }
.fuss__unten .brand-link::after { content: none; }

/* Approved compact homepage: photograph and navigation, two glass planners, then shop. */
body > main.home-compact.home-compact {
  padding: 0; margin: 0; width: 100%; inline-size: 100%; max-width: none; max-inline-size: none;
}
body:has(> main.home-compact) > .kopf .kopf__leiste {
  background: rgb(255 255 255 / .10); border-color: rgb(255 255 255 / .8);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .65), 0 5px 20px rgb(29 31 28 / .08);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.home-compact .home-hero {
  position: relative; height: auto; aspect-ratio: 7 / 8; max-height: 520px;
  padding: 0; isolation: isolate; overflow: hidden;
}
.home-compact .home-hero__frame { position: absolute; inset: 0; margin: 0; }
.home-compact .home-hero__frame picture,
.home-compact .home-hero__frame img { display: block; width: 100%; height: 100%; max-width: none; }
.home-compact .home-hero__frame img { object-fit: cover; object-position: 50% 45%; }
.home-compact .home-hero__copy {
  position: absolute; top: 96px; inset-inline: 16px; display: grid; gap: 7px;
  justify-items: center; text-align: center; color: var(--tinte);
}
.home-compact .home-hero__copy :is(h1,:where([data-seo-heading="h1"],[data-seo-caption="h1"])) {
  font-size: 38px; line-height: 1.06; margin: 0; max-inline-size: none;
  font-weight: 400; letter-spacing: -.02em;
}
:root:lang(ar) .home-compact .home-hero__copy :is(h1,:where([data-seo-heading="h1"],[data-seo-caption="h1"])) { line-height: 1.15; }
@media (max-width: 47.999rem) {
  :root:lang(bg) .home-compact .home-hero__copy :is(h1,:where([data-seo-heading="h1"],[data-seo-caption="h1"])) { font-size: clamp(29px, 9vw, 34px); }
}
.home-compact .home-hero__actions {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
  width: calc(100% - 32px); max-width: 580px; margin: 0;
}
.home-compact .home-hero__planner,
.planner-link {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  box-sizing: border-box; padding: 12px 8px; min-width: 0; min-height: 56px;
  color: var(--gruen); font: 500 14px/1.3 var(--schrift-text); text-decoration: none;
  text-align: center; white-space: normal; border-radius: 999px;
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid #fffffff0; outline: 1px solid #1f3b3050;
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 1px #1f3b3026, 0 4px 12px #1d1f1c12;
}
.home-compact .home-hero__planner > span, .planner-link > span { min-width: 0; overflow-wrap: anywhere; }
.home-compact .home-hero__icon { display: grid; place-items: center; flex: none; }
.home-compact .home-hero__planner svg, .planner-link svg { display: block; width: 20px; height: 20px; flex: none; }
.home-compact .home-hero__planner:focus-visible, .planner-link:focus-visible { outline: 3px solid var(--gruen); outline-offset: 4px; }
.home-compact .home-hero .ki-hinweis {
  position: absolute; inset-inline-end: 16px; inset-inline-start: auto; top: auto; bottom: 84px;
  font: 400 10px/1.3 var(--schrift-text); color: #393b32; background: #f5f3e778;
  padding: 4px 8px; border-radius: 999px;
}
.home-compact .home-hero__shop { display: flex; justify-content: center; margin: 0; padding: 12px var(--rand) 0; }
.home-compact .home-hero__shop a {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; max-width: 420px; min-height: 48px; padding: 10px 20px;
  border: 1px solid var(--tinte); border-radius: 999px; background: transparent;
  color: var(--tinte); text-decoration: none; font: 400 16px/1.3 var(--schrift-text);
}
.home-compact .home-hero__shop svg { width: 20px; height: 20px; flex: none; }
@media (min-width: 48rem) {
  .home-compact .home-hero { height: clamp(560px, 50vw, 760px); max-height: none; aspect-ratio: auto; }
  .home-compact .home-hero__frame img { object-position: 50% 50%; }
  .home-compact .home-hero__copy { top: 112px; gap: 12px; }
  .home-compact .home-hero__copy :is(h1,:where([data-seo-heading="h1"],[data-seo-caption="h1"])) { font-size: clamp(54px, 5vw, 80px); }
  .home-compact .home-hero__actions { bottom: 24px; gap: 16px; }
  .home-compact .home-hero__planner, .planner-link { font-size: 16px; min-height: 58px; padding: 14px 20px; gap: 10px; }
  .home-compact .home-hero__planner svg, .planner-link svg { width: 24px; height: 24px; }
  .home-compact .home-hero .ki-hinweis { bottom: 24px; inset-inline-end: 24px; }
  .home-compact .home-hero__shop { padding-top: 16px; }
}
@media (max-width: 360px) {
  .home-compact .home-hero__copy { top: 86px; }
  .home-compact .home-hero__copy :is(h1,:where([data-seo-heading="h1"],[data-seo-caption="h1"])) { font-size: 32px; }
}
@media (max-width: 340px) {
  .home-compact .home-hero__actions { width: calc(100% - 24px); gap: 8px; }
  .home-compact .home-hero__planner { font-size: 11.5px; gap: 5px; padding-inline: 6px; }
  .home-compact .home-hero__planner svg { width: 18px; height: 18px; }
}

/* Approved category option C: complete photo, short description, clear action. */
.category-feed {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start;
  width: 100%; max-width: 1100px; margin-inline: auto; min-width: 0;
}
.category-feed > .category-card,
.category-feed > .category-card-wrap > .category-card {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px;
  width: 100%; min-width: 0; margin: 0; padding: 0;
  background: transparent; border: 0; color: var(--text); text-decoration: none;
}
.category-feed .category-card-wrap { min-width: 0; margin: 0; padding: 0; background: transparent; }
.category-feed .category-card__image { display: block; width: 100%; min-width: 0; margin: 0 0 4px; }
.category-feed .category-card__image img { display: block; width: 100%; height: auto; max-width: 100%; object-fit: contain; aspect-ratio: auto; }
.category-feed .category-card__title { display: block; font: 400 clamp(28px, 3vw, 36px)/1.12 var(--schrift-titel); margin: 0; overflow-wrap: anywhere; }
.category-feed .category-card__description { display: block; font: 400 16px/1.5 var(--schrift-text); color: var(--text-leise); margin: 0; overflow-wrap: anywhere; }
.category-feed .category-card__action {
  display: inline-flex; justify-self: start; align-items: center; justify-content: center; gap: 12px;
  min-height: 44px; max-width: 100%; min-width: 0; overflow-wrap: anywhere; margin-top: 4px; padding: 10px 20px; border-radius: 999px;
  font: 500 15px/1.3 var(--schrift-text); color: var(--gruen); background: transparent;
  border: 1px solid #fffffff0; outline: 1px solid #1f3b3050;
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 1px #1f3b3026, 0 4px 12px #1d1f1c12;
}
.category-feed .category-card__action svg { width: 18px; height: 18px; flex: none; }
.category-feed .category-card:focus-visible { outline: 3px solid var(--gruen); outline-offset: 5px; }
:root:lang(ar) .category-card__action svg { transform: rotate(180deg); }
/* Kitchen catalogues use the same active foundation; retired kitchen styles
   are not needed for their two-column fallback or natural photo proportions. */
main .km-shop .km-grid,
main .kitchen-grid,
main .ke-gallery,
main .kitchen-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; min-width: 0; }
main .km-shop .km-grid > .km-product,
main .kitchen-grid > .kitchen-item,
main .ke-gallery > a,
main .kitchen-gallery > a { min-width: 0; margin: 0; align-self: start; grid-column: auto; overflow-wrap: anywhere; }
main .ke-gallery > :first-child,
main .kitchen-gallery > :first-child { grid-column: auto; }
main .km-shop .km-grid .km-image,
main .kitchen-grid .kitchen-card-media,
main .ke-gallery > a,
main .kitchen-gallery > a { display: block; width: 100%; height: auto; aspect-ratio: auto; background: transparent; }
main .km-shop .km-grid .km-image img,
main .kitchen-grid .kitchen-card-media img,
main .ke-gallery img,
main .kitchen-gallery img { display: block; width: 100%; height: auto; max-height: none; aspect-ratio: auto; object-fit: contain; }
main .km-shop .km-grid .km-product-copy { min-width: 0; overflow-wrap: anywhere; }
main .km-shop .km-grid :is(button,select,input) { min-width: 0; max-width: 100%; }
/* The separate detail hero remains one full-width photograph. */
main .kitchen-detail > .kitchen-gallery { grid-template-columns: minmax(0, 1fr); }
.planner-link { width: fit-content; max-width: 100%; padding-inline: 20px; align-self: start; }
.kopf .planner-link, .menue .planner-link { display: flex; color: var(--gruen); text-decoration: none; border-bottom: 1px solid #fffffff0; }

/* Approved option A, exclusively for the legacy fabric collections. */
.fabric-existing > :is(h2,:where([data-seo-heading="h2"],[data-seo-caption="h2"])) { width: 100%; max-width: 760px; margin-inline: auto; }
.fabric-existing .material-photo-group { margin: 0; }
.fabric-existing .material-photo-group + .material-photo-group { margin-top: 36px; }
.fabric-existing .fabric-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; max-width: 760px; margin-inline: auto; }
.fabric-legacy-card { grid-column: 1 / -1; width: 100%; max-width: 760px; min-width: 0; margin-inline: auto; padding: 0; border: 0; }
.fabric-legacy-card > .fabric-card { display: block; margin: 0; padding: 0; background: transparent; border: 0; }
.fabric-legacy-card .fabric-photo-sequence { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.fabric-legacy-card .fabric-photo-sequence > figure { display: block; width: 100%; margin: 0; }
.fabric-legacy-card:not(.fabric-legacy-detail) .fabric-photo-sequence > figure:not(:first-child),
.fabric-legacy-card:not(.fabric-legacy-detail) .fabric-photo-sequence figcaption,
.fabric-legacy-card:not(.fabric-legacy-detail) > .fabric-card-information { display: none; }
.fabric-legacy-card .fabric-photo-link,
.fabric-legacy-card .fabric-crop,
.fabric-legacy-card .swatch-crop-stage { display: block; position: relative; width: 100%; max-width: none; height: auto; aspect-ratio: auto; margin: 0; padding: 0; overflow: visible; background: transparent; }
.fabric-legacy-card img.fabric-legacy-image { display: block; position: static; width: 100%; height: auto; max-width: 100%; aspect-ratio: auto; object-fit: contain; border-radius: 18px; }
.fabric-legacy-card .fabric-legacy-summary { padding: 14px 0 0; }
.fabric-legacy-card .fabric-legacy-name { margin: 0; font: 400 clamp(32px, 3.6vw, 42px)/1.1 var(--schrift-titel); }
.fabric-legacy-card .fabric-legacy-description { margin: 8px 0 14px; color: var(--text-leise); font: 400 16px/1.5 var(--schrift-text); }
.fabric-legacy-card .fabric-legacy-action {
 display: inline-flex; align-items: center; justify-content: center; width: auto; min-height: 46px;
 margin: 0; padding: 11px 22px; font: 400 15px/1.4 var(--schrift-text); text-align: center;
 color: var(--gruen); background: transparent; text-decoration: none; border-radius: 999px;
 border: 1px solid #fff; outline: 1px solid #1f3b3066;
 box-shadow: inset 0 1px 0 #fff, inset 0 -1px 1px #1f3b3026, 0 3px 10px #1d1f1c0c;
 backdrop-filter: none; -webkit-backdrop-filter: none;
}
.fabric-legacy-card .fabric-legacy-action:focus-visible { outline: 3px solid var(--gruen); outline-offset: 4px; }
.fabric-legacy-card .favorite-photo-shell { position: relative; display: block; width: 100%; min-width: 0; }
.fabric-legacy-card :is(.favorite-photo-shell > .favorite-save, .favorite-photo-actions > .favorite-save) { position: absolute; z-index: 2; top: auto; left: auto; right: 10px; bottom: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: auto; height: 44px; min-width: 44px; min-height: 44px; margin: 0; padding: 0 10px; border: 1px solid #1d1f1c33; border-radius: 999px; background: #f6f6f2ed; color: var(--gruen); font-size: 12px; line-height: 1; }
.fabric-legacy-card .favorite-save svg { width: 20px; height: 20px; flex: none; }
.fabric-legacy-card .favorite-save[aria-pressed="true"] svg { fill: var(--gruen); stroke: var(--gruen); }
.fabric-legacy-detail .fabric-legacy-back { display: inline-block; margin: 0 0 16px; }
.fabric-legacy-detail .fabric-legacy-summary { padding: 0; margin: 0 0 20px; }
.fabric-legacy-detail .fabric-photo-sequence figcaption { display: block; margin: 8px 0 0; font: 400 14px/1.5 var(--schrift-text); color: var(--text-leise); }
.fabric-legacy-detail .fabric-photo-caption { display: block; }
.fabric-legacy-detail > .fabric-card-information { display: block; margin-top: 24px; }

/* Owner-approved footer language option C: small flags and fine dividing lines. */
.fuss .fuss__sprachen--flaggen { display: block; min-width: 0; width: 100%; max-width: 360px; }
.fuss .fuss__sprachentitel {
  display: flex; align-items: center; gap: 8px; margin: 0 0 14px;
  color: var(--text-leise); font: 400 12px/1.5 var(--schrift-text);
  letter-spacing: 0.07em; text-transform: uppercase;
}
.fuss .fuss__sprachentitel > svg { flex: none; width: 16px; height: 16px; }
.fuss .fuss__sprachen--flaggen ul {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px;
  margin: 0; padding: 0; list-style: none; min-width: 0; width: 100%;
}
.fuss .fuss__sprachen--flaggen li { min-width: 0; max-width: 100%; }
.fuss .fuss__sprachen--flaggen a {
  display: flex; align-items: center; justify-content: flex-start; gap: 9px;
  box-sizing: border-box; min-height: 51px; width: 100%; max-width: 100%; padding: 9px 0;
  border: 0; border-bottom: 1px solid var(--linie); border-radius: 0; background: transparent;
  color: var(--tinte); font: 400 14px/1.5 var(--schrift-text);
  white-space: nowrap; text-align: start; text-decoration: none; box-shadow: none;
}
.fuss .fuss__sprachen--flaggen a:hover { color: var(--gruen); border-color: #7d8c7e; text-decoration: none; }
.fuss .fuss__sprachen--flaggen a[aria-current="true"] {
  color: var(--gruen); border-color: var(--gruen); box-shadow: none; text-decoration: none;
}
.fuss .fuss__sprachen--flaggen a:focus-visible { outline: 3px solid var(--gruen); outline-offset: 3px; }
.fuss .fuss__sprachen--flaggen .fuss__sprachstatus { flex: none; width: 14px; height: 14px; margin-inline-start: auto; }
.fuss .fuss__sprachen--flaggen .fuss__sprachflagge,
.fuss .fuss__sprachen--flaggen .fuss__sprachzeichen {
  display: grid; place-items: center; flex: none; box-sizing: border-box;
  width: 23px; height: 23px; border-radius: 50%;
}
.fuss .fuss__sprachen--flaggen .fuss__sprachflagge { object-fit: contain; }
.fuss .fuss__sprachen--flaggen .fuss__sprachzeichen {
  font: 21px/1 Arial, sans-serif; color: var(--gruen); border: 1px solid #718172;
}
@media(max-width:380px) { .fuss .fuss__sprachen--flaggen li:last-child { grid-column: 1 / -1; } }

/* Owner request 2026-10-24: a small share control beside each existing photo heart. */
.favorite-photo-actions{position:absolute;z-index:2;right:var(--favorite-photo-right,12px);bottom:var(--favorite-photo-bottom,12px);display:flex;gap:6px;align-items:center;direction:ltr}
.favorite-photo-actions>.favorite-save{position:relative;margin:0;top:auto;right:auto;bottom:auto;left:auto;--glass-ink:#fff;color:#fff;filter:drop-shadow(0 1px 2px #000)}
.product-share-dialog{max-width:min(90vw,32rem);padding:24px}.product-share-dialog input{display:block;width:100%;margin:16px 0}.product-share-dialog::backdrop{background:#0008}

/* Keep the approved photo-heart appearance and anchor when adding sharing. */
:is(main[data-template-2027], body[data-hn-public="true"], .fabric-legacy-card) .favorite-photo-actions { right: var(--favorite-photo-right, 10px); bottom: var(--favorite-photo-bottom, 10px); }
:is(main[data-template-2027], body[data-hn-public="true"], .fabric-legacy-card) .favorite-photo-actions > .favorite-save { position: relative; top: auto; left: auto; right: auto; bottom: auto; }

/* Owner request 24.10.2026: compact fabric collections with four own previews. */
.fabric-existing .fabric-grid:has(> .fabric-collection-row){gap:0}
.fabric-collection-row{border-bottom:1px solid var(--linie);padding-block:20px}
.fabric-collection-row>.fabric-card{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);align-items:center;gap:24px}
.fabric-collection-row .fabric-collection-previews{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;gap:8px;min-width:0}
.fabric-collection-row .fabric-collection-preview{display:block;min-width:0;aspect-ratio:1}
.fabric-collection-row .fabric-collection-preview img{display:block;width:100%;height:100%;max-width:100%;object-fit:contain;border-radius:12px}
.fabric-collection-row .fabric-legacy-summary{min-width:0;padding:0;overflow-wrap:anywhere}
.fabric-collection-row .fabric-legacy-name{font-size:28px;margin:0 0 10px}
.fabric-collection-row .fabric-legacy-action{min-height:44px}
.fabric-collection-row .fabric-collection-preview:focus-visible{outline:3px solid var(--gruen);outline-offset:3px}
@media(max-width:40rem){
 .fabric-collection-row>.fabric-card{grid-template-columns:minmax(0,1fr);gap:12px}
 .fabric-collection-row .fabric-collection-previews{width:100%;max-width:320px}
 .fabric-collection-row .fabric-legacy-summary{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}
 .fabric-collection-row .fabric-legacy-name{font-size:26px;margin:0}
}

/* Owner-approved homepage example, 03.11.2026: title, photo, short copy. */
main.home-compact .home-process { padding-block: 1.5rem; }
main.home-compact .home-process > .huelle { display: grid; gap: 1rem; }
main.home-compact :is(.home-process, .home-personal, .home-upholstery) :is(h2,:where([data-seo-heading="h2"],[data-seo-caption="h2"])) { margin: 0; font-size: clamp(2rem, 1.5rem + 2vw, 3.5rem); line-height: 1.08; text-wrap: pretty; }
main.home-compact :is(.home-process__photo, .home-upholstery__photo) { margin: 0; }
main.home-compact :is(.home-process__photo, .home-upholstery__photo) img { display: block; inline-size: 100%; block-size: auto; max-inline-size: 100%; border-radius: var(--rund-bild); }
main.home-compact .home-process__steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; }
main.home-compact .home-process__steps > li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .75rem; padding-block: .65rem; border-block-end: 1px solid var(--linie); }
main.home-compact .home-process__steps > li:last-child { border-block-end: 0; }
main.home-compact .home-process__number { font: 700 .9375rem/1.5 var(--schrift-text); font-variant-numeric: tabular-nums; }
main.home-compact .home-process__steps :is(h3,:where([data-seo-heading="h3"],[data-seo-caption="h3"])) { margin: 0 0 .3rem; font: 400 clamp(1.375rem, 1.1rem + .5vw, 1.75rem)/1.15 var(--schrift-titel); }
main.home-compact .home-process__steps p { margin: 0; max-inline-size: none; font-size: .9375rem; line-height: 1.5; }
main.home-compact .home-personal { padding-block: 0; }
main.home-compact .home-personal__content { display: grid; justify-items: start; gap: .35rem; border-block-start: 1px solid var(--linie); padding-block: 1.25rem; }
main.home-compact .home-personal :is(h2,:where([data-seo-heading="h2"],[data-seo-caption="h2"])) { font-size: clamp(1.875rem, 1.4rem + 1.5vw, 2.75rem); }
main.home-compact :is(.home-personal, .home-upholstery) p { margin: 0; font-size: 1rem; line-height: 1.5; }
main.home-compact :is(.home-personal__eyebrow, .home-upholstery__eyebrow) { font-size: .9375rem; font-weight: 700; }
main.home-compact .home-personal .link { display: inline-flex; align-items: center; min-block-size: 2.75rem; }
main.home-compact .home-upholstery { padding-block: 0 2rem; }
main.home-compact .home-upholstery__content { display: grid; justify-items: start; gap: .75rem; border-block-start: 1px solid var(--linie); padding-block-start: 1.25rem; }
main.home-compact .home-upholstery__heading { display: grid; gap: .5rem; }
main.home-compact .home-upholstery__photo { inline-size: 100%; }
main.home-compact .home-upholstery__whatsapp { min-block-size: 3rem; max-inline-size: 100%; padding: .8rem 1.5rem; border-radius: 999px; font: 500 1rem/1.3 var(--schrift-text); text-align: center; text-decoration: none; }
@layer sofastil-reference {
  main.home-compact :is(.home-process__number, .home-personal__eyebrow, .home-upholstery__eyebrow) { color: var(--ref-champagne) !important; -webkit-text-fill-color: currentColor; }
}
@media (max-width: 63.999rem) {
  :root:lang(de) main.home-compact .home-process__steps > li > div { container-type: inline-size; }
  :root:lang(de) main.home-compact .home-process__steps p { font-size: min(.9375rem, 4.9cqi); white-space: nowrap; }
}
@media (min-width: 64rem) {
  main.home-compact :is(.home-process__photo, .home-upholstery__photo) img { object-fit: cover; }
  main.home-compact .home-process__photo img { aspect-ratio: 2.16; object-position: 50% 40%; }
  main.home-compact .home-upholstery__photo img { aspect-ratio: 1.7; object-position: 50% 36%; }
  main.home-compact .home-process__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
  main.home-compact .home-process__steps > li { display: grid; grid-template-columns: minmax(0, 1fr); gap: .65rem; padding-block: .35rem; padding-inline-end: 1.5rem; border-block-end: 0; border-inline-end: 1px solid var(--linie); }
  main.home-compact .home-process__steps > li:last-child { padding-inline-end: 0; border-inline-end: 0; }
}


[data-seo-heading]{display:block}
.kitchen-planner-heading{padding-bottom:0}