/* ==========================================================================
   Seitengerüst, Kachelraster, Karten
   ========================================================================== */

.wt-seite {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

.wt-inhalt {
  flex: 1 0 auto;
  padding: 0 var(--wt-rand) 80px;
}

.wt-bahn {
  width: 100%;
  max-width: var(--wt-breite);
  margin: 0 auto;
}

.wt-bahn-schmal { max-width: var(--wt-breite-schmal); }
.wt-bahn-weit { max-width: 1500px; }

/* --- Seitenkopf einer Unterseite ----------------------------------------- */

.wt-kopfbereich {
  padding: calc(var(--wt-kopf-hoehe) + 40px) 0 30px;
  text-align: center;
  position: relative;
}

.wt-kopfbereich h1 { margin: 0 0 10px; }

.wt-kopfbereich .wt-dachzeile {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 5px 14px;
  border: 1px solid var(--wt-border);
  border-radius: 999px;
  background: var(--wt-surface);
  color: var(--wt-muted);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.wt-kopfbereich .wt-dachzeile::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--wt-accent);
  box-shadow: 0 0 0 3px var(--wt-accent-weich);
}

/* Der Vorspann trägt die Antiqua mit, aber im Grundgewicht 400 statt im
   Überschriftengewicht: bei 17 px und gedämpfter Farbe auf lebendigem Grund
   würden die feinen Haarstriche einer gesperrten 500er sonst wegbrechen. */
.wt-kopfbereich .wt-vorspann {
  max-width: 620px;
  margin: 0 auto;
  color: var(--wt-muted-grund);
  font-family: var(--wt-font-titel);
  font-weight: 400;
  font-size: calc(17px * var(--wt-titel-faktor, 1));
}

/* --- Kopfbereich der Startseite ------------------------------------------ */

.wt-held {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  justify-items: center;
  text-align: center;
  gap: 40px;
  padding: calc(var(--wt-kopf-hoehe) + 44px) 0 26px;
}

/* Kein Widget im Kopfbereich: dann gibt es nur eine Spalte. Ohne das bliebe
   die 40 px breite Lücke stehen und die Wortmarke säße 20 px zu weit links. */
.wt-held-allein { grid-template-columns: minmax(0, 1fr); }

/* Der erste Abschnitt schließt direkt an die Wortmarke an. Vorher standen
   46 px Fußraum und 52 px Kopfraum übereinander - fast hundert Pixel Luft. */
.wt-held + .wt-abschnitt { padding-top: 0; }

/* --- Wortmarke im Kopfbereich --------------------------------------------
   Zwei Fassungen stehen im Markup, sichtbar ist immer nur eine. Umgeschaltet
   wird per CSS und nicht per JavaScript, damit beim Laden nicht kurz die
   falsche aufblitzt. Grundzustand ist dunkel - so ist auch :root definiert. */

/* Der Block kann ein h1 sein (wenn keine Überschrift gesetzt ist) - dann
   dürfen die Überschriftenmaße nicht durchschlagen. */
.wt-held-marke-block {
  margin: 0 0 20px;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1;
  letter-spacing: normal;
}

/* Steht die Wortmarke allein, braucht sie unten keinen Abstand - der
   Abschnitt bringt seinen eigenen mit. */
.wt-held-marke-block:last-child { margin-bottom: 0; }

.wt-held-marke { display: block; }
.wt-held-marke:empty { display: none; }
.wt-fuer-hell { display: none; }

@media (prefers-color-scheme: light) {
  :root:not([data-modus="dunkel"]) .wt-fuer-hell { display: block; }
  :root:not([data-modus="dunkel"]) .wt-fuer-dunkel { display: none; }
}
:root[data-modus="hell"] .wt-fuer-hell { display: block; }
:root[data-modus="hell"] .wt-fuer-dunkel { display: none; }
:root[data-modus="dunkel"] .wt-fuer-hell { display: none; }
:root[data-modus="dunkel"] .wt-fuer-dunkel { display: block; }

/* Ohne Überschrift darunter ist die Wortmarke der Blickfang des
   Kopfbereichs - sie darf entsprechend groß stehen, aber nicht erschlagen.
   Beide Werte gelten zugleich: die Feste greift am großen Schirm, der
   Anteil an der Fensterbreite am Telefon. Um rund ein Sechstel
   zurückgenommen (vorher 440 px bzw. 80vw). */
.wt-held-logo {
  width: auto;
  height: auto;
  max-width: min(360px, 66vw);
  max-height: 108px;
  object-fit: contain;
  object-position: left center;
}

/* Die Wortmarke trägt weiße Schrift. Auf hellem Grund bekommt sie deshalb
   eine dunkle Platte - dieselbe Rundung wie die Textzeile, die sie ersetzt.
   Die Farbe ist fest und folgt nicht den Token: sie muss dunkel bleiben,
   gerade weil ringsum alles hell ist. */
.wt-held-platte {
  padding: 14px 22px;
  border-radius: 14px;
  background: #121820;
  box-shadow: 0 2px 6px rgba(20, 30, 40, .12);
  max-height: 92px;
  box-sizing: content-box;
}

.wt-held .wt-dachzeile {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
  padding: 5px 14px;
  border: 1px solid var(--wt-border);
  border-radius: 999px;
  background: var(--wt-surface);
  color: var(--wt-muted);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.wt-held .wt-dachzeile::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--wt-accent);
  box-shadow: 0 0 0 3px var(--wt-accent-weich);
}

/* Trägt die Antiqua wie h1 und h2. Die Sperrung war mit -.03em noch enger
   als bei den Überschriften - bei feinen Haarstrichen kleben die Buchstaben
   dann aneinander. Jetzt leicht gesperrt, wie die Wortmarke selbst. */
.wt-held-titel {
  margin: 0 0 12px;
  font-family: var(--wt-font-titel);
  font-weight: var(--wt-titel-gewicht, 500);
  font-size: calc(clamp(34px, 6.4vw, 62px) * var(--wt-titel-faktor, 1));
  letter-spacing: .01em;
}

/* Rückt ohne Überschrift direkt unter die Wortmarke und trägt dann den
   ganzen Text des Kopfbereichs - deshalb etwas größer. */
.wt-held .wt-vorspann {
  max-width: 540px;
  margin: 0;
  color: var(--wt-muted-grund);
  font-family: var(--wt-font-titel);
  font-weight: 400;
  font-size: calc(clamp(17px, 2.1vw, 20px) * var(--wt-titel-faktor, 1));
  line-height: 1.5;
}

.wt-held-widget { min-width: 0; max-width: 460px; }

/* Die Verkleinerung der Wortmarke am Telefon ist entfallen: sie stand nur
   dafür, dass der Windsack rechts daneben Platz fand. Der sitzt jetzt in
   der Kopfleiste, die Wortmarke darf wieder die volle Breite nutzen. */

@media (max-width: 900px) {
  .wt-held {
    grid-template-columns: 1fr;
    padding: calc(var(--wt-kopf-hoehe) + 24px) 0 18px;
    gap: 26px;
  }
  .wt-held-widget { max-width: none; }
}

/* --- Karten -------------------------------------------------------------- */

/* Milchglas: die Karte lässt den lebenden Hintergrund durchschimmern.
   88 % Deckung ist mit Bedacht gewählt - genug Bewegung, um zu wirken, und
   noch weit genug von der Grenze entfernt, dass der Text seinen Kontrast
   behält (nachgerechnet gegen die hellste Stelle der Aurora).
   Ohne backdrop-filter im Browser bleibt einfach eine leicht durchsichtige
   Fläche - kein Ersatzweg nötig. */
.wt-karte {
  position: relative;
  background: color-mix(in srgb, var(--wt-surface) 88%, transparent);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--wt-border);
  border-radius: var(--wt-radius);
  box-shadow: var(--wt-shadow), var(--wt-glanz);
  padding: 22px;
  overflow: hidden;
}

@supports not (backdrop-filter: blur(1px)) {
  .wt-karte { background: var(--wt-surface); }
}

/* Inhaltskarte: nimmt den Seiteninhalt auf, damit Shortcodes und Fließtext
   auf derselben Fläche sitzen. Hier steht dichte Zahlenware - deshalb
   deckend, ohne Durchblick. */
.wt-karte-inhalt {
  padding: 28px clamp(18px, 3vw, 36px);
  background: var(--wt-surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Shortcodes bringen ihre eigene Karte mit - dann keine zweite darum. */
.wt-karte-blank {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  overflow: visible;
}

/* --- Kachelraster -------------------------------------------------------- */

.wt-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--wt-gap);
  align-items: start;
}

.wt-raster-1 { grid-template-columns: minmax(0, 1fr); }
.wt-raster-2 { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.wt-raster-weit { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }

/* --- Inhalt mit Seitenspalte ---------------------------------------------
   Greift nur, wenn im Widget-Bereich "Seitenspalte" etwas steht; sonst
   setzen single.php und index.php die Klasse gar nicht erst. Ohne Widgets
   bleibt also alles wie bisher. */

.wt-gespann {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 28px;
  align-items: start;
}

.wt-gespann-haupt { min-width: 0; }

.wt-spalte {
  position: sticky;
  top: calc(var(--wt-kopf-hoehe) + 24px);   /* unter der festen Kopfleiste */
  min-width: 0;
}

/* Unter 900 px rutscht die Spalte unter den Inhalt; klebrig wäre sie dort
   nur im Weg. */
@media (max-width: 900px) {
  .wt-gespann { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .wt-spalte { position: static; }
}
.wt-voll { grid-column: 1 / -1; }

/* --- Kachel als Verweis -------------------------------------------------- */

.wt-kachel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 150px;
  padding: 20px;
  background: color-mix(in srgb, var(--wt-surface) 88%, transparent);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--wt-border);
  border-radius: var(--wt-radius);
  box-shadow: var(--wt-shadow), var(--wt-glanz);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  transition: transform var(--wt-normal) var(--wt-kurve),
              border-color var(--wt-normal) var(--wt-kurve),
              box-shadow var(--wt-normal) var(--wt-kurve);
}

@supports not (backdrop-filter: blur(1px)) {
  .wt-kachel { background: var(--wt-surface); }
}

/* Lichtschein, der dem Zeiger folgt. --mx/--my setzt theme.js;
   ohne JavaScript bleibt die Kachel einfach ruhig. */
.wt-kachel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(
    380px circle at var(--mx, 50%) var(--my, 0%),
    var(--wt-accent-weich), transparent 68%);
  transition: opacity var(--wt-normal) var(--wt-kurve);
}

.wt-kachel:hover,
.wt-kachel:focus-visible {
  transform: translateY(-3px);
  border-color: var(--wt-border-stark);
  box-shadow: var(--wt-shadow-hoch), var(--wt-glanz);
  color: inherit;
}

.wt-kachel:hover::before,
.wt-kachel:focus-visible::before { opacity: 1; }

.wt-kachel-symbol {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--wt-accent-weich);
  color: var(--wt-accent);
  margin-bottom: 4px;
}
.wt-kachel-symbol svg { width: 21px; height: 21px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.wt-kachel h3 { margin: 0; font-size: 18px; }

.wt-kachel p {
  margin: 0;
  color: var(--wt-muted);
  font-size: 14.5px;
  line-height: 1.5;
}

.wt-kachel-pfeil {
  margin-top: auto;
  padding-top: 10px;
  color: var(--wt-accent-text);
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.wt-kachel-pfeil::after {
  content: "→";
  transition: transform var(--wt-normal) var(--wt-kurve);
}
.wt-kachel:hover .wt-kachel-pfeil::after { transform: translateX(4px); }

/* --- Abschnitt ----------------------------------------------------------- */

.wt-abschnitt { padding: 52px 0; }
.wt-abschnitt-eng { padding: 30px 0; }

.wt-abschnitt-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 20px;
  margin-bottom: 22px;
}

.wt-abschnitt-kopf h2 { margin: 0; }

.wt-abschnitt-kopf .wt-mehr {
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
}

/* --- Fließtext im Inhalt ------------------------------------------------- */

.wt-text > * + * { margin-top: 1em; }
.wt-text ul, .wt-text ol { padding-left: 1.3em; }
.wt-text li + li { margin-top: .35em; }

.wt-text blockquote {
  margin: 1.4em 0;
  padding: 2px 0 2px 20px;
  border-left: 3px solid var(--wt-accent);
  color: var(--wt-muted);
  font-style: italic;
}

.wt-text img { border-radius: var(--wt-radius-klein); }

.wt-text table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.wt-text th, .wt-text td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--wt-border);
  text-align: left;
}
.wt-text thead th {
  background: var(--wt-surface-2);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--wt-muted);
}

.wt-text code {
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--wt-surface-2);
  font-family: var(--wt-font-zahl);
  font-size: .9em;
}

.wt-text pre {
  padding: 16px;
  border-radius: var(--wt-radius-klein);
  background: var(--wt-surface-2);
  overflow-x: auto;
}

/* --- Formulare ----------------------------------------------------------- */

/* Gilt auch für WPForms auf der Kontaktseite: die Felder erben von hier,
   sodass sie im dunklen Modus nicht weiß aufblitzen. */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="date"],
select,
textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--wt-border);
  border-radius: var(--wt-radius-klein);
  background: var(--wt-surface-2);
  color: var(--wt-fg);
  font: inherit;
  font-size: 15.5px;
  transition: border-color var(--wt-schnell) var(--wt-kurve);
}

input:focus, select:focus, textarea:focus { border-color: var(--wt-accent); }
textarea { min-height: 140px; resize: vertical; }
::placeholder { color: var(--wt-leise); opacity: 1; }

button,
input[type="submit"],
.wt-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border: 0;
  border-radius: var(--wt-radius-klein);
  background: var(--wt-accent);
  color: #10141a;                 /* dunkle Schrift auf Gold - in beiden Modi */
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: filter var(--wt-schnell) var(--wt-kurve),
              transform var(--wt-schnell) var(--wt-kurve);
}
button:hover,
input[type="submit"]:hover,
.wt-knopf:hover { filter: brightness(1.08); color: #10141a; }
button:active, input[type="submit"]:active { transform: translateY(1px); }

/* Der runde Knopf in der Kopfleiste hat eigene Farben - zurücksetzen. */
.wt-knopf-rund { background: var(--wt-surface); color: var(--wt-muted); }
.wt-knopf-rund:hover { background: var(--wt-surface); filter: none; }

.wt-suche { display: flex; gap: 8px; }
.wt-suche input { flex: 1; }
.wt-suche button { flex: none; }

/* Widgets */
.wt-widget + .wt-widget { margin-top: 22px; }
.wt-widget-titel {
  margin: 0 0 10px;
  color: var(--wt-fg);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

/* --- Fußzeile ------------------------------------------------------------ */

.wt-fuss {
  flex: none;
  margin-top: auto;
  padding: 40px var(--wt-rand) 30px;
  border-top: 1px solid var(--wt-border);
  background: var(--wt-bg-tief);
  color: var(--wt-muted);
  font-size: 14.5px;
}

.wt-fuss-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 26px;
  margin-bottom: 28px;
}

.wt-fuss h4 {
  margin: 0 0 10px;
  color: var(--wt-fg);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.wt-fuss ul { list-style: none; margin: 0; padding: 0; }
.wt-fuss li + li { margin-top: 2px; }
/* Polsterung statt Abstand zwischen den Punkten: der Verweis wird dadurch
   26 px hoch und bleibt auch am Handy sicher zu treffen. */
.wt-fuss a { display: inline-block; padding: 3px 0; color: var(--wt-muted); text-decoration: none; }
.wt-fuss a:hover { color: var(--wt-accent-text); }

.wt-fuss-unten {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
  padding-top: 20px;
  border-top: 1px solid var(--wt-border);
  font-size: 13.5px;
}

/* --- Seitenumbrüche und Kommentare abschalten ---------------------------- */

.wt-blaettern {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 36px;
}
.wt-blaettern .page-numbers {
  display: grid;
  place-items: center;
  min-width: 40px; height: 40px;
  padding: 0 12px;
  border: 1px solid var(--wt-border);
  border-radius: var(--wt-radius-klein);
  background: var(--wt-surface);
  color: var(--wt-muted);
  text-decoration: none;
  font-weight: 600;
}
.wt-blaettern .page-numbers.current,
.wt-blaettern .page-numbers:hover {
  border-color: var(--wt-accent);
  color: var(--wt-accent-text);
}

/* --- kleine Bildschirme -------------------------------------------------- */

@media (max-width: 700px) {
  :root { --wt-rand: 14px; --wt-gap: 13px; --wt-radius: 14px; }
  .wt-kopfbereich { padding: 96px 0 22px; }
  .wt-abschnitt { padding: 34px 0; }
  .wt-karte { padding: 17px; }
  .wt-karte-inhalt { padding: 20px 15px; }
  .wt-raster,
  .wt-raster-2,
  .wt-raster-weit { grid-template-columns: 1fr; }
  .wt-fuss-unten { flex-direction: column; }
}