/* ---------- Kontaktseite ---------- */

/* Der Hero ist hier etwas flacher als auf den uebrigen Seiten.
   Grund: in einem bildschirmhohen Kasten beschneidet `cover` die Szene seitlich —
   bei dieser faellt dann der Hund rechts und die Pflanze links weg. Die Hoehe an
   die Breite zu binden haelt den Kasten nahe am Seitenverhaeltnis des Bildes.
   Bei 1440 px sind das 806 px Hoehe und rund 5 % Beschnitt statt 13 %;
   ab etwa 1900 px Breite bleibt die Szene praktisch vollstaendig sichtbar.
   Die Zahl 57vw gehoert zum Seitenverhaeltnis 1.52 der Kontaktserie —
   aendert sich das Bildformat, gehoert sie neu gerechnet. */
.hero[data-img="contact"]{min-height:min(100vh, max(540px, 57vw))}
.hero[data-img="contact"]{min-height:min(100svh, max(540px, 57vw))}

/* Der Parallax-Versatz betraegt +-90 px, unabhaengig von der Hoehe des Heros.
   Deshalb hier ein Ueberstand in Pixeln statt der 10 %, die bei einem flacheren
   Hero zu knapp wuerden und die Bildkante beim Scrollen freilegen. */
.hero[data-img="contact"] .bg{inset:-96px 0}

/* Hochkant ist seitlicher Beschnitt unvermeidlich. Dann lieber die Mitte links
   halten — Matthias und der leere Stuhl — als rechts den Hund. */
@media (max-width:760px){
  .hero[data-img="contact"] .bg img{object-position:42% 50%}
}

.contact-grid{
  display:grid;gap:clamp(28px,4vw,72px);
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  align-items:start;
}

/* --- Kontaktangaben --- */
.cdetails{display:grid;gap:26px;margin:0}
.cdetails .row{display:grid;gap:4px}
.cdetails dt{
  font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  font-weight:700;color:var(--muted);margin:0;
}
.cdetails dd{margin:0;font-size:17px;line-height:1.5}
.cdetails dd a{border-bottom:1px solid rgba(0,0,0,.18);transition:border-color .2s}
.cdetails dd a:hover{border-bottom-color:currentColor}
body.night .cdetails dd a{border-bottom-color:rgba(255,255,255,.26)}

/* --- Formular --- */
.form{display:grid;gap:18px}
.form .pair{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:grid;gap:7px}
.field label{
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;color:var(--muted);
}
.field label .opt{letter-spacing:.06em;text-transform:none;font-weight:500;opacity:.7}
.field input,.field textarea{
  font:inherit;font-size:16px;color:inherit;
  background:transparent;border:0;border-bottom:1px solid rgba(0,0,0,.2);
  padding:10px 2px;border-radius:0;
  transition:border-color .22s,box-shadow .22s;
}
body.night .field input,body.night .field textarea{border-bottom-color:rgba(255,255,255,.22)}
.field textarea{resize:vertical;min-height:132px;line-height:1.55}
.field input:focus,.field textarea:focus{
  outline:0;border-bottom-color:var(--sage);box-shadow:0 1px 0 0 var(--sage);
}
.field input:user-invalid,.field textarea:user-invalid{border-bottom-color:var(--pink)}
.field .err{font-size:13px;color:var(--pink);min-height:0}

/* Honeypot: fuer Menschen und Screenreader unerreichbar, fuer Bots sichtbar */
.trap{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

.form .foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:6px}
.form button{font:inherit;border:0;cursor:pointer}
.form button[disabled]{opacity:.55;cursor:default}
.form .note{font-size:13px;color:var(--muted);max-width:46ch;line-height:1.5}
body.night .form .note{color:rgba(255,255,255,.6)}

/* --- Das Formular als Kachel ---
   Auf weissem Band ging das Formular optisch unter. Sage hebt es heraus und
   nimmt den Akzent der Leistungsseite auf. Alles, was vorher auf die Sage-Farbe
   gesetzt hat (Fokus, Button), muss hier auf Tinte wechseln — sonst verschwindet
   es im Hintergrund. */
.formcard{
  background:var(--sage);color:var(--ink);
  border-radius:24px;padding:clamp(22px,3.2vw,44px);
  box-shadow:0 1px 0 rgba(0,0,0,.06);
}
body.night .formcard{background:#2f4a41;color:#f2f2f0;box-shadow:none}

.formcard .field label{color:rgba(17,21,20,.66)}
body.night .formcard .field label{color:rgba(255,255,255,.62)}
.formcard .field input,.formcard .field textarea{border-bottom-color:rgba(17,21,20,.3)}
body.night .formcard .field input,body.night .formcard .field textarea{border-bottom-color:rgba(255,255,255,.3)}
.formcard .field input:focus,.formcard .field textarea:focus{
  border-bottom-color:var(--ink);box-shadow:0 1px 0 0 var(--ink);
}
body.night .formcard .field input:focus,body.night .formcard .field textarea:focus{
  border-bottom-color:#f2f2f0;box-shadow:0 1px 0 0 #f2f2f0;
}
.formcard .field input:user-invalid,.formcard .field textarea:user-invalid{border-bottom-color:#c1005f}
.formcard .field .err{color:#c1005f}
body.night .formcard .field input:user-invalid,body.night .formcard .field textarea:user-invalid,
body.night .formcard .field .err{color:var(--pink);border-bottom-color:var(--pink)}

/* Chrome faerbt ausgefuellte Felder sonst weiss ein. */
.formcard input:-webkit-autofill{
  -webkit-text-fill-color:currentColor;
  transition:background-color 100000s ease-in-out 0s;
}

.formcard .form .note{color:rgba(17,21,20,.72)}
body.night .formcard .form .note{color:rgba(255,255,255,.7)}
.formcard .button{background:var(--ink);color:#f2f2f0}
body.night .formcard .button{background:#f2f2f0;color:#111514}

.formcard .formmsg.show{margin-bottom:22px}
.formcard .formmsg.ok{background:rgba(255,255,255,.72);border-color:rgba(17,21,20,.28)}
.formcard .formmsg.bad{background:rgba(255,45,152,.16);border-color:rgba(193,0,95,.55)}
body.night .formcard .formmsg.ok{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3)}
body.night .formcard .formmsg.bad{background:rgba(255,45,152,.2);border-color:rgba(255,45,152,.5)}

.formmsg{
  display:none;border-radius:16px;padding:16px 20px;font-size:15px;line-height:1.5;
  border:1px solid transparent;
}
.formmsg.show{display:block}
.formmsg.ok{background:rgba(156,197,177,.22);border-color:rgba(156,197,177,.55)}
.formmsg.bad{background:rgba(255,45,152,.08);border-color:rgba(255,45,152,.45)}

/* --- Karte --- */
.mapwrap{
  position:relative;border-radius:24px;overflow:hidden;
  isolation:isolate; /* eigener Stapelkontext: Leaflet-Ebenen (z-index bis 1000) bleiben unter der Navigation */
  aspect-ratio:12/5;max-height:520px;background:var(--band-paper);
  box-shadow:0 1px 0 rgba(0,0,0,.06);
}
@media (max-width:760px){.mapwrap{aspect-ratio:1;max-height:none}}
.mapwrap .map{position:absolute;inset:0}
.mapwrap .mapnote{
  position:absolute;z-index:500;left:18px;bottom:18px;
  background:rgba(248,248,248,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-radius:14px;padding:12px 16px;font-size:14px;line-height:1.4;
  box-shadow:0 6px 24px rgba(0,0,0,.14);max-width:min(64%,320px);
}
body.night .mapwrap .mapnote{background:rgba(20,21,23,.9);box-shadow:0 6px 24px rgba(0,0,0,.5)}
.mapwrap .mapnote b{display:block;font-size:15px}
.mapwrap .mapnote span{display:block;color:var(--muted)}
body.night .mapwrap .mapnote span{color:rgba(255,255,255,.62)}
.mapwrap .mapnote a{display:inline-block;margin-top:8px;font-weight:700;font-size:13px;color:inherit;
  border-bottom:1px solid currentColor}

/* Die OSM-Standardkachel ist bunt. Hier wird sie auf den Seitenton gezogen:
   tagsüber entfärbt und leicht ins Papierwarme, nachts invertiert statt abgedunkelt —
   sonst bleibt die Schrift schwarz auf dunkelgrau und ist nicht mehr lesbar. */
.leaflet-tile-pane{filter:grayscale(1) sepia(.14) brightness(1.04) contrast(.9)}
body.night .leaflet-tile-pane{filter:grayscale(1) invert(.92) brightness(.92) contrast(.86)}
.leaflet-container{background:var(--band-paper);font:inherit}
.leaflet-control-attribution{font-size:10px;background:rgba(248,248,248,.8)!important;color:var(--muted)}
body.night .leaflet-control-attribution{background:rgba(20,21,23,.8)!important;color:rgba(255,255,255,.55)}
.leaflet-control-attribution a{color:inherit;text-decoration:underline}
.leaflet-control-zoom a{
  background:rgba(248,248,248,.94)!important;color:var(--ink)!important;
  border:0!important;box-shadow:0 2px 10px rgba(0,0,0,.12);
}
body.night .leaflet-control-zoom a{background:rgba(20,21,23,.94)!important;color:#f2f2f0!important}
.leaflet-bar{border:0!important;border-radius:12px;overflow:hidden}

.pin{width:26px;height:26px;border-radius:50%;
  background:linear-gradient(135deg,var(--pink),var(--blue));
  box-shadow:0 0 0 5px rgba(248,248,248,.9),0 6px 20px rgba(0,0,0,.3)}
body.night .pin{box-shadow:0 0 0 5px rgba(16,17,19,.9),0 6px 20px rgba(0,0,0,.6)}

/* Erst laden, wenn der Besucher hinschaut */
.mapwrap.idle .map{display:none}
.mapwrap.idle:before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,rgba(0,0,0,.02) 0 12px,transparent 12px 24px);
}

@media (max-width:900px){
  .contact-grid{grid-template-columns:1fr}
  .form .pair{grid-template-columns:1fr}
}