/* FeWo-Prototyp "Urban & Minimal" — eigenstaendig, keine Fremd-CDNs.
   Gleiche Substanz wie fewo-chalet, andere Haltung: hoher Kontrast,
   enge Typografie, Fakten vor Stimmung. */

:root {
  --bg:      #ffffff;
  --bg-2:    #f4f4f5;
  --tinte:   #101012;
  --tinte-2: #52525b;
  --linie:   #e1e1e6;
  --akzent:  #1d4ed8;
  --radius:  6px;
  --max:     1140px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--tinte);
  font-family: 'Satoshi','Helvetica Neue',Arial,sans-serif;
  font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
h1,h2,h3 { font-family: 'Cabinet Grotesk','Helvetica Neue',Arial,sans-serif;
  font-weight: 900; line-height: 1.02; margin: 0 0 .5em; letter-spacing: -0.035em; }
h1 { font-size: clamp(2.6rem, 7vw, 5rem); text-transform: uppercase; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); text-transform: uppercase; }
h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
a { color: inherit; }
img { max-width: 100%; display: block; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 22px; }
.abschnitt { padding: clamp(52px,7vw,96px) 0; }
.auge { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--akzent); font-weight: 700; margin-bottom: 10px; }
.mute { color: var(--tinte-2); }

.demo-band { background: var(--tinte); color: #fff; font-size: .76rem;
  padding: 9px 22px; text-align: center; position: sticky; top: 0; z-index: 60; }
.demo-band a { color: #93b4ff; font-weight: 700; }

.kopf { border-bottom: 1px solid var(--linie); position: sticky; top: 33px; background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px); z-index: 50; }
.kopf .wrap { display: flex; align-items: center; justify-content: space-between; height: 62px; gap: 20px; }
.marke { font-family: 'Cabinet Grotesk',sans-serif; font-weight: 900; text-transform: uppercase;
  letter-spacing: -0.02em; font-size: 1rem; }
.kopf nav { display: flex; gap: 22px; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.kopf nav a { text-decoration: none; color: var(--tinte-2); }
.kopf nav a:hover { color: var(--tinte); }
@media (max-width: 760px){ .kopf nav { display: none; } }

.hero { padding: clamp(40px,6vw,80px) 0 0; }
.hero-bild { margin-top: 34px; border-radius: var(--radius); overflow: hidden; }
.hero-bild img { width: 100%; height: clamp(260px,42vw,460px); object-fit: cover; }
.hero h1 span { color: var(--akzent); }

.knopf { display: inline-block; background: var(--tinte); color: #fff; text-decoration: none;
  padding: 13px 26px; border-radius: var(--radius); font-weight: 700; font-size: .8rem;
  letter-spacing: .06em; text-transform: uppercase; border: 0; cursor: pointer; }
.knopf:hover { background: var(--akzent); }
.knopf.rand { background: transparent; color: var(--tinte); border: 1px solid var(--linie); }

.fakten { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
  border-top: 1px solid var(--linie); border-left: 1px solid var(--linie); }
.fakten div { border-right: 1px solid var(--linie); border-bottom: 1px solid var(--linie); padding: 22px; }
.fakten .zahl { font-family: 'Cabinet Grotesk',sans-serif; font-weight: 900; font-size: 1.9rem; letter-spacing: -0.03em; }
.fakten .bez { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--tinte-2); margin-top: 4px; }

.galerie { display: grid; grid-template-columns: repeat(auto-fit,minmax(215px,1fr)); gap: 10px; }
.galerie figure { margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--bg-2); }
.galerie img { width: 100%; height: 215px; object-fit: cover; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px,4vw,56px); align-items: start; }
@media (max-width: 840px){ .split { grid-template-columns: 1fr; } }

.liste { list-style: none; padding: 0; margin: 0; font-size: .95rem; }
.liste li { padding: 9px 0; border-bottom: 1px solid var(--linie); display: flex; justify-content: space-between; gap: 16px; }
.liste li span:last-child { color: var(--tinte-2); text-align: right; }

/* Kalender */
.kal { border: 1px solid var(--linie); border-radius: var(--radius); padding: 22px; }
.kal-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.kal-kopf button { background: var(--bg-2); border: 1px solid var(--linie); border-radius: var(--radius);
  width: 34px; height: 34px; cursor: pointer; color: var(--tinte); }
.kal-monat { font-family: 'Cabinet Grotesk',sans-serif; font-weight: 900; text-transform: uppercase; font-size: .95rem; }
.kal-raster { display: grid; grid-template-columns: repeat(7,1fr); gap: 3px; }
.kal-wt { text-align: center; font-size: .64rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--tinte-2); padding-bottom: 6px; }
.kal-tag { aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius); font-size: .84rem; cursor: pointer; }
.kal-tag.leer { cursor: default; }
.kal-tag.frei:hover { background: var(--bg-2); }
.kal-tag.belegt { background: var(--bg-2); color: #b6b6bd; cursor: not-allowed; text-decoration: line-through; }
.kal-tag.vergangen { color: #cfcfd6; cursor: not-allowed; }
.kal-tag.gewaehlt { background: var(--akzent); color: #fff; font-weight: 700; }
.kal-tag.spanne { background: rgba(29,78,216,.12); }
.kal-legende { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px; font-size: .72rem; color: var(--tinte-2); }
.kal-legende span { display: flex; align-items: center; gap: 6px; }
.punkt { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.kal-ausgabe { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linie); }
.kal-preis { font-family: 'Cabinet Grotesk',sans-serif; font-size: 1.5rem; font-weight: 900; letter-spacing: -0.03em; }

.feld { display: block; margin-bottom: 13px; }
.feld span { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--tinte-2); margin-bottom: 5px; font-weight: 700; }
.feld input, .feld textarea { width: 100%; padding: 11px 13px; border: 1px solid var(--linie);
  border-radius: var(--radius); font: inherit; font-size: .92rem; background: var(--bg); color: var(--tinte); }
.feld input:focus, .feld textarea:focus { outline: 2px solid var(--akzent); outline-offset: 1px; }

footer.fuss { border-top: 1px solid var(--linie); padding: 44px 0; font-size: .86rem; color: var(--tinte-2); }
footer.fuss a { color: var(--akzent); }
footer.fuss .wrap { display: flex; flex-wrap: wrap; gap: 22px; justify-content: space-between; }