/* KVM Server Features (funktionen.tpl, funktionen-apps.tpl), Tim 09.11.2026. Hero aus vx-hero.css, Abschnitte aus
   vnx-site.css (.h-sec, .vx-light/.vx-tint/.vx-dark). Farben nur über Variablen (--vnx-* bzw. in .vx-dark über --vx-*),
   damit hell und dunkel ohne Sonderregeln stimmen. Kein Grün außer Hauptknopf (Farbregel). */

/* Abschnitte im Wechsel Bild/Text */
.f-k { margin: 0 0 6px; font-size: 14px; font-weight: 700; letter-spacing: .02em; color: var(--vnx-text-muted); }
.f-sec h2 { margin: 0; }
.f-lead { margin-top: 12px; max-width: 46em; }
.f-row { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); gap: 56px; align-items: center; }
.f-row + .f-row { margin-top: 64px; }
#sicherheit-netzwerk .f-row:first-of-type { margin-top: 40px; }
.f-row.is-r { grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr); }
.f-row.is-r > .f-t { order: 2; }
.f-t > p { margin: 12px 0 0; font-size: 16px; line-height: 1.6; color: var(--vnx-text-secondary); }
.f-t h3 { margin: 0; font-size: 24px; line-height: 1.25; font-weight: 700; color: var(--vnx-text); }
.f-t h2 + p { margin-top: 14px; }
.f-hint { font-size: 14px !important; color: var(--vnx-text-muted) !important; }
.f-l { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.f-l li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.5; color: var(--vnx-text-secondary); }
.f-l li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--vnx-text-muted); }
.f-go { margin-top: 18px !important; }
.f-go a { font-weight: 600; color: var(--vnx-text) !important; text-decoration: underline; text-underline-offset: 3px; }
.f-m img { display: block; width: 100%; height: auto; border: 1px solid var(--h-line, var(--vnx-border)); border-radius: 12px; background: var(--h-card, transparent); }

/* App-Logos (Übersicht und Hero der Apps-Seite) */
.f-apps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.f-apps li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px; border: 1px solid var(--h-line, var(--vnx-border)); border-radius: 10px; background: var(--h-card, transparent); font-size: 14px; font-weight: 600; color: var(--vnx-text); }
.f-apps img { flex: none; width: 28px; height: 28px; }
.f-apps span { min-width: 0; overflow-wrap: anywhere; }
.f-apps-card { margin: 0 !important; padding: 16px; }
.f-apps-card .f-apps li { border-color: var(--vx-card-ln); background: transparent; color: var(--vx-fg); }
section.vx-hero.vx-hero--kompakt.f-hero-apps { padding-bottom: 36px !important; }

/* Karten, Katalog, Schritte (Apps-Seite) */
.f-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.f-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.f-card { padding: 22px; }
.f-card h3 { margin: 0 0 8px; font-size: 18px; color: var(--vnx-text); }
.f-card p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--vnx-text-secondary); }
.f-katalog { margin: 24px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.f-katalog li { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--h-line, var(--vnx-border)); border-radius: 10px; background: var(--h-card, transparent); }
.f-katalog img { flex: none; }
.f-katalog span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.f-katalog b { color: var(--vnx-text); }
.f-katalog small { font-size: 13px; color: var(--vnx-text-muted); }
.f-katalog + .f-hint { margin-top: 16px; }
.f-steps { margin: 16px 0 0; padding-left: 22px; display: grid; gap: 10px; color: var(--vnx-text-secondary); font-size: 15px; line-height: 1.55; }
.f-row .f-t + .f-t { align-self: start; }

/* Abschluss */
.f-end .m-ctas { margin-top: 22px; }

@media (max-width: 900px) {
    .f-row, .f-row.is-r { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .f-row.is-r > .f-t { order: 0; }
    .f-row + .f-row { margin-top: 44px; }
    .f-cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .f-katalog { grid-template-columns: minmax(0, 1fr); }
    .f-apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    section.vx-hero.vx-hero--kompakt.f-hero-apps { padding-bottom: 24px !important; }
}
@media (max-width: 520px) {
    .f-cards { grid-template-columns: minmax(0, 1fr); }
}

/* Landings Apps, Sicherheit, KI-Zugang (11.11.2026): Fakten im Hero, Einleitung mit Für wen/Was brauchst du/Was kostet es,
   Schritte, Vergleichstabelle, FAQ, Querverweise. */
.m3-hero .vx-shot img{max-height:420px!important}
.m3-k{margin:0 0 8px;font-size:14px;font-weight:700;color:var(--vnx-text-muted)}
.vx-dark .m3-k,.vx-dark2 .m3-k{color:var(--vx-fg3)}
.m3-facts{display:flex;flex-wrap:wrap;gap:8px 22px;margin:22px 0 0;padding:0;list-style:none;font-size:14px;color:var(--vx-fg2)}
.m3-facts li{display:flex;align-items:center;gap:8px}.m3-facts li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--vx-accent)}
.m3-intro{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:start}
.m3-intro p{margin:12px 0 0;font-size:17px;line-height:1.65;color:var(--vnx-text-secondary)}
.m3-why{margin:0;padding:22px;border:1px solid var(--h-line);border-radius:12px;background:var(--h-card);list-style:none;display:grid;gap:14px}
.m3-why b{display:block;color:var(--vnx-text)}.m3-why span{font-size:15px;color:var(--vnx-text-secondary);line-height:1.5}
.m3-steps{margin:28px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;counter-reset:s}
.m3-steps.is-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.m3-steps li{counter-increment:s;display:flex;flex-direction:column;gap:10px}
.m3-steps li::before{content:counter(s);display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;border:1px solid var(--vx-card-ln,var(--h-line));font-weight:700;font-size:14px;color:var(--vx-fg,var(--vnx-text))}
.m3-steps b{font-size:17px;color:var(--vx-fg,var(--vnx-text))}.m3-steps p{margin:0;font-size:15px;line-height:1.55;color:var(--vx-fg2,var(--vnx-text-secondary))}
.m3-steps img{display:block;width:100%;height:auto;border:1px solid var(--vx-card-ln,var(--h-line));border-radius:10px}
.m3-cmp{margin:24px 0 0;width:100%;border-collapse:collapse;font-size:15px}
.m3-cmp th,.m3-cmp td{padding:12px 14px;border-bottom:1px solid var(--h-line);text-align:left;color:var(--vnx-text-secondary)}
.m3-cmp th{color:var(--vnx-text);font-weight:700}.m3-cmp td:first-child{color:var(--vnx-text);font-weight:600}
.m3-faq{margin:24px 0 0;display:grid;gap:10px;max-width:860px}
.m3-faq details{border:1px solid var(--h-line);border-radius:10px;background:var(--h-card);padding:0 18px}
.m3-faq summary{cursor:pointer;padding:16px 0;font-weight:700;color:var(--vnx-text);list-style:none}
.m3-faq summary::-webkit-details-marker{display:none}.m3-faq p{margin:0 0 16px;line-height:1.6;color:var(--vnx-text-secondary)}
.m3-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:24px}
.m3-links a{display:block;padding:20px;border:1px solid var(--h-line);border-radius:12px;background:var(--h-card);color:var(--vnx-text)!important;text-decoration:none!important}
.m3-links a b{display:block;font-size:17px}.m3-links a span{display:block;margin-top:6px;font-size:14px;color:var(--vnx-text-secondary)}
.m3-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}.m3-pair img{width:100%;height:auto;display:block;border:1px solid var(--h-line);border-radius:10px}
@media(max-width:900px){.m3-intro{grid-template-columns:1fr;gap:24px}.m3-steps,.m3-steps.is-4{grid-template-columns:1fr}.m3-links{grid-template-columns:1fr}.m3-pair{grid-template-columns:1fr}.m3-cmp{font-size:14px}}
/* Nachbesserung UI/UX-Review 12.11.2026: VPN-Bild volle Breite, Modal-Ausschnitt nicht über die Spalte hinaus */
.m3-wide{margin-top:28px}.m3-wide img{display:block;width:100%;height:auto;border:1px solid var(--vx-card-ln,var(--h-line));border-radius:12px}
.f-m-modal img{max-width:440px;margin:0 auto}
/* Handy-Ausschnitte per <picture> (Tim 12.11.2026): Wrapper verhält sich wie das Bild */
.vnx-funktionen picture.vx-only-hell,.f-m picture,.m3-wide picture{display:block}
/* Kennzahlen-Leiste unter dem Hero (Sicherheit, Apps), ersetzt die Punkte im Hero. Grün nur als schmaler Akzentstrich. */
.f-zahlen{background:var(--h-card,#f4f6f8);border-bottom:1px solid var(--h-line)}
.f-zahlen .h-wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding-top:28px;padding-bottom:28px}
.f-zahlen .h-wrap>div{padding:4px 24px;border-left:3px solid #a3d133}
.f-zahlen b{display:block;font-size:30px;line-height:1.15;color:var(--vnx-text);font-variant-numeric:tabular-nums}
.f-zahlen span{display:block;margin-top:4px;font-size:14px;color:var(--vnx-text-secondary)}
@media(max-width:900px){.f-zahlen .h-wrap{grid-template-columns:1fr 1fr;gap:20px 0}.f-zahlen .h-wrap>div{padding:2px 14px}.f-zahlen b{font-size:24px}}
/* Schritte als Fahrplan (Tim 12.11.2026: schlicht, keine Effekte): gleiche Ziffern-Ringe, dünne durchgehende Linie
   zwischen den Ringen, statisch und ohne Skript. Desktop waagerecht, Handy senkrecht links. */
.m3-steps>li{position:relative}
.m3-steps li::before{width:36px!important;height:36px!important;font-size:15px!important;font-weight:600!important;border:1px solid var(--vx-fg3,var(--vnx-text-muted))!important;background:transparent!important;color:var(--vx-fg,var(--vnx-text))!important;font-variant-numeric:tabular-nums}
.m3-steps>li:not(:last-child)::after{content:"";position:absolute;top:18px;left:36px;right:-20px;height:1px;background:var(--vx-fg3,var(--vnx-text-muted));opacity:.6}
@media(max-width:900px){
    .m3-steps>li{padding-left:56px;min-height:36px}
    .m3-steps li::before{position:absolute;left:0;top:0}
    .m3-steps>li:not(:last-child)::after{top:36px;bottom:-20px;left:18px;right:auto;width:1px;height:auto}
}