/* ═══════════════════════════════════════════════════════════════════════════ Styles des Basis-Designs „Amara" (template-one). ACHTUNG — DIESE DATEI GILT FÜR ALLE DESIGNS. public/site.html lädt sie fest, nicht abhängig vom aktiven Design. Alles, was hier NICHT unter .t1-* steht — :root-Tokens, body, .container, .section, .btn, .input —, wirkt damit auch in Strähne und Myra. Die beiden bringen ihre eigenen, klassengebundenen Regeln mit (.strahne / .sbq) und überschreiben das Nötige; wer hier eine ungescopte Regel ändert, ändert also drei Designs auf einmal. ═══════════════════════════════════════════════════════════════════════════ */ /* ===== Salon template design tokens ===== */ :root { /* Warm cream-toned palette */ --bg: oklch(0.972 0.012 78); --bg-2: oklch(0.955 0.014 75); --surface: oklch(0.99 0.006 78); --beige: oklch(0.88 0.024 70); --beige-2: oklch(0.82 0.030 65); --rose: oklch(0.86 0.038 22); --rose-2: oklch(0.78 0.050 22); --ink: oklch(0.22 0.008 60); --ink-2: oklch(0.38 0.010 60); --muted: oklch(0.58 0.010 60); --line: oklch(0.88 0.010 70); --line-2: oklch(0.82 0.014 70); --gold: oklch(0.62 0.060 75); /* Grund der Leistungs-Kacheln. Eigenes Token statt --surface, weil das auch .card, .chip und .btn-light tragen — die Kachel liegt auf --bg-2 und braucht im dunklen Farbdesign mehr Hub, als dort für die übrigen Flächen richtig wäre. */ --t1-tile: oklch(0.99 0.006 78); /* Frei gewählte Akzentfarbe. Steht hier nur, damit das Token nie unaufgelöst ist; gesetzt wird es ausschließlich als Inline-Property an , und gelesen wird es ausschließlich unter :root[data-t1-accent] in schemes.css. */ --t1-accent: oklch(0.86 0.038 22); --display: "Cormorant Garamond", "Cormorant", Georgia, serif; --ui: "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif; --mono: "JetBrains Mono", ui-monospace, Menlo, monospace; --radius-s: 6px; --radius-m: 12px; --radius-l: 22px; --shadow-s: 0 1px 2px oklch(0.2 0.01 60 / 0.05); --shadow-m: 0 12px 40px -18px oklch(0.2 0.01 60 / 0.18); --shadow-l: 0 30px 80px -30px oklch(0.2 0.01 60 / 0.22); /* ── Tokens für die Farbdesigns von „Amara" ──────────────────────────────── Die Werte hier sind EXAKT die, die vorher als Literale im Stylesheet und in den Sektionen standen — dieser Block ändert das Aussehen um kein Pixel. Überschrieben werden sie ausschließlich in Template1/schemes.css, gescoped auf :root[data-t1-scheme="…"]. WICHTIG: Jedes dieser Tokens braucht hier einen Wert. Eine unaufgelöste var() fällt nicht auf den vorherigen Wert zurück, sondern auf den Initialwert der Eigenschaft — und templates-src/straehne/source.jsx benutzt die nackte Klasse `btn`. Stünde --radius-pill nur unter [data-t1-scheme], bekäme Strähne border-radius:0 und rechteckige Buttons. */ --radius-pill: 999px; /* Große dunkle Flächen (TopStrip, Stimmen, Footer). Sie bleiben in JEDEM Farbdesign dunkel — auch im dunklen: mit var(--ink) kippten sie dort auf Blendweiß und das weiß gesetzte Logo verschwände darin. */ --invert-bg: oklch(0.22 0.008 60); --invert-surface: oklch(0.27 0.01 60); --invert-ink: oklch(0.972 0.012 78); --invert-ink-2: oklch(0.88 0.024 70); --invert-ink-3: oklch(0.85 0.015 70); --invert-ink-4: oklch(0.78 0.02 70); --invert-muted: oklch(0.65 0.01 60); --invert-muted-2: oklch(0.55 0.01 60); --invert-line: oklch(0.5 0.01 60); --invert-line-2: oklch(0.4 0.01 60); --invert-line-3: oklch(0.32 0.01 60); --invert-accent: oklch(0.45 0.04 25); /* Kartengrafik im Kontaktbereich (SVG). Eigene Tokens, weil die vorhandenen Palettenwerte sichtbar heller sind als die Originalstriche. */ --map-grid: oklch(0.7 0.02 70); --map-street: oklch(0.65 0.02 70); --on-rose: oklch(0.22 0.008 60); /* Schrift auf Rosé-Flächen (Chip, Newsletter, .btn-rose) */ --err: #b4231f; --scrim: oklch(0.14 0.012 60 / 0.66); --btn-primary-hover: oklch(0.30 0.01 60); --btn-light-hover: white; /* Bild-Platzhalter (gestreift, wenn kein Foto gepflegt ist) */ --ph-stripe: oklch(0.78 0.015 70 / 0.45); --ph-from: oklch(0.90 0.020 65); --ph-to: oklch(0.84 0.030 60); --ph-ink: oklch(0.35 0.015 60); --ph-rose-stripe: oklch(0.74 0.045 22 / 0.45); --ph-rose-from: oklch(0.90 0.035 22); --ph-rose-to: oklch(0.83 0.050 22); --ph-dark-stripe: oklch(0.35 0.01 60 / 0.5); --ph-dark-from: oklch(0.30 0.008 60); --ph-dark-to: oklch(0.22 0.008 60); --ph-dark-fg: oklch(0.85 0.02 70); --tag-bg: oklch(1 0 0 / 0.7); --tag-dark-bg: oklch(0 0 0 / 0.4); --tag-dark-fg: oklch(0.95 0.005 70); /* Schriftpaarung: nur Cormorant Garamond bringt echte Kursive mit. Eine Paarung mit Grotesk-Display stellt --display-style auf normal, sonst rechnet der Browser eine schiefe Fälschung. */ --display-style: italic; --display-weight: 300; --display-track: -0.01em; --eyebrow-family: var(--ui); /* Bildstil */ --img-filter: none; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--ui); /* 16px, nicht 15: alles darunter löst auf iOS beim Fokus eines Eingabefelds einen Zoom aus, aus dem der Gast nicht mehr herausfindet (die Felder erben font über `font: inherit`). */ font-size: 16px; line-height: 1.55; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } /* color:inherit fehlte: ein