/* Firmament-Haut für alle Unterseiten (Erstgespräch, Termin, Danke, Absage, Team, Angebote, Rechtliches).
   Liegt NACH styles.css und stellt nur Gestaltung um: Farb-Rollen, Schrift, Kanten, Kopf und Fuß.
   Logik, IDs und Klassen der Seiten bleiben unverändert. Kein Gold (Okan 11.10.2026), Amethyst als Licht. */

/* Volle Achsen der Hausschrift (styles.css klemmt sie auf 400–500) */
@font-face {
  font-family: "Google Sans Flex";
  src: url("../fonts/google-sans-flex-latin.woff2") format("woff2");
  font-weight: 1 1000; font-stretch: 25% 151%; 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: "Google Sans Flex";
  src: url("../fonts/google-sans-flex-latin-ext.woff2") format("woff2");
  font-weight: 1 1000; font-stretch: 25% 151%; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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;
}

:root {
  --papier: #F7F3EA; --karte: #FBF9F4; --karte-2: #F0EBDF; --tinte: #211B43; --tinte-2: #514B6E; --tinte-3: #7D7893;
  --nacht: #100D24; --am: #5A45D4; --am-hell: #E9E4FB; --am-n: #B3A1FF;
  --linie: rgba(33, 27, 67, .15); --linie-fein: rgba(33, 27, 67, .08);

  --theme-background: var(--papier);
  --theme-surface-on-surface: var(--tinte);
  --theme-surface-on-surface-variant: var(--tinte-2);
  --theme-outline-variant: var(--linie);
  --theme-primary-primary: var(--tinte);
  --theme-primary-on-primary: var(--papier);
  --theme-button-states-primary-hovered: #2E2760;
  --theme-secondary-button: var(--karte-2);
  --theme-button-secondary-hover: var(--am-hell);
  --theme-nav-button-hover: var(--am-hell);
  --header-bg: rgba(247, 243, 234, .82);
  --gold: var(--am);
  --violet: var(--am);
  --cyan: var(--am);
  --card-bg: var(--karte);
  --shape-corner-xs: 2px; --shape-corner-sm: 3px; --shape-corner-md: 4px;
  --shape-corner-lg: 5px; --shape-corner-xl: 6px; --shape-corner-2xl: 8px;
  --shape-corner-rounded: 4px;
}

body { background: var(--papier); color: var(--tinte); font-weight: 420; -webkit-font-smoothing: antialiased; }
::selection { background: rgba(179, 161, 255, .35); }
:focus-visible { outline: 2px solid var(--am); outline-offset: 3px; }

/* Filmkorn wie auf der Startseite und im Archiv */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 95; pointer-events: none;
  background: url("../media/korn.png") repeat; background-size: 128px 128px; opacity: .2; transform: translateZ(0);
}

/* Schrift: Überschriften fest und eng, Akzentwörter breit und hell */
h1, h2, h3, .heading-1, .heading-2, .heading-3 { color: var(--tinte); font-weight: 620; letter-spacing: -.03em; text-wrap: balance; }
.heading-3 { line-height: 1.05; }
.weit { font-stretch: 151%; font-weight: 300; letter-spacing: -.01em; }
.akzent { color: var(--am); }
strong, b { font-weight: 600; }

/* Augenbraue statt Versal-Gold */
.section-label, .katalog__label {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px;
  background: var(--karte); box-shadow: inset 0 0 0 1px var(--linie); border-radius: 3px;
  color: var(--tinte) !important; font-size: 13px !important; font-weight: 560; letter-spacing: .005em !important; text-transform: none !important;
}
.section-label::before, .katalog__label::before {
  content: ""; width: 12px; height: 12px; flex: none; background: var(--am);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5Q14.12 4.08 17.25 2.91Q17.8 6.2 21.09 6.75Q19.92 9.88 22.5 12Q19.92 14.12 21.09 17.25Q17.8 17.8 17.25 21.09Q14.12 19.92 12 22.5Q9.88 19.92 6.75 21.09Q6.2 17.8 2.91 17.25Q4.08 14.12 1.5 12Q4.08 9.88 2.91 6.75Q6.2 6.2 6.75 2.91Q9.88 4.08 12 1.5Z' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5Q14.12 4.08 17.25 2.91Q17.8 6.2 21.09 6.75Q19.92 9.88 22.5 12Q19.92 14.12 21.09 17.25Q17.8 17.8 17.25 21.09Q14.12 19.92 12 22.5Q9.88 19.92 6.75 21.09Q6.2 17.8 2.91 17.25Q4.08 14.12 1.5 12Q4.08 9.88 2.91 6.75Q6.2 6.2 6.75 2.91Q9.88 4.08 12 1.5Z' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Kopf: Glasleiste wie auf der Startseite */
.header { background: rgba(247, 243, 234, .82); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); border-bottom: 1px solid var(--linie-fein); }
.brand-lockup { gap: 10px; }
.brand-mark { color: var(--tinte); }
.brand-word { color: var(--tinte); font-weight: 640; letter-spacing: -.02em; }
.brand-word strong { color: var(--tinte); font-weight: 300; font-stretch: 151%; }

/* Knöpfe: rechteckig mit gespannter Kante (setzt js/firmament-haut.js) */
.button { border-radius: 3px; font-weight: 520; letter-spacing: -.005em; }
.button-primary { background: var(--tinte); color: var(--papier); }
.button-primary:hover, .button-primary:focus-visible { background: #2E2760; }
.button-secondary { background: var(--karte-2); color: var(--tinte); border-color: var(--linie); -webkit-backdrop-filter: none; backdrop-filter: none; }
.button-secondary:hover, .button-secondary:focus-visible { background: var(--am-hell); }

/* Karten und Flächen */
.card, .value-block, .buchung__karte, .katalog, .danke-gift, .storno, .team__leiste, .team__zahl {
  background: var(--karte); border: 1px solid var(--linie); border-radius: 4px; box-shadow: none;
}
.value-block__title { font-weight: 620; letter-spacing: -.015em; }
.check-list li::before { background-color: var(--am) !important; }

/* Fortschritt ohne Verlauf */
.progress__fill { background: var(--am) !important; }
.progress__label { color: var(--tinte-2); letter-spacing: .04em; }

/* Buchungskarte (js/funnel.js, Scheduler) */
.buchung__kopf-titel { font-weight: 620; letter-spacing: -.015em; }
.buchung__plattform { background: var(--tinte) !important; color: var(--papier) !important; border-radius: 3px !important; }
.buchung__tag, .buchung__zeit { border-radius: 3px !important; background: #fff; border-color: var(--linie) !important; }
.buchung__tag:hover:not([disabled]), .buchung__zeit:hover:not([disabled]) { border-color: var(--am) !important; background: var(--am-hell); }
.buchung__tag[aria-pressed="true"], .buchung__tag.ist-gewaehlt, .buchung__tag[aria-selected="true"],
.buchung__zeit[aria-pressed="true"], .buchung__zeit.ist-gewaehlt, .buchung__zeit[aria-selected="true"] { background: var(--tinte) !important; color: var(--papier) !important; border-color: var(--tinte) !important; }
.buchung__schritt { background: var(--am) !important; color: #fff !important; }
.buchung__form input, .buchung__form textarea, .buchung__form select,
.storno input, .storno textarea, .katalog input[type="text"], .katalog textarea, .frage__frei input {
  border-radius: 3px; border-color: rgba(33, 27, 67, .32); background: #fff;
}
.buchung__form input:focus, .buchung__form textarea:focus { border-color: var(--am); box-shadow: 0 0 0 3px rgba(90, 69, 212, .15); outline: none; }

/* Fragenkatalog: Auswahl-Chips wie Pillen im Firmament (Rechteck, feine Linie) */
.chip { border-radius: 3px; background: #fff; border-color: var(--linie); }
.chip:hover { border-color: var(--am); background: var(--am-hell); }
.chip[aria-pressed="true"], .chip.is-active, .chip[aria-checked="true"], input:checked + .chip { background: var(--tinte); color: var(--papier); border-color: var(--tinte); }

/* Fuß */
.site-footer { border-top: 1px solid var(--linie-fein); background: transparent; }
.footer-links a { color: var(--tinte); }
.footer-links a:hover { color: var(--am); }
.footer-bottom { color: var(--tinte-3); }
.footer-schutz__label { color: var(--am); }

/* Cookie-Banner gleich wie auf der Startseite */
.consent-banner { border-radius: 4px; background: var(--karte); box-shadow: inset 0 0 0 1px var(--linie), 0 24px 50px -20px rgba(16, 13, 36, .4); }
.consent-banner .button { border-radius: 3px; }

/* Anmeldefenster auf Angebotsseiten */
.optin__card { border-radius: 4px; background: var(--karte); }
.optin__mark { background: var(--tinte) !important; border-radius: 50%; }
.optin__input { border-radius: 3px; }

/* Fokus nie abschneiden: die gespannte Kante (clip-path) fällt beim Tastaturfokus weg */
.button:focus-visible, .call-to-action:focus-visible, .card:focus-within, .buchung__karte:focus-within { clip-path: none !important; }

/* Signet im Kopf und Fuß (viewBox 48, enthält den Zeitkreis → etwas größer als das alte Schirmzeichen) */
.header .brand-mark { width: 30px; height: 30px; }
.site-footer .brand-mark { width: 34px; height: 34px; }

/* Team-Dashboard: Bedienknöpfe rechteckig wie im Funnel; Statusmarken bleiben kleine Pillen (wie die Zeitstempel im Firmament) */
[data-page="team"] .team__mini, [data-page="team"] .team__filter button, [data-page="team"] .beitreten,
[data-page="team"] .kal, [data-page="team"] .stufe, [data-page="team"] .loeschen, [data-page="team"] .button { border-radius: 3px; }
[data-page="team"] .team__filter button[aria-pressed="true"], [data-page="team"] .team__filter button.an { background: var(--tinte); color: var(--papier); border-color: var(--tinte); }

/* Team-Dashboard: Statusfarben bleiben unterscheidbar (gebucht = Violett, erschienen = Cyan, Kunde = Gold).
   Gold ist dort eine gemessene Statusfarbe, keine Dekoration — mit der CRM-Sitzung abgestimmt am 13.10.2026. */
[data-page="team"] { --gold: #c9a227; --violet: #7c5cff; --cyan: #2bb7ce; }

/* Fehlerhafte Felder bleiben auch mit Fokus rot (sonst überdeckt der Amethyst-Fokus die Fehlermarke) */
.buchung__form input.invalid, .buchung__form input.invalid:focus,
.optin__input.invalid, .optin__input.invalid:focus { border-color: #B63D4D !important; box-shadow: 0 0 0 3px rgba(182, 61, 77, .16) !important; }