/* ════════════════════════════════════════════════════════════════════
   die aussicht — Zwischenseite

   Eigenes, schlankes Stylesheet für die drei Seiten unter /zwischenseite.
   Bewusst NICHT die große styles.css: die trägt 65 KB Regeln für Seiten,
   die es in der Zwischenzeit nicht gibt.

   Alle Farben, Schriftgrößen und Abstände sind wörtlich aus styles.css
   übernommen, damit die Zwischenseite und die spätere Website dieselbe
   Handschrift haben. Wer hier etwas ändert, ändert es dort mit.

   Wenn die neue Website steht: Ordner /zwischenseite löschen und in
   firebase.json "public" wieder auf "." stellen. Sonst bleibt nichts zurück.
   ════════════════════════════════════════════════════════════════════ */

:root{
  --paper:#F3F2EC;        /* Kalkstein */
  --ink:#1F2A24;          /* Tannen-Tinte */
  --ink-soft:#46544C;
  --river:#B7C027;        /* Original-Hellgrün aus dem Logo */
  --river-text:#6A6F17;   /* Grün für Text & Links auf hellem Grund */
  --logo-green:#B8C027;   /* Marken-Grün der Wortmarke */
  --brass:#B08A4C;        /* Messing */
  --line:rgba(31,42,36,.16);
  --line-light:rgba(243,242,236,.22);
  --radius:14px;
  --ease:cubic-bezier(.22,.8,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box}
/* Die Seiten sind kurz. Ohne diesen Satz hinge die dunkle Fußzeile auf großen
   Bildschirmen mitten in der Fläche, mit hellem Rest darunter. So sitzt sie
   immer unten, egal wie wenig darüber steht. */
body{
  font-family:'Karla',system-ui,sans-serif;
  background:var(--paper);
  color:var(--ink);
  font-size:17px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
main{flex:1 0 auto}
::selection{background:var(--river);color:var(--ink)}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:4px}

.wrap{max-width:1180px;margin:0 auto;padding:0 28px}

/* ---------- Typografie ---------- */
/* Optische Größe 72 statt 100 und Gewicht 400 statt 380 — bewusste Abweichung von
   styles.css. Gemessen am 29.08.2026 an der ausgelieferten Fraunces-Datei: Bei
   opsz 100 / 380 ist der Querbalken des „e" am Handy (34 px, 3-fach) 0,82 px dick,
   auf einem Windows-Laptop (56 px, 1-fach) 0,45 px — Android und Windows runden
   solche Haarlinien auf null, aus „Hotel" wird „I Iotel". Bei opsz 72 / 400 sind
   es 2,1 px bzw. 1,16 px. Gewicht allein hilft kaum (500 → 0,95 px); der Sprung
   liegt in der optischen Größe zwischen 84 und 72. Gilt für die spätere Website
   genauso — dort steht dieselbe Einstellung. */
.display{
  font-family:'Fraunces',serif;
  font-weight:400;
  line-height:1.04;
  letter-spacing:-.015em;
  font-variation-settings:"opsz" 72;
}
.display em{font-style:normal;font-weight:400;color:var(--river-text)}
h1.display{font-size:clamp(34px,4.6vw,56px)}
.eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  font-weight:600;color:var(--brass);
}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--brass)}
.lede{font-size:clamp(17px,1.5vw,19px);color:var(--ink-soft);max-width:62ch}

/* ---------- Kopfzeile ----------
   Auf der großen Website liegt der Kopf fest über der Seite und wechselt
   beim Scrollen die Farbe. Hier steht er still: es gibt keine Navigation,
   zu der man scrollen könnte, und damit auch kein JavaScript. */
header{
  background:var(--paper);
  border-bottom:1px solid var(--line);
  padding:20px 0 22px;
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px}
.legal-back{color:var(--ink-soft);text-decoration:none;font-size:14px;font-weight:600;letter-spacing:.02em;white-space:nowrap}
.legal-back:hover{color:var(--ink)}

/* Marke / Logo: Keimling als i-Punkt, über das Wort „aussicht" gezogen */
.brand{display:inline-flex;flex-direction:column;align-items:stretch;text-decoration:none;line-height:1}
.brand .wm{
  position:relative;display:inline-block;
  font-family:'Mulish',system-ui,sans-serif;
  font-size:27px;
  letter-spacing:.13em;white-space:nowrap;
  color:var(--logo-green);
}
.brand .wm-a{font-weight:600}
.brand .wm-b{font-weight:600;color:rgba(106,111,23,.5)}
.brand .wm-sub{
  font-family:'Mulish',system-ui,sans-serif;
  font-size:9px;font-weight:600;letter-spacing:.01em;
  color:rgba(106,111,23,.55);
  margin-top:5px;
  text-align:justify;
  text-align-last:justify;   /* streckt die Zeile auf die Breite von „aussicht" */
}
.brand .ianchor{position:relative;font-style:normal}
/* Der Keimling wird per Maske eingefärbt, nicht als fertiges Bild geladen —
   so nimmt er immer exakt dieselbe Farbe an wie „aus". */
.brand .gull{
  position:absolute;left:50%;pointer-events:none;
  background:var(--logo-green);
  -webkit-mask:url(assets/moewe-weiss.png) no-repeat center/contain;
          mask:url(assets/moewe-weiss.png) no-repeat center/contain;
  aspect-ratio:557 / 111;
  width:3em;bottom:.90em;transform:translateX(-1.1em);
}

/* ---------- Die Nachricht ----------
   Bewusst ohne Foto: die Seite hat genau eine Aufgabe — sagen, dass das Haus
   offen ist, und wie man es erreicht. Ein Bild oben hätte die Nachricht unter
   die Bildschirmkante geschoben. Ohne Bild trägt die Typografie. */
.nachricht{padding:96px 0 8px}
/* Der zweite Satzteil bleibt als Ganzes zusammen: passt er nicht mehr in die
   Zeile, rutscht er komplett in die naechste — statt dass „die" allein oben
   haengen bleibt. Ist er breiter als die Spalte, bricht er innen ganz normal. */
.nachricht h1{margin:16px 0 20px}
.nachricht h1 .satzteil{display:inline-block}
.nachricht .lede + .lede{margin-top:14px}

/* ---------- Kontakt ----------
   Dieselbe Bauform wie die Kontaktliste der großen Website (.c-list):
   Schlagwort links, Angabe rechts, Haarlinie dazwischen. */
/* Breite begrenzt: auf der großen Website steht diese Liste in einer halben
   Spalte neben der Karte. Über die volle Seitenbreite gezogen würden aus den
   Haarlinien lange Tabellenstriche. */
.c-list{display:grid;gap:0;margin-top:38px;border-top:1px solid var(--line);max-width:660px}
.c-list .row{display:grid;grid-template-columns:150px 1fr;gap:20px;padding:16px 0;border-bottom:1px solid var(--line);font-size:15.5px}
.c-list .row b{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.c-list a{color:var(--river-text);font-weight:600;text-decoration:none}
.c-list a:hover{text-decoration:underline}

/* ---------- Englischer Absatz ---------- */
.englisch{padding:48px 0 96px}
.englisch p{font-size:15.5px;color:var(--ink-soft);max-width:62ch}
.englisch p + p{margin-top:10px}
.englisch .eyebrow{margin-bottom:16px}

/* ---------- Fußzeile ---------- */
footer.site{background:var(--ink);color:rgba(243,242,236,.78);padding:64px 0 34px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;padding-bottom:44px;border-bottom:1px solid var(--line-light)}
.foot-grid p{font-size:14.5px;margin-top:14px;max-width:34ch}
.foot-grid h4{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#CBB47F;margin-bottom:16px}
.foot-grid ul{list-style:none;display:grid;gap:10px;font-size:14.5px}
.foot-grid a{text-decoration:none;opacity:.85}
.foot-grid a:hover{opacity:1;text-decoration:underline}
.foot-grid .foot-brand,.foot-grid .foot-brand:hover{opacity:1;text-decoration:none}
.foot-brand .wm{font-size:26px;color:var(--paper)}
.foot-brand .wm-b{color:rgba(243,242,236,.5)}
.foot-brand .gull{background:var(--paper);width:3em;bottom:.90em;transform:translateX(-1.1em)}
.foot-base{display:flex;justify-content:space-between;gap:20px;padding-top:26px;font-size:13px;color:rgba(243,242,236,.5);flex-wrap:wrap}
.foot-social{display:flex;gap:12px;margin-top:20px}
.foot-social a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--line-light);border-radius:50%;color:rgba(243,242,236,.85);opacity:1;transition:color .2s var(--ease),border-color .2s var(--ease)}
.foot-social a:hover{color:#fff;border-color:rgba(243,242,236,.5);text-decoration:none}
.foot-social svg{width:19px;height:19px}

/* ---------- Rechtstexte (Impressum / Datenschutz) ---------- */
.legal{padding:64px 0 88px}
.legal h1{margin:16px 0 22px}
.legal h3{font-family:'Fraunces',serif;font-weight:430;font-size:21px;margin:30px 0 10px;color:var(--ink)}
.legal p{font-size:15px;line-height:1.7;color:var(--ink-soft);max-width:74ch;margin-bottom:12px}
.legal ul{font-size:15px;line-height:1.7;color:var(--ink-soft);max-width:74ch;margin:0 0 12px 20px}
.legal p strong{color:var(--ink)}
.legal a{color:var(--river-text);text-decoration:underline;text-underline-offset:2px}
.legal .legal-intro{font-style:italic;font-size:14px;max-width:74ch}

/* ---------- Seite nicht gefunden ---------- */
.nicht-gefunden{padding:88px 0 96px}
.nicht-gefunden h1{margin:16px 0 20px}
.nicht-gefunden .zurueck{
  display:inline-flex;align-items:center;gap:10px;margin-top:26px;
  padding:15px 28px;border-radius:999px;
  background:var(--river);color:var(--ink);
  font-weight:600;font-size:15px;letter-spacing:.02em;text-decoration:none;
  transition:background .25s var(--ease),transform .25s var(--ease);
}
.nicht-gefunden .zurueck:hover{background:#969D20;transform:translateY(-1px)}

/* ---------- Schmale Fenster ---------- */
@media (max-width:860px){
  .foot-grid{grid-template-columns:1fr;gap:32px}
}
@media (max-width:640px){
  .wrap{padding:0 20px}
  .nachricht{padding-top:56px}
  .nachricht h1{max-width:none}
  .c-list .row{grid-template-columns:1fr;gap:4px}
  .brand .wm{font-size:23px}
  .englisch{padding-bottom:72px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
}