/*
Theme Name: Teppich-Polsterreinigung24 Child
Theme URI: https://teppich-polsterreinigung24.de
Description: Child-Theme für teppich-polsterreinigung24.de auf Basis von GeneratePress. Mobile-First, WCAG 2.1 AA, Performance-orientiert.
Author: teppich-polsterreinigung24.de
Template: generatepress
Version: 1.1.0
Text Domain: tpr-child
*/

/* =====================================================
   Design-Tokens — Markenpalette aus dem Logo
   Navy (#003060/#002050) = Primärfarbe, Orange (#f06000)
   = Akzent/CTA, Teal (#30a090) = Sekundärakzent.
   Reines #f06000 trägt weißen Text nur mit 3.3:1, deshalb
   gibt es zwei Orange-Töne: --tpr-accent (abgedunkelt, für
   weiße Schrift) und --tpr-accent-bright (Marken-Orange,
   nur mit dunkler Schrift oder als Dekorfläche).
   Alle Paare sind mit contrast-check.py verifiziert.
   ===================================================== */
:root {
  --tpr-primary: #003060;        /* Navy – Links, Buttons, Header */
  --tpr-primary-dark: #002050;   /* Navy dunkel – Hover, Footer */
  --tpr-accent: #b84c00;         /* Orange (abgedunkelt) – CTA mit weißer Schrift */
  --tpr-accent-dark: #8f3b00;    /* Orange Hover */
  --tpr-accent-bright: #f06000;  /* Marken-Orange – nur mit dunkler Schrift */
  --tpr-accent-ink: #002050;     /* Schriftfarbe auf Marken-Orange */
  --tpr-teal: #30a090;           /* Teal – Dekorflächen, Rahmen */
  --tpr-teal-dark: #1c6b60;      /* Teal – als Schriftfarbe */
  --tpr-ink: #1f2933;            /* Fließtext */
  --tpr-ink-soft: #4b5763;
  --tpr-bg: #ffffff;
  --tpr-bg-soft: #eef2f7;        /* kühler Navy-Ton für Sektionen */
  --tpr-bg-card: #ffffff;
  --tpr-bg-info: #e8eff7;
  --tpr-bg-teal: #e6f4f1;
  --tpr-bg-warn: #fdf3e3;
  --tpr-bg-ok: #e9f4ed;
  --tpr-border: #ccd6e0;
  --tpr-border-strong: #6b7a8a;  /* Bedienelement-Rahmen, >= 3:1 auf Weiß */
  --tpr-ok: #1e6b3a;
  --tpr-warn: #8a5a00;
  --tpr-error: #a12a2a;
  --tpr-focus: #b84c00;          /* Fokus-Ring auf hellem Grund */
  --tpr-focus-light: #ffc499;    /* Fokus-Ring auf Navy/Footer */
  --tpr-footer-bg: #002050;
  --tpr-footer-ink: #d5deeb;
  --tpr-footer-link: #ffffff;
  --tpr-radius: 12px;
  --tpr-shadow: 0 1px 3px rgba(0, 32, 80, .08), 0 4px 16px rgba(0, 32, 80, .06);
  --tpr-max-w: 1200px;
  --tpr-text-w: 78ch;            /* Lesebreite für Fließtext */
  --tpr-header-h: 76px;          /* Höhe des Sticky-Headers (Desktop) */
}

@media (max-width: 768px) {
  :root { --tpr-header-h: 60px; }
}

/* =====================================================
   Grundgerüst: Footer klebt am Seitenende, Header klebt oben
   ===================================================== */
html {
  /* Sticky-Header darf Ankerziele nicht verdecken. */
  scroll-padding-top: calc(var(--tpr-header-h) + 12px);
  /* clip statt hidden: verhindert horizontales Scrollen, ohne einen neuen
     Scroll-Container zu erzeugen (der position:sticky am Header brechen würde). */
  overflow-x: clip;
}

body {
  color: var(--tpr-ink);
  background: var(--tpr-bg-soft);
  font-size: 1.0625rem;
  line-height: 1.65;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
}

/* Alles zwischen Header und Footer wächst, der Footer wird nach unten gedrückt. */
body > .site,
body > #page {
  flex: 1 0 auto;
  width: 100%;
}
body > .site-footer,
body > footer.site-info {
  flex-shrink: 0;
  margin-top: auto;
}

/* Kein horizontales Scrollen: nichts darf breiter als der Viewport werden. */
img, video, iframe, table, pre { max-width: 100%; }
img { height: auto; }
/* Lange deutsche Komposita / URLs dürfen den Viewport nicht sprengen. */
p, li, dd, dt, td, th, figcaption, summary, label, legend, .tpr-card, .tpr-choice label {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

h1, h2, h3, h4 {
  color: var(--tpr-primary-dark);
  line-height: 1.25;
  font-weight: 700;
}
h1 { font-size: clamp(1.6rem, 4vw, 2.5rem); overflow-wrap: break-word; }
h2 { font-size: clamp(1.3rem, 3vw, 1.9rem); margin-top: 2.2em; }
h3 { font-size: clamp(1.1rem, 2.4vw, 1.4rem); }

a { color: var(--tpr-primary); }
a:hover, a:focus { color: var(--tpr-accent-dark); }

/* Sichtbarer Fokus-Indikator (WCAG 2.4.7 / 1.4.11) */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--tpr-focus);
  outline-offset: 2px;
  border-radius: 2px;
}
/* Auf dunklem Navy-Grund heller Ring */
.tpr-hero a:focus-visible, .tpr-hero button:focus-visible,
.site-footer a:focus-visible, .site-info a:focus-visible,
.tpr-footer-legal a:focus-visible {
  outline-color: var(--tpr-focus-light);
}

/* Skip-Link: muss über dem Sticky-Header liegen */
.skip-link, .screen-reader-text.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--tpr-primary-dark); color: #fff; padding: .6em 1em;
}
.skip-link:focus, .screen-reader-text.skip-link:focus {
  left: 0; top: 0; color: #fff; width: auto; height: auto;
  clip: auto; clip-path: none; text-decoration: underline;
}

/* =====================================================
   Sticky Header + Navigation
   ===================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--tpr-bg);
  box-shadow: 0 1px 0 var(--tpr-border);
  transition: box-shadow .18s ease;
}
/* Dezenter Schatten, sobald der Header "klebt" (Klasse setzt ein
   passiver Scroll-Listener im Footer-Skript). */
.site-header.tpr-stuck {
  box-shadow: 0 2px 12px rgba(0, 32, 80, .18);
}
/* Ohne JS bleibt der Header sticky – dann dauerhaft ein leichter Schatten. */
.no-js .site-header { box-shadow: 0 2px 10px rgba(0, 32, 80, .10); }

.site-header .inside-header {
  padding-top: 10px;
  padding-bottom: 10px;
  align-items: center;
}

/* Navigation liegt innerhalb des Headers (nav-float-right) und klebt mit. */
.main-navigation { background: transparent; }
.main-navigation .main-nav > ul > li > a { font-weight: 600; }
.main-navigation .main-nav ul li a { color: var(--tpr-primary-dark); }
.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul li:not([class*="current-menu-"]):focus > a,
.main-navigation .main-nav ul li.sfHover:not([class*="current-menu-"]) > a {
  color: var(--tpr-accent-dark);
}
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
  color: var(--tpr-accent-dark);
  box-shadow: inset 0 -3px 0 var(--tpr-accent-bright);
}
.main-navigation ul ul {
  background: var(--tpr-bg);
  box-shadow: 0 8px 24px rgba(0, 32, 80, .16);
  border: 1px solid var(--tpr-border);
}

/* Burger-Button: ausreichend groß, klar sichtbar */
.menu-toggle, button.menu-toggle {
  color: var(--tpr-primary-dark) !important;
  background: transparent;
  min-height: 44px;
  min-width: 44px;
  font-weight: 600;
}
.menu-toggle:hover, .menu-toggle:focus,
button.menu-toggle:hover, button.menu-toggle:focus {
  color: var(--tpr-accent-dark) !important;
  background: var(--tpr-bg-soft);
}

/* Logo */
.site-logo { margin: 0; display: flex; align-items: center; }
.site-logo img, .header-image.is-logo-image, img.tpr-logo {
  width: 220px;
  max-width: 62vw;
  height: auto;
  display: block;
}
/* Logo enthält den Namen bereits – Titel/Slogan im Header ausblenden. */
.site-header .main-title,
.site-header .site-description,
.site-header p.main-title { display: none !important; }

@media (max-width: 768px) {
  .site-header .inside-header { padding-top: 6px; padding-bottom: 6px; }
  .site-logo img, .header-image.is-logo-image, img.tpr-logo { width: 160px; }
  /* Aufgeklapptes Mobilmenü darf scrollen, nicht den Bildschirm sprengen. */
  .main-navigation.toggled .main-nav > ul {
    max-height: calc(100vh - var(--tpr-header-h) - 12px);
    overflow-y: auto;
  }
  .main-navigation.toggled .main-nav ul li a { padding: 14px 20px; }
}
@media (max-width: 400px) {
  .site-logo img, .header-image.is-logo-image, img.tpr-logo { width: 136px; }
}

/* Ankerziele nicht unter dem Header verstecken */
:target { scroll-margin-top: calc(var(--tpr-header-h) + 12px); }
h1[id], h2[id], h3[id], h4[id], [id].tpr-anchor {
  scroll-margin-top: calc(var(--tpr-header-h) + 12px);
}

/* =====================================================
   Inhaltsbreite
   ===================================================== */
.site-content .content-area,
.no-sidebar .site-content .content-area { width: 100%; }
.grid-container { max-width: var(--tpr-max-w); }

/* Fließtext auf angenehme Zeilenlänge begrenzen, Layout-Elemente
   (Hero, Grids, Tabellen, Rechner) dürfen die volle Breite nutzen. */
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > blockquote,
.entry-content > h2,
.entry-content > h3,
.entry-content > h4 { max-width: var(--tpr-text-w); }

.entry-content > .tpr-hero,
.entry-content > .tpr-grid,
.entry-content > .tpr-table-wrap,
.entry-content > .tpr-calc,
.entry-content > .tpr-faq,
.entry-content > .tpr-card,
.entry-content > .tpr-dual-value,
.entry-content > figure,
.entry-content > table { max-width: none; }

/* =====================================================
   Buttons & CTA
   ===================================================== */
.button, button[type="submit"], input[type="submit"],
.tpr-btn {
  display: inline-block;
  background: var(--tpr-primary);
  color: #fff !important;
  border: 0;
  border-radius: 999px;
  padding: .8em 1.7em;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
  min-height: 44px;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease;
  text-decoration: none;
}
.button:hover, button[type="submit"]:hover, input[type="submit"]:hover,
.tpr-btn:hover, .tpr-btn:focus {
  background: var(--tpr-primary-dark);
  color: #fff !important;
  transform: translateY(-1px);
}

/* CTA in Orange (abgedunkelt, damit weißer Text 5.2:1 erreicht) */
.tpr-btn--cta, .tpr-btn--accent {
  background: var(--tpr-accent);
}
.tpr-btn--cta:hover, .tpr-btn--cta:focus,
.tpr-btn--accent:hover, .tpr-btn--accent:focus {
  background: var(--tpr-accent-dark);
}

.tpr-btn--ghost {
  background: transparent;
  color: var(--tpr-primary) !important;
  box-shadow: inset 0 0 0 2px var(--tpr-primary);
}
.tpr-btn--ghost:hover, .tpr-btn--ghost:focus {
  background: var(--tpr-primary); color: #fff !important;
}

/* =====================================================
   Karten, Boxen, Hinweise
   ===================================================== */
.tpr-card {
  background: var(--tpr-bg-card);
  border: 1px solid var(--tpr-border);
  border-radius: var(--tpr-radius);
  box-shadow: var(--tpr-shadow);
  padding: 1.4rem;
  margin: 1.2rem 0;
}

.tpr-note, .tpr-disclaimer {
  border-left: 4px solid var(--tpr-warn);
  background: var(--tpr-bg-warn);
  border-radius: 0 var(--tpr-radius) var(--tpr-radius) 0;
  padding: 1rem 1.2rem;
  margin: 1.5rem 0;
  font-size: .95rem;
}
.tpr-disclaimer strong { color: var(--tpr-warn); }

.tpr-info {
  border-left: 4px solid var(--tpr-primary);
  background: var(--tpr-bg-info);
  border-radius: 0 var(--tpr-radius) var(--tpr-radius) 0;
  padding: 1rem 1.2rem;
  margin: 1.5rem 0;
}

.tpr-success {
  border-left: 4px solid var(--tpr-ok);
  background: var(--tpr-bg-ok);
  padding: 1rem 1.2rem;
  border-radius: 0 var(--tpr-radius) var(--tpr-radius) 0;
}

.tpr-highlight {
  border-left: 4px solid var(--tpr-teal);
  background: var(--tpr-bg-teal);
  padding: 1rem 1.2rem;
  border-radius: 0 var(--tpr-radius) var(--tpr-radius) 0;
  margin: 1.5rem 0;
}
.tpr-highlight strong { color: var(--tpr-teal-dark); }

/* Preisspannen-Darstellung */
.tpr-price-range {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  align-items: baseline;
}
.tpr-price-range .tpr-price-main {
  font-size: clamp(1.5rem, 5vw, 1.9rem);
  font-weight: 700;
  color: var(--tpr-primary-dark);
}
.tpr-price-range .tpr-price-sub { color: var(--tpr-ink-soft); font-size: .95rem; }

/* =====================================================
   Rechner-Wizard (mobile-first)
   ===================================================== */
.tpr-calc {
  background: var(--tpr-bg-soft);
  border: 1px solid var(--tpr-border);
  border-radius: var(--tpr-radius);
  padding: 1.1rem;
  margin: 1.5rem 0;
}
@media (min-width: 640px) { .tpr-calc { padding: 2rem; } }

.tpr-calc fieldset { border: 0; padding: 0; margin: 0 0 1.2rem; min-width: 0; }
.tpr-calc legend, .tpr-calc .tpr-q {
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: .6rem;
  display: block;
  color: var(--tpr-primary-dark);
}

/* Auswahl-Kacheln: große Touch-Ziele (min. 44px) */
.tpr-choices {
  display: grid;
  grid-template-columns: 1fr;
  gap: .6rem;
}
@media (min-width: 560px) { .tpr-choices { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 880px) { .tpr-choices--3 { grid-template-columns: repeat(3, 1fr); } }

.tpr-choice input[type="radio"], .tpr-choice input[type="checkbox"] {
  position: absolute;
  opacity: 0;
}
.tpr-choice label {
  display: block;
  background: #fff;
  border: 2px solid var(--tpr-border-strong);
  border-radius: var(--tpr-radius);
  padding: .9rem 1rem;
  min-height: 44px;
  cursor: pointer;
  overflow-wrap: break-word;
  transition: border-color .12s ease, background .12s ease;
}
.tpr-choice label:hover { border-color: var(--tpr-primary); }
.tpr-choice input:checked + label {
  border-color: var(--tpr-primary);
  background: var(--tpr-bg-info);
  font-weight: 600;
}
.tpr-choice input:focus-visible + label {
  outline: 3px solid var(--tpr-focus);
  outline-offset: 2px;
}
.tpr-choice small { display: block; color: var(--tpr-ink-soft); font-weight: 400; }

.tpr-calc input[type="number"], .tpr-calc input[type="text"],
.tpr-calc input[type="email"], .tpr-calc input[type="tel"],
.tpr-calc select, .tpr-calc textarea,
.entry-content input[type="text"], .entry-content input[type="email"],
.entry-content input[type="tel"], .entry-content input[type="number"],
.entry-content select, .entry-content textarea {
  width: 100%;
  max-width: 100%;
  padding: .75em .9em;
  border: 2px solid var(--tpr-border-strong);
  border-radius: 8px;
  font-size: 1rem;
  background: #fff;
  color: var(--tpr-ink);
}
.tpr-calc input:focus, .tpr-calc select:focus, .tpr-calc textarea:focus {
  border-color: var(--tpr-primary);
}

.tpr-calc-steps { display: flex; gap: .4rem; margin-bottom: 1.4rem; }
.tpr-calc-steps span {
  flex: 1; height: 6px; border-radius: 3px; background: var(--tpr-border-strong);
}
.tpr-calc-steps span.done { background: var(--tpr-accent); }

.tpr-calc-nav {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: .8rem; margin-top: 1.4rem;
}
.tpr-calc-nav .tpr-btn { flex: 1 1 auto; text-align: center; }
@media (min-width: 560px) { .tpr-calc-nav .tpr-btn { flex: 0 0 auto; } }

.tpr-result { margin-top: 1.5rem; }
.tpr-result[hidden] { display: none; }

/* Ankauf/Verkauf-Doppelanzeige des Wertrechners */
.tpr-dual-value {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px) { .tpr-dual-value { grid-template-columns: 1fr 1fr; } }
.tpr-dual-value .tpr-card { margin: 0; }
.tpr-dual-value h4 { margin: 0 0 .4rem; font-size: 1rem; color: var(--tpr-ink-soft); }

/* =====================================================
   Inhalts-Layout
   ===================================================== */
.tpr-hero {
  background: linear-gradient(160deg, var(--tpr-primary-dark) 0%, var(--tpr-primary) 70%);
  color: #fff;
  padding: 2.2rem 1.2rem;
  border-radius: var(--tpr-radius);
  margin-bottom: 2rem;
}
@media (min-width: 768px) { .tpr-hero { padding: 3rem 2.4rem; } }
.tpr-hero h1, .tpr-hero h2, .tpr-hero h3, .tpr-hero p, .tpr-hero li { color: #fff; }
.tpr-hero p, .tpr-hero ul, .tpr-hero ol { max-width: 62ch; }
.tpr-hero--bild p, .tpr-hero--bild ul { max-width: none; }
.tpr-hero a { color: #fff; }
/* Marken-Orange im Hero nur mit dunkler Navy-Schrift (4.8:1). */
.tpr-hero .tpr-btn {
  background: var(--tpr-accent-bright);
  color: var(--tpr-accent-ink) !important;
  font-weight: 700;
}
.tpr-hero .tpr-btn:hover, .tpr-hero .tpr-btn:focus {
  background: #fff;
  color: var(--tpr-primary-dark) !important;
}
.tpr-hero .tpr-btn--ghost {
  background: transparent;
  color: #fff !important;
  box-shadow: inset 0 0 0 2px #fff;
}
.tpr-hero .tpr-btn--ghost:hover, .tpr-hero .tpr-btn--ghost:focus {
  background: #fff; color: var(--tpr-primary-dark) !important;
}

.tpr-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  margin: 1.5rem 0;
}
@media (min-width: 640px) { .tpr-grid--2 { grid-template-columns: 1fr 1fr; } .tpr-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .tpr-grid--3 { grid-template-columns: repeat(3, 1fr); } .tpr-grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* FAQ (details/summary — semantisch & JS-frei) */
.tpr-faq details {
  border: 1px solid var(--tpr-border);
  border-radius: var(--tpr-radius);
  margin-bottom: .7rem;
  background: #fff;
}
.tpr-faq summary {
  padding: 1rem 1.2rem;
  font-weight: 600;
  cursor: pointer;
  list-style-position: inside;
  color: var(--tpr-primary-dark);
}
.tpr-faq details[open] summary { border-bottom: 1px solid var(--tpr-border); }
.tpr-faq details > div { padding: 1rem 1.2rem; }

/* =====================================================
   Tabellen
   Breit: horizontal scrollbarer Container.
   Schmal (<= 640px): stapeln als Karten – die Spaltenüberschrift
   kommt per data-label (wird im Footer-Skript gesetzt).
   ===================================================== */
.tpr-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.5rem 0; max-width: 100%; }
.tpr-table-wrap table { min-width: 480px; border-collapse: collapse; width: 100%; }
.tpr-table-wrap th, .tpr-table-wrap td {
  border: 1px solid var(--tpr-border);
  padding: .65rem .9rem;
  text-align: left;
}
.tpr-table-wrap th { background: var(--tpr-bg-soft); color: var(--tpr-primary-dark); }
.tpr-table-wrap tbody tr:nth-child(even) { background: #f7f9fc; }

@media (max-width: 640px) {
  .tpr-table-wrap { overflow-x: visible; }
  .tpr-table-wrap table.tpr-table--stackable { min-width: 0; border-collapse: separate; border-spacing: 0; }
  .tpr-table-wrap table.tpr-table--stackable thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .tpr-table-wrap table.tpr-table--stackable tbody tr {
    display: block;
    background: #fff;
    border: 1px solid var(--tpr-border);
    border-radius: var(--tpr-radius);
    box-shadow: var(--tpr-shadow);
    margin-bottom: 1rem;
    overflow: hidden;
  }
  .tpr-table-wrap table.tpr-table--stackable tbody tr:nth-child(even) { background: #fff; }
  .tpr-table-wrap table.tpr-table--stackable tbody th[scope="row"] {
    display: block;
    background: var(--tpr-primary);
    color: #fff;
    border: 0;
    font-size: 1.02rem;
    padding: .7rem .9rem;
  }
  .tpr-table-wrap table.tpr-table--stackable tbody td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    border: 0;
    border-top: 1px solid var(--tpr-border);
    padding: .7rem .9rem;
    min-height: 44px;
  }
  .tpr-table-wrap table.tpr-table--stackable tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--tpr-ink-soft);
    flex: 0 0 auto;
  }
  .tpr-table-wrap table.tpr-table--stackable tbody td:empty { display: none; }
  /* Tabellen ohne thead (kein data-label) scrollen weiterhin. */
  .tpr-table-wrap table:not(.tpr-table--stackable) { min-width: 480px; }
  .tpr-table-wrap:has(table:not(.tpr-table--stackable)) { overflow-x: auto; }
}

/* Breadcrumb */
.tpr-breadcrumb { font-size: .875rem; color: var(--tpr-ink-soft); margin-bottom: 1rem; }
.tpr-breadcrumb a { color: var(--tpr-ink-soft); }

/* =====================================================
   Footer
   ===================================================== */
.site-footer, .site-info {
  background: var(--tpr-footer-bg);
  color: var(--tpr-footer-ink);
}
.site-info .inside-site-info,
.site-footer .inside-site-info {
  max-width: var(--tpr-max-w);
  margin: 0 auto;
  padding: 1.6rem 20px;
  text-align: center;
}
.site-info a, .site-footer a {
  color: var(--tpr-footer-link);
  text-decoration: underline;
}
.site-info a:hover, .site-info a:focus,
.site-footer a:hover, .site-footer a:focus { color: var(--tpr-focus-light); }

.site-info .copyright-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  font-size: .93rem;
}
.tpr-copyright { display: block; }
.tpr-credit { display: block; font-weight: 600; line-height: 1.5; }
.tpr-credit a { font-weight: 400; }

.tpr-footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .3rem 1.4rem;
}
.tpr-footer-legal a { padding: .35rem 0; display: inline-block; }

/* Back-to-Top-Button darf den Sticky-Header nicht stören. */
a.generate-back-to-top { z-index: 90; }

/* =====================================================
   Druck: Versicherungsdoku-Generator
   ===================================================== */
@media print {
  .site-header, .site-footer, .site-info, .tpr-no-print, .main-navigation { display: none !important; }
  .tpr-print-doc { display: block !important; }
  body { font-size: 11pt; display: block; background: #fff; }
}

/* =====================================================
   Bilder
   ===================================================== */
.tpr-bild {
  max-width: 100%;
  height: auto;
  border-radius: var(--tpr-radius);
  display: block;
}

/* Hero mit Bild: einspaltig auf Mobil, zweispaltig ab Tablet */
.tpr-hero--bild {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center;
}
@media (min-width: 800px) {
  .tpr-hero--bild { grid-template-columns: 1.1fr 1fr; gap: 2.5rem; }
}
.tpr-hero--bild .tpr-bild {
  box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
}

/* Bild als Kopf einer Karte */
.tpr-card--bild { padding: 0; overflow: hidden; }
.tpr-card--bild .tpr-bild { border-radius: 0; aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.tpr-card--bild .tpr-card-body { padding: 1.2rem; }
.tpr-card--bild h3 { margin-top: 0; }

/* =====================================================
   Reduzierte Bewegung respektieren
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
  .tpr-btn:hover, .button:hover { transform: none; }
}

/* =====================================================
   Hauptnavigation: kompakt genug für eine Zeile,
   Anfrage-Punkt als sichtbarer Call-to-Action.
   ===================================================== */
@media (min-width: 1101px) {
  .main-navigation .main-nav > ul > li > a {
    padding-left: 14px;
    padding-right: 14px;
    font-size: .97rem;
  }
  /* CTA-Punkt als Button abheben */
  .main-navigation .main-nav > ul > li.tpr-nav-cta {
    display: flex;
    align-items: center;
  }
  .main-navigation .main-nav > ul > li.tpr-nav-cta > a {
    background: var(--tpr-accent);
    color: #fff !important;
    border-radius: 999px;
    padding: .5em 1.25em;
    line-height: 1.3;
    font-weight: 700;
  }
  .main-navigation .main-nav > ul > li.tpr-nav-cta > a:hover,
  .main-navigation .main-nav > ul > li.tpr-nav-cta > a:focus {
    background: var(--tpr-accent-dark);
    color: #fff !important;
  }
}
/* Im Burger-Menü bleibt der CTA ein normaler, gut treffbarer Menüpunkt. */
@media (max-width: 1100px) {
  .main-navigation .main-nav > ul > li.tpr-nav-cta > a { font-weight: 700; }
}

/* =====================================================
   Seitenvorlagen (page-templates/)
   Die Vorlagen erzeugen dasselbe Markup wie die
   Standardvorlage; unterschieden wird ausschließlich über
   die Body-Klasse .tpr-tpl-*. Seiten ohne Vorlage (alle
   importierten Bestandsseiten) sind davon nicht betroffen.
   ===================================================== */

/* --- Rechtstext: schmalere Lesebreite, ruhiger Satz --- */
body.tpr-tpl-rechtstext .entry-content > p,
body.tpr-tpl-rechtstext .entry-content > ul,
body.tpr-tpl-rechtstext .entry-content > ol,
body.tpr-tpl-rechtstext .entry-content > dl,
body.tpr-tpl-rechtstext .entry-content > blockquote,
body.tpr-tpl-rechtstext .entry-content > h2,
body.tpr-tpl-rechtstext .entry-content > h3,
body.tpr-tpl-rechtstext .entry-content > h4 {
  max-width: 66ch;
}
body.tpr-tpl-rechtstext .entry-content > h2 { margin-top: 2em; font-size: clamp(1.2rem, 2.4vw, 1.5rem); }
body.tpr-tpl-rechtstext .entry-content { font-size: 1rem; }

/* --- Ratgeber/Artikel: Zwischenüberschriften klarer abgesetzt --- */
body.tpr-tpl-ratgeber .entry-content > h2 {
  margin-top: 2.6em;
  padding-top: .5em;
  border-top: 2px solid var(--tpr-border);
}
body.tpr-tpl-ratgeber .entry-content > h2:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
body.tpr-tpl-ratgeber .entry-content > .tpr-faq { margin-top: 2.6em; }

/* Aktualitätshinweis unter dem Artikel */
.tpr-artikel-stand {
  margin: 2rem 0 0;
  font-size: .875rem;
  color: var(--tpr-ink-soft);
}

/* --- Rechnerseite: der Wizard ist das Hauptelement --- */
body.tpr-tpl-rechner .entry-content > .tpr-calc,
body.tpr-tpl-rechner .entry-content > form.tpr-calc {
  border: 2px solid var(--tpr-primary);
  box-shadow: var(--tpr-shadow);
}
body.tpr-tpl-rechner .entry-content > .tpr-note { margin-top: 2rem; }

/* --- Landingpage: Lead-Block am Seitenende --- */
.tpr-tpl-lead {
  margin: 2.5rem 0 0;
  padding: 1.4rem;
  background: var(--tpr-bg-soft);
  border: 2px solid var(--tpr-primary);
  border-radius: var(--tpr-radius);
  box-shadow: var(--tpr-shadow);
}
@media (min-width: 640px) { .tpr-tpl-lead { padding: 2rem; } }
.tpr-tpl-lead > h2 { margin-top: 0; }
.tpr-tpl-lead > p { max-width: 62ch; }
/* Das Formular bringt eigenes .tpr-calc-Styling mit – im Lead-Block
   wäre der doppelte Rahmen zu viel. */
.tpr-tpl-lead .tpr-calc {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 1.2rem 0 0;
}

/* CTA-Block, den die Vorlage anhängt */
.tpr-tpl-cta { margin-top: 2.5rem; }

/* =====================================================
   Beiträge (Blog): volle Breite, keine Sidebar, gleiche
   Typografie wie Seiten. GeneratePress liefert mit
   "separate-containers" bereits die weiße Kartenfläche.
   ===================================================== */
.single-post .entry-content > p,
.single-post .entry-content > ul,
.single-post .entry-content > ol,
.single-post .entry-content > blockquote,
.single-post .entry-content > h2,
.single-post .entry-content > h3,
.single-post .entry-content > h4 {
  max-width: var(--tpr-text-w);
}

.blog .site-main > article,
.archive .site-main > article,
.search .site-main > article {
  margin-bottom: 1.6rem;
}
.blog .inside-article,
.archive .inside-article,
.search .inside-article,
.single-post .inside-article {
  border-radius: var(--tpr-radius);
  box-shadow: var(--tpr-shadow);
  border: 1px solid var(--tpr-border);
}

.entry-meta,
.entry-meta a { color: var(--tpr-ink-soft); font-size: .9rem; }
.entry-title { margin-top: 0; }
.entry-title a { text-decoration: none; }
.entry-title a:hover, .entry-title a:focus { text-decoration: underline; }

/* Blätter-Navigation der Archive */
.paging-navigation .nav-links,
.post-navigation .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
}