/* ============================================================
   IT-HILFE-UNTERLAND — Dark Tech Theme
   ------------------------------------------------------------
   FÜR EIN NEUES KUNDENPROJEKT NUR DIESEN BLOCK ÄNDERN:
   Zwei Markenfarben genügen, der Rest rechnet sich daraus.
   ============================================================ */
:root {
  --brand-1: #114e7a;   /* dunkles Markenblau  */
  --brand-2: #0db0c1;   /* helles Markentürkis */
  --brand-3: #2ee0f0;   /* Leuchtakzent        */

  --shell-1: #061220;   /* Grundfläche, fast schwarz */
  --shell-2: #0a1d31;   /* Sektionsfläche            */
  --shell-3: #0f2942;   /* Karten                    */

  --font-stack: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* ===================== ENDE ANPASSUNGSBLOCK ================= */

:root {
  --txt:        #e9f2f8;
  --txt-soft:   #9fb8cc;
  --txt-mute:   #7592ab;
  --line:       rgba(255,255,255,.09);
  --line-2:     rgba(255,255,255,.16);
  --ok:         #3ddc97;

  --grad:       linear-gradient(115deg, var(--brand-1) 0%, var(--brand-2) 100%);
  --grad-soft:  linear-gradient(115deg, rgba(17,78,122,.55) 0%, rgba(13,176,193,.35) 100%);
  --glow:       0 0 0 1px rgba(46,224,240,.22), 0 18px 48px -12px rgba(13,176,193,.35);

  --w:   1180px;
  --r:   14px;
  --r-l: 22px;

  --shadow:    0 1px 2px rgba(0,0,0,.35), 0 10px 32px -12px rgba(0,0,0,.6);
  --shadow-lg: 0 2px 6px rgba(0,0,0,.4), 0 32px 70px -20px rgba(0,0,0,.75);

  --pad: clamp(60px, 8vw, 116px);
}

*,*::before,*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-stack);
  font-size: clamp(16px, .35vw + 15px, 17.5px);
  line-height: 1.68;
  color: var(--txt);
  background: var(--shell-1);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Grundrauschen: feines Raster + zwei weiche Lichtquellen */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(60rem 40rem at 78% -8%,  rgba(13,176,193,.16), transparent 62%),
    radial-gradient(52rem 38rem at 4% 12%,   rgba(17,78,122,.32),  transparent 60%),
    radial-gradient(48rem 36rem at 92% 88%,  rgba(17,78,122,.20),  transparent 62%);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(75rem 55rem at 50% 0%, #000 30%, transparent 78%);
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--brand-3); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: #fff; }

h1,h2,h3,h4 { line-height: 1.14; margin: 0 0 .55em; font-weight: 750; letter-spacing: -.025em; color: #fff; }
h1 { font-size: clamp(1.9rem, 4.1vw, 2.95rem); text-wrap: balance; }
h2 { font-size: clamp(1.55rem, 3.4vw, 2.55rem); text-wrap: balance; }
h3 { font-size: clamp(1.12rem, 1.5vw, 1.32rem); letter-spacing: -.015em; }
p  { margin: 0 0 1.15em; }
strong { color: #fff; font-weight: 650; }

.hero h1 .grad-txt { display: block; }
.grad-txt {
  background: linear-gradient(100deg, #fff 8%, var(--brand-3) 52%, var(--brand-2) 96%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.wrap   { max-width: var(--w); margin-inline: auto; padding-inline: clamp(18px, 4vw, 30px); }
.narrow { max-width: 820px; }
section { padding: var(--pad) 0; position: relative; }

.panel   { background: var(--shell-2); }
.panel-2 { background: linear-gradient(180deg, var(--shell-2), var(--shell-1)); }
.hairline { border-top: 1px solid var(--line); }

.lead    { font-size: clamp(1.04rem, 1.5vw, 1.22rem); color: var(--txt-soft); text-wrap: pretty; }
.center  { text-align: center; }
.center h1, .center h2, .center h3, .center h4 { margin-inline: auto; }
.center .lead, .center > p { margin-inline: auto; max-width: 66ch; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--brand-3); margin-bottom: 1.1em;
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--brand-2));
}
.center .eyebrow::after {
  content: ""; width: 26px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--brand-2), transparent);
}

/* ---------------- Buttons ---------------- */
.btn {
  --btn-bg: transparent;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 28px; border-radius: 999px; border: 1px solid transparent;
  font-weight: 650; font-size: 1rem; text-decoration: none; cursor: pointer;
  transition: transform .16s cubic-bezier(.2,.8,.3,1), box-shadow .2s, background .2s, border-color .2s;
  white-space: nowrap;
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--grad); color: #fff;
  box-shadow: 0 10px 30px -10px rgba(13,176,193,.65), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-primary:hover { color:#fff; box-shadow: 0 16px 42px -12px rgba(13,176,193,.85), inset 0 1px 0 rgba(255,255,255,.3); }

.btn-ghost {
  background: rgba(255,255,255,.045); color: #fff; border-color: var(--line-2);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover { background: rgba(255,255,255,.09); border-color: rgba(46,224,240,.5); color: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: 13px; }
.center .btn-row { justify-content: center; }

@media (max-width: 700px) {
  .btn { white-space: normal; text-align: center; line-height: 1.35; padding: 15px 22px; }
}
@media (max-width: 560px) {
  .btn { width: 100%; }
  .btn-row { gap: 10px; }
}

/* ---------------- Header ---------------- */
.site-header {
  position: sticky; top: 0; z-index: 80;
  background: rgba(6,18,32,.72);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background .25s, border-color .25s;
}
.site-header.scrolled { background: rgba(6,18,32,.94); border-bottom-color: var(--line); }
.header-inner { display: flex; align-items: center; gap: 16px; min-height: 78px; }

.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo img {
  width: 44px; height: 44px; border-radius: 11px; flex: none;
  box-shadow: 0 0 0 1px rgba(46,224,240,.28), 0 8px 22px -8px rgba(13,176,193,.7);
  transition: transform .3s cubic-bezier(.2,.8,.3,1);
}
.logo:hover img { transform: translateY(-2px) scale(1.04); }
.site-footer .logo img { width: 60px; height: 60px; border-radius: 14px; }
.logo .mark {
  width: 42px; height: 46px; color: var(--brand-3); flex: none;
  filter: drop-shadow(0 0 14px rgba(46,224,240,.45));
  transition: transform .3s cubic-bezier(.2,.8,.3,1);
}
.logo:hover .mark { transform: translateY(-2px) scale(1.04); }
.logo .wm { display: grid; line-height: 1.15; }
.logo .wm b { font-size: 1.02rem; font-weight: 800; color: #fff; letter-spacing: -.03em; white-space: nowrap; }
.logo .wm b i { font-style: normal; color: var(--brand-3); }
.logo .wm span { font-size: .67rem; color: var(--txt-mute); letter-spacing: .05em; font-weight: 500; white-space: nowrap; }

.nav { margin-left: auto; }
.nav > ul { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav a {
  display: block; padding: 10px 10px; border-radius: 10px; font-size: .89rem; font-weight: 550; white-space: nowrap;
  color: var(--txt-soft); text-decoration: none; transition: color .18s, background .18s;
}
.nav a:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav a[aria-current="page"] { color: #fff; background: rgba(46,224,240,.12); }
.nav .nav-cta {
  margin-left: 6px; background: var(--grad); color: #fff; padding: 11px 17px; border-radius: 999px;
  box-shadow: 0 8px 24px -10px rgba(13,176,193,.7);
}
.nav .nav-cta:hover { color: #fff; background: var(--grad); filter: brightness(1.1); }

.nav-toggle {
  display: none; margin-left: auto; width: 46px; height: 46px; padding: 0;
  background: rgba(255,255,255,.05); border: 1px solid var(--line-2); border-radius: 12px;
  cursor: pointer; color: #fff; align-items: center; justify-content: center;
}
.nav-toggle span { display: block; width: 19px; height: 2px; background: currentColor; border-radius: 2px; position: relative; transition: .2s; }
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 19px; height: 2px; background: currentColor; border-radius: 2px; transition: .22s;
}
.nav-toggle span::before { top: -6px; } .nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 1220px) {
  /* WICHTIG: Der Weichzeichner im Kopfbereich erzeugt einen eigenen
     Bezugsrahmen. Ein fest positioniertes Menue waere dann nur so hoch
     wie der Kopfbereich selbst. Deshalb auf Mobilgeraeten deckende
     Flaeche statt Weichzeichner. */
  .site-header,
  .site-header.scrolled {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: #071523;
  }
  .header-inner { min-height: 68px; }
  .nav-toggle { display: inline-flex; }

  .nav {
    position: fixed; top: 68px; left: 0; right: 0; bottom: 0;
    background: #071523;
    padding: 18px clamp(16px,4vw,26px) calc(28px + env(safe-area-inset-bottom));
    opacity: 0; pointer-events: none; transform: translateY(-6px);
    transition: opacity .2s ease, transform .2s ease;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .nav.open { opacity: 1; pointer-events: auto; transform: none; }
  .nav > ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav a {
    padding: 16px 14px; font-size: 1.05rem; border-radius: 12px;
    border-bottom: 1px solid var(--line);
  }
  .nav li:last-child a { border-bottom: 0; }
  .nav .nav-cta {
    margin: 20px 0 0; text-align: center; padding: 17px; font-size: 1.05rem;
    border-bottom: 0;
  }
}

/* ---------------- Hero ---------------- */
.hero { padding-top: clamp(48px, 6vw, 84px); padding-bottom: var(--pad); }
.hero-grid { display: grid; grid-template-columns: 1.14fr .86fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; } }
.hero h1 { max-width: 100%; }
.hero .lead { max-width: 56ch; }

/* Markenzeichen im Hero */
.hero-brand {
  position: relative; display: grid; place-items: center;
  padding: clamp(16px, 4vw, 46px);
}
.hero-brand::before {
  content: ""; position: absolute; inset: 6%;
  background: radial-gradient(closest-side, rgba(13,176,193,.30), transparent 72%);
  filter: blur(6px); pointer-events: none;
}
.hero-brand img {
  position: relative; width: min(330px, 80%); height: auto;
  border-radius: clamp(20px, 4vw, 34px);
  box-shadow: 0 0 0 1px rgba(46,224,240,.30), 0 40px 90px -30px rgba(13,176,193,.95);
  animation: schweben 7s ease-in-out infinite;
}
@keyframes schweben { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (prefers-reduced-motion: reduce) { .hero-brand img { animation: none; } }
@media (max-width: 980px) { .hero-brand { padding-top: 8px; } .hero-brand img { width: min(240px, 62%); } }

.pill {
  display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px 7px 9px;
  border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255,255,255,.04);
  font-size: .84rem; color: var(--txt-soft); margin-bottom: 22px; backdrop-filter: blur(8px);
}
.pill b { color: #fff; font-weight: 650; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(61,220,151,.18); flex:none; }

.trust-row { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 30px; font-size: .93rem; color: var(--txt-soft); }
.trust-row span { display: inline-flex; align-items: center; gap: 9px; }
.tick { color: var(--ok); font-weight: 800; }

/* ---------------- Cards ---------------- */
.card {
  position: relative; border-radius: var(--r-l); padding: clamp(22px, 2.4vw, 30px);
  background: linear-gradient(165deg, rgba(255,255,255,.062), rgba(255,255,255,.022));
  border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden;
}
.card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(150deg, rgba(46,224,240,.10), transparent 42%);
  opacity: 0; transition: opacity .3s;
}
.card h3 { margin-bottom: .5em; }
.card p  { color: var(--txt-soft); }
.card p:last-child { margin-bottom: 0; }

a.card { display: block; text-decoration: none; color: inherit; transition: transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .25s, border-color .25s; }
a.card:hover { transform: translateY(-5px); border-color: rgba(46,224,240,.35); box-shadow: var(--shadow-lg), var(--glow); color: inherit; }
a.card:hover::before { opacity: 1; }
.more { color: var(--brand-3); font-weight: 650; display: inline-flex; align-items: center; gap: 7px; }
a.card:hover .more { gap: 12px; }
.more { transition: gap .22s; }

.grid { display: grid; gap: clamp(16px, 1.8vw, 24px); }

/* Karten, die per Inline-Stil zwei Spalten nutzen, brechen auf kleinen
   Bildschirmen sauber um, statt die Schaltflaeche zu quetschen */
@media (max-width: 720px) {
  .card[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    text-align: left;
  }
  .card[style*="grid-template-columns"] .btn { width: 100%; }
}
.grid-2 { grid-template-columns: repeat(2,1fr); }
.grid-3 { grid-template-columns: repeat(3,1fr); }
.grid-4 { grid-template-columns: repeat(4,1fr); }
@media (max-width: 1020px){ .grid-4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 900px) { .grid-3 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 680px) { .grid-2,.grid-3,.grid-4 { grid-template-columns: 1fr; } }

.icon {
  width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center;
  background: var(--grad-soft); border: 1px solid rgba(46,224,240,.22); color: var(--brand-3);
  margin-bottom: 18px; font-size: 1.3rem; font-weight: 800;
}

/* ---------------- Kennzahlen ---------------- */
.stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; }
.stats div { background: var(--shell-2); padding: clamp(20px,2.4vw,30px); text-align: center; }
.stats b { display: block; font-size: clamp(1.7rem,3vw,2.5rem); font-weight: 800; line-height: 1;
  background: linear-gradient(120deg,#fff,var(--brand-3)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stats span { display: block; margin-top: 9px; font-size: .88rem; color: var(--txt-soft); }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2,1fr); } }

/* ---------------- Preise ---------------- */
.price-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(16px,1.8vw,24px); align-items: stretch; }
@media (max-width: 1000px) { .price-grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }

.price {
  position: relative; display: flex; flex-direction: column; border-radius: var(--r-l);
  padding: clamp(24px,2.6vw,32px);
  background: linear-gradient(165deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
.price.featured {
  background: linear-gradient(165deg, rgba(13,176,193,.14), rgba(17,78,122,.10));
  border-color: rgba(46,224,240,.4); box-shadow: var(--shadow-lg), var(--glow);
}
.price > * { position: relative; z-index: 1; }
.price.featured::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; z-index: 0;
  padding: 1px; background: linear-gradient(150deg, var(--brand-3), transparent 55%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
/* Fester Platz für den Hinweis, damit alle Karten oben bündig sind */
.badge-slot { display: flex; justify-content: center; min-height: 30px; margin-bottom: 14px; }
.badge {
  display: inline-flex; align-items: center;
  background: var(--grad); color: #fff; font-size: .72rem; font-weight: 750;
  letter-spacing: .1em; text-transform: uppercase; padding: 7px 17px; border-radius: 999px;
  white-space: nowrap; box-shadow: 0 8px 22px -10px rgba(13,176,193,.9);
}
.price h3 { margin-bottom: .35em; }
.price .who { font-size: .93rem; color: var(--txt-mute); min-height: 3.1em; margin-bottom: 18px; }
.price .amount { font-size: clamp(2.1rem,3.4vw,2.6rem); font-weight: 800; line-height: 1; color: #fff; }
.price .amount small { font-size: .92rem; font-weight: 500; color: var(--txt-mute); }
.price .setup { font-size: .9rem; color: var(--txt-mute); margin: 10px 0 22px; }
.price ul { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 11px; font-size: .95rem; color: var(--txt-soft); }
.price li { padding-left: 28px; position: relative; }
.price li::before {
  content: ""; position: absolute; left: 0; top: .42em; width: 17px; height: 17px; border-radius: 50%;
  background: rgba(61,220,151,.16); border: 1px solid rgba(61,220,151,.5);
}
.price li::after { content: "✓"; position: absolute; left: 4.4px; top: .18em; font-size: .68rem; color: var(--ok); font-weight: 800; }
.price .btn { margin-top: auto; width: 100%; }

/* Preisblock: einmalig und monatlich gleichwertig nebeneinander */
.price-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden; margin: 0 0 14px;
}
.price-split > div { background: rgba(255,255,255,.035); padding: 14px 13px; }
.price-split .lbl {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .11em;
  color: var(--txt-mute); font-weight: 700;
}
.price-split .val { font-size: clamp(1.2rem,1.75vw,1.5rem); font-weight: 800; color: #fff; line-height: 1.15; margin-top: 5px; white-space: nowrap; }
.price-split .sub { font-size: .76rem; color: var(--txt-mute); margin-top: 3px; }
.price-split .accent { background: rgba(46,224,240,.09); }
.price-split .accent .val { color: var(--brand-3); }

/* Einzelner Einmalpreis, fuer die Kaufvariante.
   Bewusst breiter und ruhiger als die zweigeteilte Variante,
   damit sofort klar ist: hier kommt nichts monatlich dazu. */
.price-einmal {
  background: rgba(46,224,240,.09);
  border: 1px solid var(--line-2); border-radius: 12px;
  padding: 16px 15px; margin: 0 0 14px; text-align: center;
}
.price-einmal .lbl {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .11em;
  color: var(--txt-mute); font-weight: 700;
}
.price-einmal .val {
  font-size: clamp(1.6rem,2.6vw,2.1rem); font-weight: 800;
  color: var(--brand-3); line-height: 1.1; margin-top: 6px; white-space: nowrap;
}
.price-einmal .sub { font-size: .78rem; color: var(--txt-mute); margin-top: 5px; }

.year-note {
  text-align: center; font-size: .87rem; color: var(--txt-mute);
  border-top: 1px dashed var(--line-2); padding-top: 13px; margin: 0 0 20px;
}
.year-note b { color: var(--txt-soft); font-weight: 650; white-space: nowrap; }

/* Übersichtstabelle */
table.simple tr.group-head td {
  background: rgba(46,224,240,.08); color: var(--brand-3);
  font-weight: 700; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
}
table.simple td.num { text-align: right; white-space: nowrap; }
table.simple th.num { text-align: right; }
table.simple tr.mark td { background: rgba(46,224,240,.05); }

/* Bündel */
.bundle {
  border-radius: var(--r-l); padding: clamp(26px,3.6vw,46px);
  background: linear-gradient(130deg, rgba(17,78,122,.6), rgba(13,176,193,.24));
  border: 1px solid rgba(46,224,240,.3); box-shadow: var(--shadow-lg);
  display: grid; grid-template-columns: 1.35fr .65fr; gap: clamp(24px,3vw,44px); align-items: center;
}
@media (max-width: 820px) { .bundle { grid-template-columns: 1fr; } }
.bundle ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; color: var(--txt-soft); }
.bundle li { padding-left: 26px; position: relative; }
.bundle li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 800; }
.bundle .box { text-align: center; background: rgba(4,14,26,.55); border: 1px solid var(--line-2); border-radius: var(--r); padding: 26px; backdrop-filter: blur(6px); }
.bundle .box .amount { font-size: clamp(2.3rem,4vw,2.9rem); font-weight: 800; color: #fff; line-height: 1; }
.strike { text-decoration: line-through; opacity: .55; }

/* ---------------- Servicezeiten ---------------- */
.hours { list-style: none; margin: 0; padding: 0; }
.hours li { display: flex; justify-content: space-between; gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: .97rem; }
.hours li:last-child { border-bottom: 0; }
.hours .d { color: var(--txt-mute); }
.hours .t { font-weight: 650; color: #fff; white-space: nowrap; }

.notice {
  position: relative; border-radius: var(--r); padding: 20px 24px; margin: 26px 0;
  background: rgba(46,224,240,.06); border: 1px solid rgba(46,224,240,.22);
}
.notice::before { content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:3px; background: var(--grad); }
.notice p:last-child { margin-bottom: 0; }

/* ---------------- Steps ---------------- */
.steps { counter-reset: s; display: grid; gap: 26px; }
.step { display: grid; grid-template-columns: 54px 1fr; gap: 20px; align-items: start; }
.step::before {
  counter-increment: s; content: counter(s,decimal-leading-zero);
  width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center;
  background: var(--grad-soft); border: 1px solid rgba(46,224,240,.28);
  color: var(--brand-3); font-weight: 800; font-size: 1.02rem;
}
.step h3 { margin-bottom: .3em; }
.step p { color: var(--txt-soft); margin-bottom: 0; }
@media (max-width: 520px) { .step { grid-template-columns: 44px 1fr; gap: 14px; } .step::before { width:44px;height:44px;border-radius:13px;font-size:.9rem; } }

/* ---------------- FAQ ---------------- */
.faq details {
  border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 12px;
  background: rgba(255,255,255,.032); transition: border-color .2s, background .2s;
}
.faq details[open] { border-color: rgba(46,224,240,.3); background: rgba(46,224,240,.05); }
.faq summary {
  cursor: pointer; padding: 19px 24px; font-weight: 650; color: #fff; list-style: none;
  display: flex; justify-content: space-between; gap: 18px; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 13px; height: 13px; position: relative;
  background:
    linear-gradient(currentColor,currentColor) center/13px 2px no-repeat,
    linear-gradient(currentColor,currentColor) center/2px 13px no-repeat;
  color: var(--brand-3); transition: transform .25s;
}
.faq details[open] summary::after { transform: rotate(135deg); }
.faq .answer { padding: 0 24px 22px; color: var(--txt-soft); }
.faq .answer p:last-child { margin-bottom: 0; }

/* ---------------- Tabellen ---------------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 26px 0; border-radius: var(--r); border: 1px solid var(--line); }
table.simple { width: 100%; border-collapse: collapse; font-size: .95rem; }
/* Auf schmalen Geraeten brauchen breite Tabellen eine Mindestbreite,
   sonst quetscht der Browser die Spalten unleserlich zusammen.
   Tabellen mit nur zwei Spalten passen dagegen immer und bekommen
   die Klasse "schmal", damit sie nicht seitlich verschoben werden muessen. */
@media (max-width: 640px) {
  .table-scroll table.simple { min-width: 460px; font-size: .88rem; }
  .table-scroll table.simple th,
  .table-scroll table.simple td { padding: 12px 13px; }
  .table-scroll table.simple.schmal { min-width: 0; width: 100%; }
}
table.simple th, table.simple td { text-align: left; padding: 15px 18px; border-bottom: 1px solid var(--line); }
table.simple tr:last-child td { border-bottom: 0; }
table.simple th { background: rgba(255,255,255,.045); color: #fff; font-weight: 700; }
table.simple td { color: var(--txt-soft); }
table.simple td strong { color: #fff; }

/* ---------------- Formular ---------------- */
.form-card {
  border-radius: var(--r-l); padding: clamp(24px,3vw,38px);
  background: linear-gradient(165deg, rgba(255,255,255,.062), rgba(255,255,255,.022));
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
.field { margin-bottom: 19px; }
.field label { display: block; font-weight: 600; font-size: .93rem; margin-bottom: 8px; color: #fff; }
.req { color: var(--brand-3); }
.field input, .field select, .field textarea {
  width: 100%; padding: 14px 16px; font: inherit; font-size: 1rem;
  color: var(--txt); background: rgba(4,14,26,.6);
  border: 1px solid var(--line-2); border-radius: 12px; transition: border-color .18s, box-shadow .18s;
}
.field input::placeholder, .field textarea::placeholder { color: #5f7d95; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand-2); box-shadow: 0 0 0 4px rgba(13,176,193,.18);
}
.field select { appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg,transparent 50%,var(--brand-3) 50%),linear-gradient(135deg,var(--brand-3) 50%,transparent 50%);
  background-position: calc(100% - 21px) center, calc(100% - 15px) center;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 44px; }
.field select option { background: var(--shell-3); color: var(--txt); }
.field textarea { min-height: 140px; resize: vertical; }
.field-check { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: .9rem; color: var(--txt-soft); }
.field-check input { width: 21px; height: 21px; margin-top: 2px; accent-color: var(--brand-2); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.alert { padding: 16px 20px; border-radius: var(--r); margin-bottom: 24px; font-size: .96rem; }
.alert-ok  { background: rgba(61,220,151,.1);  border: 1px solid rgba(61,220,151,.4); color: #b6f2d7; }
.alert-err { background: rgba(255,107,107,.1); border: 1px solid rgba(255,107,107,.4); color: #ffc9c9; }

/* ---------------- Tags ---------------- */
.tag {
  display: inline-block; padding: 7px 15px; margin: 0 7px 8px 0; border-radius: 999px;
  font-size: .84rem; font-weight: 550; color: var(--txt-soft);
  background: rgba(255,255,255,.045); border: 1px solid var(--line); transition: .2s;
}
a.tag { text-decoration: none; cursor: pointer; }
.tag:hover { color: #fff; border-color: rgba(46,224,240,.45); background: rgba(46,224,240,.11); transform: translateY(-1px); }
a.tag::after { content: " →"; opacity: 0; margin-left: -12px; transition: opacity .18s, margin-left .18s; }
a.tag:hover::after { opacity: 1; margin-left: 0; }
.tag-hot { background: var(--grad); color: #fff; border-color: transparent; font-weight: 650; }

/* ---------------- CTA-Band ---------------- */
.cta-band {
  position: relative; overflow: hidden; border-radius: clamp(var(--r-l), 3vw, 30px);
  padding: clamp(34px,5vw,64px); text-align: center;
  background: linear-gradient(130deg, rgba(17,78,122,.72), rgba(13,176,193,.3));
  border: 1px solid rgba(46,224,240,.3);
}
.cta-band::before {
  content: ""; position: absolute; inset: -40% -10% auto; height: 120%;
  background: radial-gradient(38rem 22rem at 50% 0%, rgba(46,224,240,.28), transparent 70%);
  pointer-events: none;
}
.cta-band > * { position: relative; }

/* ---------------- Footer ---------------- */
.site-footer { background: #040d18; border-top: 1px solid var(--line); padding: clamp(46px,6vw,76px) 0 28px; font-size: .95rem; color: var(--txt-soft); }
.site-footer h4 { color: #fff; font-size: .98rem; margin-bottom: 1em; letter-spacing: -.01em; }
.site-footer a { color: var(--txt-soft); text-decoration: none; }
.site-footer a:hover { color: var(--brand-3); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.15fr; gap: clamp(26px,3vw,44px); }
@media (max-width: 940px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

/* Im Fussbereich ist die Spalte schmal, deshalb Bezeichnung ueber der Zeit */
.site-footer .hours li {
  flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 9px 0; border-color: rgba(255,255,255,.10);
}
.site-footer .hours .d { font-size: .87rem; color: var(--txt-mute); }
.site-footer .hours .t { color: #fff; white-space: nowrap; }
.footer-bottom {
  margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; font-size: .87rem; color: var(--txt-mute);
}
.footer-orte { font-size: .84rem; color: var(--txt-mute); line-height: 1.9; margin-top: 16px; }

/* ---------------- Rechtstexte ---------------- */
.legal { max-width: 820px; }
.legal h2 { font-size: clamp(1.2rem,2vw,1.5rem); margin-top: 2em; }
.legal h3 { font-size: 1.06rem; margin-top: 1.5em; }
.legal p, .legal li { color: var(--txt-soft); font-size: .97rem; }
.legal ul { padding-left: 1.2em; }
.legal li { margin-bottom: .4em; }

.todo { background: rgba(255,193,7,.09); border: 1px dashed rgba(255,193,7,.45); color: #ffe08a; padding: 16px 20px; border-radius: var(--r); margin: 22px 0; font-size: .93rem; }
.todo strong { color: #fff2c4; }

/* ---------------- Cookie-Banner ---------------- */
.consent {
  position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 130%);
  width: min(680px, calc(100vw - 28px)); z-index: 200;
  background: rgba(9,24,40,.97); backdrop-filter: blur(16px);
  border: 1px solid var(--line-2); border-radius: var(--r-l);
  padding: clamp(20px,2.6vw,26px); box-shadow: var(--shadow-lg);
  transition: transform .4s cubic-bezier(.2,.8,.3,1), opacity .2s ease;
}
.consent.show { transform: translate(-50%, 0); }
.consent h4 { color: #fff; margin: 0 0 .5em; font-size: 1.04rem; }
.consent p { font-size: .9rem; color: var(--txt-soft); margin-bottom: 1.1em; }
.consent .btn-row { gap: 10px; }
.consent .btn { padding: 12px 22px; font-size: .93rem; flex: 1 1 auto; }
@media (max-width: 460px) { .consent .btn { width: 100%; } }

/* Solange das Menue offen ist, tritt der Hinweis zurueck.
   Auf dem Handy verdeckte er sonst die halbe Navigation. */
body.menue-offen .consent { opacity: 0; pointer-events: none; }

/* Auf kleinen Geraeten kompakter, damit er nicht den halben
   Bildschirm einnimmt. Der Text bleibt vollstaendig lesbar. */
@media (max-width: 560px) {
  .consent {
    bottom: 10px; width: calc(100vw - 20px);
    padding: 17px 17px 19px; border-radius: 16px;
    max-height: calc(100vh - 96px); overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .consent h4 { font-size: .97rem; margin-bottom: .4em; line-height: 1.3; }
  .consent p  { font-size: .83rem; line-height: 1.5; margin-bottom: .9em; }
  .consent .btn { padding: 13px 16px; font-size: .9rem; }
}

/* ---------------- Hilfsklassen ---------------- */
.skip { position: absolute; left: -9999px; background: var(--brand-2); color: #04121f; padding: 13px 20px; z-index: 300; border-radius: 0 0 var(--r) 0; font-weight: 650; }
.skip:focus { left: 0; top: 0; }

:focus-visible { outline: 2px solid var(--brand-3); outline-offset: 3px; border-radius: 4px; }

.breadcrumb { font-size: .84rem; color: var(--txt-mute); margin-bottom: 22px; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.breadcrumb li::after { content: "/"; margin-left: 8px; color: var(--txt-mute); opacity: .5; }
.breadcrumb li:last-child::after { content: none; }
.breadcrumb a { color: var(--txt-mute); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand-3); }

/* Einblenden beim Scrollen */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.8,.3,1), transform .7s cubic-bezier(.2,.8,.3,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

@media print {
  body { background: #fff; color: #000; }
  body::before, body::after, .site-header, .site-footer, .btn, .consent { display: none !important; }
  h1,h2,h3,h4,strong { color: #000; }
  p, li, td { color: #222; }
}


/* ============================================================
   Feinschliff für kleine Bildschirme
   ============================================================ */
@media (max-width: 700px) {
  body { font-size: 16px; }
  section { padding: clamp(44px, 9vw, 64px) 0; }

  .hero-brand { padding: 4px 0 0; }
  .hero-brand img { width: min(210px, 58%); }

  .pill { font-size: .8rem; padding: 6px 13px 6px 8px; }
  .trust-row { gap: 9px 18px; margin-top: 24px; font-size: .9rem; }

  .stats { grid-template-columns: 1fr 1fr; }
  .stats div { padding: 18px 12px; }
  .stats b { font-size: 1.55rem; }
  .stats span { font-size: .8rem; }

  .card { padding: 22px 20px; }
  .icon { width: 44px; height: 44px; border-radius: 12px; margin-bottom: 14px; }

  .price { padding: 24px 20px; }
  .price-split > div { padding: 13px 11px; }
  .price-split .lbl { font-size: .62rem; letter-spacing: .08em; }
  .price .who { min-height: 0; }

  .bundle { padding: 24px 20px; }
  .cta-band { padding: 30px 20px; }

  .faq summary { padding: 16px 18px; font-size: .98rem; }
  .faq .answer { padding: 0 18px 18px; }

  .steps { gap: 20px; }
  .notice { padding: 17px 18px; }
  .tag { font-size: .8rem; padding: 6px 13px; }

  .footer-bottom { flex-direction: column; gap: 10px; }
  .footer-orte { font-size: .8rem; }
}

@media (max-width: 400px) {
  .price-split { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .logo .wm b { font-size: .95rem; }
}