/* files/css/site.css — Schriften, Grundlagen und site-weite Bausteine (Header, Footer, Back-to-Top)
 *
 * Werte aus export/variante3.html. Farben ausschließlich über die Tokens aus tokens.css,
 * das Hell-Thema ergibt sich allein aus dem Token-Wechsel (html.light).
 * Sektionsspezifisches CSS kommt mit den jeweiligen Inhaltselementen (ab Auftrag 02).
 */

/* ------------------------------------------------------------------ Schriften
 * Archivo variabel (wght 100–900, wdth 62–125 %) und JetBrains Mono 400/500,
 * jeweils Latin + Latin-Ext. Quelle: Fontsource 5.3.0 (@fontsource-variable/archivo,
 * @fontsource/jetbrains-mono), Lizenz: files/fonts/OFL-*.txt
 */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url('../fonts/archivo-latin-standard-normal.woff2') format('woff2-variations'),
       url('../fonts/archivo-latin-standard-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url('../fonts/archivo-latin-ext-standard-normal.woff2') format('woff2-variations'),
       url('../fonts/archivo-latin-ext-standard-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('../fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('../fonts/jetbrains-mono-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('../fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('../fonts/jetbrains-mono-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

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

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

/* Sanftes Scrollen erst nach dem Laden (Klasse aus dem Inline-Script): Ein #anker-Aufruf
   würde sonst während des Schriftwechsels zum alten Ziel weiterfahren. */
@media (prefers-reduced-motion: no-preference) {
  html.is-loaded {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.6;
  overflow-x: clip;
}

a {
  color: inherit;
}

:where(a):hover {
  opacity: .8;
}

img {
  max-width: 100%;
}

:where(img) {
  height: auto;
}

section {
  scroll-margin-top: var(--header-h);
}

/* Ziel des Skip-Links (tabindex="-1"), kein Fokusrahmen um den ganzen Inhalt */
main:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 3px;
}

::selection {
  background: var(--c-accent);
  color: var(--c-selection-text);
}

/* Grundtypografie (Spezifität 0, Elemente überschreiben sie mit eigenen Klassen) */
:where(h1, h2, h3, h4, h5, h6) {
  margin: 0 0 .5em;
  line-height: 1.2;
  hyphens: auto;
  overflow-wrap: break-word;
}

:where(h1) {
  font-weight: 800;
  font-stretch: 125%;
  font-size: clamp(48px, 5.6vw, 96px);
  line-height: .92;
  letter-spacing: -.035em;
  text-transform: uppercase;
}

:where(h2) {
  font-weight: 800;
  font-stretch: 125%;
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: -.025em;
  text-transform: uppercase;
}

:where(h3) {
  font-size: 28px;
  font-weight: 700;
}

:where(p, ul, ol, dl, table, blockquote) {
  margin: 0 0 1em;
}

/* Basis-Layer: Jedes Element landet in der Inhaltsspalte, eigene Sektionen setzen .is-full */
.mod_article {
  display: grid;
  grid-template-columns: 1fr min(var(--container), 100% - 2 * var(--pad-x)) 1fr;
}

.mod_article > * {
  grid-column: 2;
}

.mod_article > .is-full {
  grid-column: 1 / -1;
}

/* ------------------------------------------------------------------ Hinweisfenster externe Links (site.js) */
.c2n-extlink {
  box-sizing: border-box;
  width: min(600px, 100% - 2 * var(--pad-x));
  max-width: none;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 40px;
  border: 1px solid var(--c-border-strong);
  background: var(--c-surface);
  color: var(--c-text);
}

.c2n-extlink::backdrop {
  background: rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.c2n-extlink__close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--c-text);
  cursor: pointer;
}

.c2n-extlink :focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 3px;
}

.c2n-extlink .c2n-extlink__title {
  margin: 0 0 20px;
  font-size: clamp(20px, 5.6vw, 30px);
  font-weight: 800;
  font-stretch: 125%;
  line-height: 1.1;
  letter-spacing: -.02em;
  text-transform: uppercase;
  hyphens: auto;
  overflow-wrap: break-word;
  color: var(--c-text);
}

.c2n-extlink__text p {
  margin: 0 0 12px;
  font-size: 16px;
  color: var(--c-text-muted);
}

.c2n-extlink__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.c2n-extlink__actions .btn {
  overflow-wrap: anywhere;
}

@media (max-width: 600px) {
  .c2n-extlink {
    padding: 28px 22px;
  }
}

/* ------------------------------------------------------------------ Basis-Layer für Core-Elemente
   Gilt nur für Kinder von .mod_article ohne .is-full (Core- und Redaktionselemente), nie für Header,
   Footer oder die eigenen Sektionen. Spezifität bewusst niedrig (:where), Elemente können überschreiben.
   Lesbare Breite: 72ch ≈ 70–75 Zeichen je Zeile bei 18 px Archivo (Faustregel 45–75 für Fließtext);
   Tabellen, Bilder, Galerien, Akkordeon und Code dürfen die volle Inhaltsspalte nutzen. */

/* Abstand oben und unten, wenn eine Seite (Impressum, Datenschutz, 404) nur aus Core-Elementen besteht
   oder ein Core-Element an eine volle Sektion grenzt */
.mod_article > :not(.is-full):first-child {
  margin-top: 96px;
}

.mod_article > :not(.is-full):last-child {
  margin-bottom: 104px;
}

.mod_article > .is-full + :not(.is-full),
.mod_article > :not(.is-full) + .is-full {
  margin-top: 64px;
}

/* Abstand zwischen Core-Elementen; vor einem Element, das mit einer Überschrift beginnt, mehr */
.mod_article > :not(.is-full) + :not(.is-full) {
  margin-top: 24px;
}

.mod_article > :not(.is-full) + :not(.is-full):has(> :is(h1, h2, h3):first-child, > .rte > :is(h1, h2, h3):first-child) {
  margin-top: 56px;
}

/* Lesbare Breite für Text-Elemente; lange URLs und Wörter brechen statt die Seite zu verbreitern */
.mod_article > :where(.content-text, .content-headline, .content-list, .content-markdown, .content-description-list, .content-hyperlink, .content-download, .content-downloads, .content-toplink) {
  max-width: 72ch;
  overflow-wrap: anywhere;
}

/* ---- Überschriften (kleiner als in den Sektionen, damit lange Rechtstexte lesbar bleiben) */
.mod_article > :not(.is-full) :where(h1, h2, h3, h4, h5, h6) {
  margin: 0 0 .6em;
  color: var(--c-text);
}

/* 8vw: Bei 360 px passt „DATENSCHUTZ-“ noch in eine Zeile und trennt an der Soll-Trennstelle */
.mod_article > :not(.is-full) :where(h1) {
  font-size: clamp(28px, 8vw, 64px);
}

.mod_article > :not(.is-full) :where(h2) {
  font-size: clamp(24px, 2.6vw, 30px);
  line-height: 1.1;
}

.mod_article > :not(.is-full) :where(h3) {
  font-size: 21px;
  line-height: 1.3;
}

.mod_article > :not(.is-full) :where(h4, h5, h6) {
  font-size: 18px;
  line-height: 1.4;
  font-weight: 700;
}

/* Überschriften im Fließtext: oben Luft, unten wenig; erste ohne Außenrand */
.mod_article > :not(.is-full) :where(.rte) > :where(h2, h3, h4, h5, h6) {
  margin-top: 1.6em;
}

.mod_article > :not(.is-full) :where(.rte) > :first-child {
  margin-top: 0;
}

.mod_article > :not(.is-full) :where(.rte) > :last-child,
.mod_article > :not(.is-full) > :last-child {
  margin-bottom: 0;
}

/* ---- Text */
.mod_article > :not(.is-full) :where(p, ul, ol, dl, table, blockquote, pre, figure) {
  margin: 0 0 1em;
}

.mod_article > :not(.is-full) :where(a) {
  color: var(--c-accent-text);
  text-underline-offset: .15em;
}

.mod_article > :not(.is-full) :where(strong, b) {
  font-weight: 700;
}

.mod_article > :not(.is-full) :where(small) {
  font-size: .85em;
  color: var(--c-text-muted);
}

/* Listen im Marken-Look: „//“ bzw. 01, 02 … in Mono und Akzent */
.mod_article > :not(.is-full) :where(ul) {
  padding: 0;
  list-style: none;
}

.mod_article > :not(.is-full) :where(ul > li) {
  position: relative;
  padding-left: 32px;
}

.mod_article > :not(.is-full) :where(ul > li)::before {
  content: "//";
  position: absolute;
  left: 0;
  font-family: var(--font-mono);
  font-size: .8em;
  line-height: 2;
  color: var(--c-accent-text);
}

.mod_article > :not(.is-full) :where(ol) {
  padding: 0;
  list-style: none;
  counter-reset: c2n-ol;
}

.mod_article > :not(.is-full) :where(ol > li) {
  position: relative;
  padding-left: 40px;
  counter-increment: c2n-ol;
}

.mod_article > :not(.is-full) :where(ol > li)::before {
  content: counter(c2n-ol, decimal-leading-zero);
  position: absolute;
  left: 0;
  font-family: var(--font-mono);
  font-size: .8em;
  line-height: 2;
  color: var(--c-accent-text);
}

.mod_article > :not(.is-full) :where(li + li) {
  margin-top: .4em;
}

.mod_article > :not(.is-full) :where(dt) {
  font-weight: 700;
}

.mod_article > :not(.is-full) :where(dd) {
  margin: 0 0 .8em;
  color: var(--c-text-muted);
}

.mod_article > :not(.is-full) :where(blockquote) {
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--c-accent);
  font-size: 21px;
  color: var(--c-text-soft);
}

.mod_article > :not(.is-full) :where(hr) {
  margin: 2em 0;
  border: 0;
  border-top: 1px solid var(--c-border);
}

.mod_article > :not(.is-full) :where(code, kbd, samp) {
  font-family: var(--font-mono);
  font-size: .85em;
}

.mod_article > :not(.is-full) :where(:not(pre) > code) {
  padding: .1em .35em;
  background: var(--c-surface);
}

.mod_article > :not(.is-full) :where(pre) {
  overflow-x: auto;
  padding: 20px 24px;
  background: var(--c-surface);
  border: 1px solid var(--c-border-2);
  font-size: 15px;
  line-height: 1.5;
}

/* Code-Element: Der Core lädt highlight_php (Theme „foundation“, hell) erst nach site.css; seine Fläche und
   Grundfarbe übernehmen wir, die Token-Farben bleiben. Spezifität (0,2,1) gegen .hljs (0,1,0) */
.content-code pre code.hljs {
  padding: 0;
  background: transparent;
  color: var(--c-text);
}

/* ---- Tabellen: mobil scrollbar statt breiter als die Seite */
.mod_article > :where(.content-table) {
  overflow-x: auto;
}

.mod_article > :not(.is-full) :where(table) {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}

.mod_article > :not(.is-full) :where(th, td) {
  padding: 10px 14px 10px 0;
  border-bottom: 1px solid var(--c-border-2);
  text-align: left;
  vertical-align: top;
}

.mod_article > :not(.is-full) :where(th) {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  border-bottom-color: var(--c-text);
}

.mod_article > :not(.is-full) :where(caption) {
  caption-side: bottom;
  padding-top: 8px;
  font-size: 14px;
  text-align: left;
  color: var(--c-text-faint);
}

/* ---- Bilder, Text mit Bild, Galerie */
.mod_article > :not(.is-full) :where(figure) {
  margin-inline: 0;
}

.mod_article > :not(.is-full) :where(figure img) {
  display: block;
}

.mod_article > :not(.is-full) :where(figcaption) {
  margin-top: 8px;
  font-size: 14px;
  color: var(--c-text-faint);
}

.mod_article > :where(.media--left, .media--right)::after {
  content: "";
  display: block;
  clear: both;
}

.mod_article > .media--left > figure {
  float: left;
  max-width: 50%;
  margin: 0 32px 16px 0;
}

.mod_article > .media--right > figure {
  float: right;
  max-width: 50%;
  margin: 0 0 16px 32px;
}

.mod_article > .media--above > figure {
  margin-bottom: 20px;
}

.mod_article > .media--below > figure {
  margin-top: 20px;
}

/* Galerie: „Bilder pro Reihe“ aus dem Backend steuert die Spaltenzahl. Die li-Regeln brauchen
   Spezifität (0,2,2), sonst gewinnt die Listen-Aufzählung oben */
.mod_article > :where(.content-gallery) > ul {
  display: grid;
  grid-template-columns: repeat(var(--c2n-gallery-cols, 3), minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mod_article > .content-gallery > ul > li {
  margin: 0;
  padding: 0;
}

.mod_article > .content-gallery > ul > li::before {
  content: none;
}

.mod_article > :where(.content-gallery) figure {
  margin: 0;
}

.mod_article > .content-gallery--cols-1 { --c2n-gallery-cols: 1; }
.mod_article > .content-gallery--cols-2 { --c2n-gallery-cols: 2; }
.mod_article > .content-gallery--cols-3 { --c2n-gallery-cols: 3; }
.mod_article > .content-gallery--cols-4 { --c2n-gallery-cols: 4; }
.mod_article > .content-gallery--cols-5 { --c2n-gallery-cols: 5; }
.mod_article > .content-gallery--cols-6 { --c2n-gallery-cols: 6; }

/* ---- Download(s): Dateiname als Link, Größe gedämpft */
.mod_article > .content-downloads ul > li::before {
  content: "↓";
  font-family: var(--font-sans);
}

.mod_article > :where(.content-download, .content-downloads) .size {
  font-size: 14px;
  color: var(--c-text-faint);
}

/* ---- Hyperlink als Button: CSS-Klasse „button“ am Element (Experten-Einstellungen) */
.mod_article > .content-hyperlink.button > a {
  display: inline-block;
  padding: 15px 28px;
  background: var(--c-accent);
  color: var(--c-on-accent);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.6;
  text-decoration: none;
}

.mod_article > .content-hyperlink.button > a::after {
  content: " →";
}

.mod_article > .content-hyperlink.button > a:hover {
  color: var(--c-on-accent);
  opacity: .8;
}

/* ---- Akkordeon (modernes Element, handorgel): Spezifität (0,2,0), weil handorgel.css nach site.css lädt */
.content-accordion .handorgel__header {
  margin: 0;
  border-bottom: 1px solid var(--c-border-2);
}

.content-accordion .handorgel__header__button {
  width: 100%;
  padding: 18px 0;
  border: 0;
  background: transparent;
  color: var(--c-text);
  font: 600 19px/1.4 var(--font-sans);
  text-align: left;
  cursor: pointer;
}

.content-accordion .handorgel__header__button:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 3px;
}

.content-accordion .handorgel__content {
  border: 0;
  background: transparent;
}

.content-accordion .handorgel__content__inner {
  padding: 8px 0 20px;
  color: var(--c-text-muted);
}

/* ---- Bis 820 px */
@media (max-width: 820px) {
  .mod_article > :not(.is-full):first-child {
    margin-top: 56px;
  }

  .mod_article > :not(.is-full):last-child {
    margin-bottom: 64px;
  }

  .mod_article > :where(.media--left, .media--right) > figure {
    float: none;
    max-width: none;
    margin: 0 0 16px;
  }

  .mod_article > :where(.content-gallery) > ul {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------------ Hilfsklassen */
.invisible {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Nur-mit-JS-Bausteine (Klasse .js setzt das Inline-Script im <head>) */
html:not(.js) .needs-js {
  display: none !important;
}

/* ------------------------------------------------------------------ Skip-Link */
.skip-link {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--c-accent);
  color: var(--c-on-accent);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: none;
}

/* ------------------------------------------------------------------ Eyebrow */
.eyebrow {
  margin: 0 0 20px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-accent-text);
}

/* Einstieg: kleiner, normale Schreibweise, mehr Abstand nach unten */
.eyebrow--hero {
  margin-bottom: 32px;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: none;
}

/* ------------------------------------------------------------------ Buttons */
/* Einheitliche Höhe für alle Buttons (auch Absenden und Core-Hyperlink mit Klasse „button“):
   15 px oben/unten + 16 px × 1,6 Zeilenhöhe = 55,6 px. Varianten mit Rahmen ziehen ihn vom
   Innenabstand ab (secondary: 14 px + 1 px). Seitliche Abstände dürfen je Variante abweichen. */
.btn {
  display: inline-block;
  padding: 15px 28px;
  border: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  text-decoration: none;
  cursor: pointer;
}

.btn--primary {
  background: var(--c-accent);
  color: var(--c-on-accent);
}

.btn--secondary {
  padding: 14px 26px;
  border: 1px solid var(--c-text);
  background: transparent;
  color: inherit;
  font-weight: 600;
}

/* Fläche in Hintergrundfarbe auf Akzentgrund (Aktionskasten Wartung): dunkel mit hellem Text,
   im hellen Thema hell mit dunklem Text wie im Export */
.btn--dark {
  padding: 15px 30px;
  background: var(--c-bg);
  color: var(--c-text);
}

.btn__suffix--slash {
  color: var(--c-accent-text);
}

/* Schmal (ab hier stehen die Hero-Buttons ohnehin untereinander): alle Buttons volle Breite der
   Inhaltsspalte, Text mittig. Eine Stelle für Button-Macro, Absenden im Formular und den
   Core-Hyperlink mit Klasse „button“; Pfeil bzw. „//“ hängt am Text und bricht mit ihm um */
@media (max-width: 600px) {
  .btn,
  .c2n-kontakt__form button.submit,
  .mod_article > .content-hyperlink.button > a {
    width: 100%;
    text-align: center;
  }
}
/* ------------------------------------------------------------------ Überschriften (Macro _macros/headline) */
/* Aussehen nach Ebene, auch für „nur optisch“ (div). Größen je Sektion stehen bei der Sektion. */
.c2n-heading {
  margin: 0;
  hyphens: auto;
  overflow-wrap: break-word;
}

.c2n-heading--h1,
.c2n-heading--h2 {
  font-weight: 800;
  font-stretch: 125%;
  text-transform: uppercase;
}

.c2n-heading--h1 {
  font-size: clamp(48px, 5.6vw, 96px);
  line-height: .92;
  letter-spacing: -.035em;
}

.c2n-heading--h2 {
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: -.025em;
}

.c2n-heading--h3 {
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
}

.c2n-heading .accent {
  color: var(--c-accent-text);
}

/* ------------------------------------------------------------------ Deko-„//“ (Macro _macros/deco) */
.deco-slash {
  position: absolute;
  z-index: -1;
  fill: var(--c-accent);
  pointer-events: none;
}

/* ------------------------------------------------------------------ Sektionen */
.c2n-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-top: 1px solid var(--c-border);
}

/* ------------------------------------------------------------------ Einstieg (#start) */
.c2n-hero {
  position: relative;
  display: grid;
  /* Textspalte wie 7fr/5fr bei 1440 px (Breite ohne linken Rand: höchstens --container + --pad-x),
     auf breiteren Bildschirmen bleibt sie so breit, das Bild wächst bis an den rechten Rand */
  grid-template-columns: calc((min(100%, var(--container) + var(--pad-x)) - 48px) * 7 / 12) minmax(0, 1fr);
  gap: 48px;
  overflow: hidden;
  isolation: isolate;
  padding: 0 0 0 var(--gutter);
}

.c2n-hero__slash {
  left: -160px;
  bottom: -240px;
  width: 420px;
  height: 600px;
  opacity: .05;
}

.c2n-hero__body {
  padding: 96px 0 88px;
}

/* Über 1440 px wächst die Textspalte langsamer als das Fenster: Die H1 richtet sich dann nach der
   Spaltenbreite (10,35 % = Verhältnis bei 1440 px: 80,64 px auf 779 px), damit „hinter Ihrer“ in eine Zeile
   passt. Bis 1440 px gilt unverändert 5,6vw. */
@media (min-width: 1441px) {
  .c2n-hero__body {
    container-type: inline-size;
  }

  .c2n-hero__title {
    font-size: clamp(48px, min(5.6vw, 10.35cqi), 96px);
  }

  /* Breiter Bildkasten (querformatig): Ausschnitt höher ansetzen, sonst fehlt oben der Kopf */
  .c2n-hero__media .c2n-hero__img {
    object-position: 55% 6%;
  }
}

/* Kein <br> wie im Export: „Website.“ steht per display:block in eigener Zeile, der Rest bricht
   über max-width so um wie im Export („Die Technik“ / „hinter Ihrer“). Gemessen in Archivo 800/125 %:
   „hinter Ihrer“ 8,97 em, „Die Technik hinter“ 13,04 em, dazwischen liegt 10 em. */
.c2n-hero__title {
  max-width: 10em;
}

.c2n-hero__title .accent {
  display: block;
}

.c2n-hero__subline {
  margin: 48px 0 0;
  font-size: 26px;
  line-height: 1.3;
  font-weight: 600;
}

.c2n-hero__text {
  max-width: 620px;
  margin: 16px 0 0;
  color: var(--c-text-muted);
}

.c2n-hero__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.c2n-hero__note {
  margin: 16px 0 0;
  font-size: 15px;
  color: var(--c-text-faint);
}

.c2n-hero__media {
  position: relative;
  min-height: 640px;
}

.c2n-hero__media .c2n-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 22%;
  filter: grayscale(1) contrast(1.12) brightness(.92);
}

html.light .c2n-hero__media .c2n-hero__img {
  filter: grayscale(1) contrast(1.05) brightness(1.08);
}

.c2n-hero__tint,
.c2n-hero__fade {
  position: absolute;
  inset: 0;
}

.c2n-hero__tint {
  background: var(--c-accent);
  mix-blend-mode: color;
  opacity: .5;
}

.c2n-hero__fade {
  background:
    linear-gradient(90deg, var(--c-bg) 0%, transparent 35%),
    linear-gradient(0deg, var(--c-bg) 0%, transparent 22%);
}

/* ------------------------------------------------------------------ Leistungen (#leistungen) */
.c2n-leistungen {
  padding: 88px var(--gutter);
}

.c2n-leistungen__slash {
  right: -90px;
  top: -70px;
  width: 266px;
  height: 380px;
  opacity: .05;
}

.c2n-leistungen__title {
  max-width: 1000px;
  margin-bottom: 48px;
}

/* 6 Spalten: große Kachel 3, Band 6, kleine Kachel 2 */
.c2n-leistungen__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}

.c2n-leistungen__grid > * {
  grid-column: span 2;
}

.c2n-leistungen__grid > .c2n-kachel--large {
  grid-column: span 3;
}

.c2n-leistungen__grid > .c2n-band {
  grid-column: 1 / -1;
}

/* Kachel */
.c2n-kachel__text {
  margin: 0;
  color: var(--c-text-muted);
}

.c2n-kachel__list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
}

.c2n-kachel__list li {
  display: flex;
}

.c2n-kachel--large {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 420px;
  padding: 44px;
  background: var(--c-surface);
  container-type: inline-size;
}

/* Umrisswort: echter Text mit transparenter Füllung */
.c2n-kachel--large .c2n-kachel__marker {
  font-stretch: 110%;
  font-weight: 900;
  font-size: clamp(22px, 9cqi, 68px);
  line-height: .9;
  letter-spacing: -.04em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--c-accent);
}

.c2n-kachel--large .c2n-kachel__title {
  margin-top: 16px;
}

.c2n-kachel--large .c2n-kachel__list {
  gap: 8px;
  margin-top: auto;
  font-size: 14px;
}

.c2n-kachel--large .c2n-kachel__list li {
  gap: 10px;
}

.c2n-kachel--large .c2n-kachel__bullet {
  color: var(--c-accent-text);
}

.c2n-kachel--small {
  padding: 32px;
  border: 1px solid var(--c-border-2);
}

/* Nummer bleibt inline wie im Export: Die Zeilenhöhe kommt aus der Kachelschrift (18 px), nicht aus 13 px */
.c2n-kachel--small .c2n-kachel__marker {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--c-accent-text);
}

.c2n-kachel--small .c2n-kachel__title {
  margin: 12px 0 10px;
  font-size: 22px;
  line-height: 1.25;
}

.c2n-kachel--small .c2n-kachel__text {
  font-size: 16px;
}

.c2n-kachel--small .c2n-kachel__list {
  gap: 6px;
  margin-top: 16px;
  font-size: 13px;
}

.c2n-kachel--small .c2n-kachel__list li {
  gap: 8px;
}

.c2n-kachel--small .c2n-kachel__bullet {
  opacity: .55;
}

/* Band „Für alles gilt //“ */
.c2n-band {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 32px;
  background: var(--c-accent);
  color: var(--c-on-accent);
  font-size: 16px;
  font-weight: 600;
}

.c2n-band__label {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.c2n-band__text p {
  margin: 0;
}

.c2n-band__text p + p {
  margin-top: .6em;
}

/* ------------------------------------------------------------------ Sektionen bis 1100 px */
/* Sektions-H2 bis 1100 px. Gilt im Export auch unter 820 px: Dessen Regel für 820 px (8.5vw) verliert dort
   gegen die spezifischere 1100-px-Regel, deshalb hier keine eigene 820-px-Größe für H2. */
@media (max-width: 1100px) {
  .c2n-heading--h2 {
    font-size: clamp(30px, 4.2vw, 44px);
    hyphens: manual;
    overflow-wrap: normal;
  }

  /* Kleine Kacheln zwei pro Reihe, eine allein stehende letzte über die volle Breite */
  .c2n-leistungen__grid > .c2n-kachel--small {
    grid-column: span 3;
  }

  .c2n-leistungen__grid > .c2n-kachel--small:nth-last-child(1 of .c2n-kachel--small):nth-child(odd of .c2n-kachel--small) {
    grid-column: 1 / -1;
  }
}

/* ------------------------------------------------------------------ Sektionen bis 820 px */
@media (max-width: 820px) {
  .c2n-heading--h1 {
    font-size: clamp(40px, 12vw, 64px);
  }

  .c2n-heading--h3,
  .c2n-kachel--small .c2n-kachel__title {
    font-size: clamp(20px, 6vw, 28px);
  }

  .c2n-hero {
    grid-template-columns: minmax(0, 1fr);
    padding: 0 var(--pad-x) 64px;
  }

  /* Einspaltig: oben weniger Luft unter dem Header, unten reicht der Spaltenabstand (48 px) zum Bild */
  .c2n-hero__body {
    padding: 48px 0 0;
  }

  .c2n-hero__subline {
    font-size: 22px;
  }

  /* Bild läuft unten und seitlich bis an den Rand */
  .c2n-hero__media {
    min-height: 440px;
    margin: 0 calc(-1 * var(--pad-x)) -64px;
  }

  .c2n-leistungen {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .c2n-leistungen__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .c2n-leistungen__grid > *,
  .c2n-leistungen__grid > .c2n-kachel--large,
  .c2n-leistungen__grid > .c2n-kachel--small {
    grid-column: 1 / -1;
  }

  .c2n-kachel--large,
  .c2n-kachel--small {
    min-height: 0;
    padding: 28px 22px;
  }

  .c2n-band {
    flex-wrap: wrap;
    padding: 24px 22px;
  }

  .c2n-band__label {
    white-space: normal;
  }
}


/* ------------------------------------------------------------------ Liste mit Akzent-„//“ (Wartung) */
.c2n-list-slash {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 14px;
}

.c2n-list-slash li {
  display: flex;
  gap: 10px;
}

.c2n-list-slash__bullet {
  color: var(--c-accent-text);
}

/* ------------------------------------------------------------------ Wartung (#wartung) */
.c2n-wartung {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
  padding: 104px var(--gutter);
}

.c2n-wartung__slash {
  left: -130px;
  bottom: -160px;
  width: 322px;
  height: 460px;
  opacity: .05;
}

.c2n-wartung__title {
  margin-bottom: 28px;
}

.c2n-wartung__text {
  margin: 0;
  color: var(--c-text-muted);
}

.c2n-wartung__text + .c2n-wartung__text {
  margin-top: 1em;
}

.c2n-wartung__list {
  margin-top: 28px;
}

/* Aktionskasten auf Akzentfläche: Farben explizit, vererbte Farbe reicht gegen globale Regeln nicht */
.c2n-wartung__box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 44px;
  background: var(--c-accent);
  color: var(--c-on-accent);
}

.c2n-wartung__box .c2n-wartung__box-title {
  font-stretch: 125%;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--c-on-accent);
}

.c2n-wartung__box-text {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  color: var(--c-on-accent);
}

.c2n-wartung__box .btn {
  margin-top: 8px;
}

/* Fokusrahmen in Akzentfarbe wäre auf der Akzentfläche unsichtbar */
.c2n-wartung__box :focus-visible {
  outline-color: var(--c-on-accent);
}

/* ------------------------------------------------------------------ Haltung (#haltung) */
.c2n-haltung {
  padding: 104px var(--gutter);
}

.c2n-haltung__slash {
  right: -80px;
  bottom: -140px;
  width: 392px;
  height: 560px;
  opacity: .05;
}

.c2n-haltung .c2n-haltung__title {
  max-width: 1000px;
  font-size: 64px;
  line-height: 1;
  letter-spacing: -.03em;
}

.c2n-haltung__text {
  max-width: 680px;
  margin: 32px 0 0;
  font-size: 20px;
  color: var(--c-text-muted);
}

.c2n-haltung__text + .c2n-haltung__text {
  margin-top: 1em;
}

.c2n-haltung__points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 56px;
  border-top: 1px solid var(--c-text);
}

.c2n-haltung__point {
  padding: 24px 32px 0 0;
}

/* Zeilenhöhe wie Fließtext (Export: ohne eigene Angabe) */
.c2n-haltung .c2n-haltung__point-title {
  margin: 0 0 6px;
  font-size: 20px;
  line-height: 1.6;
}

.c2n-haltung__point-text {
  margin: 0;
  font-size: 16px;
  color: var(--c-text-muted);
}

/* ------------------------------------------------------------------ Wenn ein Projekt festhängt (#festhaengt) */
.c2n-festhaengt {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 56px;
  padding: 104px var(--gutter);
}

.c2n-festhaengt__slash {
  left: -120px;
  top: 30px;
  width: 224px;
  height: 320px;
  opacity: .04;
}

.c2n-festhaengt__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.c2n-festhaengt__list li {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: baseline;
  padding: 22px 0;
  border-bottom: 1px solid var(--c-border-2);
}

.c2n-festhaengt__number {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 30px;
  line-height: 1;
  color: var(--c-accent-text);
}

.c2n-festhaengt__item {
  font-size: 22px;
  font-weight: 500;
}

.c2n-festhaengt__text {
  margin: 32px 0 0 72px;
  color: var(--c-text-muted);
}

.c2n-festhaengt__text + .c2n-festhaengt__text {
  margin-top: 1em;
}

/* ------------------------------------------------------------------ Für Agenturen (#agenturen) */
/* Akzentfläche über die volle Breite; alle Texte explizit in --c-on-accent (beide Themen) */
.c2n-agenturen {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  overflow: hidden;
  isolation: isolate;
  padding: 104px var(--gutter);
  background: var(--c-accent);
  color: var(--c-on-accent);
}

/* Export: #141619 in beiden Themen (keine html.light-Regel), also --c-on-accent statt --c-bg */
.c2n-agenturen__slash {
  right: -120px;
  top: -90px;
  width: 448px;
  height: 640px;
  fill: var(--c-on-accent);
  opacity: .07;
}

.c2n-agenturen .c2n-agenturen__title {
  margin-bottom: 28px;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--c-on-accent);
}

.c2n-agenturen__text {
  margin: 0;
  font-size: 19px;
  font-weight: 500;
  color: var(--c-on-accent);
}

.c2n-agenturen__text + .c2n-agenturen__text {
  margin-top: 1em;
}

.c2n-agenturen__list {
  align-self: end;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--c-on-accent);
  color: var(--c-on-accent);
}

.c2n-agenturen__list li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 2px solid var(--c-on-accent);
  font-size: 22px;
  font-weight: 700;
}

.c2n-agenturen__slashes {
  flex: none;
}

/* Kasten: dunkle Fläche (dunkles Thema) bzw. helle Fläche (helles Thema), wie im Export */
.c2n-agenturen__box {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 40px 48px;
  background: var(--c-bg);
  color: var(--c-text);
}

.c2n-agenturen__offer {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--c-text);
}

.c2n-agenturen__offer-text {
  display: block;
  margin-top: 8px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--c-text-muted);
}

.c2n-agenturen__box .btn {
  flex: none;
  padding: 15px 30px;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ Wartung bis Agenturen bis 1100 px */
@media (max-width: 1100px) {
  .c2n-haltung .c2n-haltung__title,
  .c2n-agenturen .c2n-agenturen__title {
    font-size: clamp(30px, 4.2vw, 44px);
  }

  .c2n-haltung__points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .c2n-haltung__point:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .c2n-festhaengt {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
}

/* ------------------------------------------------------------------ Wartung bis Agenturen bis 820 px */
@media (max-width: 820px) {
  .c2n-wartung,
  .c2n-haltung,
  .c2n-festhaengt,
  .c2n-agenturen {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .c2n-wartung,
  .c2n-agenturen {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  /* Innenabstand wie Agenturen-Kasten und Formular (Export: 28px 22px für Kästen bis 820 px) */
  .c2n-wartung__box {
    padding: 28px 22px;
  }

  .c2n-wartung__box .c2n-wartung__box-title,
  .c2n-haltung .c2n-haltung__point-title {
    font-size: clamp(20px, 6vw, 28px);
  }

  .c2n-haltung__points {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Nummer über dem Szenario, Text ohne Einzug */
  .c2n-festhaengt__list li {
    grid-template-columns: minmax(0, 1fr);
  }

  .c2n-festhaengt__text {
    margin-left: 0;
  }

  .c2n-agenturen__box {
    flex-wrap: wrap;
    padding: 24px 22px;
  }

  .c2n-agenturen__box .btn {
    white-space: normal;
  }
}

/* ------------------------------------------------------------------ Über mich (#ueber-mich) */
/* Im Export ohne Trennlinie oben und ohne overflow:hidden (das Deko-„//“ sitzt in der Textspalte) */
.c2n-about {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 64px;
  align-items: center;
  isolation: isolate;
  padding: 104px var(--gutter);
}

.c2n-about__media .c2n-about__img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  filter: grayscale(.15) contrast(1.05);
}

.c2n-about__body {
  position: relative;
}

.c2n-about__slash {
  right: -20px;
  top: 50%;
  width: 364px;
  height: 520px;
  opacity: .1;
  transform: translateY(-50%);
}

.c2n-about .c2n-about__title {
  margin-bottom: 24px;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -.03em;
}

.c2n-about__text {
  font-size: 20px;
  color: var(--c-text-soft);
}

.c2n-about__text > * {
  margin: 0;
}

.c2n-about__text > * + * {
  margin-top: 18px;
}

.c2n-about__text a {
  font-weight: 700;
  color: var(--c-accent-text);
}

.c2n-about__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 40px 0 0;
}

.c2n-about__facts > div {
  padding-top: 12px;
  border-top: 2px solid var(--c-accent);
}

.c2n-about__facts dt {
  font-stretch: 125%;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
}

.c2n-about__facts dd {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--c-text-muted);
}

.c2n-about__partner {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 40px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--c-text-muted);
  text-decoration: none;
}

.c2n-about__partner img {
  display: block;
  width: auto;
  height: 56px;
}

/* ------------------------------------------------------------------ Häufige Fragen (#fragen, Core-Modul FAQ-Seite) */
.c2n-faq {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 56px;
  padding: 104px var(--gutter);
  border-top: 1px solid var(--c-border);
}

.c2n-faq__list {
  border-top: 1px solid var(--c-text);
}

.c2n-faq .c2n-faq__category {
  margin: 32px 0 0;
  font-size: 22px;
}

.c2n-faq__item {
  border-bottom: 1px solid var(--c-border-2);
}

.c2n-faq__item summary {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  font-size: 21px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.c2n-faq__item summary::-webkit-details-marker {
  display: none;
}

/* [+] geschlossen, [–] geöffnet (im Export bleibt es immer [+]) */
.c2n-faq__toggle {
  flex: none;
  font-family: var(--font-mono);
  color: var(--c-accent-text);
}

.c2n-faq__toggle::before {
  content: "[+]";
}

.c2n-faq__item[open] .c2n-faq__toggle::before {
  content: "[–]";
}

.c2n-faq__answer {
  max-width: 640px;
  padding-bottom: 24px;
  color: var(--c-text-muted);
}

.c2n-faq__answer > * {
  margin: 0;
}

.c2n-faq__answer > * + * {
  margin-top: 1em;
}

/* ------------------------------------------------------------------ Über mich, Fragen bis 1100 px */
@media (max-width: 1100px) {
  .c2n-about .c2n-about__title {
    font-size: clamp(30px, 4.2vw, 44px);
  }

  .c2n-faq {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
}

/* ------------------------------------------------------------------ Über mich, Fragen bis 820 px */
@media (max-width: 820px) {
  .c2n-about,
  .c2n-faq {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .c2n-about {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .c2n-about__slash {
    right: 0;
  }

  .c2n-about__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .c2n-about__facts dt {
    font-size: 22px;
  }
}

/* ------------------------------------------------------------------ Kontakt (#kontakt) */
.c2n-kontakt {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 64px;
  overflow: hidden;
  isolation: isolate;
  padding: 104px var(--gutter);
  background: var(--c-surface);
}

.c2n-kontakt__slash {
  right: -90px;
  bottom: -110px;
  width: 308px;
  height: 440px;
  opacity: .05;
}

.c2n-kontakt .c2n-kontakt__title {
  margin-bottom: 28px;
  font-size: 52px;
  line-height: .98;
  letter-spacing: -.03em;
}

.c2n-kontakt__text {
  margin: 0;
  color: var(--c-text-muted);
}

.c2n-kontakt__text + .c2n-kontakt__text {
  margin-top: 1em;
}

.c2n-kontakt__data {
  display: grid;
  justify-items: start;
  gap: 6px;
  margin-top: 36px;
  font-size: 22px;
  font-weight: 400;
}

.c2n-kontakt__address {
  margin-bottom: 14px;
  font-style: normal;
  line-height: 1.4;
  color: var(--c-text-muted);
}

.c2n-kontakt__phone {
  text-decoration: none;
}

.c2n-kontakt__email {
  color: var(--c-accent-text);
}

/* ---- Formular: Core-Templates unverändert, Zuordnung über Feldnamen (nicht ctrl_<id>) */
.c2n-kontakt__form .formbody {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
}

.c2n-kontakt__form .formbody > * {
  grid-column: 1 / -1;
}

/* Halbe Breite: Name/E-Mail, Telefon/Website */
.c2n-kontakt__form .formbody > :has(> [name="name"], > [name="email"], > [name="phone"], > [name="web"]) {
  grid-column: span 1;
}

.c2n-kontakt__form .widget {
  display: grid;
  align-content: start;
  gap: 8px;
}

.c2n-kontakt__form .widget > label,
.c2n-kontakt__form .widget > fieldset > legend {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.c2n-kontakt__form span.mandatory {
  margin-left: .25em;
  color: var(--c-accent-text);
}

.c2n-kontakt__form :is(input.text, select, textarea) {
  width: 100%;
  padding: 12px 0;
  border: 0;
  border-bottom: 1.5px solid var(--c-input-line);
  border-radius: 0;
  background: transparent;
  color: var(--c-text);
  font: 500 17px var(--font-sans);
}

.c2n-kontakt__form select {
  background-color: var(--c-surface);
  cursor: pointer;
}

.c2n-kontakt__form select option {
  background: var(--c-surface);
  color: var(--c-text);
}

.c2n-kontakt__form textarea {
  resize: vertical;
}

.c2n-kontakt__form ::placeholder {
  color: var(--c-text-faint);
  opacity: 1;
}

/* Fokus: Unterstrich in Akzent zusätzlich zum Fokusrahmen */
.c2n-kontakt__form :is(input.text, select, textarea):focus-visible {
  border-bottom-color: var(--c-accent);
}

/* Hinweistext (Core-Feld „Hilfetext“, per aria-describedby verbunden) */
.c2n-kontakt__form .help {
  margin: 0;
  font-size: 12px;
  color: var(--c-text-faint);
}

/* ALTCHA im Rahmen wie der Platzhalter im Export; Farben über die Variablen des Widgets */
/* Innenabstand bringt das Widget selbst mit */
.c2n-kontakt__form .widget-altcha {
  margin: 0;
  border: 1px solid var(--c-border-strong);
}

.c2n-kontakt__form altcha-widget {
  max-width: none;
  --altcha-border-width: 0;
  --altcha-color-base: transparent;
  --altcha-color-text: var(--c-text);
  --altcha-color-border: var(--c-border-strong);
  --altcha-color-border-focus: var(--c-focus);
  --altcha-max-width: 100%;
  font-family: var(--font-sans);
  font-size: 15px;
}

/* Absenden rechtsbündig, primär, Pfeil per CSS (kein Template-Override) */
.c2n-kontakt__form .widget-submit {
  display: flex;
  justify-content: flex-end;
}

.c2n-kontakt__form button.submit {
  padding: 15px 30px;
  border: 0;
  background: var(--c-accent);
  color: var(--c-on-accent);
  font: 700 16px/1.6 var(--font-sans);
  cursor: pointer;
}

.c2n-kontakt__form button.submit::after {
  content: " →";
}

.c2n-kontakt__form button.submit:hover {
  opacity: .8;
}

.c2n-kontakt__form button.submit:disabled {
  cursor: wait;
  opacity: .6;
}

/* Fehler und Bestätigung, in beiden Themen lesbar */
.c2n-kontakt__form .error {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-error);
}

.c2n-kontakt__form .widget.error :is(input.text, select, textarea) {
  border-bottom-color: var(--c-error);
}

.c2n-kontakt__form .widget-altcha .error {
  padding: 0;
  border: 0;
  background: none;
}

.c2n-kontakt__form .form-confirmation {
  padding: 24px 28px;
  border-left: 3px solid var(--c-accent);
  background: var(--c-bg);
  font-size: 18px;
}

.c2n-kontakt__form .form-confirmation:focus {
  outline: none;
}

.c2n-kontakt__form .form-confirmation > * {
  margin: 0;
}

.c2n-kontakt__form .form-confirmation > * + * {
  margin-top: .5em;
}

/* ------------------------------------------------------------------ Kontakt bis 1100 px */
@media (max-width: 1100px) {
  .c2n-kontakt .c2n-kontakt__title {
    font-size: clamp(30px, 4.2vw, 44px);
  }
}

/* ------------------------------------------------------------------ Kontakt bis 820 px */
@media (max-width: 820px) {
  .c2n-kontakt {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    padding-top: 64px;
    padding-bottom: 64px;
  }

  /* Export: Formular mobil mit eigenem Innenabstand (28/22 px) */
  .c2n-kontakt__form form {
    padding: 28px 22px;
  }

  .c2n-kontakt__form .formbody {
    grid-template-columns: minmax(0, 1fr);
  }

  .c2n-kontakt__form .formbody > :has(> [name="name"], > [name="email"], > [name="phone"], > [name="web"]) {
    grid-column: 1 / -1;
  }
}

/* ------------------------------------------------------------------ Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--c-header-bg);
  border-bottom: 1px solid var(--c-border);
}

/* Fläche wie im Export (92 % deckend), zusätzlich weichgezeichnet: Darunter laufender Text
   (große H1) bleibt sonst lesbar. Ohne backdrop-filter voll deckend */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .site-header {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header {
    background: var(--c-bg);
  }
}

.c2n-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 20px var(--gutter);
}

.c2n-header__logo {
  display: block;
  flex: none;
  color: var(--c-text);
}

.c2n-header__logo svg,
.c2n-header__logo img {
  display: block;
  width: auto;
  height: 34px;
}

.c2n-header__bar {
  display: flex;
  align-items: center;
  gap: 32px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.c2n-header__list {
  display: flex;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.c2n-header__list a,
.c2n-header__cta {
  text-decoration: none;
  white-space: nowrap;
}

.c2n-header__cta {
  flex: none;
  padding: 2px 10px;
  background: var(--c-accent);
  color: var(--c-on-accent);
}

.theme-toggle,
.c2n-header__burger {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 7px;
  padding: 1px 10px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font: inherit;
  /* wie im Export: Schrift des Headers, aber ohne dessen Versalien und Sperrung („Tag“/„Nacht“) */
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
}

/* Symbol-Slot fester Größe: Sonne, Mond und Schloss liegen übereinander, sichtbar ist genau eines */
.theme-toggle__icon {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
}

.theme-toggle__icon > svg {
  position: absolute;
  inset: 0;
  display: none;
  width: 14px;
  height: 14px;
  margin: auto;
}

.theme-toggle__sun {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.theme-toggle__moon {
  fill: currentColor;
}

.theme-toggle__icon > .theme-toggle__lock {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}

/* Anzeige = aktueller Zustand: hell → Sonne + „Tag“, dunkel → Mond + „Nacht“;
   eingerastet ersetzt das Schloss das Symbol, der Text bleibt */
html.light:not(.theme-locked) .theme-toggle__sun,
html:not(.light):not(.theme-locked) .theme-toggle__moon,
html.theme-locked .theme-toggle__lock {
  display: block;
}

/* Beide Wörter in derselben Rasterzelle: Die Breite richtet sich immer nach „Nacht“ */
.theme-toggle__text {
  display: grid;
}

.theme-toggle__text > span {
  grid-area: 1 / 1;
}

html:not(.light) .theme-toggle__label--day,
html.light .theme-toggle__label--night {
  visibility: hidden;
}

.c2n-header__burger {
  display: none;
  padding: 4px 8px;
}

.c2n-header__burger svg {
  display: block;
  width: 16px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.c2n-header__burger[aria-expanded="true"] .c2n-header__burger-lines,
.c2n-header__burger:not([aria-expanded="true"]) .c2n-header__burger-close {
  display: none;
}

@media (max-width: 1100px) {
  .c2n-header__burger {
    display: inline-flex;
  }

  .c2n-header__nav {
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    right: 0;
    display: none;
    background: var(--c-bg);
    border-bottom: 1px solid var(--c-border);
  }

  .c2n-header__nav.is-open {
    display: block;
  }

  .c2n-header__list {
    flex-direction: column;
    gap: 0;
  }

  .c2n-header__list a {
    display: block;
    padding: 14px var(--pad-x);
    border-top: 1px solid var(--c-border);
    font-size: 14px;
  }

  .c2n-header__list li:first-child a {
    border-top: 0;
  }
}

@media (max-width: 820px) {
  .c2n-header {
    gap: 16px;
    padding: 14px var(--pad-x);
  }

  .c2n-header__logo svg,
  .c2n-header__logo img {
    height: 28px;
  }

  .c2n-header__bar {
    gap: 12px;
  }
}

@media (max-width: 400px) {
  .theme-toggle__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* ------------------------------------------------------------------ Footer */
.c2n-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  /* rechts Platz für Back-to-Top (24 px Abstand + 48 px Button + 24 px Luft) */
  padding: 28px max(var(--gutter), 96px) 28px var(--gutter);
  border-top: 1px solid var(--c-border);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--c-text-faint);
}

.c2n-footer__left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

.c2n-footer__address {
  font-style: normal;
}

.c2n-footer__seal {
  display: block;
  flex: none;
}

.c2n-footer__seal img {
  display: block;
  width: auto;
  height: 24px;
}

.c2n-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.c2n-footer__sysline {
  flex-basis: 100%;
  margin: 0;
  color: var(--c-accent-text);
}

.c2n-footer__sysline:empty {
  display: none;
}

@media (max-width: 820px) {
  .c2n-footer {
    flex-direction: column;
    gap: 12px;
    /* Back-to-Top sitzt unter dem Inhalt statt daneben */
    padding: 28px var(--pad-x) 96px;
  }
}

/* ------------------------------------------------------------------ Back-to-Top */
.to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 30;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  background: var(--c-accent);
  color: var(--c-on-accent);
  font-family: var(--font-mono);
  font-size: 20px;
  text-decoration: none;
  /* Ring in Hintergrundfarbe: bleibt auch über der blauen Agenturen-Sektion sichtbar */
  box-shadow: 0 0 0 3px var(--c-bg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s, visibility .2s;
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.to-top.is-visible:hover {
  opacity: .8;
}

@media (prefers-reduced-motion: reduce) {
  .to-top {
    transition: none;
  }
}