/* 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; }
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 --------------------------------- */
/* 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; }
}