/* ==========================================================================
   ImmoKnow Gutachten — gemeinsames Stylesheet
   Tokens stammen 1:1 aus dem gesperrten Brand-Kit:
   creativ-suite/brand-kits/immoknow/brand-kit.md (🔒 LOCKED)
   Zusammengeführt aus den zehn abgenommenen design-system/-Bausteinen.
   ========================================================================== */

:root{
  /* Marken-Primärfarben (Brand-Kit) */
  --brand-deep:#0F3160;
  --brand-blue:#0376EC;
  --brand-cyan:#18D3EF;
  --brand-yellow:#FEE201;

  /* Pastell / Hintergrund / Neutral (Brand-Kit) */
  --cyan-soft:#B8F0F9;
  --yellow-soft:#FFF6A8;
  --mint:#EDF7EE;
  --mint-strong:#DCEEDF;
  --paper:#FFFFFF;
  --ink:#0F172A;
  --muted:#5B6B85;

  /* Neutrale Hilfswerte außerhalb des Kits (dokumentiert in design-system/README.md) */
  --line:#dbe7f1;

  /* Schrift */
  --font-sans:"Geist Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Manrope,ui-sans-serif,system-ui,sans-serif;
  --font-mono:"Geist Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;

  /* Abstände (Basis-8-Skala, foundations/abstaende.html) */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;
  --space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;

  /* Radien */
  --radius-sm:8px;--radius-md:14px;--radius-lg:22px;
}

/* Sprungziele muessen unter dem klebenden Kopf landen, nicht dahinter. */
section[id]{scroll-margin-top:92px}

/* ---------- Reset & Basis ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-sans);line-height:1.55;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.container{width:min(1180px,92%);margin:0 auto}
.center{text-align:center}

/* Sichtbarer Fokus überall — Pflicht, nicht optional */
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:3px solid var(--brand-deep);outline-offset:3px;border-radius:4px;
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:1000;
  background:var(--brand-deep);color:#fff;font-weight:700;font-size:14px;
  padding:12px 20px;border-radius:0 0 10px 0;
}
.skip-link:focus{left:0}

/* ---------- Typografische Bausteine ---------- */
.eyebrow{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--brand-deep);font-weight:700;
}
h1{font-size:clamp(40px,5.2vw,62px);line-height:1.06;letter-spacing:-.03em;margin:12px 0 20px;color:var(--ink)}
h1 span{color:var(--brand-blue)}
h2{font-size:clamp(28px,3.6vw,40px);line-height:1.1;letter-spacing:-.02em;margin:10px 0 12px;color:var(--ink)}
h2 span{color:var(--brand-blue)}
h3{font-size:19px;letter-spacing:-.01em;margin:0 0 8px;color:var(--ink)}

.section-head{max-width:720px;margin:0 auto var(--space-7)}
.section-head p{color:var(--muted);margin:0;font-size:16px}

section{padding:var(--space-8) 0}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 22px;border-radius:13px;font-weight:700;font-size:15px;
  border:1.5px solid var(--brand-deep);background:#fff;color:var(--ink);
  cursor:pointer;font-family:inherit;
}
.btn:hover{border-color:var(--brand-blue)}
.btn--primary{background:var(--brand-deep);border:0;color:#fff;box-shadow:inset 0 -3px 0 var(--brand-cyan)}
.btn--primary:hover{box-shadow:inset 0 -5px 0 var(--brand-cyan)}
.btn--full{width:100%}

/* ==========================================================================
   Kopf
   ========================================================================== */
.site-header{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid color-mix(in srgb, var(--brand-cyan) 18%, var(--line));
}
.nav-bar{height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px;color:var(--ink)}
.brand img{height:36px;width:auto;flex:0 0 auto}
.brand strong{color:var(--brand-deep)}
.main-nav{display:flex;align-items:center;gap:24px}
.nav-links{display:flex;align-items:center;gap:22px;list-style:none;margin:0;padding:0}
.nav-links a{font-size:14px;font-weight:700;color:var(--ink)}
.nav-links a:hover{color:var(--brand-blue)}
@media(max-width:860px){
  .nav-links{display:none}
}

/* ==========================================================================
   Hero
   ========================================================================== */
/* Hero-Hintergrund. Standard ist "kraeftig, eine Spur sanfter" —
   Marcs Wahl am 31.08.: Stufe 3 passte, "ein Hauch sanfter waere perfekt".
   Die drei Vergleichsstufen bleiben als Modifier fuer foundations/hero-hintergrund.html.
   Kontrast gegen --ink >= 10,40:1, gegen --brand-deep >= 7,51:1 (gemessen). */
.hero{
  background:
    radial-gradient(circle at 11% 14%, color-mix(in srgb, var(--brand-cyan) 80%, transparent) 0%, transparent 60%),
    radial-gradient(circle at 91% 9%, color-mix(in srgb, var(--brand-yellow) 72%, transparent) 0%, transparent 57%),
    linear-gradient(135deg, color-mix(in srgb, var(--brand-cyan) 42%, #fff) 0%, color-mix(in srgb, var(--brand-yellow) 42%, #fff) 100%);
  padding:var(--space-8) 0;
}
.hero--sanft{
  background:
    radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--brand-cyan) 42%, transparent) 0%, transparent 58%),
    radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--brand-yellow) 34%, transparent) 0%, transparent 55%),
    linear-gradient(180deg,#fff 0%,var(--cyan-soft) 100%);
}
.hero--mittel{
  background:
    radial-gradient(circle at 12% 16%, color-mix(in srgb, var(--brand-cyan) 68%, transparent) 0%, transparent 62%),
    radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--brand-yellow) 60%, transparent) 0%, transparent 58%),
    radial-gradient(circle at 62% 108%, color-mix(in srgb, var(--brand-blue) 20%, transparent) 0%, transparent 55%),
    linear-gradient(180deg,var(--cyan-soft) 0%, var(--yellow-soft) 100%);
}
.hero--kraeftig{
  background:
    radial-gradient(circle at 10% 12%, color-mix(in srgb, var(--brand-cyan) 92%, transparent) 0%, transparent 60%),
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--brand-yellow) 88%, transparent) 0%, transparent 56%),
    linear-gradient(135deg, color-mix(in srgb, var(--brand-cyan) 55%, #fff) 0%, color-mix(in srgb, var(--brand-yellow) 55%, #fff) 100%);
}
/* --muted faellt auf Cyan unter 4,5:1 (gemessen 3,11-3,78). Auf farbigem Grund
   deshalb --brand-deep: 7,42-11,67:1. Nicht auf --muted zuruecksetzen. */
.hero .lede{color:var(--brand-deep);font-size:19px;max-width:600px;margin:0 0 var(--space-5)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:600px}
.hero .hero-note{color:var(--brand-deep)}
.hero-note{margin-top:18px;font-size:13px;color:var(--muted)}

/* ==========================================================================
   Anlass-Auswahl (Kernstück) — design-system/auswahl/anlass-auswahl.html
   ========================================================================== */
.anlass-section{background:var(--paper)}
.selector{display:flex;gap:12px;flex-wrap:wrap}
.anlass-btn{
  display:flex;align-items:center;gap:10px;
  padding:16px 22px;border-radius:999px;border:1.5px solid color-mix(in srgb, var(--brand-cyan) 20%, var(--line));
  background:#fff;font:inherit;font-weight:700;font-size:15px;color:var(--muted);
  cursor:pointer;transition:border-color .15s,background .15s,color .15s;
}
.anlass-btn .ico{width:22px;height:22px;flex:0 0 auto;color:var(--brand-deep)}
.anlass-btn[aria-pressed="true"] .ico{color:#fff}
.anlass-btn:hover{border-color:var(--brand-cyan)}
.anlass-btn[aria-pressed="true"]{
  background:var(--brand-deep);border-color:var(--brand-deep);color:#fff;
  box-shadow:0 10px 24px color-mix(in srgb, var(--brand-deep) 22%, transparent);
}
.panel-wrap{
  margin-top:28px;
  border:1px solid color-mix(in srgb, var(--brand-cyan) 35%, var(--line));
  border-radius:var(--radius-lg);
  background:
    radial-gradient(circle at 12% 15%, color-mix(in srgb, var(--brand-cyan) 32%, transparent) 0%, transparent 55%),
    radial-gradient(circle at 50% 105%, color-mix(in srgb, var(--brand-blue) 20%, transparent) 0%, transparent 55%),
    linear-gradient(180deg,#fff 0%,var(--mint) 100%);
  padding:32px;min-height:190px;
}
.panel{display:none}
.panel.active{display:block}
.panel .tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:#fff;font-weight:700;background:var(--brand-deep);display:inline-block;padding:5px 12px;border-radius:999px}
.panel h3{font-size:24px;letter-spacing:-.02em;margin:12px 0 12px;color:var(--ink)}
.panel p{color:var(--brand-deep);max-width:520px;margin:0 0 20px}
.panel .action{display:inline-flex;align-items:center;padding:13px 20px;border-radius:13px;border:0;font-weight:700;font-size:14px;background:var(--brand-deep);color:#fff;box-shadow:inset 0 -3px 0 var(--brand-cyan);cursor:pointer}
.panel .action:hover{box-shadow:inset 0 -5px 0 var(--brand-cyan)}
.anlass-note{margin-top:28px;font-size:13px;color:var(--muted);border-left:3px solid var(--brand-cyan);padding-left:14px}

/* ==========================================================================
   Paket-Karten — design-system/pakete/paket-karten.html
   ========================================================================== */
.pakete-section{background:linear-gradient(180deg,var(--paper) 0%,var(--mint) 100%)}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.card{
  border:1px solid color-mix(in srgb, var(--brand-cyan) 18%, var(--line));border-radius:var(--radius-lg);
  padding:28px;background:#fff;box-shadow:0 8px 30px color-mix(in srgb, var(--brand-deep) 6%, transparent);
  position:relative;display:flex;flex-direction:column;
}
.card.featured{background:var(--brand-deep);border:2px solid var(--brand-cyan);transform:translateY(-10px);box-shadow:0 18px 60px color-mix(in srgb, var(--brand-deep) 30%, transparent)}
.card.featured .tag{color:var(--brand-cyan)}
.card.featured h3{color:#fff}
.card.featured p{color:color-mix(in srgb, #fff 65%, var(--brand-deep))}
.card.featured .price{color:#fff}
.card.featured .price small{color:color-mix(in srgb, #fff 70%, var(--brand-deep))}
.card.featured li{color:color-mix(in srgb, #fff 88%, var(--brand-deep));border-bottom-color:color-mix(in srgb, #fff 20%, var(--brand-deep))}
.card.featured li:before{color:var(--brand-cyan)}
.card.featured li strong{color:#fff}
.card.featured .btn--primary{background:#fff;color:var(--brand-deep)}
.card.featured .btn--primary:focus-visible{outline:3px solid var(--brand-cyan);outline-offset:3px}
.tag{font-size:12px;color:var(--brand-deep);font-weight:700;letter-spacing:.03em}
.card h3{font-size:26px;margin:8px 0;letter-spacing:-.02em}
.card p{color:var(--muted);margin:0}
.price{font-size:42px;font-weight:700;letter-spacing:-.02em;margin:14px 0 3px}
.price small{display:block;font-size:12px;color:var(--muted);font-weight:400;letter-spacing:0;margin-top:4px;line-height:1.4}
.card ul{list-style:none;padding:0;margin:18px 0 22px}
.card li{padding:8px 0;border-bottom:1px solid color-mix(in srgb, var(--brand-cyan) 12%, var(--line));font-size:14px}
.card li:before{content:"✓";color:var(--brand-deep);font-weight:700;margin-right:9px}
.card .btn{margin-top:auto}
.notice{font-size:13px;color:var(--brand-deep);background:var(--cyan-soft);border-left:4px solid var(--brand-deep);padding:11px 15px;margin-top:24px;border-radius:0}
.pakete-hinweis{font-size:13px;color:var(--muted);margin-top:24px;border-radius:0}
.pakete-section .card,.pakete-section .card.featured{border-radius:0}
@media(max-width:840px){.cards{grid-template-columns:minmax(0,1fr)}.card.featured{transform:none}}

/* ==========================================================================
   Video-Block — design-system/inhalt/video-block.html
   ========================================================================== */
.video-section{background:var(--paper)}
.frame{
  aspect-ratio:16/9;border-radius:25px;
  background:radial-gradient(circle at 30% 20%,var(--brand-blue),var(--brand-deep) 70%);
  box-shadow:0 18px 60px color-mix(in srgb, var(--brand-deep) 18%, transparent);
  position:relative;display:grid;place-items:center;color:#fff;overflow:hidden;
}
.frame:before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:color-mix(in srgb, var(--brand-cyan) 17%, transparent);right:-70px;bottom:-100px}
.play{width:86px;height:86px;border-radius:50%;background:var(--brand-cyan);color:var(--brand-deep);display:grid;place-items:center;box-shadow:0 12px 30px color-mix(in srgb, var(--brand-cyan) 30%, transparent)}
.video-small{position:absolute;top:20px;left:22px;font-size:12px;color:#fff;font-family:var(--font-mono);letter-spacing:.05em}
.placeholder-note{position:absolute;top:20px;right:22px;font-size:11px;font-family:var(--font-mono);letter-spacing:.05em;text-transform:uppercase;background:color-mix(in srgb, var(--paper) 15%, transparent);padding:5px 10px;border-radius:999px}
.caption{margin-top:16px;font-size:13px;color:var(--muted);text-align:center}
/* Mit echtem Video: Deko-Kreis raus, sonst liegt er ueber dem Bild */
.frame.has-video{background:#000}
.frame.has-video:before{display:none}
.frame video{width:100%;height:100%;object-fit:contain;display:block;border-radius:25px;background:#000}

/* ==========================================================================
   Ablauf-Schritte — design-system/inhalt/ablauf-schritte.html
   ========================================================================== */
.ablauf-section{background:linear-gradient(180deg,var(--paper) 0%,var(--mint-strong) 100%)}
.ablauf-section .eyebrow{display:inline-block;border-bottom:2px solid var(--brand-cyan);padding-bottom:4px}
.ablauf-section h2{color:var(--brand-deep)}
.ablauf-section .microcopy{display:block;background:none;padding:0;border-radius:0;font-weight:700;font-size:14px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:36px}
.step{background:var(--paper);color:var(--ink);border-radius:18px;overflow:hidden;border:1px solid color-mix(in srgb, var(--brand-cyan) 35%, transparent);box-shadow:0 6px 16px color-mix(in srgb, var(--brand-deep) 12%, transparent)}
.step-head{display:flex;align-items:center;gap:12px;background:var(--brand-deep);padding:22px 20px}
.step-num{flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--brand-cyan);color:var(--brand-deep);font-family:var(--font-mono);font-weight:700;font-size:15px}
.step-tag{font-family:var(--font-mono);font-size:11px;color:var(--paper);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.step-body{padding:20px 22px 24px}
.step-body h3{font-size:17px;margin:0 0 6px;color:var(--ink)}
.step-body p{color:var(--muted);font-size:14px;margin:0}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}

/* ==========================================================================
   Reason-Karten — für "Wer erstellt Ihr Gutachten" & "Transparenz"
   (Kartenstil aus foundations/abstaende.html übernommen, dort ohne
   Sektions-Verwendung — hier für Textblöcke ohne CTA wiederverwendet)
   ========================================================================== */
.reason-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
.reason-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.reason-card{
  border:1px solid color-mix(in srgb, var(--brand-cyan) 30%, var(--line));
  border-radius:var(--radius-lg);
  background:linear-gradient(135deg,#fff,var(--cyan-soft));
  padding:var(--space-5);
}
.reason-card h3{font-size:19px;margin:0 0 var(--space-3)}
.reason-card p{color:var(--brand-deep);margin:0}
@media(max-width:900px){.reason-grid,.reason-grid.cols-2{grid-template-columns:1fr}}

/* Wer Ihr Gutachten erstellt — eine Säule statt drei Karten */
.person-block{
  display:flex;gap:var(--space-6);align-items:flex-start;
  border:1px solid color-mix(in srgb, var(--brand-cyan) 30%, var(--line));
  border-radius:var(--radius-lg);
  background:linear-gradient(135deg,#fff,var(--cyan-soft));
  padding:var(--space-5);
}
.person-photo{flex:0 0 200px;margin:0;text-align:center}
.person-photo img{
  width:100%;height:auto;aspect-ratio:1;border-radius:var(--radius-lg);
  object-fit:cover;display:block;
  background:linear-gradient(135deg,var(--brand-deep),var(--brand-blue));
}
.person-photo figcaption{margin-top:var(--space-3);font-weight:700;color:var(--brand-deep);font-size:14px}
.person-text{flex:1 1 auto;color:var(--brand-deep)}
.person-text p{margin:0 0 var(--space-3)}
.person-text p:last-child{margin-bottom:0}
@media(max-width:700px){.person-block{flex-direction:column;align-items:center;text-align:center}.person-photo{flex:0 0 auto;width:160px}}

/* ==========================================================================
   FAQ — design-system/inhalt/faq.html
   ========================================================================== */
.faq-section{background:linear-gradient(180deg,var(--paper) 0%,var(--mint) 100%)}
.faq{max-width:820px;margin:0 auto}
.faq details{border:1px solid color-mix(in srgb, var(--brand-cyan) 15%, var(--line));border-radius:14px;margin:10px 0;padding:17px 19px;background:#fff}
.faq details[open]{background:color-mix(in srgb, var(--brand-cyan) 8%, var(--paper))}
.faq summary{font-weight:700;cursor:pointer;list-style:revert}
.faq summary::marker{color:var(--brand-deep)}
.faq p{color:var(--muted);margin:12px 0 0}

/* ==========================================================================
   Abschluss-CTA — design-system/aktion/cta.html
   ========================================================================== */
.cta-section{background:var(--paper)}
.banner{
  background:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--brand-cyan) 62%, transparent) 0%, transparent 60%),
    radial-gradient(circle at 88% 85%, color-mix(in srgb, var(--brand-yellow) 55%, transparent) 0%, transparent 62%),
    linear-gradient(180deg,var(--cyan-soft) 0%, var(--yellow-soft) 100%);
  border:1px solid color-mix(in srgb, var(--brand-cyan) 55%, transparent);
  border-radius:27px;padding:44px;text-align:center;
}
.banner h2{margin:12px 0 14px}
.banner .actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.microcopy{margin-top:18px;font-size:13px;color:var(--brand-deep);background:var(--cyan-soft);display:inline-block;padding:8px 16px;border-radius:999px}

/* ==========================================================================
   Fußzeile
   ========================================================================== */
.site-footer{background:var(--brand-deep);color:color-mix(in srgb, #fff 88%, var(--brand-deep));padding:var(--space-7) 0 var(--space-6)}
.site-footer a{color:color-mix(in srgb, #fff 88%, var(--brand-deep))}
.site-footer a:hover{color:#fff}
.site-footer a:focus-visible{outline:3px solid var(--brand-cyan);outline-offset:3px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--space-6)}
.footer-brand{display:flex;align-items:center;gap:10px;font-weight:700;color:#fff;font-size:16px;margin:0 0 var(--space-3)}
.footer-brand img{height:30px;width:auto;flex:none}
.footer-brand strong{color:var(--brand-cyan)}
.footer-col p{font-size:14px;max-width:280px;margin:0}
.footer-title{font-weight:700;color:#fff;margin:0 0 var(--space-3);font-size:12px;text-transform:uppercase;letter-spacing:.06em;font-family:var(--font-mono)}
.footer-col a{display:block;font-size:14px;margin:8px 0}
.footer-bottom{margin-top:var(--space-6);padding-top:var(--space-5);border-top:1px solid color-mix(in srgb, #fff 20%, var(--brand-deep));font-size:13px;color:color-mix(in srgb, #fff 70%, var(--brand-deep))}
@media(max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr}}

/* ==========================================================================
   Rechtstext-Seiten (impressum/datenschutz/agb/widerrufsbelehrung)
   Gleiche Typo wie die Hauptseite, schmale Lesespalte.
   ========================================================================== */
.legal-header{background:var(--paper);border-bottom:1px solid var(--line)}
.legal-header .container{height:72px;display:flex;align-items:center}
.back-link{font-size:14px;font-weight:700;color:var(--brand-deep)}
.back-link:hover{color:var(--brand-blue)}
.legal-main{padding:var(--space-8) 0}
.legal-col{max-width:720px;margin:0 auto;padding:0 24px}
.legal-col h1{font-size:clamp(30px,4vw,42px);margin:0 0 8px}
.legal-col .meta{color:var(--muted);font-size:14px;margin:0 0 var(--space-7)}
.legal-col h2{font-size:22px;margin:var(--space-7) 0 var(--space-3);color:var(--brand-deep)}
.legal-col h2:first-of-type{margin-top:var(--space-5)}
.legal-col p{margin:0 0 var(--space-4);color:var(--ink)}
.legal-col ul,.legal-col ol{margin:0 0 var(--space-4);padding-left:22px;color:var(--ink)}
.legal-col li{margin:6px 0}
.legal-col strong{color:var(--ink)}
.legal-col blockquote.addr{
  margin:0 0 var(--space-4);padding:14px 18px;border-left:3px solid var(--brand-cyan);
  background:var(--mint);border-radius:0 10px 10px 0;font-style:normal;color:var(--ink);
}
.legal-col hr{border:0;border-top:1px solid var(--line);margin:var(--space-6) 0}
.legal-col table{width:100%;border-collapse:collapse;margin:0 0 var(--space-5);font-size:14px}
.legal-col th,.legal-col td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.legal-col th{background:var(--mint);color:var(--brand-deep)}
.legal-col .callout{
  background:var(--cyan-soft);border-radius:0;padding:16px 18px;margin:0 0 var(--space-4);color:var(--brand-deep);
}
.legal-col .callout p:last-child{margin-bottom:0}

/* Mobil-Nachlese 04.09.2026 (Gate B, reports/0904-gate-b-recheck.md): Tabellen der
   Rechtstexte scrollen in sich statt die Seite zu verbreitern; lange Einzelwoerter
   (SchadenDokumentation) und Unterschriftslinien brechen bei 320 px um. */
.legal-col table{display:block;overflow-x:auto;max-width:100%}
.legal-col h1,.legal-col h2,.legal-col p,.legal-col li{overflow-wrap:anywhere;hyphens:auto}
.card h3,.card .btn,.pkg-card h3{overflow-wrap:anywhere;hyphens:auto}