/* KüchenTreff Niederrhein – Gestaltung aller Seiten.
 *
 * Die Farben stehen NICHT hier, sondern in farben.css (Kopie von
 * design/farben.css). Diese Datei benutzt sie nur. Wer eine Farbe aendern
 * will, aendert sie in design/farben.css und kopiert sie herueber - sonst
 * stehen zwei Wahrheiten im Projekt.
 *
 * DIE WICHTIGSTE REGEL DIESER DATEI: Rot ist Akzent, nicht Flaeche. Im
 * deutschen Moebel- und Kuechenhandel steht Rot fuer Rabatt und wirkt
 * grossflaechig erdrueckend (siehe design/UEBERGABE.md, Punkt 2). Der Grund
 * ist weiss, die Ruhe kommt aus Weissraum. Rot traegt Logo, Knoepfe, Links
 * und Kanten - und die Fussflaeche, wo man eine Farbflaeche erwartet.
 */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--kt-grund);
  color: var(--kt-text);
  font: var(--kt-groesse-3)/1.62 var(--kt-schrift-text);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 {
  font-family: var(--kt-schrift-kopf);
  font-weight: 700;
  letter-spacing: -.022em;
  line-height: 1.1;
  text-wrap: balance;
  margin: 0;
}

a { color: var(--kt-rot); }

.bahn { width: min(1060px, 100%); margin: 0 auto; padding-inline: var(--kt-luft-5); }
.bahn.schmal { width: min(720px, 100%); }

/* --- Kopf ----------------------------------------------------------------- */
.seitenkopf { border-bottom: var(--kt-rahmen-1) solid var(--kt-linie); }
.seitenkopf .bahn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kt-luft-4) var(--kt-luft-5);
  padding-block: var(--kt-luft-4);
}
.marke { display: flex; align-items: center; text-decoration: none; }
/* IM KOPF STEHT bilder/logo-kopf.png, NICHT bilder/logo.png.
   Im offiziellen Quadrat nimmt der Schriftzug nur 22 Prozent der Bildhoehe
   ein - bei 64 px blieben rund sechs Pixel je Zeile, und "KuechenTreff" war
   ein Fleck (nachgemessen, nicht geschaetzt). Das Kopfzeichen ist dieselbe
   Datei, nur ohne den toten roten Rand ueber und unter dem Oval: 32 Prozent
   statt 22. Farbe und Zeichen sind unveraendert, die rote Flaeche bleibt.
   Bei 80 px Anzeigehoehe sind das rund 13 Pixel je Zeile - lesbar. */
.marke img { display: block; height: 80px; width: auto; border-radius: var(--kt-radius-1); }
.kopfkontakt {
  display: flex;
  align-items: center;
  gap: var(--kt-luft-3);
  font-size: var(--kt-groesse-2);
  color: var(--kt-neben);
}
.kopfkontakt a { font-weight: 700; text-decoration: none; }

/* --- Aufmacher: hell, mit Luft, Rot nur als Zeichen ----------------------- */
.aufmacher { padding-block: clamp(48px, 8vw, 96px) clamp(40px, 6vw, 72px); }
.ueberzeile {
  display: inline-flex;
  align-items: center;
  gap: var(--kt-luft-3);
  margin: 0 0 var(--kt-luft-5);
  font-size: var(--kt-groesse-1);
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--kt-rot);
}
/* Ein kurzer Strich statt eines farbigen Kastens: der Akzent, der die Marke
   zeigt, ohne eine Flaeche zu setzen. */
.ueberzeile::before {
  content: "";
  width: 34px;
  height: var(--kt-rahmen-kante);
  background: var(--kt-logo);
}
.aufmacher h1 {
  font-size: clamp(34px, 6vw, 62px);
  max-width: 16ch;
}
.aufmacher .unterzeile {
  margin: var(--kt-luft-5) 0 0;
  font-size: clamp(17px, 1.7vw, 20px);
  color: var(--kt-neben);
  max-width: 48ch;
}

.erreichbar { display: flex; flex-wrap: wrap; gap: var(--kt-luft-3); margin-top: var(--kt-luft-6); }
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding-inline: var(--kt-luft-5);
  border-radius: var(--kt-radius-1);
  background: var(--kt-rot);
  color: var(--kt-grund);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--kt-groesse-4);
  border: var(--kt-rahmen-2) solid var(--kt-rot);
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.knopf:hover { background: var(--kt-rot-tief); border-color: var(--kt-rot-tief); }
.knopf:active { transform: translateY(1px); }
.knopf.leise {
  background: transparent;
  color: var(--kt-rot);
  border-color: var(--kt-feldlinie);
  font-size: var(--kt-groesse-3);
}
.knopf.leise:hover { border-color: var(--kt-rot); background: var(--kt-rot-sanft); }
.knopf:focus-visible { outline: 3px solid var(--kt-rot); outline-offset: 3px; }

/* --- Drei Karten ---------------------------------------------------------- */
.karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--kt-luft-4);
  padding-bottom: clamp(40px, 6vw, 72px);
}
.karte {
  background: var(--kt-sanft);
  border: var(--kt-rahmen-1) solid var(--kt-linie);
  border-radius: var(--kt-radius-2);
  padding: var(--kt-luft-5);
}
.karte h2 {
  font-family: var(--kt-schrift-text);
  font-weight: 700;
  font-size: var(--kt-groesse-1);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--kt-rot);
  margin-bottom: var(--kt-luft-3);
}
.karte p { margin: 0; }
.karte .gross { font-size: var(--kt-groesse-4); font-weight: 700; letter-spacing: -.01em; }
.karte .gross a { text-decoration: none; }
.karte dl { margin: 0; display: grid; gap: var(--kt-luft-2); }
.karte dl div { display: flex; flex-wrap: wrap; gap: 2px var(--kt-luft-4); }
.karte dl dt { flex: 1 1 100px; color: var(--kt-neben); }
.karte dl dd { margin: 0; flex: 0 1 auto; font-weight: 600; }
.karte .klein { font-size: var(--kt-groesse-2); color: var(--kt-neben); margin-top: var(--kt-luft-2); }

/* --- Fliesstext und Rechtsseiten ------------------------------------------ */
main { padding-block: clamp(40px, 6vw, 72px) clamp(48px, 7vw, 88px); }
/* DIESELBE KANTE WIE ALLES ANDERE. Der Fliesstext stand vorher in einer
   eigenen, schmaleren und zentrierten Bahn und begann dadurch weiter rechts
   als die Karten darueber - nebeneinander sichtbar und nicht als Absicht
   lesbar. Die Bahn ist jetzt fuer alle gleich; begrenzt wird nur die
   Zeilenlaenge, und zwar linksbuendig. */
main.bahn > * { max-width: 68ch; }
/* Seit E17 stehen Inhalt und Leiste als zwei Spalten in der Bahn; die Spalte
   selbst gibt die Zeilenlaenge vor (rund 660 px), die Bremse oben greift
   nur noch fuer Seiten ohne die zwei Spalten. */
main.bahn > .seiteninhalt, main.bahn > .seitenleiste { max-width: none; }
main.bahn > .karten { max-width: none; }
main.mit-karten { padding-top: 0; }
h1.seitentitel { font-size: clamp(30px, 4.6vw, 44px); margin-bottom: var(--kt-luft-6); }
h2.abschnitt {
  font-family: var(--kt-schrift-text);
  font-weight: 700;
  font-size: var(--kt-groesse-4);
  letter-spacing: -.01em;
  margin: var(--kt-luft-7) 0 var(--kt-luft-3);
}
h2.abschnitt:first-of-type { margin-top: 0; }
p { margin: 0 0 var(--kt-luft-4); }
.angaben { margin: 0 0 var(--kt-luft-5); }
.angaben p { margin: 0; }
dl.felder { margin: 0 0 var(--kt-luft-5); }
dl.felder div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kt-luft-1) var(--kt-luft-4);
  padding: var(--kt-luft-2) 0;
  border-bottom: var(--kt-rahmen-1) solid var(--kt-linie);
}
dl.felder dt { flex: 0 0 210px; color: var(--kt-neben); }
dl.felder dd { margin: 0; flex: 1 1 220px; font-weight: 600; }
.klein { font-size: var(--kt-groesse-2); color: var(--kt-neben); line-height: 1.6; }

.hinweisband {
  margin-top: var(--kt-luft-6);
  padding: var(--kt-luft-4) var(--kt-luft-5);
  background: var(--kt-sanft);
  border-left: var(--kt-rahmen-kante) solid var(--kt-logo);
  border-radius: 0 var(--kt-radius-1) var(--kt-radius-1) 0;
  font-size: var(--kt-groesse-2);
}
.hinweisband p { margin: 0; }
.zurueck { display: inline-block; margin-top: var(--kt-luft-6); font-weight: 700; text-decoration: none; }
.zurueck:hover { text-decoration: underline; }

/* --- Fuss: hier darf die Flaeche rot sein --------------------------------- */
.fusszeiten { margin: 0 0 var(--kt-luft-3); display: flex; flex-wrap: wrap; gap: var(--kt-luft-1) var(--kt-luft-4); }
.fusszeiten-titel { font-weight: 700; }

/* EIGENER WERT FUER DIE FLAECHE, nicht --kt-rot-tief: In der dunklen Sicht
   ist --kt-rot-tief ein heller Hover-Ton, und der Fuss war darauf mit
   1,56:1 unlesbar. --kt-fussgrund ist hell wie dunkel eine tiefe Flaeche. */
.seitenfuss { background: var(--kt-fussgrund); color: var(--kt-fusstext); font-size: var(--kt-groesse-2); }
.seitenfuss .bahn { padding-block: var(--kt-luft-6) var(--kt-luft-7); }
.seitenfuss a { color: #fff; text-decoration: none; }
.seitenfuss a:hover { text-decoration: underline; }
.fusszeilen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kt-luft-3) var(--kt-luft-6);
  padding-bottom: var(--kt-luft-4);
  margin-bottom: var(--kt-luft-4);
  border-bottom: var(--kt-rahmen-1) solid rgba(255, 255, 255, .22);
  font-weight: 600;
}

@media (max-width: 560px) {
  .seitenkopf .bahn { flex-direction: column; align-items: flex-start; gap: var(--kt-luft-3); }
  .marke img { height: 62px; }
  .erreichbar .knopf { flex: 1 1 100%; }
  dl.felder dt { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* --- Volle Breite, mitwachsende Schrift (24.09.2026) ----------------------
 * Wunsch des Nutzers: "auf volle Weite, das kann man alles kaum lesen,
 * die Inhalte muessen sich anpassen und groesser werden". Vorher stand
 * jede Seite in 1060 px und 17 px Schrift - auf einem breiten Schirm eine
 * schmale Spalte in der Mitte.
 *
 * Die Bahn waechst jetzt bis 1600 px, der Rand waechst mit. Die Schrift-
 * stufen werden fliessend: am Telefon wie bisher, auf grossen Schirmen
 * rund ein Viertel groesser. Die Zeilenlaenge bleibt durch die ch-Grenzen
 * lesbar - ch waechst mit der Schrift mit.
 *
 * NUR OEFFENTLICHE SEITEN: Der Redaktionsbereich (body.verwaltung) laedt
 * diese Datei mit, dort sind Knopfhoehen und Spalten genau abgestimmt (E20). */
body:not(.verwaltung) {
  --kt-groesse-2: clamp(15px, 0.82rem + 0.22vw, 18px);
  --kt-groesse-3: clamp(17px, 0.92rem + 0.35vw, 21px);
  --kt-groesse-4: clamp(20px, 1.05rem + 0.45vw, 25px);
  --kt-groesse-5: clamp(24px, 1.2rem + 0.6vw, 30px);
  --kt-groesse-6: clamp(30px, 1.45rem + 0.9vw, 38px);
  --kt-groesse-7: clamp(38px, 1.75rem + 1.3vw, 50px);
  --kt-groesse-8: clamp(48px, 2.2rem + 1.6vw, 62px);
  --kt-groesse-9: clamp(62px, 2.8rem + 2.2vw, 80px);
}
body:not(.verwaltung) .bahn {
  width: min(1600px, 100%);
  padding-inline: clamp(16px, 3.5vw, 64px);
}
body:not(.verwaltung) .bahn.schmal { width: min(960px, 100%); }
body:not(.verwaltung) main.bahn:has(> .seitenleiste) {
  grid-template-columns: minmax(0, 1fr) clamp(300px, 24vw, 380px);
}