/*
Theme Name: TechPott
Theme URI: https://techpott.net
Author: As-Sist für Riza Aslan
Description: Block-Theme für TechPott.net — Technik aus dem Pott. Ohne Geschwafel. Gebaut ohne Fremdbibliotheken: keine Frameworks, keine externen Schriften, kein JavaScript aus dem Netz. Dunkel als Normalfall, Bento-Raster auf der Startseite, Kernaussage-Box über jedem Artikel, Anzeigen im Lesefluss statt am Rand.
Version: 1.2.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: techpott
Tags: blog, one-column, block-patterns, full-site-editing, custom-colors, custom-logo, wide-blocks, accessibility-ready
*/

/* ==========================================================================
   Helle Fassung
   Dunkel ist der Normalfall (über vier Fünftel der Smartphone-Nutzer haben
   mindestens eine App dunkel, bei technikaffinem Publikum mehr). Die helle
   Fassung folgt der Systemeinstellung und ist über den Schalter im Kopf
   umstellbar. Die Leitfarbe wird dabei dunkler — #FF4D14 reißt auf Weiß die
   Kontrastgrenze.
   ========================================================================== */

:root {
  --tp-rand: 1px solid var(--wp--preset--color--kohle-rand);
  --tp-radius: 18px;
  --tp-radius-klein: 12px;
}

@media (prefers-color-scheme: light) {
  html:not([data-modus="dunkel"]) {
    --wp--preset--color--kohle: #FAF9F7;
    --wp--preset--color--kohle-karte: #FFFFFF;
    --wp--preset--color--kohle-hoch: #F2F0EC;
    --wp--preset--color--kohle-rand: #E4E1DC;
    --wp--preset--color--licht: #16161A;
    --wp--preset--color--nebel: #62626E;
    --wp--preset--color--schmelze: #D93A08;
    --wp--preset--color--schmelze-hell: #C2280B;
    --wp--preset--color--platine: #0E7C93;
  }
}

html[data-modus="hell"] {
  --wp--preset--color--kohle: #FAF9F7;
  --wp--preset--color--kohle-karte: #FFFFFF;
  --wp--preset--color--kohle-hoch: #F2F0EC;
  --wp--preset--color--kohle-rand: #E4E1DC;
  --wp--preset--color--licht: #16161A;
  --wp--preset--color--nebel: #62626E;
  --wp--preset--color--schmelze: #D93A08;
  --wp--preset--color--schmelze-hell: #C2280B;
  --wp--preset--color--platine: #0E7C93;
}

body {
  background-color: var(--wp--preset--color--kohle);
  color: var(--wp--preset--color--licht);
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   Kopfbereich
   ========================================================================== */

.tp-kopf {
  position: relative;
  border-bottom: var(--tp-rand);
  background: var(--wp--preset--color--kohle);
}

.tp-marke { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.tp-marke:hover { text-decoration: none; }
.tp-marke svg { flex: none; display: block; }
.tp-marke__wort {
  font-family: var(--wp--preset--font-family--kopf);
  font-weight: 700; font-size: 1.45rem; letter-spacing: -.02em;
  color: var(--wp--preset--color--licht); line-height: 1;
}
.tp-marke__wort b {
  font-weight: 700;
  background: var(--wp--preset--gradient--signal);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.tp-navi { display: flex; gap: 1.1rem; flex-wrap: wrap; align-items: center; }
.tp-navi a {
  font-family: var(--wp--preset--font-family--kopf);
  font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--wp--preset--color--nebel); text-decoration: none;
}
.tp-navi a:hover, .tp-navi a[aria-current] { color: var(--wp--preset--color--schmelze-hell); }

.tp-schalter {
  background: transparent; border: var(--tp-rand); color: var(--wp--preset--color--nebel);
  border-radius: 999px; padding: .4rem .8rem; cursor: pointer; line-height: 1;
  font-family: var(--wp--preset--font-family--kopf); font-size: .76rem; font-weight: 700;
}
.tp-schalter:hover { color: var(--wp--preset--color--licht); border-color: var(--wp--preset--color--schmelze); }

/* ==========================================================================
   Bento-Raster für die Startseite
   Ungleiche Kacheln statt Zwölfspalter: erzeugt messbar mehr Scrolltiefe und
   löst nebenbei, dass jeder Beitrag mehrfach auf der Startseite steht.
   ========================================================================== */

.tp-bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; grid-auto-flow: dense; }
.tp-bento > * { min-width: 0; }
.tp-bento .wp-block-post { margin: 0; }

/* Erster Beitrag: Aufmacher über die volle Breite */
.tp-bento .wp-block-post:nth-child(1) { grid-column: span 6; }
/* Danach zwei halbe, dann Drittel */
.tp-bento .wp-block-post:nth-child(2),
.tp-bento .wp-block-post:nth-child(3) { grid-column: span 3; }
.tp-bento .wp-block-post:nth-child(n+4) { grid-column: span 2; }

@media (max-width: 900px) {
  .tp-bento { grid-template-columns: repeat(4, 1fr); }
  .tp-bento .wp-block-post:nth-child(1) { grid-column: span 4; }
  .tp-bento .wp-block-post:nth-child(2),
  .tp-bento .wp-block-post:nth-child(3) { grid-column: span 2; }
  .tp-bento .wp-block-post:nth-child(n+4) { grid-column: span 2; }
}
@media (max-width: 600px) {
  .tp-bento { grid-template-columns: 1fr; }
  .tp-bento .wp-block-post { grid-column: span 1 !important; }
}

/* Kachel */
.tp-karte {
  background: var(--wp--preset--color--kohle-karte);
  border: var(--tp-rand);
  border-radius: var(--tp-radius);
  overflow: hidden;
  height: 100%;
  display: flex; flex-direction: column;
  transition: border-color .25s ease, transform .25s ease;
}
.tp-karte:hover {
  border-color: color-mix(in srgb, var(--wp--preset--color--schmelze) 55%, var(--wp--preset--color--kohle-rand));
  transform: translateY(-3px);
}
.tp-karte .wp-block-post-featured-image { margin: 0; }
.tp-karte .wp-block-post-featured-image img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.tp-karte__inhalt { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.tp-karte__inhalt .wp-block-post-title { margin: 0; font-size: 1.16rem; line-height: 1.25; }

/* Der Aufmacher bekommt mehr Gewicht — deutliche Größensprünge statt
   gleichförmiger Kacheln. */
.tp-bento .wp-block-post:nth-child(1) .tp-karte { flex-direction: row; }
.tp-bento .wp-block-post:nth-child(1) .wp-block-post-featured-image { flex: 0 0 46%; }
.tp-bento .wp-block-post:nth-child(1) .tp-karte__inhalt { padding: 1.8rem; justify-content: center; }
.tp-bento .wp-block-post:nth-child(1) .wp-block-post-title { font-size: clamp(1.5rem, 3vw, 2.1rem); }
@media (max-width: 760px) {
  .tp-bento .wp-block-post:nth-child(1) .tp-karte { flex-direction: column; }
  .tp-bento .wp-block-post:nth-child(1) .wp-block-post-featured-image { flex: none; }
  .tp-bento .wp-block-post:nth-child(1) .tp-karte__inhalt { padding: 1.2rem; }
}

/* Kein Beitragsbild? Dann wird die Kachel eine reine Textkarte.
   WordPress legt den Bildcontainer auch ohne Bild an — ohne diese Regel
   klafft oben eine leere Fläche und das Raster zerfällt. */
.tp-karte .wp-block-post-featured-image:not(:has(img)) { display: none; }
.tp-karte:not(:has(img)) .tp-karte__inhalt { justify-content: center; padding-block: 1.6rem; }

/* Textkarten bekommen eine feine Andeutung des Verlaufs an der Oberkante,
   damit sie neben den Bildkacheln nicht nackt wirken. */
.tp-karte:not(:has(img))::before {
  content: ""; display: block; height: 3px;
  background: var(--wp--preset--gradient--signal);
}

/* ==========================================================================
   Kernaussage — "Was du wissen musst"
   79 Prozent der Leser überfliegen, die Entscheidung über Bleiben oder Gehen
   fällt meist in unter 15 Sekunden. Dieser Kasten beantwortet die Frage des
   Überfliegers, bevor der erste Absatz beginnt.
   ========================================================================== */

.tp-kern {
  border-left: 3px solid var(--wp--preset--color--schmelze);
  background: color-mix(in srgb, var(--wp--preset--color--schmelze) 8%, transparent);
  border-radius: 0 var(--tp-radius-klein) var(--tp-radius-klein) 0;
  padding: 1.1rem 1.3rem;
  margin: 1.6rem 0;
}
.tp-kern__titel {
  display: block;
  font-family: var(--wp--preset--font-family--kopf);
  font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--wp--preset--color--schmelze-hell);
  margin-bottom: .55rem;
}
.tp-kern ul { margin: 0; padding-left: 1.15rem; }
.tp-kern li { margin-bottom: .32rem; }
.tp-kern li:last-child { margin-bottom: 0; }

/* ==========================================================================
   Anzeigen
   Banner erreichen Klickraten um 0,35 Prozent, über 80 Prozent der Nutzer
   übergehen sie. Eingebettete Formate im Lesefluss bekommen mehr und längere
   Aufmerksamkeit. Deshalb: im Text statt in der Spalte, gleiche Kartenform,
   klar gekennzeichnet — und mit reservierter Höhe, damit beim Nachladen
   nichts springt (Layout-Versatz kostet Ranking).
   ========================================================================== */

.tp-anzeige {
  margin: 2rem 0;
  border: 1px dashed color-mix(in srgb, var(--wp--preset--color--nebel) 45%, transparent);
  border-radius: var(--tp-radius-klein);
  background: var(--wp--preset--color--kohle-hoch);
  padding: 1rem;
  min-height: 280px;              /* Platz vorher reservieren: kein Sprung */
  display: flex; flex-direction: column; gap: .6rem;
}
.tp-anzeige__etikett {
  font-family: var(--wp--preset--font-family--kopf);
  font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--wp--preset--color--nebel);
}
.tp-anzeige__flaeche { flex: 1; display: grid; place-items: center; }
.tp-anzeige iframe, .tp-anzeige img { max-width: 100%; height: auto; }

/* ==========================================================================
   Artikel
   ========================================================================== */

.tp-artikel-kopf { margin-bottom: var(--wp--preset--spacing--40); }
.tp-artikel-kopf .wp-block-post-title { margin: .4rem 0 .6rem; }
.tp-artikel-kopf .wp-block-post-terms { margin-bottom: .2rem; }
.tp-meta {
  display: flex; gap: .7rem; flex-wrap: wrap; align-items: center;
  font-size: var(--wp--preset--font-size--klein);
  color: var(--wp--preset--color--nebel);
}
.tp-meta__punkt { opacity: .5; }

.tp-inhalt > * + * { margin-top: 1.15em; }
.tp-inhalt h2 { margin-top: 2.2em; }
.tp-inhalt h3 { margin-top: 1.8em; }
.tp-inhalt img { border-radius: var(--tp-radius-klein); height: auto; }
.tp-inhalt figure { margin: 1.8rem 0; }

/* Eingebettete Videos behalten ihr Seitenverhältnis, ohne dass etwas springt */
.tp-inhalt .wp-block-embed__wrapper { position: relative; }
.tp-inhalt iframe[src*="youtube"], .tp-inhalt iframe[src*="youtu.be"] {
  width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--tp-radius-klein);
}

.tp-hinweis {
  font-size: var(--wp--preset--font-size--klein);
  color: var(--wp--preset--color--nebel);
}

/* ==========================================================================
   Fußbereich
   ========================================================================== */

.tp-fuss {
  border-top: var(--tp-rand);
  background: var(--wp--preset--color--kohle);
}
.tp-fuss a { color: var(--wp--preset--color--nebel); text-decoration: none; }
.tp-fuss a:hover { color: var(--wp--preset--color--schmelze-hell); text-decoration: underline; }

/* ==========================================================================
   Barrierefreiheit und Bewegung
   ========================================================================== */

.tp-nur-vorlesen {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
:where(a, button):focus-visible {
  outline: 2px solid var(--wp--preset--color--gold);
  outline-offset: 2px; border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .tp-karte:hover { transform: none; }
}

/* ==========================================================================
   Mega-Menü
   Drei unterschiedlich gebaute Felder statt gleichförmiger Listen: Rubriken
   als Kacheln mit Beschreibung, neueste Beiträge als Mini-Karten mit Bild,
   Schlagwörter als Chips. Aufgeklappt wird per CSS — das Skript ergänzt nur
   Tippen und Tastatur.
   ========================================================================== */

.tp-mega { position: relative; }
.tp-mega__leiste {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: .3rem; flex-wrap: wrap;
}
.tp-mega__punkt { position: relative; }

.tp-mega__start, .tp-mega__knopf {
  display: inline-flex; align-items: center; gap: .35rem;
  background: transparent; border: 0; cursor: pointer;
  padding: .5rem .7rem; border-radius: 10px;
  font-family: var(--wp--preset--font-family--kopf);
  font-size: .82rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--wp--preset--color--nebel); text-decoration: none; line-height: 1;
}
.tp-mega__start:hover, .tp-mega__knopf:hover,
.tp-mega__punkt:focus-within > .tp-mega__knopf {
  color: var(--wp--preset--color--licht);
  background: var(--wp--preset--color--kohle-hoch);
  text-decoration: none;
}
.tp-mega__pfeil {
  width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; opacity: .7; transition: transform .2s ease;
}
.tp-mega__punkt--klapp:hover .tp-mega__pfeil,
.tp-mega__punkt--klapp:focus-within .tp-mega__pfeil { transform: rotate(180deg); }

/* Das Feld selbst */
.tp-mega__panel {
  position: absolute; top: calc(100% + .5rem); left: 0; z-index: 60;
  min-width: 620px;
  background: var(--wp--preset--color--kohle-karte);
  border: var(--tp-rand); border-radius: var(--tp-radius);
  box-shadow: 0 18px 48px rgba(0,0,0,.45);
  padding: 1.3rem 1.4rem;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.tp-mega__panel--schmal { min-width: 340px; }
.tp-mega__punkt--klapp:hover > .tp-mega__panel,
.tp-mega__punkt--klapp:focus-within > .tp-mega__panel,
.tp-mega__punkt--klapp[data-offen] > .tp-mega__panel {
  opacity: 1; visibility: visible; transform: translateY(0);
}
/* Eine feine Kante in der Markenfarbe an der Oberseite */
.tp-mega__panel::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  border-radius: var(--tp-radius) var(--tp-radius) 0 0;
  background: var(--wp--preset--gradient--signal);
}

.tp-mega__spalten { display: grid; grid-template-columns: 1.25fr 1fr; gap: 1.6rem; }
.tp-mega__titel {
  display: block; font-family: var(--wp--preset--font-family--kopf);
  font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--wp--preset--color--nebel); margin-bottom: .8rem;
}

/* Rubriken als Kacheln */
.tp-mega__rubriken { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.tp-mega__rubriken a {
  display: block; padding: .6rem .7rem; border-radius: 12px;
  text-decoration: none; border: 1px solid transparent; transition: background .18s, border-color .18s;
}
.tp-mega__rubriken a:hover {
  background: var(--wp--preset--color--kohle-hoch);
  border-color: color-mix(in srgb, var(--wp--preset--color--schmelze) 40%, transparent);
  text-decoration: none;
}
.tp-mega__rubrik-name {
  display: flex; align-items: baseline; gap: .5rem;
  font-family: var(--wp--preset--font-family--kopf); font-weight: 700; font-size: .98rem;
  color: var(--wp--preset--color--licht);
}
.tp-mega__rubrik-name em {
  font-style: normal; font-size: .7rem; color: var(--wp--preset--color--nebel);
  border: 1px solid var(--wp--preset--color--kohle-rand); border-radius: 999px; padding: 0 .4rem;
}
.tp-mega__rubrik-text {
  display: block; font-size: .82rem; line-height: 1.45; color: var(--wp--preset--color--nebel);
  margin-top: .15rem;
}

/* Neueste Beiträge als Mini-Karten */
.tp-mega__neueste { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.tp-mega__neueste a {
  display: flex; gap: .7rem; align-items: center; text-decoration: none;
  padding: .35rem; border-radius: 12px; transition: background .18s;
}
.tp-mega__neueste a:hover { background: var(--wp--preset--color--kohle-hoch); text-decoration: none; }
.tp-mega__bild {
  flex: none; width: 58px; height: 44px; border-radius: 9px; overflow: hidden;
  background: var(--wp--preset--color--kohle-hoch); display: block;
}
.tp-mega__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tp-mega__bild--leer { background: var(--wp--preset--gradient--signal); opacity: .5; }
.tp-mega__neu-titel {
  display: block; font-size: .87rem; line-height: 1.3; color: var(--wp--preset--color--licht);
  font-weight: 500;
}
.tp-mega__neu-datum { display: block; font-size: .74rem; color: var(--wp--preset--color--nebel); margin-top: .12rem; }

/* Schlagwörter als Chips */
.tp-mega__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.tp-mega__chips a {
  display: inline-flex; align-items: baseline; gap: .3rem;
  padding: .3rem .65rem; border-radius: 999px;
  border: 1px solid var(--wp--preset--color--kohle-rand);
  background: var(--wp--preset--color--kohle-hoch);
  font-size: .8rem; color: var(--wp--preset--color--licht); text-decoration: none;
  transition: border-color .18s, color .18s;
}
.tp-mega__chips a:hover {
  border-color: var(--wp--preset--color--schmelze);
  color: var(--wp--preset--color--schmelze-hell); text-decoration: none;
}
.tp-mega__chips em { font-style: normal; font-size: .68rem; color: var(--wp--preset--color--nebel); }
.tp-mega__fussnote {
  margin: 1rem 0 0; font-size: .78rem; line-height: 1.5; color: var(--wp--preset--color--nebel);
  border-top: var(--tp-rand); padding-top: .7rem;
}

.tp-mega__seiten { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.tp-mega__seiten a {
  display: block; padding: .45rem .6rem; border-radius: 9px;
  font-size: .9rem; color: var(--wp--preset--color--licht); text-decoration: none;
}
.tp-mega__seiten a:hover { background: var(--wp--preset--color--kohle-hoch); text-decoration: none; }

/* Suche */
.tp-mega__suche input[type=search] {
  background: var(--wp--preset--color--kohle-hoch);
  border: var(--tp-rand); border-radius: 999px;
  padding: .45rem .9rem; font-size: .84rem; width: 9rem;
  color: var(--wp--preset--color--licht); transition: width .2s ease, border-color .2s;
}
.tp-mega__suche input[type=search]:focus {
  width: 13rem; outline: none; border-color: var(--wp--preset--color--schmelze);
}

/* Burger nur auf schmalen Schirmen */
.tp-mega__burger { display: none; }

@media (max-width: 1100px) {
  .tp-mega__panel { min-width: min(92vw, 620px); }
  .tp-mega__spalten { grid-template-columns: 1fr; gap: 1.1rem; }
}

@media (max-width: 860px) {
  .tp-mega__burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 10px;
    background: transparent; border: var(--tp-rand); cursor: pointer;
    color: var(--wp--preset--color--licht);
  }
  .tp-mega__striche, .tp-mega__striche::before, .tp-mega__striche::after {
    display: block; width: 17px; height: 2px; background: currentColor; border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
  }
  .tp-mega__striche { position: relative; }
  .tp-mega__striche::before, .tp-mega__striche::after { content: ""; position: absolute; left: 0; }
  .tp-mega__striche::before { top: -5px; }
  .tp-mega__striche::after  { top: 5px; }
  .tp-mega__burger[aria-expanded="true"] .tp-mega__striche { background: transparent; }
  .tp-mega__burger[aria-expanded="true"] .tp-mega__striche::before { transform: translateY(5px) rotate(45deg); }
  .tp-mega__burger[aria-expanded="true"] .tp-mega__striche::after  { transform: translateY(-5px) rotate(-45deg); }

  .tp-mega__leiste {
    display: none; position: absolute; top: calc(100% + .7rem); right: 0; left: auto;
    flex-direction: column; align-items: stretch; gap: .1rem; z-index: 60;
    min-width: min(88vw, 360px);
    background: var(--wp--preset--color--kohle-karte);
    border: var(--tp-rand); border-radius: var(--tp-radius);
    box-shadow: 0 18px 48px rgba(0,0,0,.45); padding: .7rem;
  }
  .tp-mega__leiste[data-offen] { display: flex; }
  .tp-mega__panel {
    position: static; min-width: 0; box-shadow: none; border: 0; padding: .4rem .2rem .8rem;
    opacity: 1; visibility: visible; transform: none; display: none; background: transparent;
  }
  .tp-mega__panel::before { display: none; }
  .tp-mega__punkt--klapp[data-offen] > .tp-mega__panel { display: block; }
  .tp-mega__punkt--klapp:hover > .tp-mega__panel { display: none; }
  .tp-mega__punkt--klapp[data-offen]:hover > .tp-mega__panel { display: block; }
  .tp-mega__knopf, .tp-mega__start { width: 100%; justify-content: space-between; }
  .tp-mega__suche input[type=search] { width: 100%; }
  .tp-mega__suche input[type=search]:focus { width: 100%; }
}

/* Der Kopf läuft auf voller Breite, damit das Mega-Menü neben der Wortmarke
   Platz hat. Erst unterhalb der Menü-Umschaltgrenze darf er umbrechen. */
.tp-kopf .wp-block-group.alignwide { gap: 1.2rem; }
@media (max-width: 860px) {
  .tp-kopf .wp-block-group.alignwide { flex-wrap: wrap !important; }
}

/* ==========================================================================
   Einstieg auf der Startseite

   Eine Startseite braucht eine H1, die sagt, worum es geht - für Leser wie
   für Suchmaschinen. Sie steht bewusst leise über dem Raster: die Kacheln
   sollen die Bühne behalten.
   ========================================================================== */

.tp-einstieg {
  margin-bottom: var(--wp--preset--spacing--40);
}

.tp-einstieg__titel {
  margin: 0;
  max-width: 24ch;
  line-height: 1.12;
  letter-spacing: -0.02em;
  background: linear-gradient(120deg,
      var(--wp--preset--color--licht) 0%,
      var(--wp--preset--color--licht) 46%,
      var(--wp--preset--color--schmelze) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tp-einstieg__zeile {
  margin: 0.5rem 0 0;
  color: var(--wp--preset--color--nebel);
}

@media (max-width: 600px) {
  .tp-einstieg__titel {
    max-width: none;
  }
}