/* Components — Header, Navigation, Footer und die Sektions-Bausteine der Landingpage. */

/* ============================ HEADER / NAV ============================ */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(250, 248, 249, .82);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--c-line);
}
.site-header__inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);
  height: 74px; display: flex; align-items: center; gap: 20px;
}
.site-header__logo { display: flex; align-items: center; margin-right: auto; flex: 0 0 auto; }
.site-header__logo img { height: 42px; width: auto; }
.mainnav { display: flex; align-items: center; gap: 2px; }
.mainnav a {
  font: 600 15px var(--f-body); color: var(--c-text);
  padding: 9px 13px; border-radius: var(--r-sm); transition: background .15s, color .15s;
}
.mainnav a:hover, .mainnav a.active { background: var(--c-primary-soft); color: var(--c-primary); }
.header-sep { width: 1px; height: 26px; background: var(--c-line-strong); }
.header-login {
  display: inline-flex; align-items: center; gap: 7px;
  font: 600 15px var(--f-body); color: var(--c-secondary);
  padding: 9px 13px; border-radius: var(--r-sm); transition: background .15s;
}
.header-login:hover { background: rgba(30,58,58,.07); }

/* Burger (nur mobil) */
.burger {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 1px solid var(--c-line-strong);
  background: #fff; border-radius: var(--r-md); cursor: pointer; color: var(--c-text);
}
.header-cta-mobile { display: none; }

/* Off-Canvas */
.offcanvas {
  position: fixed; inset: 74px 0 0 0; z-index: 55;
  background: var(--c-bg); padding: 18px var(--gutter) 40px; overflow-y: auto;
  transform: translateX(100%); transition: transform .28s ease; visibility: hidden;
}
.offcanvas.open { transform: translateX(0); visibility: visible; }
.offcanvas nav { display: flex; flex-direction: column; }
.offcanvas nav a {
  font: 600 19px var(--f-head); color: var(--c-text);
  padding: 15px 8px; border-bottom: 1px solid rgba(24,37,37,.07);
}
.offcanvas nav a.login { color: var(--c-secondary); display: flex; align-items: center; gap: 9px; border: 0; }
.offcanvas .btn { margin-top: 22px; }

@media (max-width: 940px) {
  .mainnav, .header-sep, .header-login, .header-cta-desktop { display: none; }
  .burger { display: inline-flex; }
  .header-cta-mobile { display: inline-flex; }
}
@media (min-width: 941px) { .offcanvas { display: none; } }

/* ============================ HERO ============================ */
.hero { position: relative; overflow: hidden; }
.hero__blob {
  position: absolute; border-radius: 50%; pointer-events: none;
}
.hero__blob--1 { top: -180px; right: -120px; width: 620px; height: 620px;
  background: radial-gradient(circle at center, rgba(142,36,115,.14), rgba(142,36,115,0) 68%); }
.hero__blob--2 { bottom: -160px; left: -140px; width: 520px; height: 520px;
  background: radial-gradient(circle at center, rgba(30,58,58,.10), rgba(30,58,58,0) 66%); }
.hero__inner { position: relative; padding: clamp(40px,7vw,84px) 0 clamp(48px,7vw,88px); }
.hero__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: clamp(36px, 5vw, 64px); align-items: center;
}
.hero h1 {
  font: 600 clamp(34px, 5.4vw, 60px)/1.04 var(--f-head);
  color: var(--c-text); margin: 22px 0 0;
}
.hero h1 em { color: var(--c-primary); font-style: normal; }
.hero__sub { margin: 22px 0 0; max-width: 560px; }
.hero__claim { font: 700 clamp(15px,1.5vw,17px)/1.5 var(--f-head); color: var(--c-secondary); margin: 16px 0 0; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero__ticks { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-top: 34px; }
.tick { display: inline-flex; align-items: center; gap: 8px; font: 600 14px var(--f-body); color: var(--c-text-60); }
.tick .ms { font-size: 19px; color: var(--c-success); }

/* Hero-Mockup (Browser + PWA-Karte) */
.mock { position: relative; min-height: 440px; }
.mock__browser { background: #fff; border-radius: 20px; border: 1px solid rgba(24,37,37,.09); box-shadow: var(--sh-hero); overflow: hidden; }
.mock__bar { display: flex; align-items: center; gap: 7px; padding: 13px 16px; border-bottom: 1px solid rgba(24,37,37,.07); }
.mock__dot { width: 11px; height: 11px; border-radius: 50%; background: #e6dbe2; }
.mock__url { margin-left: 10px; flex: 1; height: 22px; border-radius: 7px; background: #f3eef1; display: flex; align-items: center; padding: 0 10px; font: 500 11px var(--f-body); color: var(--c-text-45); }
.mock__body { padding: 18px; }
.ph { border: 1px dashed rgba(142,36,115,.28); border-radius: 13px;
  background: repeating-linear-gradient(135deg, rgba(142,36,115,.09) 0 14px, rgba(142,36,115,.03) 14px 28px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: rgba(142,36,115,.6); }
.ph--hero { height: 168px; }
.ph--petrol { border-color: rgba(30,58,58,.22); background: repeating-linear-gradient(135deg, rgba(30,58,58,.07) 0 10px, rgba(30,58,58,.02) 10px 20px); color: rgba(30,58,58,.55); }
.mock__dishes { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 14px; }
.mock__dishes .ph { height: 74px; }
.ph__label { font: 600 11px 'JetBrains Mono', monospace; letter-spacing: .02em; }

.mock__pwa { position: absolute; right: -6px; bottom: -26px; width: 152px; background: var(--c-secondary); border-radius: 24px; padding: 8px; box-shadow: 0 22px 50px rgba(24,37,37,.30); border: 1px solid rgba(255,255,255,.08); }
.mock__pwa-screen { background: #fff; border-radius: 18px; overflow: hidden; }
.mock__pwa-top { background: var(--c-primary); padding: 11px 12px 14px; }
.mock__pwa-top .row { display: flex; align-items: center; justify-content: space-between; }
.mock__pwa-top .lbl { font: 700 11px var(--f-head); color: #fff; }
.livedot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-mint); animation: liveDot 1.6s ease-in-out infinite; }
.mock__pwa-top .big { font: 700 18px var(--f-head); color: #fff; margin-top: 6px; }
.mock__pwa-list { padding: 9px; display: flex; flex-direction: column; gap: 7px; }
.mock__pwa-item { display: flex; align-items: center; gap: 7px; padding: 7px; border-radius: 9px; font: 600 9.5px var(--f-body); color: var(--c-text); }
.mock__pwa-item.a { background: #f6eef3; } .mock__pwa-item.a .ms { color: var(--c-primary); font-size: 15px; }
.mock__pwa-item.b { background: #eef3f2; } .mock__pwa-item.b .ms { color: var(--c-secondary); font-size: 15px; }
.mock__float { position: absolute; left: -14px; top: -18px; background: #fff; border-radius: 14px; padding: 11px 14px; box-shadow: 0 16px 36px rgba(24,37,37,.16); border: 1px solid rgba(24,37,37,.07); display: flex; align-items: center; gap: 10px; }
.mock__float .ichip { width: 34px; height: 34px; border-radius: 10px; background: rgba(30,138,91,.12); color: var(--c-success); }
.mock__float .t { font: 700 13px var(--f-head); color: var(--c-text); }
.mock__float .s { font: 600 11px var(--f-body); color: var(--c-text-45); }

/* „Gemacht für" Leiste */
.madefor { margin-top: clamp(48px,6vw,76px); padding-top: 30px; border-top: 1px solid var(--c-line); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 34px; }
.madefor .k { font: 700 12px var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-45); }
.madefor .v { font: 600 15px var(--f-body); color: var(--c-text-60); }
.madefor .d { width: 4px; height: 4px; border-radius: 50%; background: rgba(24,37,37,.2); }

/* ============================ KARTEN-GRID (Problem/Vorteile/Funktionen) ============================ */
.head-block { max-width: 720px; }
.head-block .h2 { margin: 14px 0 0; }
.head-block .lead { margin: 18px 0 0; }
.head-block .lead strong { color: var(--c-text); font-weight: 700; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 42px; }
.card { background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--r-xl); padding: 26px; }
.section--surface .card { background: var(--c-bg); }
.card h3 { font: 600 18px var(--f-head); color: var(--c-text); margin: 18px 0 8px; }
.card p { font: 400 14.5px/1.6 var(--f-body); color: var(--c-text-60); }
.card .ichip .ms { font-size: 25px; }

/* ============================ LÖSUNG (dunkel, 2-spaltig, Häkchenliste) ============================ */
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(36px,5vw,64px); align-items: center; position: relative; }
.section--dark .split__blob { position: absolute; top: -140px; right: -100px; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, rgba(142,36,115,.34), transparent 68%); pointer-events: none; }
.checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 22px; }
.checklist span { display: flex; align-items: flex-start; gap: 9px; font: 600 14.5px var(--f-body); color: rgba(255,255,255,.9); }
.checklist .ms { font-size: 19px; color: var(--c-mint); margin-top: 1px; }
.section--dark .lead { color: var(--c-on-dark-72); }

/* Dunkle Mockup-Kachel rechts */
.dark-card { background: rgba(255,255,255,.04); border: 1px solid var(--c-on-dark-line); border-radius: 20px; padding: 22px; }
.dark-card .ph { background: repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 12px, rgba(255,255,255,.02) 12px 24px); border-color: rgba(255,255,255,.18); color: rgba(255,255,255,.6); }

/* ============================ USP / PWA-Sektion ============================ */
.usp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 42px; }

/* ============================ VERGLEICH (viele Tools vs. easy) ============================ */
.compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; margin-top: 42px; }
.compare__col { border-radius: var(--r-2xl); padding: 30px; border: 1px solid var(--c-line); }
.compare__col--old { background: var(--c-bg); }
.compare__col--new { background: linear-gradient(180deg, rgba(142,36,115,.06), rgba(142,36,115,.02)); border-color: var(--c-primary-soft-2); }
.compare__col h3 { font: 600 20px var(--f-head); margin: 0 0 4px; }
.compare__tag { font: 700 12px var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-45); }
.compare__col--new .compare__tag { color: var(--c-primary); }
.compare__list { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.compare__list li { display: flex; align-items: center; gap: 10px; font: 500 15px var(--f-body); color: var(--c-text); }
.compare__list li .ms { font-size: 20px; }
.compare__col--old li .ms { color: rgba(24,37,37,.35); }
.compare__col--new li .ms { color: var(--c-success); }
.compare__note { margin-top: 24px; font: 700 clamp(17px,2vw,22px)/1.3 var(--f-head); color: var(--c-primary); }

/* ============================ PAKETE-TEASER (3 Karten) ============================ */
.packages { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; margin-top: 42px; align-items: stretch; }
.pkg { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-2xl); padding: 30px; display: flex; flex-direction: column; position: relative; }
.pkg--featured { border-color: var(--c-primary); box-shadow: 0 20px 50px rgba(142,36,115,.14); }
.pkg__badge { position: absolute; top: -13px; left: 30px; background: var(--c-primary); color: #fff; font: 700 12px var(--f-body); letter-spacing: .04em; padding: 6px 13px; border-radius: var(--r-pill); }
.pkg__name { font: 600 21px var(--f-head); color: var(--c-text); }
.pkg__for { font: 600 13.5px var(--f-body); color: var(--c-text-45); margin: 6px 0 0; }
.pkg__price { font: 600 34px var(--f-head); color: var(--c-text); margin: 18px 0 2px; }
.pkg__price small { font: 600 14px var(--f-body); color: var(--c-text-45); }
.pkg__list { list-style: none; margin: 20px 0 24px; padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.pkg__list li { display: flex; align-items: flex-start; gap: 9px; font: 500 14.5px/1.5 var(--f-body); color: var(--c-text-60); }
.pkg__list li .ms { font-size: 18px; color: var(--c-success); margin-top: 2px; }

.pkg__hint { font: 500 12.5px/1.5 var(--f-body); color: var(--c-text-45); margin: 14px 0 0; }

/* ============================ VERGLEICHSTABELLE ============================ */
.cmp-wrap { margin-top: 40px; overflow-x: auto; border: 1px solid var(--c-line); border-radius: var(--r-xl); background: #fff; }
.cmp { width: 100%; border-collapse: collapse; min-width: 640px; }
.cmp thead th { font: 700 14px var(--f-head); color: var(--c-text); text-align: center; padding: 18px 14px; border-bottom: 2px solid var(--c-line-strong); }
.cmp thead th:first-child { text-align: left; }
.cmp thead th.is-featured { color: var(--c-primary); background: var(--c-primary-soft); border-top-right-radius: 4px; }
.cmp tbody th { font: 600 14px var(--f-body); color: var(--c-text); text-align: left; padding: 13px 14px; border-bottom: 1px solid var(--c-line); }
.cmp tbody td { text-align: center; padding: 13px 14px; border-bottom: 1px solid var(--c-line); }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp td.is-featured { background: var(--c-primary-soft); }
.cmp-yes { color: var(--c-success); font-size: 21px; }
.cmp-no { color: rgba(24,37,37,.28); font-size: 20px; }
.cmp-txt { font: 600 12.5px var(--f-body); color: var(--c-text-60); }

/* ============================ FAQ ============================ */
.faq { max-width: 820px; margin: 42px auto 0; display: flex; flex-direction: column; gap: 12px; }
.faq details { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 4px 20px; }
.faq summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; font: 600 17px var(--f-head); color: var(--c-text); padding: 16px 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ms { color: var(--c-primary); transition: transform .2s; }
.faq details[open] summary .ms { transform: rotate(180deg); }
.faq p { font: 400 15px/1.65 var(--f-body); color: var(--c-text-60); padding: 0 0 18px; }

/* ============================ CTA-BAND ============================ */
.cta-band { background: linear-gradient(120deg, var(--c-primary), #6d1a58); color: #fff; border-radius: clamp(20px, 3vw, 32px); padding: clamp(40px, 6vw, 72px); text-align: center; position: relative; overflow: hidden; }
.cta-band h2 { font: 600 clamp(26px,3.4vw,40px)/1.12 var(--f-head); color: #fff; max-width: 720px; margin: 0 auto; }
.cta-band p { font: 400 clamp(15px,1.4vw,18px)/1.6 var(--f-body); color: rgba(255,255,255,.85); max-width: 560px; margin: 16px auto 0; }
.cta-band__btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 28px; }

/* ============================ FOOTER ============================ */
.site-footer { background: var(--c-dark); color: rgba(255,255,255,.7); padding: clamp(48px,6vw,72px) 0 28px; }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; }
.site-footer h4 { font: 700 13px var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.5); margin: 0 0 14px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.site-footer a { font: 500 14.5px var(--f-body); color: rgba(255,255,255,.72); }
.site-footer a:hover { color: #fff; }
.site-footer__brand img { height: 38px; margin-bottom: 14px; filter: brightness(0) invert(1); }
.site-footer__brand p { font: 400 14px/1.6 var(--f-body); color: rgba(255,255,255,.55); max-width: 260px; }
.site-footer__bottom { margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font: 500 13px var(--f-body); color: rgba(255,255,255,.5); }
@media (max-width: 860px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .site-footer__grid { grid-template-columns: 1fr; } }

/* ============================ HINWEISE / NOTICES ============================ */
.notice { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: var(--r-md); font: 600 14.5px/1.5 var(--f-body); }
.notice .ms { flex: 0 0 auto; margin-top: 1px; }
.notice--error { background: #fdecef; color: #b3143a; border: 1px solid #f6c6d1; }
.notice--warn  { background: #fff5e6; color: #9a6400; border: 1px solid #ffe0ad; }
.notice--ok    { background: #eaf7f0; color: #14804a; border: 1px solid #bfe6d1; }

/* ============================ CHECKOUT / FORMULARE ============================ */
.checkout__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 26px; align-items: start; }
.checkout__legend { font: 600 16px var(--f-head); color: var(--c-text); margin: 0 0 14px; }
.checkout__fields { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-xl); padding: 26px; }
.field { margin-bottom: 15px; }
.field label { display: block; font: 600 13.5px var(--f-body); color: var(--c-text); margin-bottom: 6px; }
.field input, .field textarea, .field select {
  width: 100%; font: 400 15px var(--f-body); color: var(--c-text);
  padding: 11px 13px; border: 1px solid var(--c-line-strong); border-radius: var(--r-md);
  background: var(--c-bg); transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-soft); background: #fff; }
.field small { display: block; font: 500 12.5px var(--f-body); color: var(--c-text-45); margin-top: 5px; }

.pay-methods { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.pay-opt { display: flex; align-items: center; gap: 10px; font: 600 15px var(--f-body); color: var(--c-text); padding: 13px 15px; border: 1px solid var(--c-line-strong); border-radius: var(--r-md); cursor: pointer; transition: border-color .15s, background .15s; }
.pay-opt:has(input:checked) { border-color: var(--c-primary); background: var(--c-primary-soft); }
.pay-opt .ms { color: var(--c-primary); }
.pay-opt input { accent-color: var(--c-primary); }

.agb { display: flex; align-items: flex-start; gap: 10px; font: 500 13.5px/1.5 var(--f-body); color: var(--c-text-60); margin-top: 8px; }
.agb input { margin-top: 3px; accent-color: var(--c-primary); }
.agb a { color: var(--c-primary); text-decoration: underline; }

.checkout__summary { background: linear-gradient(180deg, rgba(142,36,115,.05), rgba(142,36,115,.02)); border: 1px solid var(--c-primary-soft-2); border-radius: var(--r-xl); padding: 26px; position: sticky; top: 90px; }
.sum-row { display: flex; justify-content: space-between; gap: 12px; font: 600 15px var(--f-body); color: var(--c-text); padding: 7px 0; }
.sum-row.muted { color: var(--c-text-60); font-weight: 500; font-size: 14px; }
.sum-row.total { font: 700 19px var(--f-head); color: var(--c-text); border-top: 1px solid var(--c-line-strong); margin-top: 6px; padding-top: 14px; }
.sum-list { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--c-line); display: flex; flex-direction: column; gap: 9px; }
.sum-list li { display: flex; align-items: center; gap: 8px; font: 500 13.5px var(--f-body); color: var(--c-text-60); }
.sum-list .ms { font-size: 17px; color: var(--c-success); }

@media (max-width: 720px) { .checkout__grid { grid-template-columns: 1fr; } .checkout__summary { position: static; } }

/* ============================ LOGIN-FORMULAR (Contao-Modul) ============================ */
.mod_login { max-width: 460px; margin: 22px auto 0; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-xl); padding: 30px; box-shadow: var(--sh-card); }
.mod_login .widget { margin-bottom: 16px; }
.mod_login label { display: block; font: 600 13.5px var(--f-body); color: var(--c-text); margin-bottom: 6px; }
.mod_login input[type="text"], .mod_login input[type="password"], .mod_login input[type="email"] {
  width: 100%; font: 400 15px var(--f-body); color: var(--c-text); padding: 12px 14px;
  border: 1px solid var(--c-line-strong); border-radius: var(--r-md); background: var(--c-bg); box-sizing: border-box;
}
.mod_login input:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-soft); background: #fff; }
.mod_login .widget-submit { margin-bottom: 0; margin-top: 22px; }
.mod_login .submit {
  width: 100%; font: 700 16px var(--f-body); color: #fff; background: var(--c-primary);
  padding: 14px 22px; border: 0; border-radius: var(--r-lg); cursor: pointer; box-shadow: var(--btn-shadow);
  transition: background .15s, transform .15s;
}
.mod_login .submit:hover { background: var(--c-primary-600); transform: translateY(-1px); }
.mod_login .widget-checkbox { display: flex; align-items: center; gap: 8px; font: 500 14px var(--f-body); color: var(--c-text-60); }
.mod_login .widget-checkbox label { margin: 0; }
.mod_login p.error, .mod_login .error { color: #b3143a; font: 600 14px var(--f-body); margin: 0 0 14px; }
.mod_login a { color: var(--c-primary); font: 600 13.5px var(--f-body); }
.mod_login .formbody > .widget-explanation, .mod_login .logout { text-align: center; }

/* ============================ KUNDEN-PORTAL ============================ */
.portal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.portal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.portal-card { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-xl); padding: 24px; }
.portal-card--wide { grid-column: 1 / -1; }
.portal-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.portal-card__head h3 { font: 600 17px var(--f-head); color: var(--c-text); margin: 0; }
.portal-table { display: flex; flex-direction: column; }
.portal-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--c-line); }
.portal-row:first-child { border-top: 0; }
.portal-key { font: 700 15px 'JetBrains Mono', monospace; letter-spacing: .3px; color: var(--c-text); }
.portal-sub { display: flex; align-items: center; gap: 5px; font: 500 12.5px var(--f-body); color: var(--c-text-45); margin-top: 3px; }
.portal-sub .ms { font-size: 15px; }
.portal-empty { font: 500 14px var(--f-body); color: var(--c-text-60); margin: 6px 0 0; }
.portal-empty a { color: var(--c-primary); }
.portal-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.portal-links a { display: flex; align-items: center; gap: 10px; font: 600 14.5px var(--f-body); color: var(--c-text); padding: 10px 0; }
.portal-links a:hover { color: var(--c-primary); }
.portal-links .ms { color: var(--c-primary); }

.badge { display: inline-flex; align-items: center; font: 700 12px var(--f-body); padding: 5px 11px; border-radius: var(--r-pill); white-space: nowrap; }
.badge--ok   { background: #eaf7f0; color: #14804a; }
.badge--warn { background: #fff5e6; color: #9a6400; }
.badge--err  { background: #fdecef; color: #b3143a; }
.badge--info { background: var(--c-primary-soft); color: var(--c-primary); }

@media (max-width: 720px) { .portal-grid { grid-template-columns: 1fr; } }

/* ============================ SUPPORT ============================ */
.sup-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin-top: 28px; }
.sup-cat { display: flex; align-items: center; gap: 10px; text-align: left; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md); padding: 13px 15px; font: 600 14px var(--f-body); color: var(--c-text); cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.sup-cat:hover { border-color: var(--c-primary); transform: translateY(-1px); }
.sup-cat.is-active { border-color: var(--c-primary); background: var(--c-primary-soft); }
.sup-cat .ms { color: var(--c-primary); flex: 0 0 auto; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.field-row .field { margin-bottom: 15px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; gap: 0; } }
input[type="file"] { font: 500 14px var(--f-body); }

/* ============================ DOKUMENTATION ============================ */
.doc-search-wrap { max-width: 720px; margin: 26px auto 0; }
.doc-search { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--c-line-strong); border-radius: var(--r-pill); padding: 7px 7px 7px 18px; box-shadow: var(--sh-card); }
.doc-search .ms { color: var(--c-text-45); }
.doc-search input { flex: 1; border: 0; outline: none; font: 500 15px var(--f-body); background: transparent; color: var(--c-text); }
.doc-search .btn { border-radius: var(--r-pill); flex: 0 0 auto; }

.doc-popular { margin-top: 40px; }
.doc-h3 { display: flex; align-items: center; gap: 8px; font: 600 15px var(--f-head); color: var(--c-text); margin: 0 0 14px; }
.doc-h3 .ms { color: var(--c-primary); }
.doc-popular__grid { display: flex; flex-wrap: wrap; gap: 10px; }
.doc-chip { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-pill); padding: 9px 15px; font: 600 14px var(--f-body); color: var(--c-text); transition: border-color .15s, transform .15s; }
.doc-chip:hover { border-color: var(--c-primary); transform: translateY(-1px); }
.doc-chip .ms { color: var(--c-primary); }

.doc-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 32px; }
.doc-cat { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-xl); padding: 26px; }
.doc-cat__head { display: flex; align-items: center; gap: 14px; }
.doc-cat__head h3 { font: 600 18px var(--f-head); color: var(--c-text); margin: 0; }
.doc-cat__count { font: 600 13px var(--f-body); color: var(--c-text-45); }
.doc-cat__desc { font: 400 14.5px/1.6 var(--f-body); color: var(--c-text-60); margin: 14px 0 0; }
.doc-cat__list { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--c-line); display: flex; flex-direction: column; gap: 2px; }
.doc-cat__list a { display: flex; align-items: center; gap: 6px; font: 500 14.5px var(--f-body); color: var(--c-text); padding: 7px 0; border-radius: 6px; transition: color .15s; }
.doc-cat__list a:hover { color: var(--c-primary); }
.doc-cat__list .ms { color: var(--c-text-45); }

.doc-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 32px; background: var(--c-primary-soft); border: 1px solid var(--c-primary-soft-2); border-radius: var(--r-xl); padding: 22px 26px; }
.doc-cta > .ms { font-size: 28px; color: var(--c-primary); }
.doc-cta > div { flex: 1; min-width: 200px; font: 500 15px var(--f-body); color: var(--c-text); }
.doc-cta .btn { flex: 0 0 auto; }

/* Suchergebnisse */
.doc-results-count { text-align: center; font: 500 14px var(--f-body); color: var(--c-text-60); margin: 22px 0 0; }
.doc-results { max-width: 760px; margin: 18px auto 0; display: flex; flex-direction: column; gap: 10px; }
.doc-result { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 16px 18px; transition: border-color .15s, transform .15s; }
.doc-result:hover { border-color: var(--c-primary); transform: translateX(2px); }
.doc-result > .ms:first-child { color: var(--c-primary); flex: 0 0 auto; }
.doc-result span span { display: block; }
.doc-result__t { font: 600 15.5px var(--f-body); color: var(--c-text); }
.doc-result__d { font: 400 13.5px var(--f-body); color: var(--c-text-60); margin-top: 2px; }
.doc-result__arr { margin-left: auto; color: var(--c-text-45); }

/* Artikel-Ansicht */
.doc-article { max-width: 820px; margin: 0 auto; }
.doc-crumb { display: flex; align-items: center; gap: 6px; font: 600 13.5px var(--f-body); color: var(--c-text-45); margin-bottom: 16px; }
.doc-crumb a { color: var(--c-primary); }
.doc-crumb .ms { font-size: 16px; }
.doc-body { margin-top: 24px; font: 400 16px/1.75 var(--f-body); color: var(--c-text); }
.doc-body h2, .doc-body h3 { font-family: var(--f-head); margin: 32px 0 12px; color: var(--c-text); }
.doc-body h2 { font-size: 24px; } .doc-body h3 { font-size: 19px; }
.doc-body p { margin: 0 0 16px; }
.doc-body ul, .doc-body ol { margin: 0 0 16px; padding-left: 22px; }
.doc-body li { margin-bottom: 8px; }
.doc-body a { color: var(--c-primary); text-decoration: underline; }
.doc-body img { border-radius: var(--r-md); margin: 16px 0; }
.doc-body code { background: #f3eef1; padding: 2px 6px; border-radius: 5px; font: 500 14px monospace; }
.doc-body pre { background: #182525; color: #eee; padding: 16px; border-radius: var(--r-md); overflow-x: auto; }
.doc-article__foot { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--c-line); }
.doc-related { margin-top: 32px; background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 22px 24px; }
.doc-related h3 { font: 600 15px var(--f-head); margin: 0 0 12px; }
.doc-related ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.doc-related a { display: flex; align-items: center; gap: 7px; font: 500 14.5px var(--f-body); color: var(--c-text); padding: 5px 0; }
.doc-related a:hover { color: var(--c-primary); }
.doc-related .ms { color: var(--c-primary); }

/* ============================ OVERFLOW-HÄRTUNG ============================ */
/* Grid-/Flex-Kinder dürfen unter ihre Content-Breite schrumpfen (verhindert H-Overflow). */
.hero__grid, .split, .cards, .compare, .packages, .usp-grid, .checklist, .madefor { min-width: 0; }
.hero__grid > *, .split > * { min-width: 0; }
h1, h2, h3 { overflow-wrap: break-word; }
/* Keine Sektion darf horizontal aus dem Viewport ragen (dekorative Blobs/Mockups bleiben geclippt). */
.section, .hero { overflow-x: clip; }

/* ============================ MOBILE-FEINSCHLIFF ============================ */
@media (max-width: 640px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: clamp(28px, 8vw, 40px); line-height: 1.08; text-wrap: normal; }
  .mock { min-height: 400px; margin-top: 8px; }
  .checklist { grid-template-columns: 1fr; }
  .cta-band__btns .btn { width: 100%; }
}
.site-header__inner { width: 100%; }

/* ============================ STICKY CTA (mobil) ============================ */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: none; gap: 10px; padding: 12px var(--gutter); background: rgba(250,248,249,.92); backdrop-filter: blur(10px); border-top: 1px solid var(--c-line); }
@media (max-width: 720px) { .sticky-cta { display: flex; } body { padding-bottom: 76px; } }