/* festnetzinternet.at - Stylesheet, mobile first
   Kein Framework, keine externen Schriften: die Seite laedt nichts von
   fremden Servern ausser dem Vergleichsrechner selbst. */

:root {
  color-scheme: light;

  --ink:        #160d21;
  --ink-2:      #3c3350;
  --muted:      #6b6480;
  --line:       #e6e1f0;
  --line-2:     #f0ecf7;

  --bg:         #ffffff;
  --bg-soft:    #f5f2fb;
  --bg-dark:    #1c0f2b;

  --brand:      #6d28d9;
  --brand-dark: #4c1d95;
  --brand-soft: #f0e9ff;
  --ok:         #0b7a4b;
  --warn:       #a3540b;

  --radius:     14px;
  --radius-lg:  20px;
  --shadow:     0 1px 2px rgba(22,13,33,.05), 0 8px 24px -12px rgba(22,13,33,.18);

  --wrap:       1180px;
  --pad:        clamp(1.15rem, 4.5vw, 2.5rem);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "Noto Sans", sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--brand-dark); text-underline-offset: .18em; text-decoration-thickness: .07em; }
a:hover { color: var(--brand); }

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

h1, h2, h3 { line-height: 1.18; letter-spacing: -.02em; margin: 0 0 .5em; font-weight: 800; }
h2 { font-size: clamp(1.5rem, 4.6vw, 2.15rem); }
h3 { font-size: clamp(1.15rem, 3.2vw, 1.35rem); font-weight: 700; letter-spacing: -.012em; }
p  { margin: 0 0 1.15em; }
ul, ol { margin: 0 0 1.15em; padding-left: 1.3em; }
li { margin-bottom: .45em; }
strong { font-weight: 700; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: .8rem 1.2rem; border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; color: #fff; }

/* ---------------------------------------------------------------- Kopfzeile */
.top {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--line);
}
.top__in { display: flex; align-items: center; gap: 1rem; min-height: 58px; }

.brand {
  display: inline-flex; align-items: center; gap: .55rem;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.brand:hover { color: var(--ink); }
.brand__mark { flex: none; }
/* Ein einziges span: waeren Wortstamm und Endung eigene Flex-Kinder,
   zoege das gap der Marke einen Spalt mitten in den Domainnamen. */
.brand__wort { font-weight: 800; font-size: 1.06rem; letter-spacing: -.035em; }
.brand__leicht { opacity: .58; }
.brand__tld { color: var(--brand); }

/* ------------------------------------------------------------ Navigation */
.nav { margin-left: auto; min-width: 0; }
.nav ul {
  display: flex; gap: .35rem; margin: 0; padding: 0 0 0 .25rem; list-style: none;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.nav ul::-webkit-scrollbar { display: none; }
.nav a {
  display: block; padding: .38rem .62rem; border-radius: 999px;
  font-size: .875rem; font-weight: 600; color: var(--ink-2); text-decoration: none; white-space: nowrap;
}
.nav a:hover { background: var(--brand-soft); color: var(--brand-dark); }

/* Der Knopf existiert nur, wenn JavaScript laeuft. Ohne JavaScript bleibt die
   Navigation als scrollbare Zeile stehen - sie verschwindet also nie. */
.burger { display: none; }

@media (max-width: 39.99em) {
  .js .burger {
    display: inline-flex; align-items: center; gap: .5rem; margin-left: auto;
    padding: .42rem .78rem .42rem .68rem;
    background: transparent; border: 1px solid var(--line); border-radius: 999px;
    color: var(--ink); font: inherit; font-size: .84rem; font-weight: 700;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .js .burger:hover { background: var(--brand-soft); border-color: #d9cffa; }

  .burger__strich { position: relative; display: block; }
  .burger__strich,
  .burger__strich::before,
  .burger__strich::after {
    width: 17px; height: 2px; border-radius: 2px; background: currentColor;
    transition: transform .22s ease, background-color .1s ease;
  }
  .burger__strich::before,
  .burger__strich::after { content: ""; position: absolute; left: 0; display: block; }
  .burger__strich::before { top: -5.5px; }
  .burger__strich::after  { top:  5.5px; }
  .js .burger[aria-expanded="true"] .burger__strich { background: transparent; }
  .js .burger[aria-expanded="true"] .burger__strich::before { transform: translateY(5.5px) rotate(45deg); }
  .js .burger[aria-expanded="true"] .burger__strich::after  { transform: translateY(-5.5px) rotate(-45deg); }

  .js .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--bg); border-bottom: 1px solid var(--line);
    box-shadow: 0 22px 44px -26px rgba(22,13,33,.55);
    max-height: calc(100dvh - 58px); overflow-y: auto;
  }
  .js .nav[data-offen] { display: block; }
  .js .nav ul {
    flex-direction: column; gap: 0; overflow: visible;
    padding: .45rem var(--pad) 1.1rem;
  }
  .js .nav li + li { border-top: 1px solid var(--line-2); }
  .js .nav a {
    padding: .8rem .25rem; border-radius: 8px; font-size: 1rem;
    color: var(--ink); white-space: normal;
  }
}

/* -------------------------------------------------------------------- Hero */
.hero {
  position: relative; isolation: isolate;
  background: var(--bg-dark);
  color: #fff;
  padding-block: clamp(2.6rem, 9vw, 4.6rem);
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: url("../images/hero-bg.webp") center 32% / cover no-repeat;
  opacity: .85;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(85% 65% at 10% -5%, rgba(124,58,237,.62), transparent 60%),
    linear-gradient(178deg, rgba(20,10,32,.62) 0%, rgba(23,12,36,.86) 55%, rgba(28,15,43,.97) 100%);
}
.hero h1 {
  font-size: clamp(1.95rem, 6.6vw, 3.3rem);
  max-width: 17ch;
  margin-bottom: .55em;
  text-wrap: balance;
}
.hero__lead {
  font-size: clamp(1.03rem, 2.5vw, 1.22rem);
  color: #e4dcf2;
  max-width: 76ch;
  margin-bottom: 1.6rem;
}
.hero__lead strong { color: #fff; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #c9b6f5; margin-bottom: 1rem;
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: #8b5cf6; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.5rem; border-radius: 999px;
  background: #fff; color: var(--brand-dark);
  font-weight: 700; font-size: 1rem; text-decoration: none;
  border: 0; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.6);
}
.btn:hover { transform: translateY(-1px); color: var(--brand-dark); }
.btn svg { flex: none; }

.stats {
  display: grid; grid-template-columns: 1fr; gap: .1rem;
  margin-top: 2.4rem; padding: 0; list-style: none;
  border-top: 1px solid rgba(255,255,255,.16);
}
.stats li { margin: 0; padding: .95rem 0; border-bottom: 1px solid rgba(255,255,255,.16); }
.stats b {
  display: block; font-size: clamp(1.4rem, 4.6vw, 1.75rem); font-weight: 800;
  letter-spacing: -.03em; line-height: 1.1;
}
.stats span { display: block; font-size: .86rem; color: #bdb0d4; margin-top: .2rem; }
@media (min-width: 40em) {
  .stats { grid-template-columns: repeat(3, 1fr); gap: 0 1.6rem; }
}

/* ---------------------------------------------------------------- Abschnitte */
section { scroll-margin-top: 68px; }
.sec { padding-block: clamp(2.6rem, 7vw, 4.4rem); }
.sec--soft { background: var(--bg-soft); border-block: 1px solid var(--line); }
.sec__intro { max-width: none; }
.lead { font-size: 1.11rem; color: var(--ink-2); }

/* ------------------------------------------------------------ Vergleich */
/* Der Rechner bringt einen eigenen Rahmen in Tailwinds gray-200 mit. Die
   Sektion nimmt exakt diese Farbe an, sonst entsteht eine sichtbare Kante -
   und die ueberschuessige Rahmenhoehe faellt so ebenfalls nicht auf. */
.calc { background: #e5e7eb; border-block: 1px solid #d3d6dd; padding-block: clamp(1.8rem, 5vw, 3rem); }
.calc__head { margin-bottom: 1.4rem; }
.calc__frame { width: 100%; border: 0; display: block; background: transparent; }
.calc .lead, .calc h2 { color: #29303d; }
.calc h2 { color: var(--ink); }

/* Der Rechner meldet seine Hoehe nicht an das Elternfenster - die frueher
   eingebundenen Resize-Skripte von tarife.at existieren nicht mehr, und die
   heutige React-Fassung sendet keine Hoehe per postMessage. Die Werte unten
   stammen aus Messungen der eingebetteten Seite bei den tatsaechlichen
   Rahmenbreiten dieses Layouts:

     Rahmenbreite   gemessene Hoehe
        288 px          9.311 px
        338 px          8.038 px
        437 px          7.384 px
        699 px          7.148 px
        944 px          4.936 px

   Reserviert wird jeweils etwas mehr, weil die Hoehe mit der Zahl der
   angezeigten Tarife schwankt. Ueberschuss faellt nicht auf: unterhalb seines
   Inhalts ist der Rahmen durchsichtig und zeigt den Sektionshintergrund.
   scrolling="auto" faengt den seltenen Fall ab, dass die Liste laenger wird
   als die Reserve - dann scrollt der Rahmen intern, statt abzuschneiden. */
.calc__frame { height: 9500px; }
@media (min-width: 23em)   { .calc__frame { height: 8300px; } }
@media (min-width: 26.5em) { .calc__frame { height: 7800px; } }
@media (min-width: 30em)   { .calc__frame { height: 7600px; } }
@media (min-width: 48em)   { .calc__frame { height: 7400px; } }
@media (min-width: 64em)   { .calc__frame { height: 5200px; } }

.disclosure {
  margin-top: 1.1rem; font-size: .86rem; color: var(--muted);
  display: flex; gap: .55rem; align-items: flex-start;
}
.disclosure svg { flex: none; margin-top: .18rem; }

/* -------------------------------------------------------------------- Karten */
.grid { display: grid; gap: 1rem; grid-template-columns: 1fr; margin: 1.8rem 0 0; padding: 0; list-style: none; }
@media (min-width: 34em) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 48em) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 60em) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

.card {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.35rem 1.3rem; margin: 0; box-shadow: var(--shadow);
}
.card h3 { margin-bottom: .35rem; }
.card p:last-child { margin-bottom: 0; }
.card__tag {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--brand-dark); background: var(--brand-soft);
  padding: .22rem .55rem; border-radius: 999px; margin-bottom: .7rem;
}
.card__meta {
  margin: .9rem 0 0; padding: .8rem 0 0; border-top: 1px solid var(--line-2);
  font-size: .88rem; color: var(--muted); list-style: none;
}
.card__meta li { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 .3rem; }
.card__meta b { color: var(--ink); font-weight: 700; }

/* -------------------------------------------------------------------- Tabellen */
/* Schmale Displays: die Tabelle scrollt in ihrem Kasten. Die beiden
   Schattenkanten zeigen an, dass rechts noch etwas steht - auf Touchgeraeten
   ist die Scrollleiste unsichtbar, ohne Hinweis wirkt die Tabelle abgeschnitten. */
.table-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin: 1.6rem 0; border-radius: var(--radius); border: 1px solid var(--line);
  background:
    linear-gradient(to right, var(--bg) 40%, rgba(255,255,255,0)) left / 44px 100% no-repeat,
    linear-gradient(to left,  var(--bg) 40%, rgba(255,255,255,0)) right / 44px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%,   rgba(22,13,33,.15), rgba(22,13,33,0)) left / 13px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(22,13,33,.15), rgba(22,13,33,0)) right / 13px 100% no-repeat,
    var(--bg);
  background-attachment: local, local, scroll, scroll, local;
}
table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: .95rem; }
caption { text-align: left; padding: .9rem 1rem; font-size: .86rem; color: var(--muted); border-bottom: 1px solid var(--line); }
th, td { padding: .72rem 1rem; text-align: left; border-bottom: 1px solid var(--line-2); vertical-align: top; }
thead th { background: var(--bg-soft); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* -------------------------------------------------------------------- Sonstiges */
.figure { margin: 1.9rem 0; }
.figure img { border-radius: var(--radius-lg); width: 100%; max-width: 400px; }
.figure figcaption { font-size: .85rem; color: var(--muted); margin-top: .55rem; max-width: 400px; }

.split { display: grid; gap: clamp(1.4rem, 4vw, 2.6rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 52em) { .split { grid-template-columns: 1.35fr 1fr; } }

.note {
  border-left: 3px solid var(--brand); background: var(--brand-soft);
  padding: 1rem 1.15rem; border-radius: 0 var(--radius) var(--radius) 0; margin: 1.6rem 0;
}
.note p:last-child { margin-bottom: 0; }

.checks { list-style: none; padding: 0; margin: 1.4rem 0; }
.checks li { position: relative; padding-left: 1.85rem; margin-bottom: .7rem; }
.checks li::before {
  content: ""; position: absolute; left: 0; top: .48em;
  width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / .72rem no-repeat;
}

details {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); padding: 0 1.15rem; margin-bottom: .7rem;
}
details[open] { box-shadow: var(--shadow); }
summary {
  cursor: pointer; font-weight: 700; padding: 1rem 2rem 1rem 0; list-style: none;
  position: relative; font-size: 1.02rem;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: ""; position: absolute; right: 0; top: 1.35rem; width: .7rem; height: .7rem;
  border-right: 2.2px solid var(--brand); border-bottom: 2.2px solid var(--brand);
  transform: rotate(45deg); transition: transform .2s ease;
}
details[open] summary::after { transform: rotate(-135deg); top: 1.5rem; }
details > :last-child { padding-bottom: .35rem; }

/* -------------------------------------------------------------------- Fusszeile */
.foot { background: var(--bg-dark); color: #cfc4e0; padding-block: clamp(2.2rem, 6vw, 3.2rem); font-size: .93rem; }
.foot a { color: #fff; }
.foot a:hover { color: #d8c8ff; }
.foot h2 { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: #a394c2; margin-bottom: .8rem; font-weight: 700; }
.foot__grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 44em) { .foot__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot li { margin-bottom: .45rem; }
.foot__bottom {
  margin-top: 2.2rem; padding-top: 1.3rem; border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; align-items: center;
  font-size: .86rem; color: #9d8fbb;
}

/* -------------------------------------------------------------------- Rechtstexte */
.legal { padding-block: clamp(2.2rem, 6vw, 3.4rem); }
.legal h1 { font-size: clamp(1.7rem, 5vw, 2.4rem); }
.legal h2 { font-size: clamp(1.15rem, 3.2vw, 1.35rem); margin-top: 2rem; }
.legal address { font-style: normal; }
.legal .wrap { max-width: 74ch; }