/* Use Cases: Übersicht (Kartenraster) und Detailseiten. Erzeugt werden die Seiten von use-cases-bauen.py. */
.nav-links a[aria-current=page]{color:var(--flame-deep)}
.page-head .eyebrow{margin-top:18px;margin-bottom:10px}

/* Kartenraster */
.uc-liste{padding-top:clamp(28px,3.6vw,48px)}
.uc-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:clamp(20px,2.6vw,32px)}
.uc-karte{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line-strong);border-radius:14px;background:#fff;color:var(--ink);text-decoration:none;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.uc-karte:hover,.uc-karte:focus-visible{transform:translateY(-4px);border-color:var(--ink);box-shadow:9px 9px 0 var(--sun),0 22px 46px rgba(16,24,28,.12)}
.uc-karte:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
.uc-bild{position:relative;display:block;aspect-ratio:800/550;overflow:hidden;border-bottom:1px solid var(--line-strong);background:#F3EEE6}
.uc-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.uc-vorher{opacity:0;transition:opacity .35s ease}
.uc-chip{position:absolute;left:12px;bottom:12px;padding:5px 10px;border-radius:999px;background:var(--ink);color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.uc-chip-v{display:none}
.uc-text{display:flex;flex:1;flex-direction:column;gap:8px;padding:clamp(20px,2.2vw,26px)}
.uc-ort{color:var(--flame-deep);font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.uc-name{margin:0;font-size:clamp(1.45rem,2vw,1.7rem);line-height:1.1;letter-spacing:-.02em}
.uc-ergebnis{color:var(--ink-2);font-size:1.02rem;line-height:1.55}
.uc-fuss{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:14px;color:var(--ink-2);font-size:.92rem}
.uc-person{display:flex;align-items:center;gap:10px}
.uc-person img{width:36px;height:36px;border-radius:50%;object-fit:cover}
.uc-mehr{margin-left:auto;color:var(--ink);font-weight:700;white-space:nowrap}
@media (hover:hover){
  .uc-karte.hat-vorher:hover .uc-vorher{opacity:1}
  .uc-karte.hat-vorher:hover .uc-chip{background:var(--flame)}
  .uc-karte.hat-vorher:hover .uc-chip-n{display:none}
  .uc-karte.hat-vorher:hover .uc-chip-v{display:inline}
}
.uc-weitere-kopf{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 30px;margin-bottom:clamp(22px,3vw,34px)}
.uc-weitere-kopf h2{font-size:clamp(1.7rem,3vw,2.4rem);letter-spacing:-.03em}

/* Detailseite */
.ref-haus{padding-block:clamp(52px,6.5vw,92px)}
.ref-detail{padding-top:clamp(28px,3.6vw,48px)}
.ref-paar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.ref-bild{min-width:0;margin:0}
.ref-bild figcaption{display:flex;align-items:baseline;gap:10px;margin-bottom:12px;color:var(--ink-2);font-size:.94rem}
.ref-bild figcaption strong{color:var(--ink);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase}
.ref-nachher figcaption strong{color:var(--flame-deep)}
.ref-fenster{overflow:hidden;border:1px solid var(--line-strong);border-radius:12px;background:#fff;box-shadow:0 22px 46px rgba(16,24,28,.1)}
.ref-nachher .ref-fenster{border-color:var(--ink);box-shadow:9px 9px 0 var(--sun),0 22px 46px rgba(16,24,28,.12)}
.ref-scroll{height:min(76vh,680px);overflow-y:auto;background:#fff}
.ref-scroll:focus-visible{outline:3px solid var(--sun);outline-offset:-3px}
.ref-scroll img{display:block;width:100%;height:auto}
.ref-paar-einzeln{grid-template-columns:minmax(0,640px)}
.ref-wechsel{display:none}
.ref-gegen{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin-bottom:clamp(28px,3.6vw,44px)}
.ref-seite{padding:clamp(24px,3vw,36px);border-radius:14px}
.ref-seite small{display:block;margin-bottom:12px;font-size:.76rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.ref-seite p{font-size:clamp(1.04rem,1.25vw,1.14rem);line-height:1.7}
.ref-vorher-text{background:#F3EEE6;color:var(--ink-2)}
.ref-vorher-text small{color:var(--muted)}
.ref-nachher-text{position:relative;border:1px solid var(--ink);background:#fff;color:var(--ink);box-shadow:9px 9px 0 var(--sun)}
.ref-nachher-text small{color:var(--flame-deep)}
.ref-nachher-text::before{position:absolute;left:calc(-1 * clamp(20px,3vw,40px) / 2 - 17px);top:50%;display:grid;place-items:center;width:34px;height:34px;margin-top:-17px;border-radius:50%;background:var(--flame);color:#fff;font-weight:800;box-shadow:0 0 0 4px #fff;content:"→"}
.ref-zitat{max-width:880px;margin:0 0 clamp(36px,4.6vw,60px);padding-left:clamp(20px,2.6vw,32px);border-left:4px solid var(--flame)}
.ref-zitat blockquote{margin:0}
.ref-zitat p{font-family:Fraunces,Georgia,serif;font-size:clamp(1.3rem,2.2vw,1.75rem);line-height:1.38;letter-spacing:-.01em;color:var(--ink)}
.ref-zitat figcaption{display:flex;align-items:center;gap:14px;margin-top:16px;color:var(--ink-2);font-size:.98rem}
.ref-zitat-bild{flex:none;width:64px;height:64px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px #fff,0 0 0 4px var(--line-strong)}
.ref-zitat figcaption strong{color:var(--ink);margin-right:6px}
.ref-link{margin-top:24px;font-size:1rem}
@media (max-width:760px){
  .ref-wechsel{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:16px;padding:4px;border:1px solid var(--line-strong);border-radius:10px;background:#fff}
  .ref-wechsel button{min-height:44px;padding:0 12px;border:0;border-radius:7px;background:none;color:var(--ink-2);font:inherit;font-size:.95rem;font-weight:700;cursor:pointer}
  .ref-wechsel button[aria-pressed=true]{background:var(--ink);color:#fff}
  .ref-paar{grid-template-columns:1fr}
  .ref-paar.ist-umschaltbar .ref-bild[hidden]{display:none}
  .ref-scroll{height:68vh}
  .ref-nachher .ref-fenster{box-shadow:5px 5px 0 var(--sun),0 16px 34px rgba(16,24,28,.12)}
  .ref-gegen{grid-template-columns:1fr;gap:30px}
  .ref-nachher-text{box-shadow:5px 5px 0 var(--sun)}
  .ref-nachher-text::before{left:50%;top:-32px;margin:0 0 0 -17px;content:"↓"}
}
@media (prefers-reduced-motion:reduce){.uc-karte,.uc-vorher{transition:none}.uc-karte:hover{transform:none}}