/* ═══════════════════════════════════════════════════════════════════════
   FranchLabs GuideBooking — gemeinsame Basis
   Richtung D „Lagebericht", Werte aus den Entwurfsdateien uebernommen.

   Enthaelt Schriften, Farbwerte, Grundlagen und alle Bausteine, die auf
   mehr als einer Seite vorkommen. Seitenspezifisches steht in der jeweils
   eigenen Datei daneben.

   Keine fremden Hosts, kein style-Attribut, kein <style>-Block: die
   Content Security Policy der Produktionsdomain laesst nichts davon zu.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Schriften ───────────────────────────────────────────────────────────
   Beide Dateien sind variable Fonts (fvar/gvar/avar/STAT nachgewiesen).
   Eine Datei je Zeichensatzbereich deckt deshalb die ganze Gewichtsachse
   ab - 400 bis 800 ohne zusaetzliches Byte. Der Zeichensatz ist wie bei
   Google Fonts in latin und latin-ext geteilt, damit Geraete mit rein
   lateinischem Text die kleinere Datei laden. */

@font-face{
  font-family:'Archivo';
  src:url(fonts/Archivo-500-latin.woff2) format('woff2');
  font-weight:400 800;font-style:normal;font-stretch:100%;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
    U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Archivo';
  src:url(fonts/Archivo-500-latin-ext.woff2) format('woff2');
  font-weight:400 800;font-style:normal;font-stretch:100%;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
    U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Sans';
  src:url(fonts/IBMPlexSans-400-latin.woff2) format('woff2');
  font-weight:400 600;font-style:normal;font-stretch:100%;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
    U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Sans';
  src:url(fonts/IBMPlexSans-400-latin-ext.woff2) format('woff2');
  font-weight:400 600;font-style:normal;font-stretch:100%;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
    U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ── Farbwerte ───────────────────────────────────────────────────────────
   Farbregel aus der Uebergabe: Teal heisst fertig, bestaetigt, aktiv.
   Bernstein heisst offen, unfertig, in Entwicklung. Das gilt ueberall -
   Statuspillen, Fortschritt, Anzahlungsstand, Entwurfskennzeichnung.
   Nie mischen.

   Richtung D ist bewusst eine helle Fassung. Es gibt keine dunkle
   Palette, weil in den Entwuerfen keine festgelegt wurde; color-scheme
   sagt das dem Browser ausdruecklich, damit er nichts erzwingt. */

:root{
  color-scheme:light;

  --paper:#F4F4F2;
  --card:#FFFFFF;
  --card-alt:#EFEFEC;
  --line:#DEDEDA;
  --line-strong:#C8C9C5;
  --line-dark:#2E353B;

  --ink:#17181A;
  --text:#2B2D30;
  --muted:#5C6064;
  --faint:#A9ACAF;
  --dim:#C2C7C3;

  --accent:#0F5A63;
  --accent-dark:#0B454C;
  --accent-bg:#E4F0F1;

  --todo:#D9A227;
  --todo-text:#8A6212;
  --todo-bg:#FBF3E0;

  --radius:10px;
  --shadow:0 1px 2px rgba(23,24,26,.05),0 8px 24px rgba(23,24,26,.06);
  --shadow-lift:0 1px 2px rgba(23,24,26,.05),0 8px 24px rgba(23,24,26,.14);
  --shadow-card:0 1px 2px rgba(23,24,26,.05),0 12px 32px rgba(23,24,26,.10);

  --f-head:'Archivo',system-ui,sans-serif;
  --f-body:'IBM Plex Sans',system-ui,sans-serif;

  --t-h1:clamp(2.15rem,7vw,4.1rem);
  --t-h2:clamp(1.65rem,4vw,2.6rem);
  --t-lead:clamp(1.05rem,2.2vw,1.3rem);
  --t-label:.75rem;

  --gutter:clamp(20px,4vw,32px);
  --sec-y:clamp(56px,8vw,104px);
  --gap-col:clamp(20px,4vw,56px);
  --maxw:1120px;
}

/* ── Grundlagen ──────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--text);
  font:400 1rem/1.6 var(--f-body);-webkit-font-smoothing:antialiased;
  overflow-x:hidden;text-wrap:pretty}

h1,h2,h3,h4{font-family:var(--f-head);color:var(--ink);margin:0;
  letter-spacing:-.025em;text-wrap:balance}
h1{font-weight:800;font-size:var(--t-h1);line-height:1.02;letter-spacing:-.03em;
  max-width:18em}
h2{font-weight:700;font-size:var(--t-h2);line-height:1.08}
h3{font-weight:700;font-size:1.15rem;line-height:1.25;letter-spacing:-.02em}
h4{font-weight:700;font-size:1.05rem;line-height:1.3;letter-spacing:-.02em}

p{margin:0 0 1em}
p:last-child{margin-bottom:0}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-dark)}
strong,b{font-family:var(--f-head);font-weight:700;color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
::selection{background:var(--accent-bg);color:var(--ink)}
img,svg{max-width:100%;height:auto;display:block}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;
    scroll-behavior:auto!important}
}

/* ── Flaechen und Raster ─────────────────────────────────────────────── */
.wrap{max-width:var(--maxw);margin-inline:auto}
.sec{padding:var(--sec-y) var(--gutter);border-bottom:1px solid var(--line)}
.sec--card{background:var(--card)}
.sec--paper{background:var(--paper)}
.sec--last{border-bottom:0}

/* Dunkle Flaeche - traegt die Festlegungen */
.sec--ink{background:var(--ink);color:var(--dim);border-bottom:0}
.sec--ink h2,.sec--ink h3{color:var(--paper)}
.sec--ink .eyebrow{color:var(--todo)}
.sec--ink .head>p{color:var(--faint)}
.sec--ink strong{color:var(--paper)}

/* Teal-Flaeche - traegt den Aufruf zum Fragebogen */
.sec--accent{background:var(--accent);color:#FFFFFF;border-bottom:0}
.sec--accent h2{color:#FFFFFF;font-weight:800;letter-spacing:-.03em;
  font-size:clamp(1.8rem,4.4vw,2.9rem);line-height:1.05}
.sec--accent .eyebrow{color:rgba(255,255,255,.75)}

/* Zweispaltiger Abschnittskopf, bricht ohne Media Query */
.head{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:var(--gap-col);align-items:end;margin-bottom:clamp(28px,4vw,44px)}
.head--tight{margin-bottom:clamp(24px,4vw,40px)}
.head>p{margin:0;color:var(--muted)}

.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:clamp(28px,5vw,64px);align-items:start}
.split--mid{align-items:center}

/* ── Bausteine ───────────────────────────────────────────────────────── */
.eyebrow{font-family:var(--f-head);font-weight:600;font-size:var(--t-label);
  letter-spacing:.1em;text-transform:uppercase;color:var(--accent);
  margin:0 0 14px}

.lead{font-size:var(--t-lead);line-height:1.55;color:var(--text);max-width:34em}

.pull{font-family:var(--f-head);font-weight:700;
  font-size:clamp(1.25rem,2.6vw,1.6rem);line-height:1.25;letter-spacing:-.02em;
  color:var(--ink);padding-left:18px;border-left:3px solid var(--accent);
  margin:0 0 24px}

.note{background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px 20px}
.sec--paper .note{background:var(--card)}

/* Gestrichelter Kasten fuer alles Unfertige, mit Bernsteinkante */
/* Die Bernsteinkante liegt absolut, der Kasten ist ein normaler Block.
   Vorher war er ein Flex-Kasten: dann wird jedes <strong> oder <a> im
   Text zu einer eigenen Spalte neben dem Absatz, und der Satz zerfaellt
   in Saeulen. Genau das ist am 08.09.2026 auf der Startseite passiert. */
.todo{position:relative;display:block;font-size:.9rem;
  line-height:1.5;color:var(--muted);margin:0;padding:14px 16px 14px 31px;
  background:var(--paper);border:1px dashed var(--line-strong);
  border-radius:var(--radius);max-width:46em}
.todo::before{content:"";position:absolute;left:16px;top:14px;bottom:14px;
  width:3px;border-radius:2px;background:var(--todo-text)}

.status{display:inline-flex;align-items:center;gap:9px;background:var(--todo-bg);
  border:1px solid rgba(217,162,39,.25);padding:7px 14px;border-radius:100px;
  font-family:var(--f-head);font-weight:600;font-size:var(--t-label);
  letter-spacing:.08em;text-transform:uppercase;color:var(--todo-text)}
.status::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--todo-text);flex:none}

/* Kennzeichnung „Entwurf" - klein, in Kartenkoepfen */
.tag-draft{font-family:var(--f-head);font-weight:700;font-size:.65rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--todo-text);
  background:var(--todo-bg);padding:4px 8px;border-radius:100px}

/* ── Schaltflaechen ──────────────────────────────────────────────────────
   Trefferhoehen sind Vorgabe, nicht Geschmack: 44 px Minimum,
   Handlungsaufforderungen 48 px, die Hauptaufforderung 52 px. */
.btn{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 18px;border:0;border-radius:var(--radius);
  background:var(--accent);color:#FFFFFF;cursor:pointer;
  font-family:var(--f-head);font-weight:600;font-size:.9rem;
  text-align:center}
.btn:hover{background:var(--accent-dark);color:#FFFFFF}
.btn--lg{min-height:48px;padding:0 24px;font-size:1rem;box-shadow:var(--shadow)}
.btn--xl{min-height:52px;padding:0 22px;font-size:1.05rem;font-weight:700;
  width:100%}
.btn--ghost{background:var(--card);color:var(--ink);
  border:1px solid var(--line-strong);box-shadow:none}
.btn--ghost:hover{background:var(--card);border-color:var(--accent);
  color:var(--accent)}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* ── Kartenraster ────────────────────────────────────────────────────────
   Das Haarlinienraster kommt ohne Schatten aus: die Linien entstehen aus
   dem Hintergrund, den die Luecken freilassen. */
.grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(272px,100%),1fr))}
.grid--facts{grid-template-columns:repeat(auto-fit,minmax(min(96px,100%),1fr))}
.grid>*{background:var(--card);padding:24px 22px 26px}
.grid--facts>*{padding:18px 16px}
.grid--3>*:hover{background:#FAFBF9}

.cards{display:grid;gap:clamp(16px,2.5vw,22px);
  grid-template-columns:repeat(auto-fit,minmax(min(288px,100%),1fr))}
.card{background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:24px 22px 26px}
.card--sunk{background:var(--paper)}
.card--pad{padding:clamp(22px,3vw,30px) clamp(20px,2.5vw,28px) clamp(24px,3vw,32px);
  display:flex;flex-direction:column}

.num{font-family:var(--f-head);font-weight:700;font-size:.72rem;
  letter-spacing:.08em;color:var(--accent);flex:none}

/* ── Kopf- und Fusszeile ─────────────────────────────────────────────── */
.top{position:sticky;top:0;z-index:50;background:rgba(244,244,242,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top-in{max-width:var(--maxw);margin-inline:auto;
  padding:10px var(--gutter);display:flex;align-items:center;
  justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand-mark{width:26px;height:26px;border-radius:7px;background:var(--accent);
  color:#FFFFFF;flex:none;display:grid;place-items:center;
  font-family:var(--f-head);font-weight:800;font-size:13px}
.brand-name{font-family:var(--f-head);font-weight:700;font-size:.95rem;
  letter-spacing:-.01em;color:var(--ink);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.brand-name span{font-weight:500;color:var(--muted)}

/* Sprachwahl in der Kopfzeile. Die aktuelle Sprache ist keine Verknuepfung,
   sondern eine Beschriftung - ein Link auf die Seite, auf der man steht,
   ist eine Falle. */
.langs{display:flex;align-items:center;gap:2px;flex:none;margin-left:auto}
.langs a,.langs span{display:inline-flex;align-items:center;justify-content:center;
  min-height:36px;min-width:36px;padding:0 7px;border:1px solid transparent;
  font-family:var(--f-head);font-weight:700;font-size:.78rem;color:var(--muted)}
.langs a:hover{color:var(--accent-dark);border-color:var(--line-strong)}
.langs .is-on{color:var(--ink);background:var(--card);border-color:var(--line-strong)}

/* Am Handy wird es in der Kopfzeile eng: drei Sprachen, ein Knopf und der
   Name passen nicht nebeneinander. Das Zeichen bleibt, der Schriftzug geht. */
@media (max-width:560px){
  .top-in{gap:8px}
  .brand-name{display:none}
}

.foot{background:var(--ink);color:var(--paper);
  padding:clamp(40px,6vw,56px) var(--gutter) 32px}
.foot-in{max-width:var(--maxw);margin-inline:auto}
.foot-top{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
  gap:24px;padding-bottom:26px;border-bottom:1px solid var(--line-dark)}
.foot-brand{font-family:var(--f-head);font-weight:700;font-size:1.05rem;
  margin:0 0 7px;color:var(--paper)}
.foot-brand span{font-weight:500;color:var(--faint)}
.foot p{color:var(--faint);font-size:.92rem;margin:0}
.foot-col{display:grid;gap:6px;align-content:start;font-size:.9rem;
  color:var(--faint)}
/* Auch hier volle Trefferhoehe: eine Mailadresse im Fuss wird am Handy
   angetippt, nicht abgelesen. */
.foot-col a{color:var(--todo);display:inline-flex;align-items:center;
  min-height:44px}
.foot-col a:hover{color:var(--paper)}
.foot-bottom{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
  gap:18px 32px;padding-top:22px}
.foot-legal{font-size:.85rem;line-height:1.55;max-width:52em}
.foot-links{display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.foot-links a{display:inline-flex;align-items:center;min-height:44px;
  font-size:.88rem;color:var(--faint)}
.foot-links a:hover{color:var(--paper)}

/* ── Rechtstextseiten ────────────────────────────────────────────────────
   Impressum und Datenschutzerklaerung brauchen darueber hinaus nichts.
   Ihr Inhalt bleibt unveraendert, er steht unter anwaltlicher Pruefung. */
.legal{max-width:76ch;margin-inline:auto;padding:clamp(40px,6vw,72px) var(--gutter)}
.legal h1{font-size:clamp(1.9rem,5vw,2.8rem);margin-bottom:.6em}
.legal h2{font-size:clamp(1.2rem,2.6vw,1.5rem);margin:2em 0 .6em}
.legal h3{font-size:1.05rem;margin:1.6em 0 .5em}
.legal p,.legal li{color:var(--text);line-height:1.7}
.legal ul{padding-left:1.2em;margin:0 0 1em}
.legal li{margin-bottom:.4em}
.legal a{border-bottom:1px solid rgba(15,90,99,.4)}
.legal .back{display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--f-head);font-weight:600;font-size:.9rem;margin-bottom:1.5em}
.legal .meta{color:var(--muted);font-size:.9rem}
.legal dl{display:grid;gap:0;margin:0 0 1.5em;
  border-top:1px solid var(--line)}
.legal dt{font-family:var(--f-head);font-weight:600;font-size:.9rem;
  color:var(--muted);padding:12px 0 0}
.legal dd{margin:0;padding:0 0 12px;color:var(--ink);
  border-bottom:1px solid var(--line)}
@media(min-width:38rem){
  .legal dl{grid-template-columns:minmax(11rem,auto) 1fr}
  .legal dt{padding:12px 16px 12px 0;border-bottom:1px solid var(--line)}
  .legal dd{padding:12px 0}
}
.legal table{width:100%;border-collapse:collapse;margin:0 0 1.5em;font-size:.95rem}
.legal th,.legal td{text-align:left;vertical-align:top;padding:10px 12px;
  border:1px solid var(--line)}
.legal th{background:var(--card-alt);font-family:var(--f-head);font-weight:600;
  color:var(--ink)}
.legal-scroll{overflow-x:auto}