/* handyanrufe.de — Gestaltung „Smartphone“: Mint und frisches Grün, große Rundungen, einspaltig;
   Schrift Nunito (lokal). Nummern wie auf einem Handy-Display. */
@font-face { font-family: "Nunito"; src: url("fonts/nunito-var.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }

:root {
  --gruen: #1f9d4c; --gruen-dunkel: #15773a; --gruen-hell: #e6f6ec; --mint: #f1faf4; --tinte: #0f2418; --leise: #557062;
  --linie: #dcebe1; --weiss: #fff; --rot: #c8352b; --display: #0f2418;
  --r: 26px; --schatten: 0 18px 40px -22px rgba(15, 36, 24, .35);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--mint); color: var(--tinte); font: 500 17.5px/1.65 "Nunito", system-ui, sans-serif; }
img { max-width: 100%; height: auto; }
a { color: var(--gruen-dunkel); text-underline-offset: 3px; }
a:hover { color: var(--gruen); }
h1, h2, h3 { font-weight: 800; line-height: 1.18; letter-spacing: -.01em; color: var(--tinte); }
h1 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.7rem); margin: .1em 0 .55em; }
h2 { font-size: 1.45rem; margin: 1.8em 0 .6em; }
h3 { font-size: 1.15rem; margin: 1.4em 0 .4em; }
p, ul, ol { margin: 0 0 1em; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 10; background: #fff; padding: .5rem 1rem; }
.nur-vorlesen { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Kopf: zentriert, Navigation als Pills */
.kopf { padding: 22px 16px 6px; text-align: center; }
.kopf-innen { display: flex; justify-content: center; }
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.logo img { width: 50px; height: 50px; filter: drop-shadow(0 6px 10px rgba(31,157,76,.35)); }
.logo-text { display: flex; flex-direction: column; text-align: left; }
.logo-name { font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: var(--tinte); }
.logo-name span { color: var(--gruen); }
.logo-claim { font-size: .85rem; color: var(--leise); font-weight: 600; }
.hauptnav { margin-top: 16px; }
.hauptnav .nav-innen { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; max-width: 900px; margin: 0 auto; }
.hauptnav a { text-decoration: none; color: var(--tinte); font-weight: 700; font-size: .95rem; padding: 8px 16px; border-radius: 999px; background: #fff; box-shadow: 0 2px 0 var(--linie); }
.hauptnav a:hover { background: var(--gruen-hell); }
.hauptnav a[aria-current="page"] { background: var(--gruen); color: #fff; box-shadow: none; }
@media (max-width: 640px) {
  .hauptnav .nav-innen { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; padding: 2px 4px 6px; }
  .hauptnav .nav-innen::-webkit-scrollbar { display: none; }
  .hauptnav a { flex: none; }
  .logo-name { font-size: 1.4rem; }
}

/* Hero: Wählfeld */
.hero { padding: 26px 16px 8px; }
.hero-innen { max-width: 760px; margin: 0 auto; text-align: center; }
.hero h1 { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.3rem); margin-bottom: .3em; }
.hero h1 em { font-style: normal; color: var(--gruen); }
.hero p { color: var(--leise); font-size: 1.12rem; }
.waehlfeld { background: var(--display); border-radius: 34px; padding: 26px 24px 22px; margin: 26px auto 0; max-width: 560px; box-shadow: 0 30px 60px -30px rgba(15,36,24,.6); text-align: left; }
.waehlfeld label { color: #a7c9b3; }
.waehlfeld label span { color: #7fa38b; }
.waehlfeld input[type=tel] { background: #173322; color: #fff; border-color: #2b4d38; font-size: 1.5rem; letter-spacing: .05em; }
.waehlfeld input[type=tel]::placeholder { color: #6f8f7b; }
.waehlfeld .qc-fehler { color: #ffb4ad; }
.punkte { display: flex; justify-content: center; gap: 10px; margin: 18px 0 2px; }
.punkte span { width: 8px; height: 8px; border-radius: 50%; background: #2b4d38; }
.punkte span:nth-child(2) { background: var(--gruen); }

/* Raster: eine Spalte */
.rahmen { max-width: 860px; margin: 0 auto; padding: 26px 16px 56px; }
main { background: #fff; border-radius: var(--r); padding: 34px 40px 36px; box-shadow: var(--schatten); overflow-wrap: break-word; }
@media (max-width: 640px) { main { padding: 22px 18px 26px; border-radius: 20px; } }

.krumen { font-size: .86rem; color: var(--leise); margin-bottom: .8em; }
.krumen a { color: var(--leise); }
.kleingedruckt { font-size: .92rem; color: var(--leise); background: var(--mint); border-radius: 16px; padding: 12px 16px; }

/* Kästen, Formular */
.kasten { background: var(--gruen-hell); border-radius: 20px; padding: 20px 22px; margin: 1.6em 0; }
.kasten h2 { font-size: 1.15rem; margin: 0 0 12px; }
.quickcheck label { display: block; font-weight: 700; margin-bottom: 8px; }
.quickcheck label span { font-weight: 600; color: var(--leise); font-size: .9em; }
.qc-zeile { display: flex; gap: 10px; }
.quickcheck input[type=tel] { flex: 1 1 auto; min-width: 0; font: inherit; font-weight: 700; font-size: 1.25rem; padding: 12px 18px; border: 2px solid var(--linie); border-radius: 999px; background: #fff; color: var(--tinte); }
.quickcheck input:focus { outline: none; border-color: var(--gruen); box-shadow: 0 0 0 4px rgba(31,157,76,.2); }
.quickcheck input[aria-invalid="true"] { border-color: var(--rot); }
button { font: inherit; font-weight: 800; cursor: pointer; border: 0; border-radius: 999px; padding: 12px 22px; background: var(--gruen); color: #fff; }
button:hover { background: var(--gruen-dunkel); }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid rgba(31,157,76,.5); outline-offset: 2px; }
.qc-fehler { color: var(--rot); font-size: .9rem; margin: 8px 0 0; }
@media (max-width: 480px) { .qc-zeile { flex-direction: column; } }

/* Ergebnis: Display-Karte */
.antwort { background: var(--display); color: #e8f5ec; border-radius: 22px; padding: 22px 24px; margin: 0 0 1.2em; }
.antwort strong { color: #fff; }
.antwort p:last-child { margin-bottom: 0; color: #a7c9b3; }
.antwort-kopf { font-size: 1.15rem; }

/* Netz-Badges */
.netz-badge { display: inline-block; padding: 3px 12px; border-radius: 999px; background: var(--netz); color: #fff; font-size: .8em; font-weight: 800; vertical-align: .12em; }

/* Tabellen */
.tabelle-scroll { overflow-x: auto; margin: 0 0 1.2em; border-radius: 18px; border: 2px solid var(--linie); }
table { border-collapse: collapse; width: 100%; font-size: .96rem; }
th, td { padding: 11px 16px; text-align: left; vertical-align: top; }
thead th { background: var(--gruen-hell); font-weight: 800; font-size: .88rem; }
tbody td { border-top: 1px solid var(--linie); }
table.breit { font-size: .88rem; min-width: 720px; }

/* Listen */
ul li::marker { color: var(--gruen); }
.teaser { list-style: none; padding: 0; display: grid; gap: 10px; }
.teaser a { display: block; padding: 14px 18px; border-radius: 18px; background: var(--mint); text-decoration: none; color: var(--tinte); font-weight: 700; }
.teaser a:hover { background: var(--gruen-hell); }

/* Vorwahl-Chips und Nummernblöcke */
.wertliste, .nachbarn { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 1em; }
.wertliste a, .nachbarn a, .nachbarn span { padding: 8px 14px; border-radius: 999px; background: var(--mint); text-decoration: none; font-weight: 800; color: var(--tinte); font-variant-numeric: tabular-nums; }
.wertliste a:hover, .nachbarn a:hover { background: var(--gruen); color: #fff; }
.nachbarn span { background: var(--display); color: #fff; }
.bloecke { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; max-height: 440px; overflow: auto; padding: 12px; margin-bottom: 1em;
  background: var(--display); border-radius: 22px; font-variant-numeric: tabular-nums; }
.bloecke a { text-decoration: none; color: #cfe7d7; font-weight: 700; font-size: .9rem; padding: 6px 8px; border-radius: 10px; text-align: center; }
.bloecke a:hover { background: var(--gruen); color: #fff; }

/* Fuß */
.fuss { color: var(--leise); font-size: .9rem; }
.fuss-innen { max-width: 860px; margin: 0 auto; padding: 8px 16px 40px; text-align: center; }
.fuss a { color: var(--tinte); font-weight: 700; }
.fuss nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; }

/* Consent */
#consent-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; padding: 12px; }
#consent-banner[hidden] { display: none; }
.consent-box { max-width: 700px; margin: 0 auto; background: #fff; border-radius: 24px; box-shadow: 0 16px 40px rgba(15,36,24,.25);
  padding: 14px 18px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.consent-box p { margin: 0; flex: 1 1 240px; font-size: .95rem; }
.consent-actions { display: flex; gap: 8px; }
#consent-refuse { background: var(--mint); color: var(--tinte); }

@media print { .hauptnav, .hero, .fuss nav, #consent-banner { display: none !important; } body { background: #fff; } main { box-shadow: none; padding: 0; } }

/* Nummernliste (Wunsch des Betreibers): deutlicher Rahmen, auf dem Handy eingeklappt und schmaler, damit rechts eine Wischspur zum Weiterscrollen bleibt */
.nl-box { margin: 0 0 1.2em; }
.nl-box summary { cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; border-radius: 999px; background: var(--gruen-hell); font-weight: 800; }
.nl-box summary:hover { background: var(--gruen); color: #fff; }
.nl-tipp { font-size: .85rem; color: var(--leise); margin: .7em 0 .5em; }
.nummernliste { position: relative; border: 3px solid var(--gruen); border-radius: 14px; padding: 10px 12px; height: 250px; overflow: auto; font-size: .85rem; line-height: 1.6; word-break: break-word; background: #fff; box-shadow: inset 0 -14px 12px -12px rgba(15,36,24,.25); }
.nummernliste mark { background: #ffe066; color: var(--tinte); padding: 1px 3px; border-radius: 4px; font-weight: 800; }
@media (max-width: 640px) { .nummernliste { height: 45vh; margin-right: 34px; } }

/* Gesuchte Nummer, Warnung, Quelle */
.ihre-nummer { background: #fff8d6; border: 2px solid #f0d36b; border-radius: 18px; padding: 14px 18px; margin: 0 0 1em; }
.ihre-nummer p { margin: 0 0 .3em; } .ihre-nummer p:last-child { margin: 0; }
.ihre-nummer-kopf { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.antwort-warnung { background: #3b1a14; }
.quelle { font-size: .85rem; color: var(--leise); }
.waehlfeld .qc-fehler a { color: #fff; }

/* Vorwahl-Links in Tabellen: Tippfläche mindestens 40 px */
.vw-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vw-chips a, td.vw-links a { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; min-width: 44px; padding: 0 12px; border-radius: 999px; background: var(--mint); font-weight: 800; text-decoration: none; color: var(--tinte); font-variant-numeric: tabular-nums; }
.vw-chips a:hover, td.vw-links a:hover { background: var(--gruen); color: #fff; }
.vw-chips small { align-self: center; color: var(--leise); }

/* Hauptnavigation auf dem Handy: Verlauf und Pfeil am Rand zeigen, dass es seitlich weitergeht */
@media (max-width: 640px) {
  .hauptnav { position: relative; }
  .hauptnav .nav-innen { position: relative; }
  .hauptnav::before, .hauptnav::after { position: absolute; top: 0; bottom: 6px; width: 44px; pointer-events: none; z-index: 1; transition: opacity .2s; display: flex; align-items: center; font-weight: 800; font-size: 1.4rem; color: var(--gruen); }
  .hauptnav::before { content: "‹"; left: 0; justify-content: flex-start; padding-left: 2px; background: linear-gradient(to right, var(--mint) 35%, rgba(241,250,244,0)); opacity: 0; }
  .hauptnav::after { content: "›"; right: 0; justify-content: flex-end; padding-right: 2px; background: linear-gradient(to left, var(--mint) 35%, rgba(241,250,244,0)); }
  .hauptnav.kann-links::before { opacity: 1; }
  .hauptnav.am-ende::after { opacity: 0; }
}

@media (max-width: 520px) {
  .netz-tabelle thead { display: none; }
  .netz-tabelle td { display: block; }
  .netz-tabelle td:first-child { font-weight: 800; padding-bottom: 2px; }
  .netz-tabelle td + td { border-top: 0; padding-top: 4px; }
}