/* Am Mitterberg 18 – Hausverkauf. Bildbetont, mit fester Infokarte. Farben aus dem Mohnfeld-Foto: Himmel, Mohn, Nachtblau. */
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Figtree";src:url("../fonts/figtree-latin-wght-normal.woff2") format("woff2");font-weight:300 900;font-display:swap}
:root{
  --weiss:#ffffff;
  --himmel:#eaf1f6;
  --himmel-linie:#cfdce6;
  --nacht:#12233a;
  --text:#22303f;
  --leise:#5a6878;
  --mohn:#b3161b;
  --mohn-dunkel:#8f1015;
  --breite:76rem;
  --rand:clamp(1.125rem, 4vw, 2.5rem); /* 18px – 40px */
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--weiss);color:var(--text);font-family:"Figtree",system-ui,sans-serif;font-size:1.0625rem;line-height:1.6}
img{display:block;max-width:100%;height:auto}
a{color:var(--mohn);text-underline-offset:.18em}
:focus-visible{outline:3px solid var(--mohn);outline-offset:3px;border-radius:2px}
h1,h2,h3{font-family:"Fraunces",Georgia,serif;font-weight:500;line-height:1.1;margin:0;color:var(--nacht);letter-spacing:-.01em}
h1{font-size:clamp(2.25rem, 1.2rem + 4.4vw, 4.5rem)} /* 36px – 72px */
h2{font-size:clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem)} /* 28px – 40px */
h3{font-family:"Figtree",system-ui,sans-serif;font-weight:700;font-size:1.0625rem;letter-spacing:0;line-height:1.3}
p{margin:0 0 1em;max-width:40em}
.innen{max-width:var(--breite);margin:0 auto;padding:0 var(--rand)}
.sprung{position:absolute;left:-999px;top:0;background:var(--nacht);color:#fff;padding:.75rem 1rem;z-index:10}
.sprung:focus{left:0}

/* Titelbild */
.titel{position:relative;min-height:min(78vh, 46rem);display:flex;flex-direction:column;justify-content:space-between;color:#fff;isolation:isolate}
.titel > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 58%;z-index:-2}
.titel::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg, rgba(10,22,38,.55) 0%, rgba(10,22,38,0) 26%, rgba(10,22,38,0) 48%, rgba(10,22,38,.82) 100%)}
.kopf{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem 1.5rem;flex-wrap:wrap;padding-top:1.25rem;padding-bottom:1.25rem;width:100%}
.kopf .adresse{font-weight:700;color:var(--nacht);text-decoration:none}
.titel .kopf .adresse{color:#fff}
.kopf ul{display:flex;gap:1.5rem;list-style:none;margin:0;padding:0}
.kopf nav a{color:var(--nacht);text-decoration:none;padding:.5rem 0;display:inline-block;font-weight:500}
.titel .kopf nav a{color:#fff}
.kopf nav a:hover{text-decoration:underline;text-decoration-thickness:2px}
.menue-knopf{display:none;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;margin-right:-.5rem;padding:0;border:0;border-radius:.375rem;background:transparent;color:var(--nacht);cursor:pointer}
.titel .menue-knopf{color:#fff}
.menue-knopf .kreuz{display:none}
.menue-knopf[aria-expanded="true"] .striche{display:none}
.menue-knopf[aria-expanded="true"] .kreuz{display:inline}
.titel :focus-visible{outline-color:#fff}
.titel .worte{padding-top:6rem;padding-bottom:clamp(2rem,5vw,3.5rem);width:100%}
.titel h1{color:#fff;max-width:13em;text-wrap:balance}
.titel .unter{font-size:clamp(1.0625rem, .95rem + .6vw, 1.375rem);margin:1rem 0 0;max-width:34em;color:#fff} /* 17px – 22px */

/* Zwei Spalten: Inhalt und Infokarte */
.spalten{display:grid;grid-template-columns:minmax(0,1fr) 21.5rem;gap:clamp(2rem,5vw,4.5rem);align-items:start;padding-top:clamp(2.5rem,5vw,4rem);padding-bottom:clamp(3rem,6vw,5rem)}
.karte{position:sticky;top:1.5rem;background:var(--himmel);border:1px solid var(--himmel-linie);border-radius:.75rem;padding:1.5rem}
.karte .preis-titel{font-size:.9375rem;color:var(--leise);margin:0}
.karte .preis{font-family:"Fraunces",Georgia,serif;font-weight:500;font-size:2.25rem;line-height:1.1;color:var(--nacht);margin:.1rem 0 .25rem;letter-spacing:-.01em}
.karte .dazu{font-size:.9375rem;color:var(--leise);margin:0 0 1.25rem}
.karte dl{margin:0 0 1.25rem;border-top:1px solid var(--himmel-linie)}
.karte dl div{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--himmel-linie);font-size:1rem}
.karte dt{color:var(--leise)}
.karte dd{margin:0;font-weight:600;color:var(--nacht);text-align:right}
.knopf{display:block;text-align:center;font-weight:700;font-size:1.0625rem;background:var(--mohn);color:#fff;text-decoration:none;padding:.9rem 1.25rem;border-radius:.5rem}
.knopf:hover{background:var(--mohn-dunkel)}
.karte .klein{font-size:.9375rem;color:var(--leise);margin:1rem 0 0;line-height:1.45}

.block{padding-bottom:clamp(2.5rem,5vw,4rem)}
.block + .block{padding-top:clamp(2.5rem,5vw,4rem);border-top:1px solid var(--himmel-linie)}
.block:last-child{padding-bottom:0}
.block h2{margin-bottom:1.25rem}
.vorspann{font-size:1.1875rem;line-height:1.55;color:var(--nacht)}

/* Wohneinheiten als Tabelle */
.einheiten{width:100%;border-collapse:collapse;margin:1.5rem 0 1.25rem}
.einheiten th,.einheiten td{text-align:left;vertical-align:top;padding:.9rem 1rem .9rem 0;border-bottom:1px solid var(--himmel-linie)}
.einheiten thead th{font-size:.9375rem;font-weight:500;color:var(--leise);padding-top:0}
.einheiten tbody th{font-weight:700;color:var(--nacht);white-space:nowrap}
.einheiten .qm{font-family:"Fraunces",Georgia,serif;font-size:1.5rem;line-height:1.1;color:var(--nacht);white-space:nowrap}
.merk{background:var(--himmel);border-radius:.5rem;padding:1rem 1.25rem;margin:0;max-width:none}

/* Fotos: drei Gruppen, jede als Mosaik */
#fotos h3{font-size:1.125rem;margin:2rem 0 .75rem}
#fotos h2 + h3{margin-top:0}
.mosaik{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:dense;gap:.375rem;list-style:none;margin:0;padding:0}
.mosaik li.gross{grid-column:span 2;grid-row:span 2}
.mosaik a{display:block;height:100%;border-radius:.375rem;overflow:hidden;background:var(--himmel)}
.mosaik img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .25s}
.mosaik a:hover img{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){.mosaik img{transition:none}.mosaik a:hover img{transform:none}}
.mosaik img.unten{object-position:50% 85%}

/* Ausstattung in drei Gruppen */
.gruppen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem 2rem}
.gruppen h3{padding-bottom:.6rem;border-bottom:2px solid var(--nacht);margin-bottom:.25rem}
.gruppen ul{list-style:none;margin:0;padding:0}
.gruppen li{padding:.6rem 0;border-bottom:1px solid var(--himmel-linie);font-size:1rem;line-height:1.45}
.gruppen li b{display:block;font-weight:700;color:var(--nacht)}
.offen{background:#fff3b0;padding:.05em .3em;border-radius:2px}

/* Plaene */
.plaene{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:1rem;margin-top:1.5rem}
.plaene figure{margin:0}
.plaene figure.breit{grid-column:1 / -1}
.plaene a{display:block;border:1px solid var(--himmel-linie);border-radius:.375rem;overflow:hidden;background:#fff}
.plaene img{width:100%}
figcaption{font-size:.9375rem;color:var(--leise);margin-top:.5rem;line-height:1.4}

/* Abschluss */
.abschluss{background:var(--nacht);color:#e9eef4;padding:clamp(3rem,7vw,5.5rem) 0}
.abschluss h2{color:#fff;max-width:16em}
.abschluss p{margin:1rem 0 1.75rem;max-width:36em}
.abschluss .knopf{display:inline-block}
.abschluss .mail{margin:1.25rem 0 0}
.abschluss a:not(.knopf){color:#fff}
.abschluss :focus-visible{outline-color:#fff}
.fuss{padding:1.5rem 0 2.5rem;font-size:.9375rem;color:var(--leise)}
.fuss .innen{display:flex;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap}
.fuss ul{display:flex;gap:1.5rem;list-style:none;margin:0;padding:0}
.fuss a{color:var(--text)}

/* Grossansicht (gleiche Bedienung wie Entwurf A) */
dialog.gross{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100vw;height:100vh;color:#fff}
dialog.gross::backdrop{background:rgba(8,16,28,.95)}
.gross .buehne{position:absolute;inset:0;display:grid;grid-template-rows:1fr auto;justify-items:center;align-items:center;padding:3.5rem 1rem 1rem}
.gross img{max-width:100%;max-height:calc(100vh - 8rem);width:auto;height:auto;border-radius:2px;background:#fff}
.gross p{font-size:1rem;margin:.75rem 0 0;text-align:center;max-width:none}
.gross button{position:absolute;font:600 1rem "Figtree",system-ui,sans-serif;color:#fff;background:rgba(255,255,255,.14);border:0;border-radius:.375rem;padding:.7rem 1rem;cursor:pointer;min-width:2.75rem;min-height:2.75rem}
.gross button:hover{background:rgba(255,255,255,.28)}
.gross button:focus-visible{outline-color:#fff}
.gross .zu{top:.75rem;right:.75rem}
.gross .vor,.gross .zurueck{top:50%;transform:translateY(-50%);font-size:1.375rem;line-height:1}
.gross .zurueck{left:.75rem}
.gross .vor{right:.75rem}

@media (max-width:62rem){
  .spalten{grid-template-columns:minmax(0,1fr)}
  .karte{position:static;order:-1}
  .gruppen{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:40rem){
  /* Handy: Bild frei, Titel darunter auf Nachtblau */
  .titel{display:block;min-height:0;background:var(--nacht)}
  .titel > img{position:relative;inset:auto;z-index:0;height:auto;aspect-ratio:1/1;object-position:36% 50%}
  .titel::after{bottom:auto;height:7rem;z-index:1;background:linear-gradient(180deg, rgba(10,22,38,.62) 0%, rgba(10,22,38,0) 100%)}
  .titel .kopf{position:absolute;top:0;left:0;right:0;z-index:2}
  .titel .worte{padding-top:1.5rem;padding-bottom:1.75rem}
  /* Handy: Menue hinter einem Knopf (nur wenn Skripte laufen, sonst bleibt die Zeile sichtbar) */
  .kopf ul{gap:1.1rem}
  .mit-js .kopf{flex-wrap:nowrap;align-items:center;position:relative;padding-top:.75rem;padding-bottom:.75rem}
  .mit-js .titel .kopf{position:absolute}
  .mit-js .menue-knopf{display:inline-flex}
  .mit-js .kopf nav{display:none;position:absolute;top:100%;left:0;right:0;z-index:5;background:var(--nacht);padding:.25rem var(--rand) .75rem;box-shadow:0 .75rem 1.5rem rgba(10,22,38,.25);border-top:1px solid rgba(255,255,255,.16)}
  .mit-js .kopf nav.auf{display:block}
  /* offenes Menue: auch die Kopfzeile wird nachtblau, damit Kopf und Menue eine Flaeche sind */
  .mit-js .kopf.menue-auf{background:var(--nacht)}
  .mit-js .kopf.menue-auf .adresse,.mit-js .kopf.menue-auf .menue-knopf{color:#fff}
  .mit-js .kopf.menue-auf :focus-visible{outline-color:#fff}
  .mit-js .kopf nav ul{flex-direction:column;gap:0}
  .mit-js .kopf nav li + li{border-top:1px solid rgba(255,255,255,.16)}
  .mit-js .kopf nav a{display:block;padding:.9rem 0;font-size:1.125rem;color:#fff}
  .mit-js .kopf nav :focus-visible{outline-color:#fff}
  .mosaik{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .gruppen{grid-template-columns:minmax(0,1fr)}
  .einheiten thead{position:absolute;left:-999px}
  .einheiten tr{display:block;padding:.9rem 0;border-bottom:1px solid var(--himmel-linie)}
  .einheiten th,.einheiten td{display:block;padding:0;border:0}
  .einheiten .qm{margin:.15rem 0 .25rem}
  .plaene{grid-template-columns:minmax(0,1fr)}
}

/* Impressum und Datenschutz */
.recht{padding-top:1.5rem;padding-bottom:4.5rem}
.recht h1{font-size:clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem);margin-bottom:1.75rem} /* 36px – 52px */
.recht h2{font-size:1.5rem;margin:2.5rem 0 .75rem}
.recht p,.recht ul{max-width:42em}
@media print{.kopf nav,.karte .knopf,dialog{display:none}.titel{min-height:0}.titel > img,.titel::after{display:none}.titel h1,.titel .unter,.titel .kopf .adresse{color:#000}}