/* Sentavel, Website-Entwurf (Demonstration). Gemeinsame Grundlage beider Varianten.

   Farben, Schriften und eckige Kanten stammen aus der bestehenden Website
   (projekt/site/stil.css und fonts/fonts.css, Stand 05.10.2026). Nichts wird aus dem Netz
   geladen: Die Schriften liegen in ./schriften, Lizenz in schriften/LIZENZ.txt. */

@font-face{font-family:"Fraunces";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("schriften/fraunces-latin.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:100 700;font-display:swap;
  src:url("schriften/ibmplexsans.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("schriften/ibmplexmono-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url("schriften/ibmplexmono-500.woff2") format("woff2")}
@font-face{font-family:"Architects Daughter";font-style:normal;font-weight:400;font-display:swap;
  src:url("schriften/architectsdaughter-latin.woff2") format("woff2")}

:root{
  color-scheme:dark;
  --grund:#171412; --flaeche:#221E1A; --erhoben:#2E2823; --linie:#3A332C; --linieStark:#8A8278;
  --text:#F7F3EA; --leise:#B5ADA0; --sehrLeise:#9A938A; --metall:#F4EFE3; --aufAktion:#171412;
  --frei:#7FB795; --gehalten:#D0AE5D; --abgesagt:#E09B8A; --abwesend:#B0A8C8;
  --freiFlaeche:#13221C; --gehaltenFlaeche:#211D12; --abgesagtFlaeche:#241715; --abwesendFlaeche:#1C1A28;
  --disp:"Fraunces",Georgia,serif;
  --body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --hand:"Architects Daughter",var(--body);
  --ziel:52px;          /* Mindesthoehe fuer alles, was man antippt */
  --breit:720px;        /* Lesebreite des Ablaufs */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:88px}
body{margin:0;background:var(--grund);color:var(--text);font:400 17px/1.55 var(--body);
  -webkit-font-smoothing:antialiased}
[hidden]{display:none !important}
a{color:inherit;text-underline-offset:3px}
img,svg{display:block}
:focus-visible{outline:2px solid var(--metall);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important;scroll-behavior:auto !important}}

/* ── Rahmen ─────────────────────────────────────────────────────────────── */
.sprung{position:absolute;left:12px;top:-60px;background:var(--metall);color:var(--aufAktion);
  padding:12px 16px;font-weight:600;z-index:50;text-decoration:none}
.sprung:focus{top:12px}
.demo{background:var(--gehaltenFlaeche);border-bottom:1px solid #4a3f22;color:var(--text);
  font:500 13px/1.4 var(--mono);letter-spacing:.02em;padding:10px 20px;text-align:center}
.demo b{color:var(--gehalten);font-weight:500;letter-spacing:.12em;text-transform:uppercase;margin-right:8px}
.kopf{position:sticky;top:0;z-index:20;background:rgba(23,20,18,.94);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--linie)}
.kopf-innen{max-width:1080px;margin:0 auto;padding:0 20px;min-height:64px;display:flex;align-items:center;gap:16px}
.marke{display:flex;align-items:center;gap:10px;text-decoration:none;font:600 22px/1 var(--disp);letter-spacing:-.01em}
.marke svg{width:26px;height:24px;fill:var(--metall)}
.kopf nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.kopf nav a,.kopf nav button{min-height:44px;display:inline-flex;align-items:center;padding:0 12px;
  color:var(--leise);text-decoration:none;font:500 15px var(--body);background:none;border:0;cursor:pointer}
.kopf nav a:hover,.kopf nav button:hover{color:var(--text)}
.seite{max-width:var(--breit);margin:0 auto;padding:32px 20px 120px}
.breit{max-width:1080px;margin:0 auto;padding:0 20px}

/* ── Schrift ────────────────────────────────────────────────────────────── */
h1,h2,h3{font-family:var(--disp);font-weight:500;letter-spacing:-.015em;margin:0}
h1{font-size:clamp(36px,8.5vw,64px);line-height:1.04}
h2{font-size:clamp(26px,5.4vw,36px);line-height:1.12}
h3{font-size:22px;line-height:1.2}
.kicker{font:500 12.5px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--leise);margin:0 0 14px}
.leise{color:var(--leise)}
.klein{font-size:14.5px}
p{margin:0 0 12px}

/* ── Knoepfe ────────────────────────────────────────────────────────────── */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--ziel);
  padding:0 24px;border:1px solid var(--metall);background:var(--metall);color:var(--aufAktion);
  font:600 17px var(--body);text-decoration:none;cursor:pointer;border-radius:0;text-align:center}
.knopf:hover{background:#fff;border-color:#fff}
.knopf.zweit{background:transparent;color:var(--text);border-color:var(--linieStark)}
.knopf.zweit:hover{border-color:var(--metall);background:var(--erhoben)}
.knopf.voll{width:100%}
.knopf[disabled]{opacity:.45;cursor:not-allowed}
.textknopf{background:none;border:0;padding:0 2px;min-height:44px;color:var(--text);font:500 15px var(--body);
  text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--linieStark);cursor:pointer}
.textknopf:hover{text-decoration-color:var(--metall)}

/* ── Eingaben ───────────────────────────────────────────────────────────── */
.feld{display:block;margin:0 0 18px}
.feld span{display:block;font:500 13px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--leise);margin-bottom:8px}
.feld small{display:block;color:var(--sehrLeise);font-size:13.5px;margin-top:6px}
input[type=text],input[type=email],input[type=tel],textarea{width:100%;min-height:var(--ziel);padding:13px 15px;
  background:var(--flaeche);border:1px solid var(--linieStark);color:var(--text);font:400 17px/1.4 var(--body);border-radius:0}
textarea{resize:none}
input:focus,textarea:focus{outline:2px solid var(--metall);outline-offset:0;border-color:var(--metall)}
input::placeholder,textarea::placeholder{color:var(--sehrLeise)}

/* ── Chips, Karten, Abzeichen ───────────────────────────────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:44px;padding:0 16px;display:inline-flex;align-items:center;gap:8px;background:var(--flaeche);
  border:1px solid var(--linie);color:var(--text);font:500 15px var(--body);cursor:pointer;border-radius:0}
.chip:hover{border-color:var(--linieStark)}
.chip[aria-pressed=true]{border-color:var(--metall);background:var(--erhoben)}
.karte{background:var(--flaeche);border:1px solid var(--linie);padding:20px}
.karte+.karte{margin-top:12px}
.wahl{display:block;width:100%;text-align:left;color:inherit;font:inherit;cursor:pointer}
.wahl:hover{border-color:var(--linieStark)}
.wahl[aria-pressed=true],.wahl[aria-checked=true]{border-color:var(--metall);box-shadow:inset 0 0 0 1px var(--metall)}
.abz{display:inline-flex;align-items:center;gap:7px;font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  padding:7px 10px;border:1px solid currentColor}
.abz::before{content:"";width:8px;height:8px;background:currentColor;flex:none}
.abz.buchbar{color:var(--frei)}
.abz.anfrage{color:var(--abwesend)}
.abz.besichtigung{color:var(--gehalten)}
.abz.offen{color:var(--gehalten)}
.abz.weg{color:var(--abgesagt)}
.abz.nicht{color:var(--sehrLeise)}

/* Angaben als Zeilen: Bezeichnung links, Wert rechts */
.zeilen{margin:0;display:grid;grid-template-columns:auto 1fr;gap:10px 18px}
.zeilen dt{font:500 12.5px/1.9 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--leise)}
.zeilen dd{margin:0;text-align:right}

/* Untere Leiste fuer die Hauptaktion am Telefon */
.aktion{position:sticky;bottom:0;z-index:15;margin:24px -20px -120px;padding:14px 20px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,var(--grund) 75%,rgba(23,20,18,0));}
.aktion .knopf{width:100%}

/* Statusmeldungen */
.status{display:flex;gap:14px;align-items:flex-start;padding:18px;border:1px solid var(--linie);background:var(--flaeche)}
.status .zeichen{flex:none;width:28px;height:28px;display:grid;place-items:center;font:600 15px var(--mono);
  color:var(--aufAktion);background:var(--leise)}
.status.gut .zeichen{background:var(--frei)}
.status.halb .zeichen{background:var(--gehalten)}
.status.schlecht .zeichen{background:var(--abgesagt)}
.lader{width:28px;height:28px;border:3px solid var(--linie);border-top-color:var(--metall);border-radius:50%;
  animation:drehen 1s linear infinite;flex:none}
@keyframes drehen{to{transform:rotate(360deg)}}

/* Fuss */
.fuss{border-top:1px solid var(--linie);margin-top:64px;padding:28px 20px 48px;color:var(--sehrLeise);font-size:14px}
.fuss nav{display:flex;flex-wrap:wrap;gap:4px 18px;margin-bottom:12px}
.fuss a{color:var(--leise);min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}