/* ==========================================================================
   MOBIL-KORREKTUREN - top3-ki.de
   Angelegt 20.08.2026.

   Diese Datei wird als letztes Stylesheet geladen und enthaelt ausschliesslich
   Regeln innerhalb von @media (max-width: 768px). Die Desktop-Ansicht kann
   sich dadurch nicht aendern: oberhalb der Grenze greift keine einzige Regel.

   Der Vorsatz #content ist noetig, wo die Seiteninhalte eigene <style>-Bloecke
   im Body mitbringen (Vergleich, ROI-Rechner, Blog). Die stehen spaeter im
   Dokument und gewaennen sonst bei gleicher Spezifitaet.
   ========================================================================== */

@media (max-width: 768px) {

/* ==========================================================================
   1. UEBERSTAENDE - Inhalte, die aus ihrem Kasten herausragen
   ========================================================================== */

/* --- Startseite: Anbieter-Logos in der Featured-Karte ---------------------
   Am 20.08.2026 durften die Logos hier umbrechen, weil drei nebeneinander
   294px brauchten und nur 220px da waren. Seit dem 22.09.2026 sind sie 26
   statt 30 Pixel hoch und brauchen 205px, siehe die Rechnung in home.css.
   Sie passen damit in eine Reihe und die Kachel ist 37 Pixel niedriger.

   Der Umbruch bleibt als Rueckfalloption erlaubt, greift aber erst unter
   etwa 350 Pixel Geraetebreite von selbst. Das Zentrieren und der
   Zeilenabstand sind weg: bei einer Reihe richten sich die Logos links aus
   wie der Text darueber. */
#content .dash-featured-right {
  flex-wrap: wrap;
}

/* --- Startseite: leerer Zeilenumbruch im Hero-Bild -----------------------
   Ein <br> hinter dem Bild erzeugt 20px toten Raum, den overflow: hidden
   wieder abschneidet. */
#content .t3k-hero-visual br {
  display: none;
}

/* --- Vergleich: Karten "Groessere Volumen" --------------------------------
   grid-template-columns: 1fr heisst minmax(auto, 1fr). Das auto ist die
   Mindestbreite des Inhalts, hier 300px. Die Spalte wuchs deshalb ueber die
   verfuegbare Breite hinaus. minmax(0, 1fr) erlaubt ihr zu schrumpfen. */
#content .vmehr .vmehr-grid,
#content .vmehr .vmehr-grid-drei {
  grid-template-columns: minmax(0, 1fr);
}
#content .vmehr-item {
  min-width: 0;
}
#content .vmehr-item > * {
  min-width: 0;
  max-width: 100%;
}

/* Am 19.08.2026 bekam .vmehr-fuss flex-wrap: nowrap, damit der Knopf in den
   Zusatzpaket-Karten neben der Fussnote bleibt. In den Volumen-Karten steht
   dort aber der Preis, und Preis plus Knopf brauchen mehr Platz als die
   Karte hat: der Knopf stand bis zu 60px heraus. Am Handy liegen die Karten
   ohnehin untereinander, gleiche Kartenhoehe spielt keine Rolle mehr.

   Mit flex-wrap allein entschied die Textlaenge, wie eine Karte aussieht.
   Am 22.09.2026 bei 360 Pixel nachgesehen: bei Fonio standen Preis und Knopf
   nebeneinander, bei den fuenf anderen untereinander, weil deren Fussnote
   laenger ist. Sechs gleiche Karten sahen dadurch unterschiedlich aus.

   Jetzt stehen sie ueberall untereinander und der Knopf nimmt die volle
   Breite. Das ist zugleich die groessere Antippflaeche: vorher war er 112
   Pixel breit, jetzt 238. */
#content .vmehr-fuss {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
#content .vmehr-btn {
  width: 100%;
}

/* --- Vergleich: Kasten "Zusatzanbieter ohne Listenpreise" -----------------
   Der Block bleibt bis 768px zweispaltig. In 253px Innenbreite passen zwei
   Kacheln nicht: sie standen 33px (375px Geraet) bis 88px (320px) heraus. */
#content .vgoai .vgoai-grid {
  grid-template-columns: minmax(0, 1fr);
}

/* Die feste Mindestbreite von 260px ist breiter als der Platz daneben. */
#content .vgoai .vgoai-foot p {
  min-width: 0;
}

/* Der Knopf steht auf white-space: nowrap und overflow: hidden. Bei 253px
   Platz und 273px Textbreite wurde die Beschriftung "Angebot mit -10%
   anfragen" abgeschnitten. */
#content .vgoai .btn-select {
  width: 100%;
  max-width: none;
  padding: 14px 16px;
  white-space: normal;
  line-height: 1.3;
}

/* --- Vergleich: doppelter Rand bei "Groessere Volumen" und GoAI -----------
   .page-wrapper bringt bereits 20px Rand mit. .vmehr hatte nochmal 20px,
   zusammen 40: beide Bloecke waren dadurch 280 statt 320 Pixel breit und
   standen sichtbar weiter innen als die Kartenansicht der Tabelle und die
   Abschnitte darunter, die keinen eigenen Rand haben. Gemessen am
   22.09.2026 bei 360 Pixel. Der Rand von .vgoai steht im Seiteninhalt und
   ist dort geaendert. */
#content .vmehr {
  padding-left: 0;
  padding-right: 0;
}

/* --- Vergleich: Methodik-Kacheln ------------------------------------------
   Ebenfalls zweispaltig, ab 360px Geraetebreite 50px Ueberstand. */
#content .vmeth .vmeth-grid {
  grid-template-columns: minmax(0, 1fr);
}

/* --- Vergleich: Merkmalzeilen in den Anbieterkarten -----------------------
   .mobile-feature-value steht auf flex-shrink: 0. Bei langen Werten wie
   "meiti-Nummer, eigene per Weiterleitung" ragt die Zeile 68px heraus. */
#content #ki-calc-root .mobile-feature-row {
  align-items: flex-start;
}
#content #ki-calc-root .mobile-feature-value {
  flex-shrink: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}


/* ==========================================================================
   2. SCHRIFTGROESSEN - nichts unter 11px, Lesetexte ab 12px
   ==========================================================================
   Zwei Stufen: durchgehende Lesetexte auf 12px, kurze Grossbuchstaben-
   Etiketten auf 11px. Unter 12px wertet Lighthouse Text als nicht lesbar.
   ========================================================================== */

/* --- Fusszeile (alle Seiten) --------------------------------------------- */
.t3k-footer-desc,
.t3k-footer-copy,
.t3k-footer-link,
.t3k-footer-region {
  font-size: 12px;
}

/* --- Gemeinsamer Hero (Vergleich, ROI-Rechner) --------------------------- */
.vh-hero-trust-item span:last-child {
  font-size: 11px;
}

/* --- Startseite ---------------------------------------------------------- */
#content .t3k-hero-trust-item span:last-child,
#content .t3k-hero-badge,
#content .t3k-hero-credit,
#content .badge-soon {
  font-size: 11px;
}

/* --- Blog ---------------------------------------------------------------- */
#content .blog-hero-trust-item span:last-child,
#content .blog-card-badge {
  font-size: 11px;
}

/* --- Vergleich: Rechner --------------------------------------------------- */
#content #ki-calc-root .calc-label,
#content #ki-calc-root .calc-label-text,
#content #ki-calc-root .calc-label-bezug,
#content #ki-calc-root .calc-label-zusatz {
  font-size: 12px;
}
#content #ki-calc-root .calc-tipp b,
#content #ki-calc-root .calc-tipp-hinweis,
#content #ki-calc-root .deal-hint-text,
#content #ki-calc-root .mobile-plan-card .price-period,
#content #ki-calc-root .mobile-plan-card .old {
  font-size: 11px;
}
/* Rabattbedingung unter dem Knopf, seit 26.09.2026 nicht mehr kleiner als
   der Text der Karten. */
#content #ki-calc-root .mobile-cta-disclaimer {
  font-size: 12px;
}

/* --- Vergleich: Bloecke unter der Tabelle -------------------------------- */
/* Die Hinweise (.t3k-tabelle-hinweise, .vmehr-fussnote) bleiben auch am
   Handy bei 13 Pixel, seit 28.09.2026. Der Absatz "Hinweis" unter den
   Kaesten, die Quelle darunter und der Absatz unter der FAQ sind entfallen. */
#content .vb3-branche-name {
  font-size: 12px;
}
#content .vmehr-fahne,
#content .vmehr-liste em,
#content .vb3-acc-grid h4,
#content .vgoai-badge,
#content .vmeth-label,
#content .vb3-badge,
#content .vb3-branche-hint,
#content .vb3-cta-pill {
  font-size: 11px;
}

/* --- ROI-Rechner --------------------------------------------------------- */
#content .roi3-result-label,
#content .roi3-calc-step-note {
  font-size: 12px;
}
#content .roi3-cta-pill {
  font-size: 11px;
}


/* ==========================================================================
   3. ANTIPP-FLAECHEN - mindestens 44x44 Pixel
   ==========================================================================
   Ausgenommen sind Verweise mitten im Fliesstext. Die lassen sich nicht
   vergroessern, ohne den Zeilenabstand zu zerreissen.
   ========================================================================== */

/* --- Menue-Knopf in der Kopfleiste --------------------------------------- */
.t3k-menu-toggle {
  width: 44px;
  height: 44px;
}

/* --- Fusszeilen-Links ---------------------------------------------------- */
.t3k-footer-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* --- Vergleich: Knopf in den Volumen-Karten ------------------------------ */
#content .vmehr-btn {
  min-height: 44px;
}

/* --- ROI-Rechner: Plus- und Minus-Knoepfe, Zahlenfeld -------------------- */
#content .roi-stepper-minus,
#content .roi-stepper-plus {
  min-width: 44px;
  min-height: 44px;
}
#content .roi-slider-number-input {
  min-height: 44px;
}

/* --- ROI-Rechner: Schieberegler ------------------------------------------
   Der Griff war 22px gross, auf der Vergleichsseite sind es seit dem
   13.08.2026 36px. Hier 34px, damit beide Rechner gleich aussehen.

   Der Satz, der bis zum 22.09.2026 hier stand, stimmte nicht: die
   Trefferflaeche sei unabhaengig vom Griff rund 28px hoch. Nachgemessen am
   22.09.2026 auf der Live-Seite waren es 8px, weil roi-rechner.html dem input
   genau diese Hoehe gab und Chrome sie uebernimmt. Der Regler ist dort jetzt
   44px hoch und durchsichtig, den Balken zeichnet die Laufschiene. Die
   Begruendung steht bei der Regel in roi-rechner.html.

   Der Ausgleich nach oben gehoert zur Griffgroesse: (8 minus 34) geteilt
   durch 2. Ohne ihn sitzt der groessere Griff nicht mehr mittig auf der
   Schiene. Firefox zentriert selbst und braucht ihn nicht. */
#content .roi3-range::-webkit-slider-thumb {
  width: 34px;
  height: 34px;
  margin-top: -13px;
}
#content .roi3-range::-moz-range-thumb {
  width: 34px;
  height: 34px;
}

/* ==========================================================================
   4. VERDECKT VOM FESTEN KOPF
   ========================================================================== */

/* --- Impressum und Datenschutz: Ueberschrift hinter dem Kopf --------------
   Beide Seiten haben keinen Hero, ihr Inhalt beginnt direkt mit der
   Ueberschrift. Die stand bei 30px, der Kopf reicht bis 77px: 47px verdeckt,
   also die komplette erste Zeile. Gelesen wurde "rklaerung" statt
   "Datenschutzerklaerung". layout.css gibt 48px fuer den Rechner, hier
   kommen die 16px dazu, die der hoehere Kopf am Handy braucht.
   Die Begruendung, warum der Ausgleich am body nicht wirkt, steht bei der
   Regel in layout.css. */
#content .entry-content > h1:first-child {
  margin-top: 64px;
  /* 43px sind fuer "Datenschutzerklaerung" zu gross: 20 Zeichen brauchen dort
     479px, Platz sind 315. Das Wort brach mitten drin um, zu lesen war
     "Datenschutze" und "rklaerung". Silbentrennung loest das nicht, obwohl
     lang="de" gesetzt ist: mit hyphens: auto blieb die Zeile 479px breit, der
     Browser trennt hier nicht. Gemessen am 12.09.2026 bei 315px Textbreite:
     43px und 32px ergeben beide zwei Zeilen mit Bruch im Wort, erst 28px passt
     in eine. Gilt fuer beide Rechtsseiten, damit sie gleich aussehen. */
  font-size: 28px;
  line-height: 1.2;
}


/* ==========================================================================
   5. WAAGRECHT SCROLLENDE TABELLEN
   ========================================================================== */

/* --- Blogartikel: Hinweis, dass die Tabelle seitlich weitergeht -----------
   Die Tabellen in den sieben Artikeln sind 340 bis 572px breit, Platz ist
   335px. Sie liegen in .blog-tabelle-wrap mit overflow-x: auto, waren also
   wischbar, sagten es aber nicht: die letzte Spalte brach mitten im Wort ab
   und der einzige Hinweis war ein duenner grauer Balken.

   Der Schatten unten kommt ohne JavaScript aus und zeigt sich von selbst nur
   dort, wo es etwas zu holen gibt. Der Trick sind vier Ebenen: zwei weisse
   Verlaeufe mit background-attachment: local scrollen mit dem Inhalt mit und
   decken den Schatten ab, sobald man am jeweiligen Ende angekommen ist. Die
   beiden dunklen Verlaeufe darunter stehen fest (scroll) und bleiben sichtbar,
   solange noch Inhalt kommt. Ist die Tabelle schmal genug, liegen beide weisse
   Ebenen von Anfang an uebereinander und man sieht gar nichts.

   Der Text daneben braucht JavaScript, weil CSS nicht pruefen kann, ob ein
   Kasten scrollbar ist. Er steht in header-custom.php und setzt die Klasse
   is-wischbar nur dort, wo scrollWidth wirklich groesser ist. Ohne die Klasse
   erscheint nichts: ein Hinweis auf einer Tabelle, die passt, waere schlimmer
   als keiner. */
#content .blog-tabelle-wrap {
  background:
    linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)) left center,
    linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)) right center,
    radial-gradient(farthest-side at 0 50%, rgba(15, 23, 42, .18), rgba(15, 23, 42, 0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(15, 23, 42, .18), rgba(15, 23, 42, 0)) right center;
  background-repeat: no-repeat;
  background-size: 34px 100%, 34px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
}

/* Der Hinweis sitzt ueber der Tabelle, damit er vor dem Lesen gesehen wird
   und nicht erst darunter, wenn der Blick schon weitergewandert ist. */
#content .blog-tabelle-wrap.is-wischbar::before {
  content: "Tabelle seitlich wischen";
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  line-height: 1.3;
  color: #64748b;
  /* Der Kasten scrollt, sein ::before wuerde mitscrollen und nach ein paar
     Pixeln aus dem Bild wandern. position: sticky haelt ihn am linken Rand. */
  position: sticky;
  left: 0;
}

}


/* ==========================================================================
   6. SEHR SCHMALE GERAETE (unter 375px)
   ==========================================================================
   Nur VITAS hat drei Tarifkarten. Drei nebeneinander brauchen 298px, ab
   375px Geraetebreite ist das da. Darunter nicht: bei 320px standen sie
   34px ueber die Zeile hinaus. Hier brechen sie deshalb auf zwei um, die
   dritte behaelt die halbe Breite und rutscht darunter.
   Fonio und Meiti haben zwei Karten und bleiben unveraendert.
   ========================================================================== */

@media (max-width: 374px) {

#content #ki-calc-root .mobile-plans-row {
  flex-wrap: wrap;
}
#content #ki-calc-root .mobile-plan-card {
  flex: 1 1 calc(50% - 5px);
  max-width: calc(50% - 5px);
}

}