/* Website-Bausteine (Stufe 18.4) – Darstellung der HTML-Seiten aus dem Website-Editor.
   Klassen: tn-b (Baustein), tn-bg-<farbe> (Markenfarben), tn-pad-<0|s|m|l|xl> (Abstand), tn-align-<links|mitte|rechts>,
   tn-wrap (+ tn-schmal | tn-voll) für die Breite. Farben aus app/brand/MARKE.md. */
.tn-seite { --tn-tusche: #000000; --tn-planpapier: #F3F4F1; --tn-zollstock: #F2B705; --tn-lichtpause: #14305A;
  --tn-raster: #C3CEDB; --tn-bleistift: #5B626B; }
.tn-b { position: relative; padding: 48px 0; }
.tn-b > .tn-wrap, .tn-wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.tn-wrap.tn-schmal { max-width: 760px; }
.tn-wrap.tn-voll { max-width: none; }
.tn-pad-0 { padding-top: 0; padding-bottom: 0; }
.tn-pad-s { padding-top: 24px; padding-bottom: 24px; }
.tn-pad-m { padding-top: 48px; padding-bottom: 48px; }
.tn-pad-l { padding-top: 80px; padding-bottom: 80px; }
.tn-pad-xl { padding-top: 120px; padding-bottom: 120px; }
.tn-align-links { text-align: left; }
.tn-align-mitte { text-align: center; }
.tn-align-rechts { text-align: right; }
.tn-align-mitte .tn-bild img { margin-left: auto; margin-right: auto; }

.tn-bg-weiss { background: #ffffff; }
.tn-bg-planpapier { background: var(--tn-planpapier); }
.tn-bg-raster { background: var(--tn-raster); }
.tn-bg-zollstock { background: var(--tn-zollstock); color: var(--tn-tusche); }
.tn-bg-lichtpause, .tn-bg-tusche { color: #ffffff; }
.tn-bg-lichtpause { background: var(--tn-lichtpause); }
.tn-bg-tusche { background: var(--tn-tusche); }
.tn-bg-lichtpause :is(h1, h2, h3, h4, cite), .tn-bg-tusche :is(h1, h2, h3, h4, cite) { color: #ffffff; }
.tn-bg-lichtpause a:not(.tn-knopf), .tn-bg-tusche a:not(.tn-knopf) { color: var(--tn-zollstock); }

.tn-lead { font-size: 1.2em; color: var(--p-ink-2, #515154); max-width: 46em; }
.tn-align-mitte .tn-lead { margin-left: auto; margin-right: auto; }
.tn-bg-lichtpause .tn-lead, .tn-bg-tusche .tn-lead { color: #E6E9EE; }
.tn-rubrik { margin-bottom: .5em; }

.tn-knopf { display: inline-block; padding: 12px 22px; border-radius: 980px; background: var(--tn-lichtpause); color: #ffffff;
  font-weight: 600; text-decoration: none; }
.tn-knopf:hover { text-decoration: none; filter: brightness(1.12); }
.tn-bg-lichtpause .tn-knopf, .tn-bg-tusche .tn-knopf { background: var(--tn-zollstock); color: var(--tn-tusche); }

.tn-bild { margin: 0; }
.tn-bild img { border-radius: 14px; width: 100%; height: auto; }
.tn-bild figcaption { font-size: 14px; color: var(--tn-bleistift); margin-top: 8px; }
.tn-split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.tn-split.tn-split-rechts > .tn-bild { order: 2; }
.tn-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; }
.tn-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 24px; }
.tn-karte { background: #ffffff; color: var(--tn-tusche); border: 1px solid #e3e6ea; border-radius: 14px; padding: 22px; text-align: left; }
.tn-karte h3 { color: var(--tn-tusche); }
.tn-karte p:last-child { margin-bottom: 0; }
.tn-zitat { margin: 0; border-left: 4px solid var(--tn-zollstock); padding: 8px 0 8px 24px; font-size: 1.35em; line-height: 1.4; }
.tn-zitat cite { display: block; font-size: .65em; font-style: normal; color: var(--tn-bleistift); margin-top: 8px; }
.tn-faq details { border-bottom: 1px solid #dcdfe4; padding: 14px 0; text-align: left; }
.tn-faq summary { cursor: pointer; font-weight: 600; }
.tn-faq details p { margin: 10px 0 0; }
.tn-abstand { height: 48px; }
.tn-abstand-s { height: 24px; } .tn-abstand-m { height: 48px; } .tn-abstand-l { height: 96px; }
.tn-kontakt { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; text-align: left; }
.tn-kontakt .tn-l { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--tn-bleistift); margin-bottom: 4px; }
.tn-kontakt address { font-style: normal; }
.tn-einbettung iframe { display: block; width: 100%; border: 0; min-height: 60px; background: transparent; }
.tn-seite table { border-collapse: collapse; width: 100%; }
.tn-seite th, .tn-seite td { border-bottom: 1px solid #dcdfe4; padding: 8px 10px; text-align: left; vertical-align: top; }

@media (max-width: 760px) {
  .tn-b { padding: 32px 0; }
  .tn-pad-l { padding-top: 48px; padding-bottom: 48px; }
  .tn-pad-xl { padding-top: 64px; padding-bottom: 64px; }
  .tn-wrap { padding: 0 16px; }
  .tn-split { grid-template-columns: 1fr; gap: 20px; }
  .tn-split.tn-split-rechts > .tn-bild { order: 0; }
  .tn-zitat { font-size: 1.15em; }
}

/* 18.15: weitere Bausteine (Elementor-ähnlich) und Sichtbarkeit je Gerät */
.tn-spalten-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.tn-spalten-4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.tn-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; text-align: center; }
.tn-zahl strong { display: block; font: 700 clamp(32px, 5vw, 48px)/1.1 Saira, sans-serif; color: #F2B705; }
.tn-zahl span { opacity: .85; }
.tn-ablauf { counter-reset: tnschritt; list-style: none; padding: 0; margin: 24px 0 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.tn-ablauf li { counter-increment: tnschritt; position: relative; padding-top: 52px; }
.tn-ablauf li::before { content: counter(tnschritt); position: absolute; top: 0; left: 0; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; background: #14305A; color: #fff; font: 700 18px Saira, sans-serif; }
.tn-haken { list-style: none; padding: 0; display: grid; gap: 10px; }
.tn-haken li { position: relative; padding-left: 32px; }
.tn-haken li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; display: grid;
  place-items: center; background: #F2B705; color: #000; font-weight: 700; font-size: 13px; }
.tn-banner { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; }
.tn-banner h2 { margin: 0 0 4px; }
.tn-banner p { margin: 0; }
@media (min-width: 1101px) { .tn-weg-desktop { display: none !important; } }
@media (min-width: 761px) and (max-width: 1100px) { .tn-weg-tablet { display: none !important; } }
@media (max-width: 760px) { .tn-weg-handy { display: none !important; } }
html.we-edit .tn-weg-desktop, html.we-edit .tn-weg-tablet, html.we-edit .tn-weg-handy { display: revert !important; opacity: .45; outline: 1px dashed #c0392b; }