/*
 * Basis-CSS der Sitefabrik.
 *
 * Enthält nur, was jede Site braucht: Reset, Typografie-Skala, Container und
 * Abstands-Hilfsklassen - alles aus Tokens. Farben, Schriften und Raster kommen
 * aus dem Projekt-Template (tokens.css), das diese Datei überschreibt, indem es
 * dieselben Custom Properties neu setzt. Hier steht keine einzige Farbe fest,
 * die ein Projekt nicht ändern könnte.
 */

/* ------------------------------------------------------------------ Tokens */

:root {
  /* Nur Rückfallwerte. Das Projekt-Template setzt sie neu. */
  --kit-farbe-text: #1a1a1a;
  --kit-farbe-gedaempft: #5a5a5a;
  --kit-farbe-flaeche: #ffffff;
  --kit-farbe-flaeche-alt: #f4f4f2;
  --kit-farbe-dunkel: #16212e;
  --kit-farbe-dunkel-text: #ffffff;
  --kit-farbe-akzent: #1c5b8c;
  --kit-farbe-rahmen: #dcdcd8;
  --kit-farbe-hinweis: #c0392b;          /* Redaktionshinweis, siehe .kit-hinweis */

  --kit-schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --kit-schrift-titel: var(--kit-schrift);

  /* Typografie-Skala, 8er-Raster als Grundlage */
  --kit-text-xs: 0.8125rem;
  --kit-text-s: 0.9375rem;
  --kit-text-m: 1rem;
  --kit-text-l: 1.25rem;
  --kit-text-xl: 1.75rem;
  --kit-text-xxl: 2.5rem;

  --kit-abstand-1: 0.5rem;
  --kit-abstand-2: 1rem;
  --kit-abstand-3: 1.5rem;
  --kit-abstand-4: 2rem;
  --kit-abstand-5: 3rem;
  --kit-abstand-6: 4.5rem;

  --kit-radius: 0.25rem;
  --kit-container: 75rem;
  --kit-container-schmal: 46rem;
  --kit-umbruch: 48rem;
}

/* ------------------------------------------------------------------ Reset */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--kit-schrift);
  font-size: var(--kit-text-m);
  line-height: 1.6;
  color: var(--kit-farbe-text);
  background: var(--kit-farbe-flaeche);
}

h1, h2, h3, h4 { font-family: var(--kit-schrift-titel); line-height: 1.2; margin: 0 0 var(--kit-abstand-2); }
h1 { font-size: var(--kit-text-xxl); }
h2 { font-size: var(--kit-text-xl); }
h3 { font-size: var(--kit-text-l); }
p, ul, ol { margin: 0 0 var(--kit-abstand-2); }
ul, ol { padding-inline-start: 1.25em; }
img, picture, video { max-width: 100%; height: auto; display: block; }
/*
 * Links tragen die Textfarbe, der Akzent sitzt in der Unterlaengung.
 *
 * Als Schriftfarbe kommt Apricot auf Weiss auf 1.7 : 1 - unlesbar, und weit unter
 * den 4.5 : 1, die normale Schrift braucht. Die Linie unterliegt dieser Anforderung
 * nicht: sie ist Auszeichnung, nicht Text. So bleibt der Akzent sichtbar, ohne dass
 * der Link unleserlich wird.
 */
a {
  color: inherit;
  text-decoration-color: var(--kit-farbe-akzent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

a:hover { text-decoration-color: currentColor; }

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 3px solid var(--kit-farbe-akzent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ------------------------------------------------------------------ Layout */

.kit-container {
  inline-size: min(100% - 2 * var(--kit-abstand-2), var(--kit-container));
  margin-inline: auto;
}

.kit-container--schmal { max-inline-size: var(--kit-container-schmal); }

.kit-block { padding-block: var(--kit-abstand-5); }

@media (min-width: 48em) {
  .kit-block { padding-block: var(--kit-abstand-6); }
}

.kit-block--dunkel {
  background: var(--kit-farbe-dunkel);
  color: var(--kit-farbe-dunkel-text);
}
/* Knöpfe behalten ihre eigene Farbe: geerbtes Weiss auf einer hellen
   Knopffläche ergibt einen Kontrast, der jede Prüfung reisst. */
.kit-block--dunkel a:not(.kit-button) { color: inherit; }
.kit-block--hell { background: var(--kit-farbe-flaeche-alt); }

.kit-titel { margin-block-end: var(--kit-abstand-2); }

/*
 * Lange Adressen brechen um.
 *
 * Im Fliesstext steht, was jemand im Editor eingefügt hat - und ein Verweis, dessen
 * Beschriftung die volle Adresse ist, passt auf einem Handy in keine Zeile. Ohne
 * diese Regel ragt er aus der Spalte, und die ganze Seite lässt sich seitwärts
 * schieben. Gefunden auf einer Datenschutzseite mit zwei solchen Verweisen.
 *
 * «break-word» und nicht «anywhere»: gebrochen wird erst, wenn es anders nicht
 * geht, und die Mindestbreite der Spalte bleibt unberührt.
 */
.kit-fliesstext { overflow-wrap: break-word; }
.kit-lead { font-size: var(--kit-text-l); color: var(--kit-farbe-gedaempft); }
.kit-block--dunkel .kit-lead { color: inherit; opacity: .85; }

/* ------------------------------------------------------------------ Kopf und Fuss */

.kit-skip {
  position: absolute;
  inset-inline-start: -9999px;
  padding: var(--kit-abstand-1) var(--kit-abstand-2);
  background: var(--kit-farbe-dunkel);
  color: var(--kit-farbe-dunkel-text);
}
.kit-skip:focus { inset-inline-start: var(--kit-abstand-2); inset-block-start: var(--kit-abstand-2); z-index: 100; }

.kit-kopf { border-block-end: 1px solid var(--kit-farbe-rahmen); }
.kit-kopf__innen { display: flex; align-items: center; justify-content: space-between; gap: var(--kit-abstand-2); min-block-size: 4rem; }
.kit-logo { font-weight: 700; text-decoration: none; color: inherit; }

.kit-nav__schalter { display: inline-flex; border: 1px solid var(--kit-farbe-rahmen); background: none; border-radius: var(--kit-radius); padding: var(--kit-abstand-1) var(--kit-abstand-2); cursor: pointer; }
.kit-nav__liste { display: none; }
.kit-nav__liste.ist-offen { display: block; position: absolute; inset-inline: 0; background: var(--kit-farbe-flaeche); border-block-end: 1px solid var(--kit-farbe-rahmen); padding: var(--kit-abstand-2); }

@media (min-width: 48em) {
  .kit-nav__schalter { display: none; }
  .kit-nav__liste { display: block; }
}

.kit-menue { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--kit-abstand-2); }
.kit-nav__liste.ist-offen .kit-menue { flex-direction: column; }
.kit-menue__link { text-decoration: none; color: inherit; padding-block: var(--kit-abstand-1); display: inline-block; }
.kit-menue__punkt--aktiv > .kit-menue__link { text-decoration: underline; text-underline-offset: .35em; }

.kit-fuss { margin-block-start: var(--kit-abstand-6); padding-block: var(--kit-abstand-4); background: var(--kit-farbe-flaeche-alt); font-size: var(--kit-text-s); }
.kit-fuss__innen { display: grid; gap: var(--kit-abstand-3); }
.kit-fuss__adresse { font-style: normal; }
.kit-fuss__zeile { margin: 0; color: var(--kit-farbe-gedaempft); }

@media (min-width: 48em) {
  .kit-fuss__innen { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
}

/* ------------------------------------------------------------------ Bausteine */

.kit-button {
  display: inline-block;
  padding: var(--kit-abstand-1) var(--kit-abstand-3);
  border: 1px solid currentColor;
  border-radius: var(--kit-radius);
  background: var(--kit-farbe-akzent);
  border-color: var(--kit-farbe-akzent);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  font: inherit;
}
.kit-button:hover { filter: brightness(1.1); }
.kit-button--klein { padding: var(--kit-abstand-1) var(--kit-abstand-2); font-size: var(--kit-text-s); }

.kit-feld { margin-block-end: var(--kit-abstand-2); display: grid; gap: .25rem; }
.kit-feld input, .kit-feld textarea {
  font: inherit;
  padding: var(--kit-abstand-1);
  border: 1px solid var(--kit-farbe-rahmen);
  border-radius: var(--kit-radius);
  inline-size: 100%;
}

/* Honeypot: für Menschen unerreichbar, für Bots ein normales Feld. */
.kit-honigtopf { position: absolute; inset-inline-start: -9999px; inline-size: 1px; block-size: 1px; overflow: hidden; }

.kit-formular__meldung:not(:empty) { margin-block-start: var(--kit-abstand-2); font-weight: 600; }

.kit-standort__hinweis { color: var(--kit-farbe-gedaempft); }
.kit-standort__flaeche { inline-size: 100%; block-size: min(60vh, 28rem); background: var(--kit-farbe-flaeche-alt); }
.kit-standort--ohne { border: 1px solid var(--kit-farbe-rahmen); border-radius: var(--kit-radius); padding: var(--kit-abstand-3); }
/* Die Karteikarte am Marker haengt im Nichts: Klicks gehen an die Karte, ihre Verweise holen sie sich zurueck. */
.kit-standort__marke > * { pointer-events: auto; }
/* Schwarzweiss faerbt die Kacheln, nicht den Marker. */
.kit-standort__flaeche .leaflet-tile-pane { filter: grayscale(1); }

.kit-kontakt { font-style: normal; }
/*
 * Die Fehlerseite ist kurz. Ohne diese drei Zeilen endet der Fuss auf einem grossen
 * Bildschirm in der Mitte und darunter steht eine weisse Fläche - der einzige Ort,
 * an dem das vorkommt, deshalb steht die Regel hier und nicht bei allen Seiten.
 */
body.kit-fehler { display: flex; flex-direction: column; min-block-size: 100vh; }
body.kit-fehler .kit-inhalt { flex: 1 0 auto; }

/*
 * Redaktionshinweis: «hier fehlt noch etwas», rot und mitten im Inhalt.
 *
 * Gedacht für den Zwischenstand, den der Kunde auf der Dev-Instanz ansieht - eine
 * Seite, deren Text noch nicht geliefert ist, sagt das selbst, statt still und
 * unfertig dazustehen. Er gehört nicht auf die fertige Seite: «kit check» meldet
 * jede Seite, auf der einer steht, und die Übergabe verlangt, dass keiner übrig ist.
 *
 * Geschrieben wird er als <p class="kit-hinweis">…</p> im Text eines Blocks.
 */
.kit-hinweis {
  margin-block: var(--kit-abstand-2);
  padding: var(--kit-abstand-1) var(--kit-abstand-2);
  border-inline-start: 0.1875rem solid var(--kit-farbe-hinweis);
  background: color-mix(in srgb, var(--kit-farbe-hinweis) 8%, transparent);
  color: var(--kit-farbe-hinweis);
  font-weight: 700;
}

.kit-fehler__innen { padding-block: var(--kit-abstand-6); }
.kit-fehler__weg { margin-block-start: var(--kit-abstand-3); }
.kit-fehler__spur { overflow-x: auto; background: var(--kit-farbe-flaeche-alt); padding: var(--kit-abstand-2); }

/*
 * Sprungmarken. Der Kopf liegt über dem Inhalt; ohne diesen Abstand landet ein
 * Sprungziel darunter und der Anfang des Blocks ist verdeckt.
 */
.kit-anker {
  display: block;
  scroll-margin-block-start: var(--kit-kopf-hoehe, 9.5rem);
}

/*
 * Weicher Lauf zu Sprungzielen - aber nur, wenn niemand Bewegung abgestellt hat.
 * Der Sprung selbst passiert in beiden Fällen; hier geht es nur um den Weg dahin.
 */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/*
 * Ein Sektionstitel im Rang h3 ist untergeordnet und sieht auch so aus. Der
 * Selektor greift über das Element, nicht über eine Klasse: das Partial
 * entscheidet über die Gliederung, das CSS zieht die Grösse nach.
 *
 * 24 px, nicht die nächste Stufe der Skala: zwischen 40 und 36 liegen vier Pixel,
 * und eine untergeordnete Überschrift, die man nicht als solche erkennt, ist
 * keine. Die Akzentlinie darüber bleibt, wie sie ist.
 *
 * `--kit-text-24` bringt das Projekt mit; der Rückfallwert gilt für Projekte
 * ohne diesen Schritt in ihrer Skala.
 */
h3.kit-titel { font-size: var(--kit-text-24, 1.5rem); }

/* ------------------------------------------------------------------ WordPress */

/*
 * Ab hier, was erst mit WordPress dazukam. Alles darüber ist unverändert aus dem
 * Joomla-Kit 0.3.0 übernommen.
 */

/* Anmeldeformular aus wp_login_form(): dieselben Felder wie im Kontaktformular. */
.kit-block--login form p { margin-block-end: var(--kit-abstand-2); display: grid; gap: .25rem; }
.kit-block--login input[type="text"],
.kit-block--login input[type="password"] {
  font: inherit;
  padding: var(--kit-abstand-1);
  border: 1px solid var(--kit-farbe-rahmen);
  border-radius: var(--kit-radius);
  inline-size: 100%;
}
.kit-block--login .login-remember { display: flex; align-items: center; gap: var(--kit-abstand-1); }
.kit-block--login .login-remember label { display: inline-flex; align-items: center; gap: var(--kit-abstand-1); }
.kit-block--login input[type="submit"] {
  padding: var(--kit-abstand-1) var(--kit-abstand-3);
  border: 1px solid var(--kit-farbe-akzent);
  border-radius: var(--kit-radius);
  background: var(--kit-farbe-akzent);
  color: #fff;
  font: inherit;
  cursor: pointer;
  justify-self: start;
}
.kit-block--login input[type="submit"]:hover { filter: brightness(1.1); }

.kit-feld__frei { color: var(--kit-farbe-gedaempft); font-weight: 400; }

/* Hinweis für Bearbeitende, wenn ein Partial fehlt. Gäste sehen ihn nie. */
.kit-fehlt {
  margin: var(--kit-abstand-2);
  padding: var(--kit-abstand-2);
  border: 2px dashed var(--kit-farbe-hinweis);
  color: var(--kit-farbe-hinweis);
  font-weight: 700;
}

/* Nur für Vorleseprogramme. */
.screen-reader-text {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}