/* ============================================================
   hagan designer — Website (B2B Corporate Design)
   ------------------------------------------------------------
   Farb- & Typo-System 1:1 aus dem CD-Update.
   Alle Klassen sind mit  .hg-  geprefixt und liegen unter dem
   Wrapper  .hg-site  → kollisionsfrei, auch falls die Klassen
   später in ein anderes System übernommen werden.
   Fonts: lokal aus assets/fonts (assets/css/fonts.css), kein
   Google-Fonts-Abruf (P-WEB, 21.10.2026: Betrieb statisch).
   P-WEB-Anpassungen in diesem Teil sind mit "P-WEB" markiert;
   neue Bausteine stehen gesammelt am Dateiende.
   ============================================================ */

:root{
  /* --- Farbrollen (CD) --- */
  --tannengruen:#16261A;   /* Primär: Header, dunkle Flächen, Headlines */
  --tannen-tief:#0F1A12;   /* abgeleitet: Karten/Screens auf Dunkel      */
  --gruen:#23953D;         /* Sekundär: Icons, Linien, sek. Buttons      */
  --gruen-text:#1A6B2D;    /* P-WEB: Hagan Grün für TEXT/kleine Flächen mit
                              weißer Schrift - #23953D erreicht als Schrift
                              nur 3,1-3,9:1, dieser Ton 5,3-6,6:1 (≥ 4,5:1) */
  --fokus:var(--tannengruen); /* P-WEB: Fokusring auf hellem Grund (Lime auf Hell nur 1,9:1) */
  --lime:#8AC43A;          /* Akzent: NUR CTA & aktive Zustände          */
  --offwhite:#F4F3EE;      /* Hintergrund                                */
  --nebel:#E7E7E2;         /* Neutral: Karten, Tabellenzeilen            */
  --anthrazit:#262B27;     /* Text                                       */
  --steingrau:#5B6B66;     /* Text sekundär: Captions, Meta              */
  --linie:#C7CCC5;         /* Linien                                     */
  --sand:#C9A66B;          /* Erdton: Badges (z. B. Zaunbau)             */
  --blau:#3D6E8C;          /* UI-Info: Links, Info-Zustände              */

  /* --- abgeleitete Töne für dunklen Grund --- */
  --auf-dunkel:#EDEFEA;
  --auf-dunkel-mut:#A9B6AC;
  --linie-dunkel:#2B3D30;

  /* --- Typo --- */
  --ff-display:'Poppins','Segoe UI',system-ui,-apple-system,'Helvetica Neue',sans-serif;
  --ff-body:'Open Sans','Segoe UI',system-ui,-apple-system,'Helvetica Neue',sans-serif;

  --wrap:1200px;
  --radius:10px;
}

/* ---------- Basis (scoped) ---------- */
/* P-WEB: Browser-Standardrand (8 px) weg, Grund wie die Seite */
body{ margin:0; background:var(--offwhite); }
.hg-site,
.hg-site *{ box-sizing:border-box; }
.hg-site{
  font-family:var(--ff-body);
  color:var(--anthrazit);
  line-height:1.5;
  margin:0;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.hg-site img{ max-width:100%; display:block; }
/* P-WEB: :where() senkt die Spezifität - sonst schlug diese Regel die Knopf-Farben
   (.hg-btn-cta bekam hellen Text auf Lime: 1,8:1 statt 7,6:1) */
.hg-site :where(a){ color:inherit; }

.hg-wrap{
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 clamp(20px,4vw,48px);
}

/* ---------- Section-Kopf (wiederverwendbar) ---------- */
.hg-sechead{ max-width:640px; margin:0 0 clamp(32px,5vw,52px); }
.hg-sechead.center{ margin-left:auto; margin-right:auto; text-align:center; }
.hg-sec-label{ color:var(--gruen-text); font-weight:700; font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; }
.hg-sec-title{
  font-family:var(--ff-display); font-weight:700; color:var(--tannengruen);
  font-size:clamp(1.6rem,3vw,2.25rem); line-height:1.12; letter-spacing:-.01em;
  text-wrap:balance; margin:10px 0 0;
}
.hg-sec-sub{ color:var(--steingrau); font-size:1rem; line-height:1.6; margin:14px 0 0; }

/* ---------- Buttons ---------- */
.hg-btn{
  font-family:var(--ff-body);
  font-weight:700; font-size:.9rem;
  border-radius:6px; padding:11px 20px;
  cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid transparent; white-space:nowrap;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.hg-btn-lg{ padding:14px 26px; font-size:.95rem; }
/* Ghost (auf Dunkel) */
.hg-btn-ghost{ background:transparent; color:var(--auf-dunkel); border-color:rgba(244,243,238,.28); }
.hg-btn-ghost:hover,.hg-btn-ghost:focus-visible{ border-color:var(--lime); color:#fff; }
/* Outline (auf Hell) */
.hg-btn-outline{ background:#fff; color:var(--tannengruen); border-color:var(--linie); }
.hg-btn-outline:hover,.hg-btn-outline:focus-visible{ border-color:var(--gruen); color:var(--gruen-text); }
/* CTA — Lime ausschließlich hier */
.hg-btn-cta{ background:var(--lime); color:var(--tannengruen); }
.hg-btn-cta:hover,.hg-btn-cta:focus-visible{ background:#97d048; transform:translateY(-1px); }

/* =====================================================
   HEADER + HERO  (dunkle Sektion)
   ===================================================== */
.hg-hero-sec{ background:var(--tannengruen); color:var(--auf-dunkel); position:relative; overflow:hidden; }
.hg-hero-sec::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(143,160,150,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(143,160,150,.07) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(120% 90% at 78% 42%, #000 40%, transparent 100%);
          mask-image:radial-gradient(120% 90% at 78% 42%, #000 40%, transparent 100%);
  pointer-events:none;
}
.hg-hero-sec::after{
  content:""; position:absolute; top:-12%; right:-8%;
  width:640px; height:640px;
  background:radial-gradient(circle, rgba(35,149,61,.20), transparent 62%);
  pointer-events:none;
}
.hg-hero-sec > .hg-wrap{ position:relative; z-index:1; }

.hg-head{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:22px 0; }
.hg-brand{ display:inline-flex; align-items:center; }
.hg-brand img{ height:30px; width:auto; }
.hg-nav{ display:flex; align-items:center; gap:30px; }
.hg-nav a{ color:var(--auf-dunkel-mut); text-decoration:none; font-size:.9rem; font-weight:600; transition:color .18s ease; }
.hg-nav a:hover,.hg-nav a:focus-visible{ color:#fff; }

.hg-hero{
  display:grid; grid-template-columns:1.02fr .98fr;
  gap:clamp(32px,5vw,64px); align-items:center;
  padding:clamp(48px,7vw,88px) 0 clamp(56px,8vw,96px);
}
.hg-eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  color:var(--auf-dunkel-mut); /* P-WEB A12: Lime nur CTA/aktive Zustaende - Dachzeile gedaempft (7,5:1) */
  font-weight:700; font-size:.75rem; letter-spacing:.2em; text-transform:uppercase;
  margin-bottom:22px;
}
.hg-eyebrow::before{ content:""; width:26px; height:2px; background:var(--gruen); display:block; } /* P-WEB A12 */
.hg-h1{
  font-family:var(--ff-display); font-weight:700;
  font-size:clamp(2.05rem,4.6vw,3.35rem); line-height:1.07; letter-spacing:-.015em;
  color:#fff; text-wrap:balance; margin:0 0 22px;
}
.hg-lead{ font-size:clamp(1rem,1.15vw,1.09rem); line-height:1.65; color:var(--auf-dunkel-mut); max-width:48ch; margin:0 0 34px; }
.hg-cta-row{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:34px; }
.hg-usps{ display:flex; flex-wrap:wrap; gap:14px 26px; padding:26px 0 0; /* P-WEB: ohne ul-Einzug */ border-top:1px solid var(--linie-dunkel); list-style:none; margin:0; }
.hg-usps li{ display:flex; align-items:center; gap:9px; font-size:.9rem; color:var(--auf-dunkel); }
.hg-usps li::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--gruen); flex-shrink:0; } /* P-WEB A12 */

/* Produkt-Visual (2D/3D/Material-Split) */
.hg-card{ background:var(--tannen-tief); border:1px solid var(--linie-dunkel); border-radius:var(--radius); overflow:hidden; box-shadow:0 40px 80px -40px rgba(0,0,0,.75); }
.hg-tabs{ display:flex; align-items:stretch; border-bottom:1px solid var(--linie-dunkel); background:#122016; }
.hg-tab{ font-size:.75rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#7C8C81; padding:13px 16px; border-bottom:2px solid transparent; white-space:nowrap; }
.hg-tab.is-active{ color:var(--lime); border-bottom-color:var(--lime); }
.hg-tab-right{ margin-left:auto; }
.hg-split{ display:grid; grid-template-columns:1.28fr 1fr; min-height:270px; }
.hg-plan-panel{ position:relative; border-right:1px solid var(--linie-dunkel); }
.hg-plan-panel svg{ display:block; width:100%; height:100%; }
.hg-render{ position:relative; background:linear-gradient(158deg,#20362a 0%, var(--tannen-tief) 78%); display:flex; flex-direction:column; justify-content:flex-end; padding:16px; }
.hg-render .rlabel{ font-size:.75rem; letter-spacing:.05em; color:#8FA096; position:relative; z-index:2; }
.hg-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-top:1px solid var(--linie-dunkel); background:#122016; font-size:.75rem; font-variant-numeric:tabular-nums; }
.hg-bar .proj{ color:#8FA096; }
.hg-bar .right{ display:flex; align-items:center; gap:14px; }
.hg-bar .flae{ color:var(--auf-dunkel-mut); }
.hg-chip{ background:var(--gruen-text); color:#fff; font-weight:700; font-size:.75rem; letter-spacing:.03em; padding:4px 10px; border-radius:4px; }
.hg-cap{ margin-top:16px; text-align:center; font-size:.78rem; color:var(--auf-dunkel-mut); }
.hg-cap b{ color:var(--auf-dunkel); font-weight:600; }

/* =====================================================
   BRANCHEN-STRIP  (helle Übergangsleiste)
   ===================================================== */
.hg-branchen{ background:var(--offwhite); padding:26px 0; border-bottom:1px solid var(--linie); }
.hg-branchen .row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; }
.hg-branchen .lbl{ color:var(--steingrau); font-size:.85rem; font-weight:600; }
.hg-badge{ display:inline-flex; align-items:center; font-size:.85rem; font-weight:700; padding:8px 16px; border-radius:4px; }
.hg-badge-dark{ background:var(--tannengruen); color:#fff; }
.hg-badge-outline{ background:#fff; border:1px solid var(--gruen); color:var(--gruen-text); }
.hg-badge-sand{ background:#fff; border:1px solid var(--sand); color:#8a6d3a; }

/* =====================================================
   FUNKTIONEN  (helle Sektion)
   ===================================================== */
.hg-features{ background:var(--offwhite); padding:clamp(56px,8vw,96px) 0; }
.hg-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.hg-fcard{ background:#fff; border:1px solid var(--linie); border-radius:var(--radius); padding:26px 24px; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.hg-fcard:hover{ transform:translateY(-3px); box-shadow:0 18px 40px -24px rgba(22,38,26,.4); border-color:#b4bcb2; }
.hg-fico{ width:52px; height:52px; border-radius:8px; background:var(--nebel); display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.hg-fico img{ width:28px; height:28px; }
.hg-fcard h3{ font-family:var(--ff-display); font-weight:600; color:var(--tannengruen); font-size:1.12rem; margin:0 0 8px; }
.hg-fcard p{ color:var(--steingrau); font-size:.92rem; line-height:1.6; margin:0; }

/* =====================================================
   PROZESS  (7 Schritte, neutrale Sektion)
   ===================================================== */
.hg-process{ background:var(--nebel); padding:clamp(56px,8vw,96px) 0; }
.hg-steps{ display:grid; grid-template-columns:repeat(7,1fr); gap:0; margin-top:clamp(28px,4vw,44px); }
.hg-step{ position:relative; padding-right:16px; }
.hg-step .n{
  width:34px; height:34px; border-radius:50%; border:2px solid var(--gruen); color:var(--gruen-text);
  background:var(--nebel); display:flex; align-items:center; justify-content:center;
  font-family:var(--ff-display); font-weight:700; font-size:.9rem; margin-bottom:16px; position:relative; z-index:2;
}
.hg-step .ln{ position:absolute; top:16px; left:34px; right:0; height:2px; background:var(--linie); z-index:1; }
.hg-step:last-child .ln{ display:none; }
.hg-step h3,.hg-step h4{ font-family:var(--ff-display); font-weight:600; color:var(--tannengruen); font-size:.98rem; margin:0 0 6px; }
.hg-step p{ color:var(--steingrau); font-size:.82rem; line-height:1.5; margin:0; }

/* =====================================================
   IM DETAIL  (abwechselnde Zeilen mit Komponenten)
   ===================================================== */
.hg-detail{ background:var(--nebel); padding:clamp(56px,8vw,96px) 0; }
.hg-drow{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,64px); align-items:center; }
.hg-drow > *{ min-width:0; } /* P-WEB: Rasterspalte darf schmaler als die Tabelle werden (375 px) */
.hg-drow + .hg-drow{ margin-top:clamp(48px,7vw,80px); }
.hg-rev .hg-dtext{ order:2; }
.hg-dtext h3{ font-family:var(--ff-display); font-weight:700; color:var(--tannengruen); font-size:clamp(1.35rem,2.4vw,1.85rem); line-height:1.15; margin:0 0 14px; text-wrap:balance; }
.hg-dtext p{ color:var(--steingrau); font-size:1rem; line-height:1.65; margin:0 0 18px; }
.hg-dtext ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.hg-dtext li{ display:flex; gap:10px; align-items:flex-start; font-size:.95rem; color:var(--anthrazit); line-height:1.45; }
.hg-dtext li::before{ content:"✓"; color:var(--gruen); font-weight:700; flex-shrink:0; }

/* Materialtabelle */
.hg-mtable-wrap{ border:1px solid var(--linie); border-radius:var(--radius); overflow-x:auto; /* P-WEB: statt hidden - schmale Bildschirme scrollen in der Tabelle */ background:#fff; box-shadow:0 20px 50px -34px rgba(22,38,26,.4); }
.hg-mtable{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
.hg-mtable th{ background:var(--nebel); color:var(--steingrau); font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; text-align:left; padding:12px 16px; font-weight:700; }
.hg-mtable th.num,.hg-mtable td.num{ text-align:right; }
.hg-mtable td{ padding:12px 16px; font-size:.9rem; border-top:1px solid var(--nebel); color:var(--anthrazit); }
.hg-mtable td.num{ font-weight:600; }
.hg-mtable tfoot td{ font-weight:700; color:var(--tannengruen); border-top:2px solid var(--linie); background:#fbfbf9; }

/* Projektkarte */
.hg-pcard{ background:#fff; border:1px solid var(--linie); border-radius:var(--radius); overflow:hidden; box-shadow:0 24px 60px -36px rgba(22,38,26,.45); max-width:420px; }
.hg-pcard-prev{ height:150px; background:linear-gradient(160deg,#1E3524,#16261A); position:relative; }
.hg-pcard-prev svg{ position:absolute; inset:0; width:100%; height:100%; }
.hg-pcard-status{ position:absolute; top:12px; right:12px; background:var(--gruen-text); color:#fff; font-size:.75rem; font-weight:700; letter-spacing:.03em; padding:4px 10px; border-radius:4px; z-index:2; }
.hg-pcard-body{ padding:20px 22px; }
.hg-pcard-type{ color:var(--gruen-text); font-size:.75rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; margin-bottom:6px; }
.hg-pcard-title{ font-family:var(--ff-display); font-weight:700; color:var(--tannengruen); font-size:1.15rem; margin-bottom:14px; }
.hg-pcard-meta{ display:grid; grid-template-columns:1fr 1fr; gap:12px; font-size:.8rem; color:var(--steingrau); border-top:1px solid var(--nebel); padding-top:14px; font-variant-numeric:tabular-nums; }
.hg-pcard-meta b{ display:block; color:var(--anthrazit); font-size:.95rem; font-weight:700; margin-top:2px; }

/* =====================================================
   PREISE  (B2B-first, neutrale Sektion)
   ===================================================== */
.hg-pricing{ background:var(--offwhite); padding:clamp(56px,8vw,96px) 0; }
.hg-plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; }
.hg-planc{ background:#fff; border:1px solid var(--linie); border-radius:12px; padding:30px 26px; display:flex; flex-direction:column; position:relative; }
.hg-planc.feat{ border-color:var(--gruen); box-shadow:0 24px 60px -30px rgba(35,149,61,.4); }
.hg-planc .tag{ position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:var(--gruen-text); color:#fff; font-size:.75rem; font-weight:700; letter-spacing:.05em; padding:5px 14px; border-radius:20px; text-transform:uppercase; white-space:nowrap; }
.hg-planc h3{ font-family:var(--ff-display); font-weight:600; color:var(--tannengruen); font-size:1.3rem; margin:0 0 4px; }
.hg-planc .aud{ color:var(--steingrau); font-size:.85rem; margin:0 0 18px; }
.hg-planc .price{ font-family:var(--ff-display); font-weight:700; color:var(--tannengruen); font-size:2.1rem; line-height:1; font-variant-numeric:tabular-nums; }
.hg-planc .price span{ font-size:.9rem; font-weight:600; color:var(--steingrau); }
.hg-planc ul{ list-style:none; margin:20px 0 26px; padding:0; display:flex; flex-direction:column; gap:11px; }
.hg-planc li{ font-size:.9rem; color:var(--anthrazit); display:flex; gap:9px; align-items:flex-start; line-height:1.4; }
.hg-planc li::before{ content:"✓"; color:var(--gruen); font-weight:700; flex-shrink:0; }
.hg-planc .hg-btn{ margin-top:auto; justify-content:center; }
.hg-plans-note{ text-align:center; color:var(--steingrau); font-size:.92rem; margin-top:26px; }
.hg-plans-note b{ color:var(--tannengruen); }

/* =====================================================
   FAQ  (helle Sektion)
   ===================================================== */
.hg-faq{ background:var(--nebel); padding:clamp(56px,8vw,96px) 0; }
.hg-faq-list{ max-width:820px; margin:clamp(20px,3vw,36px) auto 0; }
.hg-faq details{ background:#fff; border:1px solid var(--linie); border-radius:var(--radius); margin-bottom:12px; overflow:hidden; }
.hg-faq summary{ cursor:pointer; padding:18px 22px; font-family:var(--ff-display); font-weight:600; color:var(--tannengruen); font-size:1.02rem; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.hg-faq summary::-webkit-details-marker{ display:none; }
.hg-faq summary::after{ content:"+"; color:var(--gruen); font-size:1.5rem; font-weight:400; line-height:1; flex-shrink:0; transition:transform .2s ease; }
.hg-faq details[open] summary::after{ transform:rotate(45deg); }
.hg-faq p{ padding:0 22px 20px; color:var(--steingrau); font-size:.95rem; line-height:1.65; margin:0; }

/* =====================================================
   ABSCHLUSS-CTA  (dunkle Sektion)
   ===================================================== */
.hg-ctaband{ background:var(--tannengruen); color:var(--auf-dunkel); padding:clamp(56px,8vw,88px) 0; position:relative; overflow:hidden; text-align:center; }
.hg-ctaband::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(143,160,150,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(143,160,150,.06) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(90% 120% at 50% 0%, #000 30%, transparent 100%);
          mask-image:radial-gradient(90% 120% at 50% 0%, #000 30%, transparent 100%);
  pointer-events:none;
}
.hg-ctaband > .hg-wrap{ position:relative; z-index:1; }
.hg-ctaband h2{ font-family:var(--ff-display); font-weight:700; color:#fff; font-size:clamp(1.7rem,3.4vw,2.5rem); margin:0 0 14px; text-wrap:balance; }
.hg-ctaband p{ color:var(--auf-dunkel-mut); font-size:1.05rem; line-height:1.6; max-width:52ch; margin:0 auto 30px; }
.hg-ctaband .hg-cta-row{ justify-content:center; margin:0; }

/* =====================================================
   FOOTER  (dunkle Sektion)
   ===================================================== */
.hg-foot{ background:var(--tannengruen); color:var(--auf-dunkel-mut); padding:clamp(40px,6vw,64px) 0 32px; }
.hg-foot-top{ display:flex; flex-wrap:wrap; gap:28px 40px; align-items:flex-start; justify-content:space-between; padding-bottom:28px; border-bottom:1px solid var(--linie-dunkel); }
.hg-foot img{ height:30px; width:auto; }
.hg-foot-claim{ max-width:32ch; font-size:.9rem; line-height:1.6; margin:14px 0 0; }
.hg-foot-nav{ display:flex; flex-wrap:wrap; gap:10px 28px; }
.hg-foot-nav a{ color:var(--auf-dunkel-mut); text-decoration:none; font-size:.9rem; font-weight:600; }
.hg-foot-nav a:hover{ color:#fff; }
/* P-WEB: Steingrau auf Tannengrün nur 2,8:1 -> Auf-Dunkel-gedämpft (7,5:1) */
.hg-foot-legal{ display:flex; flex-wrap:wrap; gap:6px 20px; margin-top:22px; font-size:.8rem; color:var(--auf-dunkel-mut); }
.hg-foot-legal a{ color:var(--auf-dunkel-mut); text-decoration:none; }
.hg-foot-legal a:hover{ color:#fff; }

/* =====================================================
   MOTION  (dezent, respektiert reduced-motion)
   ===================================================== */
@media (prefers-reduced-motion: no-preference){
  .rise{ opacity:0; transform:translateY(14px); animation:hg-rise .7s cubic-bezier(.2,.7,.3,1) forwards; }
  .d1{animation-delay:.05s;} .d2{animation-delay:.14s;} .d3{animation-delay:.23s;}
  .d4{animation-delay:.32s;} .d5{animation-delay:.41s;} .d6{animation-delay:.30s;}
  @keyframes hg-rise{ to{ opacity:1; transform:none; } }
  .live{ animation:hg-blink 2.4s ease-in-out infinite; }
  @keyframes hg-blink{ 0%,100%{opacity:1;} 50%{opacity:.35;} }
}
/* P-WEB: Ring-Farbe je Grund (--fokus): Tannengrün auf Hell, Lime auf Dunkel - beides ≥ 3:1.
   A9: auch scrollbare Behaelter (Tabellen), die der Browser selbst fokussierbar macht */
.hg-site :where(a,button,summary,[tabindex],.hg-tabelle,.hg-mtable-wrap):focus-visible{ outline:2px solid var(--fokus); outline-offset:3px; border-radius:4px; }

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width:920px){
  .hg-hero{ grid-template-columns:1fr; gap:44px; padding-top:40px; }
  .hg-card-col{ order:2; }
  .hg-grid{ grid-template-columns:repeat(2,1fr); }
  .hg-steps{ grid-template-columns:repeat(2,1fr); gap:28px 20px; }
  .hg-step .ln{ display:none; }
  .hg-drow{ grid-template-columns:1fr; gap:28px; }
  .hg-rev .hg-dtext{ order:0; }
  .hg-dvis{ order:2; }
  .hg-plans{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; }
  /* P-WEB A10: Pro nicht mehr per order nach oben - Sehreihenfolge = Tab-Reihenfolge */
}
@media (max-width:680px){
  .hg-nav{ display:none; }
  .hg-tab-right{ display:none; }
  .hg-grid{ grid-template-columns:1fr; }
  .hg-steps{ grid-template-columns:1fr; }
}

/* =====================================================================
   P-WEB ERWEITERUNGEN (21.10.2026)
   Neue Bausteine für Unterseiten, Pflicht-Links, Rechtstexte und
   Barrierefreiheit - alle im .hg-Präfix und mit den CD-Farbrollen.
   Lime bleibt CTA/aktive Zustände (aktuelle Seite in der Navigation).
   ===================================================================== */

/* Dunkle Flächen: Fokusring in Lime (≥ 7:1 auf Tannengrün) */
.hg-pflicht,.hg-headband,.hg-hero-sec,.hg-ctaband,.hg-foot{ --fokus:var(--lime); }
.hg-site{ background:var(--offwhite); position:relative; }

/* nur für Screenreader sichtbar */
.hg-vh{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Sprunglink: erst bei Tastaturfokus sichtbar */
.hg-skipband{ position:relative; height:0; background:var(--tannen-tief); --fokus:var(--lime); }
.hg-skip{ position:absolute; left:16px; top:-100px; z-index:50; background:var(--lime); color:var(--tannengruen); font-weight:700; padding:8px 16px; border-radius:6px; text-decoration:none; }
.hg-skip:focus{ top:4px; }
/* FAQ: details schneidet (overflow:hidden) - Ring nach innen legen */
.hg-faq summary:focus-visible{ outline-offset:-3px; }
.hg-site main:focus{ outline:none; }

/* ---------- Pflicht-Links § 312k / § 356a (oben auf jeder Seite) ---------- */
.hg-pflicht{ background:var(--tannen-tief); border-bottom:1px solid var(--linie-dunkel); }
/* P-WEB A5: schlanke Textleiste statt zwei Knoepfe - weiter oben auf jeder Seite, ohne Menue,
   hervorgehoben durch eigene Leiste, hellen Text (14:1) und Unterstreichung; Ziel >= 24 px hoch */
.hg-pflicht .hg-wrap{ display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:0 22px; padding-top:2px; padding-bottom:2px; }
.hg-pflicht-btn{ display:inline-flex; align-items:center; min-height:26px; font-size:.8125rem; font-weight:600; line-height:1.2; color:var(--auf-dunkel); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.hg-pflicht-btn:hover{ color:#fff; text-decoration-thickness:2px; }

/* ---------- Kopf als eigenes Band (vorher im Hero) ---------- */
.hg-headband{ background:var(--tannengruen); color:var(--auf-dunkel); border-bottom:1px solid var(--linie-dunkel); }
.hg-nav a[aria-current="page"]{ color:#fff; box-shadow:inset 0 -2px 0 var(--lime); padding-bottom:4px; }

/* ---------- Seitenkopf der Unterseiten (kleines Hero) ---------- */
.hg-pagehero .hg-pagehead{ padding:clamp(40px,6vw,72px) 0 clamp(40px,6vw,64px); max-width:780px; }
.hg-pagehero .hg-h1{ font-size:clamp(1.9rem,4vw,2.9rem); }
.hg-pagehero .hg-lead{ margin-bottom:0; }

/* ---------- generische Sektionen ---------- */
.hg-sec{ background:var(--offwhite); padding:clamp(48px,7vw,88px) 0; }
.hg-sec-alt{ background:var(--nebel); padding:clamp(48px,7vw,88px) 0; }
.hg-grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.hg-fcard ul{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.hg-fcard li{ display:flex; gap:9px; align-items:flex-start; font-size:.92rem; color:var(--anthrazit); line-height:1.45; }
.hg-fcard li::before{ content:"✓"; color:var(--gruen); font-weight:700; flex-shrink:0; }
.hg-fcard .hg-fmeta{ margin-top:12px; font-size:.82rem; color:var(--steingrau); }
.hg-fcard a{ color:var(--tannengruen); font-weight:600; }
.hg-more{ margin-top:28px; text-align:center; }
.hg-textlink{ color:var(--tannengruen); font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.hg-textlink:hover{ color:var(--gruen-text); }
.hg-quelle{ margin:18px 0 0; font-size:.82rem; color:var(--steingrau); text-align:center; }

/* Kompaktliste "alle Funktionen auf einen Blick" */
.hg-overview{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:12px 20px; }
.hg-overview li{ background:#fff; border:1px solid var(--linie); border-radius:8px; padding:14px 16px; font-size:.9rem; color:var(--steingrau); line-height:1.45; }
.hg-overview b{ display:block; color:var(--tannengruen); font-family:var(--ff-display); font-weight:600; font-size:.98rem; margin-bottom:2px; }

/* ---------- Preise: Nebentarife, Minuspunkte, Platzhalter ---------- */
.hg-planc .sub{ color:var(--steingrau); font-size:.85rem; margin:8px 0 0; }
/* P-KD-PL2 (E66): Preis netto zzgl. USt, darunter brutto inkl. USt */
.hg-planc .brutto,.hg-planc .netto{ color:var(--steingrau); font-size:.85rem; margin:6px 0 0; font-variant-numeric:tabular-nums; }
.hg-planc li.no{ color:var(--steingrau); }
.hg-planc li.no::before{ content:"✕"; color:var(--steingrau); }
.hg-plans-neben{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; max-width:820px; margin:24px auto 0; }
.hg-plans-neben .hg-planc{ padding:24px 22px; }
.hg-plans-neben .price{ font-size:1.7rem; }
.hg-platzhalter{ max-width:820px; margin:26px auto 0; padding:12px 16px; border:2px dashed var(--sand); border-radius:8px; background:#fff; color:#6b5126; font-size:.9rem; text-align:center; }
.hg-platzhalter::before{ content:"⚠ "; }
.hg-hinweis{ max-width:820px; margin:18px auto 0; padding:16px 20px; background:#fff; border:1px solid var(--linie); border-left:4px solid var(--gruen); border-radius:8px; color:var(--anthrazit); font-size:.92rem; line-height:1.6; }
.hg-hinweis p{ margin:0; }
.hg-hinweis p + p{ margin-top:8px; }
.hg-hinweis a{ color:var(--tannengruen); font-weight:700; }

/* ---------- Download-Karte ---------- */
.hg-dl{ display:grid; grid-template-columns:auto 1fr auto; gap:20px 28px; align-items:center; background:#fff; border:1px solid var(--linie); border-radius:12px; padding:28px; box-shadow:0 24px 60px -36px rgba(22,38,26,.45); }
.hg-dl-ico{ width:64px; height:64px; border-radius:10px; background:var(--tannengruen); display:flex; align-items:center; justify-content:center; }
.hg-dl-ico img{ width:40px; height:40px; }
.hg-dl h2{ font-family:var(--ff-display); font-weight:700; color:var(--tannengruen); font-size:1.35rem; margin:0 0 6px; }
.hg-dl p{ margin:0; color:var(--steingrau); font-size:.95rem; line-height:1.55; }
.hg-dl .hg-btn{ justify-content:center; }
.hg-steps-3{ grid-template-columns:repeat(3,1fr); }
.hg-steps-3 .hg-step{ padding-right:24px; }
.hg-steps-3 .hg-step a{ color:var(--tannengruen); font-weight:700; }

/* ---------- Kontakt ---------- */
.hg-kontakt-wert{ font-size:1rem; color:var(--anthrazit); line-height:1.6; margin:0; }
.hg-kontakt-wert a{ color:var(--tannengruen); font-weight:700; overflow-wrap:anywhere; }
.hg-demo{ background:#fff; border:1px solid var(--gruen); border-radius:12px; padding:clamp(24px,4vw,40px); display:grid; grid-template-columns:1.3fr 1fr; gap:24px 40px; align-items:center; }
.hg-demo h2{ font-family:var(--ff-display); font-weight:700; color:var(--tannengruen); font-size:clamp(1.4rem,2.6vw,1.9rem); margin:6px 0 12px; }
.hg-demo p{ color:var(--steingrau); line-height:1.65; margin:0 0 10px; }
.hg-demo .hg-cta-row{ margin:0; }

/* ---------- FAQ-Seite: Gruppen ---------- */
.hg-faq-group + .hg-faq-group{ margin-top:clamp(32px,5vw,52px); }
.hg-faq-group h2{ font-family:var(--ff-display); font-weight:700; color:var(--tannengruen); font-size:1.3rem; max-width:820px; margin:0 auto 14px; }
.hg-faq p a{ color:var(--tannengruen); font-weight:700; }

/* ---------- Rechtstexte ---------- */
.hg-legal-sec{ padding-top:clamp(32px,5vw,56px); }
.hg-entwurf{ max-width:820px; margin:0 auto 28px; padding:16px 20px; background:#fff; border:2px solid var(--sand); border-radius:10px; color:var(--anthrazit); }
.hg-entwurf p{ margin:0; font-size:.92rem; line-height:1.55; }
.hg-entwurf p + p{ margin-top:6px; color:var(--steingrau); }
.hg-entwurf strong{ color:#6b5126; font-size:1rem; }
.hg-url{ overflow-wrap:anywhere; }
.hg-prose{ max-width:820px; margin:0 auto; background:#fff; border:1px solid var(--linie); border-radius:var(--radius); padding:clamp(22px,4vw,44px); color:var(--anthrazit); font-size:.98rem; line-height:1.7; overflow-wrap:break-word; hyphens:auto; }
.hg-prose > :first-child{ margin-top:0; }
.hg-prose h2{ font-family:var(--ff-display); font-weight:700; color:var(--tannengruen); font-size:1.35rem; line-height:1.25; margin:2em 0 .6em; }
.hg-prose h3{ font-family:var(--ff-display); font-weight:600; color:var(--tannengruen); font-size:1.12rem; margin:1.6em 0 .5em; }
.hg-prose h4,.hg-prose h5,.hg-prose h6{ font-family:var(--ff-display); font-weight:600; color:var(--anthrazit); font-size:1rem; margin:1.4em 0 .4em; }
.hg-prose p{ margin:0 0 1em; }
.hg-prose ul,.hg-prose ol{ margin:0 0 1em; padding-left:1.3em; }
.hg-prose li{ margin:.25em 0; }
.hg-prose a{ color:var(--tannengruen); font-weight:600; text-decoration:underline; text-underline-offset:2px; overflow-wrap:anywhere; }
.hg-prose blockquote{ margin:0 0 1em; padding:12px 18px; border-left:4px solid var(--gruen); background:var(--offwhite); }
.hg-prose code{ font-family:Consolas,'Courier New',monospace; font-size:.88em; background:var(--nebel); padding:1px 5px; border-radius:3px; overflow-wrap:anywhere; }
.hg-tabelle{ overflow-x:auto; margin:0 0 1.2em; border:1px solid var(--linie); border-radius:8px; }
.hg-prose table{ width:100%; border-collapse:collapse; font-size:.88rem; }
.hg-prose th{ background:var(--nebel); color:var(--anthrazit); text-align:left; padding:9px 12px; }
.hg-prose td{ padding:9px 12px; border-top:1px solid var(--nebel); vertical-align:top; }
.hg-legal-box,.hg-legal-ersatz{ margin:0 0 1em; padding:14px 18px; background:var(--offwhite); border:1px solid var(--linie); border-radius:8px; }
.hg-legal-ersatz{ border:2px dashed var(--sand); background:#fff; }
.hg-legal-ersatz .hg-btn{ text-decoration:none; color:var(--tannengruen); }
.hg-legal-box p:last-child,.hg-legal-ersatz p:last-child{ margin-bottom:0; }

/* ---------- Footer: Spalten ---------- */
.hg-foot-cols{ display:flex; flex-wrap:wrap; gap:24px 56px; }
.hg-foot-col{ display:flex; flex-direction:column; align-items:flex-start; gap:9px; }
.hg-foot-col a{ color:var(--auf-dunkel-mut); text-decoration:none; font-size:.9rem; font-weight:600; }
.hg-foot-col a:hover{ color:#fff; }
.hg-foot-h{ margin:0 0 2px; color:var(--auf-dunkel); font-family:var(--ff-display); font-weight:600; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; }
.hg-foot-adr{ margin:14px 0 0; font-size:.85rem; line-height:1.6; }
.hg-foot-adr a{ color:var(--auf-dunkel); }

/* ---------- Responsive der Erweiterungen ---------- */
@media (max-width:920px){
  .hg-grid-2{ grid-template-columns:1fr; }
  .hg-overview{ grid-template-columns:repeat(2,1fr); }
  .hg-dl{ grid-template-columns:auto 1fr; }
  .hg-dl .hg-btn{ grid-column:1 / -1; }
  .hg-demo{ grid-template-columns:1fr; }
  .hg-steps-3{ grid-template-columns:1fr; gap:24px; }
}
@media (max-width:680px){
  /* Navigation bleibt mobil sichtbar (zweite Zeile, umbrechend) statt ausgeblendet */
  .hg-head{ flex-wrap:wrap; gap:14px 16px; padding:16px 0; }
  .hg-nav{ display:flex; order:3; width:100%; flex-wrap:wrap; gap:10px 20px; padding-top:12px; border-top:1px solid var(--linie-dunkel); }
  .hg-overview{ grid-template-columns:1fr; }
  .hg-plans-neben{ grid-template-columns:1fr; }
  .hg-pflicht .hg-wrap{ justify-content:flex-start; }
  .hg-dl{ grid-template-columns:1fr; padding:22px; }
  .hg-btn{ white-space:normal; }
}

/* =====================================================================
   P-WEB FIX (21.10.2026) - Programmbilder, Demo-Wege, Feinschliff
   ===================================================================== */

/* ---------- Programmbilder (A1) im Rahmen von Annikas Karten ---------- */
.hg-shot{ margin:0; background:#fff; border:1px solid var(--linie); border-radius:var(--radius); overflow:hidden; box-shadow:0 24px 60px -36px rgba(22,38,26,.45); }
.hg-shot img{ width:100%; height:auto; }
.hg-shot figcaption{ padding:12px 16px; font-size:.85rem; line-height:1.5; color:var(--steingrau); border-top:1px solid var(--nebel); }
.hg-shot-dunkel{ background:var(--tannen-tief); border-color:var(--linie-dunkel); box-shadow:0 40px 80px -40px rgba(0,0,0,.75); }

/* Hero: Fensterrahmen mit stiller Kopfleiste (keine Reiter-Optik), 3D gross, 2D als Einschub */
.hg-shotfig{ margin:0; }
.hg-shotbar{ display:flex; align-items:center; gap:12px; padding:10px 14px; background:#122016; border-bottom:1px solid var(--linie-dunkel); font-size:.75rem; letter-spacing:.04em; color:var(--auf-dunkel-mut); }
.hg-dots{ display:inline-flex; gap:5px; }
.hg-dots i{ width:8px; height:8px; border-radius:50%; background:var(--linie-dunkel); display:block; }
.hg-shotbody{ position:relative; }
.hg-shot-main img{ width:100%; height:auto; }
.hg-shot-inset{ position:absolute; left:14px; bottom:14px; width:42%; border:2px solid var(--tannen-tief); border-radius:8px; overflow:hidden; box-shadow:0 16px 30px -12px rgba(0,0,0,.7); }
.hg-shot-inset img{ width:100%; height:auto; }
.hg-shotlabel{ position:absolute; top:8px; right:8px; background:var(--tannengruen); color:var(--auf-dunkel); font-size:.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:3px 8px; border-radius:4px; }
.hg-shot-main{ position:relative; }
.hg-shot-inset .hg-shotlabel{ top:6px; right:6px; }
.hg-shotfig .hg-cap{ margin:14px 0 0; }
.hg-cta-note{ margin:-20px 0 30px; font-size:.85rem; color:var(--auf-dunkel-mut); }

/* Unterseiten-Kopf mit Bild rechts (A1/A8) */
.hg-pagehero-bild .hg-pagegrid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,56px); align-items:center; padding:clamp(32px,5vw,56px) 0; }
.hg-pagehero-bild .hg-pagehead{ padding:0; }
.hg-detail-karten{ margin-top:clamp(48px,7vw,80px); }

/* Funktionen: kompakte Liste statt Kartenwand (A8) */
.hg-overview-kompakt{ grid-template-columns:repeat(2,1fr); max-width:900px; margin:0 auto; gap:0 40px; }
.hg-overview-kompakt li{ background:none; border:0; border-bottom:1px solid var(--linie); border-radius:0; padding:12px 0; }

/* ---------- Demo-Wege neben dem Knopf (A4) ---------- */
.hg-demo{ align-items:start; }
.hg-demo-aktion .hg-fmeta{ margin:14px 0 10px; font-size:.88rem; color:var(--steingrau); line-height:1.55; }
.hg-demo-wege{ display:grid; grid-template-columns:auto 1fr; gap:6px 14px; margin:0; font-size:.95rem; }
.hg-demo-wege dt{ color:var(--steingrau); font-weight:600; }
.hg-demo-wege dd{ margin:0; color:var(--anthrazit); overflow-wrap:anywhere; }
.hg-demo-wege a{ color:var(--tannengruen); font-weight:700; }
.hg-kopierbar{ font-weight:700; color:var(--tannengruen); user-select:all; }

/* ---------- Feinschliff (A13) ---------- */
.hg-nobr{ white-space:nowrap; }
.hg-faq .hg-sechead .hg-sec-sub{ margin-top:16px; }
.hg-ust{ max-width:820px; margin:26px auto 0; text-align:center; color:var(--steingrau); font-size:.9rem; }

/* ---------- Materialtabelle schmal (A9): Pos. ausblenden, Summe immer sichtbar ---------- */
@media (max-width:680px){
  .hg-mtable .pos{ display:none; }
  .hg-mtable th,.hg-mtable td{ padding:10px 10px; }
  .hg-mtable td{ font-size:.85rem; }
}
@media (max-width:920px){
  .hg-pagehero-bild .hg-pagegrid{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  .hg-shot-inset{ width:46%; left:8px; bottom:8px; }
  .hg-shotlabel{ font-size:.75rem; }
  .hg-overview-kompakt{ grid-template-columns:1fr; }
  .hg-pflicht .hg-wrap{ gap:0 18px; }
}
/* P-KD-PL2-NB N7 (Pruefer 2): keine Schrift unter 12 px (.75rem) - Etiketten, Abschnittsmarken,
   "Beliebtester Plan" waren 9,6-11,5 px. Test W-SCHRIFT (tests/test_browser.py). */

/* NB-KDR (Pruefer 2 N1): Abstand Pflichtangaben-Kasten -> Tarifkarten (Abzeichen nicht auf dem Rand) */
.hg-pflichtangaben{ margin-bottom:40px; }
/* NB-KDR: offene Tatsachen als eigener Kasten (nicht ueber dem Fliesstext) */
.hg-offen{ display:block; margin:10px 0 0; text-align:left; }