/* vf-gk.de und Verbandsseiten – Ergänzungen zur teccc.de-Fassung „klar“ (14.10.2026).
   Grundlage: assets/klar/klar.css (Kopie aus www.teccc.de/klar). Hier nur, was es dort nicht gibt. */

/* Navigation: Telefon rechts statt Kunden-Login */
.nav .ruf{font-size:12.5px;color:#333;display:flex;align-items:center;gap:6px;white-space:nowrap}
.nav .ruf:hover{color:#000}
.nav .ruf svg{width:14px;height:14px}
@media(max-width:900px){.nav .ruf{display:none}.nav .menue{display:block}}
.menue nav a.ruf-m{font-size:20px;color:var(--akzent);margin-top:18px}

/* Partnerzeile im Hero: Verband und Vodafone Business als Partner, TECCC spricht */
.partner{display:flex;justify-content:center;align-items:center;gap:clamp(20px,3vw,36px);flex-wrap:wrap;margin-bottom:clamp(28px,4vh,44px)}
.partner img{width:auto;max-width:min(260px,60vw);object-fit:contain}
.partner .vf{height:38px}
.partner .trenn{width:1px;height:40px;background:var(--linie)}
.hero-notiz{font-size:15px;color:var(--grau);margin-top:18px}
.hero-notiz a{color:var(--ink)}


/* Liste mit Vorsatz, einspaltig (Mitgliedervorteile, Preislisten) */
.liste{list-style:none;border-top:1px solid var(--linie)}
.liste li{padding:18px 0;border-bottom:1px solid var(--linie);font-size:17px;line-height:1.45;color:var(--grau)}
.liste li b{display:block;color:var(--ink);font-size:19px;font-weight:650;letter-spacing:-.015em;margin-bottom:4px}

/* Links auf die offiziellen Vodafone-Seiten */
.extern{max-width:860px;margin:clamp(48px,7vh,72px) auto 0;list-style:none;border-top:1px solid var(--linie)}
.extern li{border-bottom:1px solid var(--linie)}
.extern a{display:grid;grid-template-columns:1fr auto;gap:6px 24px;align-items:center;padding:22px 0}
.extern a b{font-size:20px;font-weight:650;letter-spacing:-.015em}
.extern a span{grid-column:1;font-size:16.5px;line-height:1.45;color:var(--grau)}
.extern a i{grid-column:2;grid-row:1/span 2;font-style:normal;font-size:15px;color:var(--akzent);white-space:nowrap}
.extern a:hover b{color:var(--akzent)}
.extern-hinweis{max-width:860px;margin:18px auto 0;font-size:14px;line-height:1.5;color:var(--grau)}

/* Weiterführende Wege (Kundenportal, teccc.de) */
.wege a.mehr{display:inline-block;margin-top:10px;font-size:16px}

/* Formular: Klickfragen als Pillen, Felder wie klar */
.fragen{display:grid;gap:18px;margin-bottom:24px}
.frage b{display:block;font-size:15px;font-weight:600;margin-bottom:10px}
.wahl{display:flex;flex-wrap:wrap;gap:8px}
.wahl button{border:1px solid var(--linie);background:#fff;border-radius:980px;padding:9px 16px;font:500 15px Geist,-apple-system,Arial,sans-serif;color:var(--ink);cursor:pointer;transition:background .15s,border-color .15s}
.wahl button:hover{border-color:var(--grau)}
.wahl button.an{background:var(--ink);border-color:var(--ink);color:#fff}
.felder input.fehlt,.felder textarea.fehlt{border-color:#b42318}
.karte .meldung:empty{display:none}
.karte .meldung{display:block}
.karte .meldung.fehler{background:#fff1f0;color:#b42318}
.karte .meldung.ok{background:#ecfdf3;color:#05603a}
.karte small a{text-decoration:underline}

/* Fuß: Partnerhinweis */
.fuss .fuss-hinweis{font-size:12.5px;color:var(--grau);padding-top:18px;line-height:1.5;max-width:60em}
.fuss .unten{flex-wrap:wrap;gap:8px 24px}
.fuss a:hover{color:var(--ink)}

@media(max-width:600px){
  .partner .trenn{display:none}
  .extern a{grid-template-columns:1fr}
  .extern a i{grid-column:1;grid-row:auto}
  .fuss .spalten{grid-template-columns:1fr}
  .links .btn{width:100%;justify-content:center}
}
/* .wahl.mehr (Mehrfachwahl) nicht wie der klar-Textlink .mehr darstellen */
.wahl.mehr{color:inherit;font-size:inherit}
.wahl.mehr::after{content:none}
.wahl.mehr:hover{text-decoration:none}
/* Farbige Vollbreiten-Abschnitte: Innenabstand am Abschnitt selbst, Satzbreite insgesamt wie .w (22 px Rand) */
.abschnitt.hell,.abschnitt.kontakt{padding-left:16px;padding-right:16px}
.abschnitt.hell>.w,.abschnitt.kontakt>.w{width:min(1120px,calc(100% - 12px))}
.abschnitt.hell,.abschnitt.kontakt{padding-top:128px;padding-bottom:128px}
@media(max-width:700px){.abschnitt.hell,.abschnitt.kontakt{padding-top:72px;padding-bottom:72px}}
/* Kundenportal-Abschnitt (14.10.2026): Notebook mit Portal-Ansicht wie auf teccc.de, ohne Scroll-Animation */
.portal-bild{margin-top:clamp(48px,7vh,80px)}
.portal-bild .laptop{--b:min(960px,calc((100vw - 44px) / 1.12))}