/* Shared base of the portal drafts: house fonts (self-hosted, taken from the sites themselves) and house colours. */
@font-face { font-family: "Montserrat"; src: url("fonts/montserrat.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Source Sans Pro"; src: url("fonts/sourcesans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Source Sans Pro"; src: url("fonts/sourcesans-300.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Lato"; src: url("fonts/lato-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Lato"; src: url("fonts/lato-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Afacad Flux"; src: url("fonts/afacad-flux.woff2") format("woff2"); font-weight: 100 1000; font-display: swap; }
@font-face { font-family: "Dancing Script"; src: url("fonts/dancing-script.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  /* colours as the four sites use them (read on 04.10.2026) */
  --orb: #00a650; --orb-dunkel: #00703a;
  --gfd: #005190; --gfd-dunkel: #003a68;
  --hot: #379237; --hot-hell: #54b435; --hot-dunkel: #0c1406; --hot-creme: #fffaf0;
  --fgg: #26517e; --fgg-dunkel: #1b3a5b; --fgg-grund: #f5f7f2;
  --text: #2f3b40; --text-leise: #5f6b70;
  --schrift: "Source Sans Pro", "Segoe UI", Arial, sans-serif;
  --titel: "Montserrat", "Segoe UI", Arial, sans-serif;
  --weich: cubic-bezier(.2, .8, .2, 1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--schrift); color: var(--text); line-height: 1.5; }
img { display: block; max-width: 100%; }
a { color: inherit; }

/* house typography on the cards */
.orb .ort { font-family: "Montserrat", sans-serif; font-weight: 700; }
.gfd .ort { font-family: "Lato", sans-serif; font-weight: 700; }
.hot .ort { font-family: "Montserrat", sans-serif; font-weight: 600; }
.hot .zeile { font-family: "Dancing Script", cursive; font-size: 1.3em; line-height: 1.2; }
.fgg .ort, .fgg .zeile { font-family: "Afacad Flux", sans-serif; }

.fuss { text-align: center; font-size: 14px; color: var(--text-leise); padding: 28px 16px 36px; }
.fuss a { margin: 0 10px; }
.skizze { position: fixed; right: 12px; bottom: 12px; background: #263238; color: #fff; font: 600 12px/1 var(--titel);
  padding: 8px 12px; border-radius: 20px; opacity: .85; z-index: 50; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Draft A: four equal cards (Bad Orb, Gersfeld, Frankfurt, Hotel); grid-auto-rows keeps every row as tall as the tallest,
   so the row block must not get a fixed height (no flex: 1, auto margins centre it instead).
   Motion (operator 04.10.): the cards slide in once (assets/portal.js), afterwards they stay still and only grow under the mouse. */
html, body { overflow-x: clip; }
body { background: #f4f1ea; min-height: 100vh; display: flex; flex-direction: column; }
.kopf { text-align: center; padding: clamp(32px, 5vh, 64px) 16px clamp(16px, 3vh, 36px); }
.kopf .dach { font: 700 clamp(12px, .8vw, 15px)/1 var(--titel); letter-spacing: .28em; text-transform: uppercase; color: var(--orb-dunkel); }
.kopf h1 { font: 700 clamp(28px, 2.9vw, 52px)/1.15 var(--titel); margin: .35em 0 .3em; color: #1c2a2f; }
.kopf p { margin: 0; color: var(--text-leise); font-size: clamp(16px, 1.15vw, 21px); font-weight: 300; }

.karten { flex: none; margin: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; align-items: stretch; align-content: center;
  gap: clamp(18px, 1.8vw, 36px); width: min(1720px, 100%); padding: 28px clamp(16px, 3vw, 56px) 20px; --rein: 140px; }
.karte { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: 18px; overflow: hidden;
  text-decoration: none; box-shadow: 0 2px 6px rgba(0,0,0,.06), 0 12px 28px rgba(20,30,35,.08);
  transition: transform .45s var(--weich), box-shadow .45s var(--weich); }
.karte .bild { height: clamp(190px, 14.5vw, 330px); background: var(--bild) center/cover; }
.karte .schild { position: relative; z-index: 1; margin: -46px 18px 0; background: #fff; border-radius: 12px; padding: 14px 16px;
  height: clamp(84px, 6.4vw, 120px); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,.10); }
.karte .schild img { max-width: 100%; max-height: 100%; object-fit: contain; }
.karte.fgg .schild { padding: 10px 12px; }
.karte.hot .schild { background: var(--hot-dunkel); }
.karte .text { flex: 1; display: flex; flex-direction: column; padding: 18px 22px 28px; }
.karte .ort { display: block; font-size: clamp(19px, 1.35vw, 26px); color: var(--farbe); }
.karte .zeile { display: block; color: var(--text); margin-top: 4px; font-size: clamp(15px, 1vw, 18px); }
.karte.hot .zeile { font-size: clamp(20px, 1.35vw, 26px); line-height: 1.25; }
.karte .weiter { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 14px;
  font: 600 clamp(15px, .95vw, 18px)/1 var(--titel); color: var(--farbe); }
.orb { --farbe: var(--orb); } .gfd { --farbe: var(--gfd); } .hot { --farbe: var(--hot); } .fgg { --farbe: var(--fgg); }
.karte .weiter::after { content: "→"; }
.karte .balken { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--farbe); }

/* the card under the pointer (or with keyboard focus) only grows, nothing else moves */
.karte:hover, .karte:focus-visible { transform: scale(1.06); z-index: 3; outline: none;
  box-shadow: 0 6px 14px rgba(0,0,0,.08), 0 30px 54px rgba(20,30,35,.20); }
.karte:focus-visible { box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--farbe); }

/* slide in once: only with the script, so the page never stays empty without it */
.bewegt .karte:not(.da) { opacity: 0; }
.bewegt .karte.da { animation: rein 1.1s cubic-bezier(.2, .9, .3, 1.15) backwards; }
@keyframes rein {
  from { opacity: 0; translate: calc(var(--von, 1) * var(--rein)) 70px; rotate: calc(var(--von, 1) * 7deg); }
  to { opacity: 1; translate: 0 0; rotate: 0deg; }
}
@media (min-width: 1001px) { .bewegt .karte.da { animation-delay: calc(var(--i, 0) * 130ms); } }

/* narrow screens: two by two in the same order */
@media (max-width: 1000px) {
  .karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .karte .bild { height: 220px; } .karte .schild { height: 100px; }
}
/* phone: one column in the same order */
@media (max-width: 640px) {
  .karten { grid-template-columns: 1fr; gap: 22px; --rein: 70px; }
  .karte .bild { height: 190px; }
}
@media (prefers-reduced-motion: reduce) {
  .karte, .karte:hover { transform: none; transition: none; }
}

/* card photos */
.karte.orb { --bild: url("orb-haus.jpg"); }
.karte.gfd { --bild: url("gfd-haus.jpg"); }
.karte.fgg { --bild: url("fgg-luft.jpg"); }
.karte.hot { --bild: url("hot-wald.jpg"); }