/* ==========================================================================
   TEDesign – Komponenten
   Jeder Block hier ist so geschnitten, dass er später 1:1 als
   WordPress-Block-Pattern übernommen werden kann.
   ========================================================================== */

/* --- Kopfzeile ------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--te-n-000) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
@supports not (backdrop-filter: blur(1px)) {
  .site-header { background: var(--te-n-000); }
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: 5rem;
  padding-block: var(--sp-3);
}

/* Das Logo wird über die HÖHE gesteuert, nicht über die Breite. Bei
   Breitensteuerung ergibt das Seitenverhältnis 2,63:1 eine Höhe, die die
   Kopfzeile exakt ausfüllt – das Logo klebt dann oben und unten an der Kante. */
.logo { display: inline-flex; align-items: center; flex: none; }
.logo img {
  height: clamp(2.1rem, 1.7rem + 1.3vw, 2.9rem);
  width: auto;
}

/* --- Navigation ------------------------------------------------------------ */
.nav__list {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__list li + li { margin-top: 0; }

.nav__link {
  display: inline-block;
  padding: var(--sp-2) 0;
  color: var(--text);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  position: relative;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { font-weight: var(--fw-semibold); }

.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--sp-2);
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}
.nav-toggle__bars { display: block; width: 1.125rem; height: 2px; background: currentColor; position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor;
}
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }

@media (max-width: 61.99rem) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: absolute;
    inset: 100% 0 auto 0;
    background: var(--te-n-000);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
    padding: var(--sp-4) var(--gutter) var(--sp-6);
    display: none;
  }
  .nav[data-open="true"] { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link {
    padding: var(--sp-4) 0;
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-md);
  }
  .nav__link::after { display: none; }
}

/* --- Schaltflächen ---------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.btn--primary {
  background: var(--te-blue-600);
  border-color: var(--te-blue-600);
  color: #fff;                     /* 5.57:1 auf #0066CC */
}
.btn--primary:hover {
  background: var(--te-blue-700);
  border-color: var(--te-blue-700);
  color: #fff;
}
.btn--ghost {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text);
}
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

.btn--lg { padding: var(--sp-4) var(--sp-6); font-size: var(--fs-base); }

/* Diese Regeln müssen NACH .btn stehen: .header__cta und .btn haben dieselbe
   Spezifität, es entscheidet also die Quellreihenfolge. Stünden sie oben beim
   Navigationsblock, würde .btn { display: inline-flex } sie überschreiben und
   der Button schöbe die Kopfzeile auf schmalen Displays über den Rand. */
.nav__cta-item { display: none; }

@media (max-width: 61.99rem) {
  .header__cta { display: none; }
  .nav__cta-item { display: block; margin-top: var(--sp-5); }
  .nav__cta-item .btn { width: 100%; }
}

/* Textlink mit Pfeil – für Teaser statt eines zweiten Buttons */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  text-decoration: none;
}
.link-arrow::after {
  content: "";
  width: 0.6em; height: 0.6em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: translate var(--dur) var(--ease);
}
.link-arrow:hover::after { translate: 0.25em 0; }

/* --- Hero ------------------------------------------------------------------ */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 2rem + 6vw, 7rem);
}

/* Bildmarke als sehr zurückhaltendes Hintergrundmotiv. aria-hidden im Markup,
   damit Screenreader sie nicht als Inhalt vorlesen. */
.hero__watermark {
  position: absolute;
  right: -6%;
  top: 50%;
  translate: 0 -50%;
  width: min(58rem, 70%);
  opacity: 0.055;
  pointer-events: none;
}

.hero__inner { position: relative; max-width: 54rem; }

.hero__title { margin-bottom: var(--sp-5); }
.hero__title em {
  font-style: normal;
  color: var(--accent);
}

.hero__lead {
  font-size: var(--fs-md);
  color: var(--text-muted);
  max-width: 40rem;
  margin-bottom: var(--sp-7);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-bottom: var(--sp-9);
}

/* --- Seitenkopf der Unterseiten ---------------------------------------------
   Wie der Hero, nur ohne Kennzahlen und Schaltflächen: Unterseiten brauchen
   Orientierung, keinen zweiten Einstieg. */
.page-head { padding-block: clamp(2.75rem, 2rem + 3.5vw, 5rem); }
.page-head__inner { position: relative; max-width: 48rem; }
.page-head h1 { font-size: var(--fs-2xl); margin-bottom: var(--sp-4); }
.page-head__lead {
  font-size: var(--fs-md);
  color: var(--text-muted);
  margin-bottom: 0;
  max-width: 42rem;
}

/* --- Entscheidungskriterien --------------------------------------------------
   Trägt die Materialwahl als Beratungsleistung: erst die Frage, dann was ihre
   Antwort für das Bauteil bedeutet. */
.criterion {
  border-top: 1px solid var(--border);
  padding-top: var(--sp-4);
}
.criterion__q {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  margin-bottom: var(--sp-2);
}
.criterion p { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: 0; }

/* --- Grenzen des Verfahrens --------------------------------------------------
   Bewusst als eigene Liste mit eigenem Zeichen: Was nicht geht, soll man
   genauso schnell finden wie das, was geht. */
.limits { list-style: none; padding: 0; }
.limits li {
  position: relative;
  padding-left: 2rem;
  margin-top: var(--sp-4);
}
.limits li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 0.9rem; height: 2px;
  background: var(--te-n-400);
}
.limits strong { display: block; font-family: var(--font-display); }
.limits span { font-size: var(--fs-sm); color: var(--text-muted); }

/* --- Fragen und Antworten ----------------------------------------------------
   Bewusst immer sichtbar statt aufklappbar: Generative Suchsysteme und der
   Google-Index lesen offenen Text zuverlässiger als eingeklappten. */
/* Lesebreite begrenzen, aber linksbündig zur Fluchtlinie der Seite bleiben –
   ein zentrierter Textcontainer würde die Achse der übrigen Abschnitte brechen. */
.faq { max-width: 48rem; }
.faq__item { border-top: 1px solid var(--border); padding: var(--sp-5) 0; }
.faq__item:last-child { border-bottom: 1px solid var(--border); }
.faq__item h3 { font-size: var(--fs-base); margin-bottom: var(--sp-2); }
.faq__item p { margin-bottom: 0; color: var(--text-muted); }

/* --- Kennzahlenleiste ------------------------------------------------------- */
/* Vier Kennzahlen, gleiche Begründung wie bei .grid--4: feste Stufen statt
   auto-fit, damit nie eine einzelne Zahl in einer zweiten Reihe steht. */
.facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  border-top: 1px solid var(--border-strong);
  padding-top: var(--sp-6);
}
@media (min-width: 30rem) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fact__value {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  margin-bottom: var(--sp-1);
}
.fact__label {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin: 0;
}

/* --- Karten ----------------------------------------------------------------- */
.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
/* Hover nur, wenn die Karte tatsächlich irgendwohin führt. Eine Karte, die
   sich beim Überfahren hebt und dann nicht klickbar ist, verspricht etwas,
   das sie nicht hält. */
.card:has(a):hover { border-color: var(--border-strong); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .card:has(a):hover { transform: none; }
}

/* Die abgeschrägte Ecke greift den 45-Grad-Schnitt des unteren Logo-Balkens
   auf. Bewusst nur hier, damit das Motiv ein Akzent bleibt. */
.card__media {
  position: relative;
  background: var(--bg-inset);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1.75rem),
                     calc(100% - 1.75rem) 100%, 0 100%);
}
/* Das Seitenverhältnis ist hier fest gesetzt, damit das Layout schon vor dem
   Laden der Bilder steht und beim Austausch nichts springt. Deshalb braucht
   JEDER Einsatzort den passenden Modifikator – sonst wird ein Hochformat auf
   4:3 quer beschnitten. Welches Verhältnis wo gilt: docs/foto-leitfaden.md */
.card__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.card__media--wide img { aspect-ratio: 16 / 9; }
.card__media--portrait img { aspect-ratio: 4 / 5; }

.card__body {
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.card__body > :last-child { margin-bottom: 0; margin-top: auto; }

.card__title { font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.card__title a { color: inherit; text-decoration: none; }
.card__title a:hover { color: var(--accent); }

/* Ganze Karte klickbar, Fokus bleibt trotzdem am Link */
.card__title a::before { content: ""; position: absolute; inset: 0; }
.card { position: relative; }

.card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-3);
}

.card__text { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--sp-4); }

/* --- Kategoriefilter ---------------------------------------------------------
   Standardmäßig ausgeblendet und erst durch filter.js sichtbar geschaltet.
   Ohne JavaScript stünden hier sonst Schaltflächen ohne Funktion. */
.filter { display: none; }
.filter[data-enhanced="true"] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-7);
}

.filter__btn {
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-4);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text);
  transition: border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.filter__btn:hover { border-color: var(--accent); color: var(--accent); }
.filter__btn[aria-pressed="true"] {
  background: var(--te-blue-600);
  border-color: var(--te-blue-600);
  color: #fff;                       /* 5.57:1 auf #0066CC */
}

.filter__status {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-bottom: var(--sp-5);
}

/* --- Leistungsblock --------------------------------------------------------- */
.service {
  border-top: 3px solid var(--accent);
  padding-top: var(--sp-5);
}
.service__num {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  color: var(--accent);
  margin-bottom: var(--sp-3);
}
.service ul { padding-left: 1.1em; }
.service li { font-size: var(--fs-sm); color: var(--text-muted); }

/* --- Ablauf in Schritten ---------------------------------------------------- */
.steps { counter-reset: step; list-style: none; padding: 0; }
.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 3.25rem;
  margin-top: var(--sp-5);
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0; top: 0.1em;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  color: var(--accent);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 2px;
}
.steps h3 { font-size: var(--fs-base); margin-bottom: var(--sp-1); }
.steps p { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }

/* Nachgeordneter Hinweis unter einem Abschnitt – trägt Zusatzinformation,
   ohne mit der Kernaussage zu konkurrieren. */
.footnote {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  max-width: 44rem;
}

/* --- Hinweis auf Inhalte, die noch entstehen ----------------------------------
   Bewusst kein Baustellen-Banner: Ein neuer Betrieb ohne Referenzliste ist
   normal, ein "Under Construction"-Schild wirkt dagegen unfertig. Der Hinweis
   ist deshalb eine ruhige Auszeichnung im Stil der Seite. */
.wip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid currentColor;
  border-radius: 100px;
  padding: var(--sp-1) var(--sp-3);
  margin-bottom: var(--sp-4);
}
.wip::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

/* Vorschau auf das, was hier später steht – gibt der Seite Inhalt, ohne
   Projekte zu behaupten, die es noch nicht gibt. */
.vorschau {
  border-top: 3px solid var(--border-strong);
  padding-top: var(--sp-5);
}
.vorschau h3 { font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.vorschau p { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: 0; }

/* --- Rechtstexte ---------------------------------------------------------------
   Einfügebereich für die Texte der IT-Recht Kanzlei. Die Typografie ist so
   gesetzt, dass eingefügtes HTML aus dem Mandantenportal ohne Nacharbeit
   lesbar bricht – Überschriften, Absätze und Listen kommen von dort in
   unbekannter Verschachtelung. */
.legal { max-width: 44rem; }
.legal h2 {
  font-size: var(--fs-lg);
  margin-top: var(--sp-8);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}
.legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal h3 { font-size: var(--fs-base); margin-top: var(--sp-6); }
.legal h4 { font-size: var(--fs-sm); margin-top: var(--sp-5); }
.legal p, .legal li { font-size: var(--fs-sm); }
.legal ul, .legal ol { padding-left: 1.4em; }

/* Rechtstext aus dem Mandantenportal der IT-Recht Kanzlei.
   Der Text kommt unverändert von dort, deshalb wird sein Markup hier nicht
   angefasst, sondern nur von außen eingepasst. Die Kanzlei liefert eigene
   Schriftgrößen und Abstände mit, die zu ihrer Vorschauseite passen, nicht
   zu dieser Website. */
.legal--itrk { font-size: var(--fs-sm); }
.legal--itrk > div { max-width: 44rem; }

/* Die Stand-Angabe trägt einen Inline-Abstand von 8em und reißt damit ein
   Loch in die Seite. Inline-Stile lassen sich nur mit !important
   überschreiben – hier vertretbar, weil die Alternative wäre, fremdes
   Markup zu bearbeiten. Der Text selbst bleibt unangetastet. */
#itkanzlei_txt_copyright {
  margin-top: var(--sp-8) !important;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs) !important;
  color: var(--text-muted);
}
#itkanzlei_txt_copyright > div[style] {
  float: none !important;
  margin-left: 0 !important;
  white-space: normal !important;
}

/* Siegel der IT-Recht Kanzlei. Deren Lizenz verlangt in der Regel einen
   sichtbaren Verweis – der Platz dafür ist hier vorbereitet. */
.legal-seal {
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* --- Formular ------------------------------------------------------------------
   Bewusst schlank: Name, E-Mail, Nachricht, Einwilligung. Jedes zusätzliche
   Feld senkt die Abschlussquote messbar – und mehr braucht eine erste
   Kontaktaufnahme nicht. */
.form { max-width: 34rem; }

.field { margin-bottom: var(--sp-5); }
.field label {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-2);
}
.field__hint {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: var(--sp-1);
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field textarea {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-base);
  transition: border-color var(--dur-fast) var(--ease);
}
.field input:focus,
.field textarea:focus { border-color: var(--accent); }
.field textarea { min-height: 9rem; resize: vertical; }

/* Dateiauswahl. Der Browser rendert den Knopf selbst und laesst sich dabei
   nur begrenzt umstimmen; gestaltet wird deshalb der Rahmen darum und der
   Knopf ueber das ::file-selector-button-Pseudoelement. */
.field input[type="file"] {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-family: inherit;
  cursor: pointer;
}
.field input[type="file"]:focus { border-color: var(--accent); }
.field input[type="file"]::file-selector-button {
  margin-right: var(--sp-4);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.field input[type="file"]::file-selector-button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.field--invalid input,
.field--invalid textarea { border-color: var(--te-error); }
.field__error {
  display: none;
  font-size: var(--fs-xs);
  color: var(--te-error);
  margin-top: var(--sp-1);
}
.field--invalid .field__error { display: block; }

.field__required { color: var(--accent); }

.form__legend {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-bottom: var(--sp-4);
}
.form__legend .field__required { margin-right: 0.15em; }

/* Solange nicht alle Pflichtfelder ausgefüllt sind, ist der Button leicht
   durchscheinend statt hart ausgegraut - er soll erkennbar bleiben, nur
   noch nicht bedienbar. pointer-events sperrt zusätzlich Klicks in
   Browsern, die :disabled auf <button> optisch anders behandeln. */
.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* Checkbox als eigenes Muster: die Klickfläche muss den ganzen Satz
   umfassen, nicht nur das 16-px-Kästchen. */
.field-check {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
  font-size: var(--fs-sm);
}
.field-check input {
  margin-top: 0.2em;
  width: 1.1rem; height: 1.1rem;
  accent-color: var(--te-blue-600);
  flex: none;
}
.field-check label { cursor: pointer; }

/* Honeypot: für Menschen unsichtbar, für die meisten Formular-Bots nicht.
   Kein display:none – Screenreader-Bots und einfache Spam-Skripte prüfen
   genau darauf. Off-Screen-Positionierung ist robuster. */
.field-trap {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* display bleibt ausschließlich Sache des Inline-Styles, den form.js setzt
   (statusOk.style.display = 'block'). Würde --ok/--error hier zusätzlich
   display:block erzwingen, stünden beide Boxen dauerhaft offen, sobald die
   Klasse im HTML steht - unabhängig vom tatsächlichen Formularstatus. */
.form__status {
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-5);
  display: none;
}
.form__status--ok { background: var(--te-ok-bg); color: var(--te-ok); }
.form__status--error { background: var(--te-error-bg); color: var(--te-error); }

/* --- Kontakt-Infoblock ----------------------------------------------------- */
.contact-info dt {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: var(--sp-6);
}
.contact-info dt:first-child { margin-top: 0; }
.contact-info dd { margin: var(--sp-1) 0 0; font-size: var(--fs-base); }

/* --- Artikel -----------------------------------------------------------------
   Lesebreite begrenzt, aber linksbündig zur Fluchtlinie der übrigen Seiten.
   Bilder und Faktenkästen dürfen aus dieser Breite ausbrechen. */
.article { max-width: 44rem; }
.article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-4);
}
.article__lead {
  font-size: var(--fs-md);
  color: var(--text-muted);
  margin-bottom: 0;
}
.article__body > h2 {
  font-size: var(--fs-lg);
  margin-top: var(--sp-9);
  padding-top: var(--sp-5);
  border-top: 2px solid var(--accent);
}
.article__body > h2:first-child { margin-top: 0; }
.article__body > h3 { margin-top: var(--sp-7); }
.article__body figure { margin-block: var(--sp-7); }

/* Faktenkasten – trägt die harten Zahlen eines Projekts */
.factbox {
  background: var(--bg-subtle);
  border-left: 3px solid var(--accent);
  padding: var(--sp-5) var(--sp-6);
  margin-block: var(--sp-7);
}
.factbox h3 {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-4);
}
.factbox dl { display: grid; gap: var(--sp-3) var(--sp-5); margin: 0; }
@media (min-width: 34rem) { .factbox dl { grid-template-columns: auto 1fr; } }
.factbox dt {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
}
.factbox dd { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }

/* Hinweisleiste für den Musterartikel – muss vor Veröffentlichung entfernt
   werden, damit kein erfundener Projektbericht als echter erscheint. */
.draft-note {
  border: 1px dashed var(--te-blue-400);
  background: var(--te-blue-050);
  color: var(--te-blue-800);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-7);
}
.draft-note strong { font-family: var(--font-display); }

/* --- Aufforderung am Seitenende --------------------------------------------- */
.cta__inner {
  display: grid;
  gap: var(--sp-6);
  align-items: center;
}
@media (min-width: 52rem) {
  .cta__inner { grid-template-columns: minmax(0, 1fr) auto; }
}
.cta h2 { margin-bottom: var(--sp-3); }
.cta p { color: var(--text-muted); margin-bottom: 0; }

/* --- Fußzeile ---------------------------------------------------------------- */
.site-footer {
  background: var(--te-n-950);
  color: var(--te-n-300);
  padding-block: var(--sp-9) var(--sp-6);
  font-size: var(--fs-sm);
}
.site-footer a { color: var(--te-n-100); text-decoration: none; }
.site-footer a:hover { color: var(--te-blue-200); text-decoration: underline; }

/* Die Markenspalte bekommt mehr Breite als die drei Linkspalten. Grund: Dort
   steht das volle Logo mit Tagline, und deren Lesbarkeit hängt allein an der
   Breite – sie ist nur 2,3 % davon hoch. Bei 350 px Logobreite kommt sie auf
   rund 8 px Versalhöhe und ist lesbar. */
.footer__grid {
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  margin-bottom: var(--sp-8);
}
@media (min-width: 62rem) {
  .footer__grid { grid-template-columns: 1.7fr 1fr 1.1fr 0.8fr; }
}
.footer__title {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--te-n-400);
  margin-bottom: var(--sp-4);
}
.footer__logo { width: min(22rem, 100%); margin-bottom: var(--sp-5); }

.footer__bottom {
  border-top: 1px solid #2E343D;
  padding-top: var(--sp-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  justify-content: space-between;
  color: var(--te-n-400);
}
.footer__bottom p { margin: 0; }

/* Reine Verlinkung zu den Profilen, kein eingebettetes Widget – damit lädt
   die Seite nichts von Meta oder LinkedIn und bleibt einwilligungsfrei. */
.social {
  display: flex;
  gap: var(--sp-3);
  list-style: none;
  padding: 0;
}
.social li + li { margin-top: 0; }
.social a {
  display: grid;
  place-items: center;
  width: 2.25rem; height: 2.25rem;
  border: 1px solid #2E343D;
  border-radius: var(--radius);
}
.social a:hover { border-color: var(--te-blue-300); }
.social svg { width: 1.125rem; height: 1.125rem; fill: currentColor; }

/* --- Platzhalter-Kennzeichnung ------------------------------------------------
   Markiert Inhalte, die noch echte Daten brauchen. Vor dem Livegang muss
   diese Klasse im gesamten Projekt keine Treffer mehr liefern. */
/* Halbtransparent statt deckend: die Markierung muss auf hellem wie auf
   dunklem Grund funktionieren, ohne den Text darunter unlesbar zu machen. */
.is-placeholder {
  background: repeating-linear-gradient(45deg,
              rgba(77, 155, 230, 0.16) 0 8px,
              transparent 8px 16px);
  outline: 1px dashed rgba(77, 155, 230, 0.65);
  outline-offset: 3px;
}