/* ===== Startseite: Besonderheiten ===== */

/* Marke: Fakten unter Logo und Kernaussage */
.marke__fakten{grid-column:1 / -1;margin-top:var(--sp-4)}
@media (min-width:960px){
  .marke__fakten{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:var(--sp-5)}
}

/* Bad-Planer-Teaser (dunkles Band) */
.planer-teaser{
  --fliese-1:#ece7df;
  --fliese-2:#cfe2e2;
  --fliese-3:var(--c-warm-light);
  --boden-1:#a49686;
  --boden-2:#8f8170;
  --boden-3:#bba98f;
  --fliesen-takt:21s;
  display:grid;gap:var(--sp-6);align-items:center
}
.planer-teaser__text h2{margin-top:var(--sp-3);max-width:15ch}
.planer-teaser__text > p:not(.eyebrow){margin-top:var(--sp-4);max-width:46ch;color:#c3c8cd}
.planer-teaser__hinweis{display:flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-3);font-size:var(--fs-s);color:#c3c8cd}
.planer-teaser__hinweis svg{color:var(--c-warm-light)}
.planer-teaser__media{margin:0}
.planer-teaser .planer__vorschau{box-shadow:var(--shadow-l);border:1px solid var(--c-line-dark)}
.planer-teaser .planer__label{color:#c3c8cd;align-items:center}
.planer-teaser .pv-raum{animation:fliesenwechsel var(--fliesen-takt) var(--ease) infinite}
.planer-teaser .pv-boden{animation:bodenwechsel var(--fliesen-takt) var(--ease) infinite}
.farbmuster{display:inline-flex;gap:var(--sp-1)}
.farbmuster i{display:block;width:.9rem;height:.9rem;border-radius:var(--r-s);background:var(--s);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
@keyframes fliesenwechsel{
  0%,27%{background-color:var(--fliese-1)}
  33%,60%{background-color:var(--fliese-2)}
  66%,94%{background-color:var(--fliese-3)}
  100%{background-color:var(--fliese-1)}
}
@keyframes bodenwechsel{
  0%,27%{background-color:var(--boden-1)}
  33%,60%{background-color:var(--boden-2)}
  66%,94%{background-color:var(--boden-3)}
  100%{background-color:var(--boden-1)}
}
@media (min-width:960px){
  .planer-teaser{grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(3rem,6vw,6.5rem)}
}

/* Einblick: asymmetrisches Bildraster */
.einblick{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(8.5rem,30vw,14rem);gap:var(--sp-2)}
.einblick > li:first-child{grid-column:1 / -1;grid-row:span 2}
.einblick > li:last-child{grid-column:1 / -1}
.einblick__item{position:relative;display:block;height:100%;overflow:hidden;border-radius:var(--r-s);background:var(--c-sand);text-decoration:none}
.einblick__item img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) var(--ease)}
.einblick__item::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 0 var(--c-warm);transition:box-shadow var(--t) var(--ease);pointer-events:none}
.einblick__item:hover img,.einblick__item:focus-visible img{transform:scale(1.05)}
.einblick__item:hover::after,.einblick__item:focus-visible::after{box-shadow:inset 0 0 0 3px var(--c-warm)}
.einblick__mehr{position:absolute;left:var(--sp-3);bottom:var(--sp-3);padding:.35rem .7rem;border-radius:var(--r-s);background:rgba(255,255,255,.94);color:var(--c-ink);font-family:var(--f-head);font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;opacity:0;transform:translateY(6px);transition:opacity var(--t) var(--ease),transform var(--t) var(--ease)}
.einblick__item:hover .einblick__mehr,.einblick__item:focus-visible .einblick__mehr{opacity:1;transform:none}
@media (hover:none){.einblick__mehr{display:none}}
@media (min-width:960px){
  .einblick{grid-template-columns:5fr 4fr 3fr;grid-auto-rows:clamp(13rem,17vw,18.5rem);gap:var(--sp-3)}
  .einblick > li:first-child{grid-column:1;grid-row:1 / 3}
  .einblick > li:nth-child(2){grid-column:2 / 4;grid-row:1}
  .einblick > li:nth-child(3){grid-column:2;grid-row:2}
  .einblick > li:last-child{grid-column:3;grid-row:2}
}

/* Kontaktblock: abgedunkeltes Petrol */
.cta-band--kontakt{background:var(--c-primary-dark);padding-block:var(--sp-section)}
.kontakt-band{display:grid;gap:var(--sp-6)}
.kontakt-band__text h2{margin-top:var(--sp-3)}
.kontakt-band__text .actions{margin-top:var(--sp-5)}
.kontakt-band__daten{padding-top:var(--sp-5);border-top:1px solid var(--c-line-dark)}
.kontakt-band .info-list svg{color:var(--c-warm-light)}
.kontakt-band .info-list strong{color:var(--c-white);margin-bottom:var(--sp-1)}
.kontakt-band .info-list a{color:var(--c-white);text-decoration:underline;text-decoration-color:var(--c-warm-light);text-underline-offset:.25em;overflow-wrap:anywhere}
.kontakt-band .info-list a:hover{color:var(--c-warm-light)}
.kontakt-band .info-list span{display:block}
.kontakt-band__route{display:inline-block;margin-top:var(--sp-2);font-size:var(--fs-s)}
.kontakt-band__notiz{margin-top:var(--sp-1);font-size:var(--fs-s);color:var(--c-warm-light)}
@media (min-width:960px){
  .kontakt-band{grid-template-columns:minmax(0,6fr) minmax(0,5fr);column-gap:var(--sp-7);align-items:start}
  .kontakt-band__daten{padding-top:0;padding-left:var(--sp-6);border-top:0;border-left:1px solid var(--c-line-dark)}
}