/* D14 Werrewerk Küchen · Startseite · seite.css v0.19 · Stand 2026-10-19 (Kopfleiste mit den Knöpfen Küche gestalten und Raum planen, Groß öffnen)
   Grundlage, Schriften (lokal), Kopfleiste, Knopf, kleiner Fuß. Je Station eine eigene Datei
   (hook.css · editor.css · raum.css · ablauf.css · kipp.css). Orange gibt es hier nicht: es gehört dem RAVARO-Schluss. */

@font-face { font-family: "Archivo"; src: url("schrift/archivo-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
/* Inter und JetBrains Mono kommen aus ravaro-schluss/schrift.css (dieselben Dateien, einmal geladen) */

:root {
  --grund: #14100c;
  --flaeche: #1d1813;
  --linie: rgba(243, 236, 226, .14);
  --text: #f3ece2;
  --leise: rgba(243, 236, 226, .66);
  --messing: #D4A853;
  --auf-messing: #1a140d;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --kopf: 64px;                              /* Höhe der Kopfleiste */
  --rand: clamp(16px, 2.2vw, 48px);          /* Seitenrand der weiten Abschnitte */
  --dauer-kopf: 240ms;
}
@media (max-width: 899px) { :root { --kopf: 56px; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--grund); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--grund); color: var(--text); font: 16px/1.5 Inter, system-ui, sans-serif; overflow-x: clip; }
img, video, canvas { max-width: 100%; }
main > section, .kipp { scroll-margin-top: var(--kopf); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprung { position: fixed; left: 12px; top: -80px; z-index: 30; background: var(--messing); color: var(--auf-messing); padding: 12px 16px; border-radius: 999px; font-weight: 600; }
.sprung:focus { top: 12px; }

/* ---- Der eine Knopf der Werrewerk-Welt: Messing-Gold ---- */
.knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: .95em 1.65em; border-radius: 999px;
  background: var(--messing); color: var(--auf-messing); font: 600 clamp(16px, .95vw, 24px)/1.2 Inter, sans-serif; text-decoration: none; border: 0; cursor: pointer;
  transition: filter .2s; }
.knopf:hover { filter: brightness(1.08); }
.knopf:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.knopf--klein { min-height: 44px; padding: .65em 1.35em; font-size: clamp(15px, .8vw, 19px); }
.knopf--gross { min-height: 60px; padding: 18px 34px; font-size: clamp(17px, 1.15vw, 22px); }

/* ---- Kopfleiste: über dem Zeitraffer ein dunkler Verlauf (Schriftzug bleibt auf hellem Bild lesbar), danach deckender Grund ---- */
.kopf { position: fixed; inset: 0 0 auto 0; z-index: 20; height: var(--kopf); display: flex; align-items: center; gap: clamp(12px, 2vw, 36px);
  padding: 0 var(--rand); background: none;
  transition: background-color var(--dauer-kopf), transform var(--dauer-kopf), box-shadow var(--dauer-kopf); }
.kopf::before { content: ""; position: absolute; inset: 0 0 -40px 0; z-index: -1; pointer-events: none; opacity: 1; transition: opacity var(--dauer-kopf);
  background: linear-gradient(180deg, rgba(20, 16, 12, .88) 0%, rgba(20, 16, 12, .84) 45%, rgba(20, 16, 12, .4) 75%, rgba(20, 16, 12, 0) 100%); }
.kopf--grund::before, .kopf--offen::before { opacity: 0; }
.kopf--grund { background: var(--grund); box-shadow: 0 1px 0 var(--linie); }
html[data-welt="ravaro"] .kopf { transform: translateY(-110%); }       /* im Kipp und im RAVARO-Schluss tritt die Werrewerk-Leiste ab */
.kopf__marke { margin-right: auto; color: var(--messing); text-decoration: none; font: 700 clamp(14px, 1.05vw, 18px)/1 Archivo, sans-serif;
  letter-spacing: .16em; text-transform: uppercase; min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; text-shadow: 0 1px 10px rgba(20, 16, 12, .85); }
.kopf__nav { display: flex; gap: clamp(16px, 2vw, 36px); }
.kopf__nav a { color: var(--text); text-decoration: none; font-weight: 500; font-size: clamp(15px, .8vw, 19px); min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; }   /* v0.18: Kueche gestalten bricht nie um */
.kopf__nav a:hover, .kopf__nav a:focus-visible { color: var(--messing); }
.kopf__nav a:focus-visible, .kopf__marke:focus-visible, .kopf__menue:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 6px; }
.kopf__menue { display: none; }
@media (max-width: 899px) {
  .kopf { column-gap: 8px; }
  .kopf__marke { letter-spacing: .12em; font-size: 13px; }
  .kopf__menue { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; background: none; border: 1px solid var(--linie);
    border-radius: 999px; color: var(--text); font: 500 14px/1 Inter, sans-serif; cursor: pointer; }
  .kopf__menue span { width: 14px; height: 8px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; }
  .kopf__nav { position: absolute; left: 0; right: 0; top: var(--kopf); flex-direction: column; gap: 0; padding: 8px var(--rand) 16px;
    background: var(--grund); border-bottom: 1px solid var(--linie); }
  .js .kopf__nav { display: none; }
  .js .kopf--offen .kopf__nav { display: flex; }
  .kopf--offen { background: var(--grund); }
  .kopf__nav a { min-height: 48px; font-size: 17px; border-bottom: 1px solid var(--linie); }
  .kopf__nav a:last-child { border-bottom: 0; }
}
/* v0.15 · Handy: Marke, „Termin“ und Menü standen bei 390 px Kante an Kante (8 px) und ragten 8 px in den rechten Rand, bei 360 px lief der
   Menüknopf 22 px aus dem Bild. Jetzt: Marke etwas enger gesetzt, Knöpfe schmaler gepolstert, die Leiste darf nichts mehr hinausschieben.
   Unter 380 px zeigt der Menüknopf nur sein Zeichen (der Name „Menü“ bleibt für Vorleser). Jede Tippfläche mindestens 44 × 44 px. */
@media (max-width: 899px) {
  .kopf__marke, .kopf__termin, .kopf__menue { flex: none; }
  .kopf__termin, .kopf__menue { min-width: 44px; justify-content: center; }
}
@media (max-width: 479px) {
  .kopf { gap: 12px; }
  .kopf__marke { letter-spacing: .08em; }
  .kopf__termin { padding-left: 16px; padding-right: 16px; }
  .kopf__menue { padding: 0 10px; }
}
@media (max-width: 379px) { .kopf__menue { padding: 0 13px; font-size: 0; gap: 0; } }

/* ===== v0.19 · Die zwei Werkzeuge als eigene Knöpfe in der Kopfleiste (Wunsch des Inhabers 18.10.: „der button dafür sollte präsent sein“)
   Rechner: Marke · drei Links · [Küche gestalten] [Raum planen] · Termin. Zwischen 900 und 1199 px wandern die drei Links ins Menü.
   Handy: zweite Zeile der Leiste mit beiden Knöpfen nebeneinander, nie im Menü. --kopf wächst dafür; alles, was an der Leiste
   ausgerichtet ist (Sprungmarken, klebende Bühne, Unterseiten), rückt von selbst mit. „Termin“ bleibt in der ersten Zeile. ===== */
.kopf__wege { display: flex; gap: 10px; flex: none; }
.kopf__weg { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .55em 1.2em; border-radius: 999px; white-space: nowrap;
  font: 600 clamp(15px, .8vw, 19px)/1.2 Inter, sans-serif; text-decoration: none; color: var(--messing); border: 1.5px solid var(--messing); background: rgba(20, 16, 12, .35);
  transition: filter .2s, background-color .2s; }
.kopf__weg--haupt { background: var(--messing); color: var(--auf-messing); }
.kopf__weg:hover { filter: brightness(1.1); }
.kopf__weg:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.kopf__weg[aria-current="page"] { box-shadow: 0 0 0 2px var(--grund), 0 0 0 4px rgba(243, 236, 226, .55); }
/* „Termin“ bleibt erreichbar, tritt aber hinter die zwei Werkzeuge zurück: heller Rand statt Messingfläche */
.knopf--leise { background: none; color: var(--text); border: 1px solid rgba(243, 236, 226, .38); }
.knopf--leise:hover { filter: none; border-color: var(--text); }
@media (min-width: 900px) and (max-width: 1199px) {
  .kopf__menue { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; background: none; border: 1px solid var(--linie);
    border-radius: 999px; color: var(--text); font: 500 14px/1 Inter, sans-serif; cursor: pointer; flex: none; }
  .kopf__menue span { width: 14px; height: 8px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; }
  .kopf__nav { position: absolute; left: 0; right: 0; top: var(--kopf); flex-direction: column; gap: 0; padding: 8px var(--rand) 16px;
    background: var(--grund); border-bottom: 1px solid var(--linie); }
  .js .kopf__nav { display: none; }
  .js .kopf--offen .kopf__nav { display: flex; }
  .kopf--offen { background: var(--grund); }
  .kopf__nav a { min-height: 48px; font-size: 17px; border-bottom: 1px solid var(--linie); }
  .kopf__nav a:last-child { border-bottom: 0; }
}
@media (max-width: 899px) {
  :root { --kopf-zeile: 56px; --kopf: 106px; }
  /* Erste Zeile bleibt eine Flex-Zeile ohne Umbruch (so kann beim Nachladen der Schrift nichts in die zweite Zeile rutschen);
     die zweite Zeile liegt fest darunter. */
  .kopf { align-items: flex-start; }
  .kopf__marke { min-height: var(--kopf-zeile); }
  .kopf__termin, .kopf__menue { margin-top: calc((var(--kopf-zeile) - 44px) / 2); }
  .kopf__wege { position: absolute; left: var(--rand); right: var(--rand); top: var(--kopf-zeile); gap: 8px; }
  .kopf__weg { flex: 1 1 0; min-width: 0; padding: 0 10px; font-size: 15px; }
  .kopf__termin { padding-left: 14px; padding-right: 14px; }
}
/* v0.19 · 320 px: Der Menüknopf ragte 2 px über den Rand. Marke und „Termin“ etwas enger, der Rand bleibt 16 px. */
@media (max-width: 359px) {
  .kopf { column-gap: 8px; }
  .kopf__marke { font-size: 12px; letter-spacing: .05em; }
  .kopf__termin { padding-left: 12px; padding-right: 12px; }
  .kopf__weg { font-size: 14px; padding: 0 6px; }
}

/* v0.19 · „Groß öffnen“: Farbwahl und Raumplaner haben eine eigene Seite. Am Bild der Farbwahl oben rechts, im Raumplaner unter der Einleitung. */
.gross-oeffnen { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; text-decoration: none; white-space: nowrap;
  font: 600 clamp(15px, .85vw, 19px)/1 Inter, sans-serif; color: var(--text); background: rgba(20, 16, 12, .78); border: 1px solid rgba(243, 236, 226, .4); }
.gross-oeffnen svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gross-oeffnen:hover { border-color: var(--messing); color: var(--messing); }
.gross-oeffnen:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
#umgestalten .buehne .gross-oeffnen { position: absolute; z-index: 4; top: clamp(12px, 1.6vw, 36px); right: clamp(12px, 1.6vw, 36px); }
.gross-oeffnen--flach { margin-top: 14px; color: var(--messing); border-color: var(--messing); background: none; }

/* v0.15 · Ziel einer Fokus-Übergabe im Planer (Überschrift des Ergebnisses): Ring nur bei Tastaturbedienung */
#raum .r-h2:focus { outline: none; }
#raum .r-h2:focus-visible { outline: 2px solid var(--text); outline-offset: 6px; border-radius: 4px; }
#raum #erg-auch { color: var(--text); }

/* ---- Ergänzungen an den übernommenen Stationen (stehen hier, damit editor.css und raum.css reine Kopien bleiben) ---- */
#umgestalten .ed-weiter { color: var(--messing); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; min-height: 44px;
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: -8px; }
#umgestalten .ed-weiter:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
#umgestalten .leiste { padding-top: clamp(24px, 3.2svh, 40px); gap: clamp(16px, 2.6svh, 28px); }
#raum { border-top: 1px solid var(--linie); }
#raum .mehr { margin: 10px 0 0; }
#raum .mehr a { color: var(--messing); font-weight: 500; text-underline-offset: 3px; min-height: 44px; display: inline-flex; align-items: center; }
#raum .mehr a:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 4px; }

/* ---- Kleiner Fuß bis zum Kipp; danach übernimmt der Fuß des RAVARO-Schlusses ---- */
.fuss-klein { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 28px; padding: 14px var(--rand) calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linie); font-size: 16px; color: var(--leise); }
.fuss-klein p { margin: 0; }
.fuss-klein__marke { font: 700 14px/1 Archivo, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--messing); }
.fuss-klein a[aria-current="page"] { color: var(--text); }
@media (min-width: 1900px) { .fuss-klein { font-size: 16px; } .fuss-klein__version, .fuss-klein__marke { font-size: 15px; } }
.fuss-klein nav { display: flex; flex-wrap: wrap; gap: 0 24px; }
.fuss-klein a { color: inherit; min-height: 44px; display: inline-flex; align-items: center; text-underline-offset: 4px; }
.fuss-klein a:hover, .fuss-klein a:focus-visible { color: var(--text); }
.fuss-klein__version { font: 500 14px/1 var(--mono); letter-spacing: .06em; }

@media (prefers-reduced-motion: reduce) { .kopf, .kopf::before, .knopf { transition: none; } }

/* Breiter Schirm: kleinste Schrift im Fuß 15 px (steht am Ende, nach den Grundregeln des Fußes) */
@media (min-width: 1900px) { .fuss-klein__version, .fuss-klein__marke { font-size: 15px; } }