/* Staging-only Overrides (nur _neu/). Live style.css bleibt unberuehrt. */

/* App-Views (Generator/Warenkorb/Kasse/Konto): breiter, selbst-zentrierter Container
   statt des schmalen Grid-Content-Bereichs, damit die aig-Insel (Flow) voll passt. */
.tai-appview {
    max-width: 1240px;
    margin: 0 auto;
    padding: 24px 16px 48px;
    box-sizing: border-box;
}
.tai-appview ai-generator {
    display: block;
    width: 100%;
}

/* App-View: der aig-Tour-Hint + Chatbot sollen frei stehen (kein Overflow der Seite). */
body.app-view { overflow-x: clip; }

/* ===== Stimmen-/Musik-Katalog (dynamisch, De-Joomla) ===== */
.tai-voicegrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; }
.tai-voicecard { background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:16px; box-shadow:0 1px 3px rgba(0,19,87,.06); }
.tai-voicecard__head { display:flex; align-items:center; gap:8px; margin-bottom:2px; }
.tai-voicecard__name { font-weight:700; color:#001357; font-size:17px; }
.tai-voicecard__new { background:#27D4BD; color:#001357; font-size:11px; font-weight:700; letter-spacing:.04em; padding:2px 7px; border-radius:999px; }
.tai-voicecard__gender { display:block; color:#64748b; font-size:13px; margin-bottom:10px; }
.tai-voicecard__audio { width:100%; height:38px; }
.tai-musiccat { margin-bottom:28px; }
.tai-musiccat__title { color:#001357; font-size:19px; font-weight:700; margin:0 0 12px; padding-bottom:6px; border-bottom:2px solid #27D4BD; }
.tai-tracklist { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:12px; }
.tai-track { display:flex; flex-direction:column; gap:6px; background:#fff; border:1px solid #e2e8f0; border-radius:10px; padding:12px 14px; }
.tai-track__title { font-weight:600; color:#0f172a; font-size:14px; }
.tai-track__audio { width:100%; height:34px; }
@media (max-width:600px){ .tai-voicegrid,.tai-tracklist{ grid-template-columns:1fr; } }

/* Musik-Buttons: Icon exakt horizontal zentrieren. Das SVG hat ein margin-right
   (Gap zum ausgeblendeten .lbl-Label); im flex-zentrierten Kreis verschiebt das
   das Icon ~1,5px nach links. margin=0 -> Icon dead-center. Nur _neu (kein Live-CSS). */
.seite-musik .musicpool .wrapper-musik ul li span span.listen svg,
.seite-musik .musicpool .wrapper-musik ul li span span.use svg,
.seite-musik .musicpool .wrapper-musik ul li span a.buy svg {
  margin: 0 !important;
}

/* ===== Konto: Personen-Icon + Vorname (Login-Status) =====
   Bewusst OHNE reservierte Fixbreite: der Bereich passt sich dem Inhalt an und bleibt
   buendig rechts (keine leere Lueckenspur). Ausgeloggt = nur das Icon. Der Vorname wird
   per Cache VOR dem Paint vorbefuellt (head.php) -> bei Seitenwechseln KEIN Shift; die
   Nav rueckt nur EINMALIG beim tatsaechlichen Login/Logout minimal. Icon-Mint-Akzent bei Login. */
.nav-item.tai-account-li{ display:flex!important; align-items:center; }
/* Konto-<a>: Icon/Pille vertikal auf die Cart-Icon-Mitte bringen. inline-flex + align-items:center
   + padding:0 zentriert den 32px-<i> in der Zeile UND haelt (mit i.user margin:0) die <a>-Breite
   bei 16px -> Icon-Mitte == Cart-Icon-Mitte, KEINE Menue-Verschiebung. Empirisch (CDP) auf beiden
   Achsen belegt: userIcon-mid == cart-mid, aW=16, Generator-Menue left unveraendert. Der
   fruehere Versuch, das ausgeloggt wegzulassen (v16), liess das Icon 8px zu hoch stehen. */
.nav-item.tai-account-li a.icon.tai-account{ display:inline-flex; align-items:center; padding:0!important; }
/* i.user NICHT anfassen: das Template-margin-left:-1rem zieht den 32px-<i> in die inline-flex-<a>
   -> <a>-Breite bleibt 16px (kein Menue-Shift). margin:0 wuerde ihn auf 32px aufblaehen. */
/* Avatar + Name versteckt solange ausgeloggt (gleiche Spezifitaet-Basis) */
.tai-account-li .tai-ava, .tai-account-li .tai-fname{ display:none; }
/* EINGELOGGT: dezente Pille mit Initialen-Avatar (Mint-Verlauf) + Vorname, Personen-Icon aus
   (i.user display:none -> dessen Template-Margin ist hier irrelevant). Vorname per Cache VOR
   dem Paint -> Pille steht beim Seitenaufbau -> kein Menue-Shift. */
.nav-item.tai-account-li a.icon.tai-account.tai-account--in{
  display:inline-flex; align-items:center;
  gap:9px; padding:4px 15px 4px 4px !important;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18); border-radius:999px;
  /* naeher an den Warenkorb wie die Alt-Seite (Avatar ~16px vom Cart) -> -21px. */
  margin-left:-21px !important;
}
/* Personen-Icon bei Login ausblenden — volle Template-Spezifitaet, sonst gewinnt
   die Basis-Regel .nav1 ... a.icon i{display:inline-flex} und Icon+Avatar zeigen beide. */
.wrapper_global .content.navigation .modul .nav1 ul li a.icon.tai-account--in i.user{ display:none!important; }
.tai-account-li .tai-account--in .tai-ava{
  display:grid; place-items:center; width:28px; height:28px; border-radius:50%;
  font-size:11px; font-weight:800; letter-spacing:.01em; color:#001357;
  background:linear-gradient(135deg,#3ee9d0,#27D4BD); flex:none;
}
.tai-account-li .tai-account--in .tai-fname{
  display:inline-block; color:#fff; font-size:14px; font-weight:600; line-height:1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px;
}

/* ===== Kontakt-Formular: Absenden-Button + Datenschutz-Checkbox 1:1 zur Alt-Seite =====
   Die Alt-Seite nutzt <span class="button-formularfelder"> (Vue-@click) + ein <i> als
   FontAwesome-Checkbox. Diese Shell nutzt ein echtes <button type=submit> + native Checkbox
   (progressive enhancement, server-POST). Das Template stylt aber NUR span/a.button-formularfelder
   (element-spezifisch) -> das <button> bekommt Default-Optik. Hier: die Alt-Optik auf das
   <button> und die native Checkbox spiegeln (SSOT-Werte aus dem Template uebernommen). */
.seite-kontakt .wrapper_formular button.button-formularfelder{
  grid-column:2; width:15rem; display:inline-block; margin:0; cursor:pointer;
  padding:0.6rem 0.8rem 0.5rem 0.8rem; font-family:"Geist"; font-weight:600; font-size:0.9rem;
  text-transform:none; letter-spacing:0.02rem; color:#fff;
  border:1px solid #ff0046; border-radius:999px;
  background:linear-gradient(180deg,#ff2e63 0%,#ff0046 100%);
  box-shadow:0 10px 24px rgba(255,0,70,.18);
}
.seite-kontakt .wrapper_formular button.button-formularfelder:hover{
  background:linear-gradient(180deg,#ff4373 0%,#ff1a57 100%); color:#fff;
}
/* native Checkbox als FontAwesome-Box wie das Alt-<i> (leer -> Haken bei :checked) */
.seite-kontakt .wrapper_formular span.datenschutz input[type="checkbox"]{
  -webkit-appearance:none; appearance:none; width:1rem; height:1rem; margin:0 0.3rem 0 0;
  padding:0; border:0; background:none; cursor:pointer; vertical-align:-2px; box-shadow:none;
}
.seite-kontakt .wrapper_formular span.datenschutz input[type="checkbox"]::before{
  content:"\f0c8"; font-family:"FontAwesome"; font-weight:300; font-size:1rem;
  color:var(--fliesstext); line-height:1;
}
.seite-kontakt .wrapper_formular span.datenschutz input[type="checkbox"]:checked::before{
  content:"\f14a"; font-weight:900;
}
/* Das <label> (fuer die native Checkbox) erbt sonst .wrapper_formular label{line-height:2.7rem}
   (43px) -> Datenschutz-Zeile 43px statt 16px -> Button/Karten 27px zu tief. Die Alt-Seite nutzt
   kein <label> (nur <i>+<a>). line-height normalisieren -> Zeile ~16px wie alt. */
.seite-kontakt .wrapper_formular span.datenschutz label{ cursor:pointer; line-height:normal; text-align:left; }

/* ===== Musik-Button-Tooltips (design-konform, ersetzt nativen title) =====
   Kleine Navy-Bubble ueber dem Icon-Button, damit klar ist was er tut (anhoeren /
   ausprobieren / lizenzieren). aria-label traegt die a11y-Info, data-tip den Text. */
.seite-musik .musicpool [data-tip]{position:relative}
.seite-musik .musicpool [data-tip]::after{
  content:attr(data-tip);
  position:absolute;bottom:calc(100% + 9px);left:50%;transform:translate(-50%,4px);
  background:#001357;color:#fff;font-size:12px;font-weight:600;line-height:1;white-space:nowrap;
  padding:7px 10px;border-radius:8px;box-shadow:0 6px 20px rgba(0,19,87,.28);
  opacity:0;pointer-events:none;transition:opacity .14s ease,transform .14s ease;z-index:40;
}
.seite-musik .musicpool [data-tip]::before{
  content:"";position:absolute;bottom:calc(100% + 3px);left:50%;transform:translate(-50%,4px);
  border:6px solid transparent;border-top-color:#001357;
  opacity:0;pointer-events:none;transition:opacity .14s ease,transform .14s ease;z-index:40;
}
.seite-musik .musicpool [data-tip]:hover::after,
.seite-musik .musicpool [data-tip]:focus-visible::after,
.seite-musik .musicpool [data-tip]:hover::before,
.seite-musik .musicpool [data-tip]:focus-visible::before{ opacity:1;transform:translate(-50%,0); }
@media (prefers-reduced-motion: reduce){
  .seite-musik .musicpool [data-tip]::after,.seite-musik .musicpool [data-tip]::before{transition:none}
}



/* ===== Tablet-/Zwischenbreiten-Fix: Inhalt lief von 500-1160px aus dem Bild =====
   BEFUND (gemessen 07.09.2026, Live UND Staging gleichermassen betroffen, 39/39 Seiten):
   `.wrapper_global .content` ist ein Grid mit `1fr var(--site-width) 1fr`, die Mittelspalte
   also STARR 1200px. Unter 1200px Fensterbreite schrumpfen die 1fr-Spalten auf 0, die
   Mittelspalte bleibt 1200px und laeuft ueber. Sichtbar wird das nicht als Scrollbalken,
   weil `.wrapper_global` `overflow-x: clip` traegt -> der Ueberhang wird ABGESCHNITTEN
   statt scrollbar. Auf einem iPad (768px) fehlten dadurch die rechte Haelfte der H1, das
   Eingabefeld und der primaere CTA - unerreichbar, nicht nur unsichtbar.

   URSACHE: Die einzige Regel, die auf eine Spalte umstellt, haengt in style.css an
   `@media only screen and (max-device-width: 480px)`. `device-width` ist die PHYSISCHE
   Geraetebreite (seit Media Queries L4 veraltet), nicht die Fensterbreite: ein iPad meldet
   768/1024px, ein verkleinertes Desktop-Fenster die volle Bildschirmbreite. Die Regel
   greift dort also nie. Betrifft in style.css 35 Stellen - deshalb wird sie hier NICHT
   angefasst, sondern nur die eine Grid-Zeile additiv ueberschrieben.

   FIX: unterhalb der Inhaltsbreite auf eine Spalte, `minmax(0,1fr)` statt `1fr`, damit
   lange Inhalte (Tabellen, Code, Bilder) die Spalte nicht wieder aufblaehen.
   GEMESSEN nachher: 600/768/900/1024px von 21/12/6/4 abgeschnittenen Elementen auf 0;
   375px und ab 1200px unveraendert. */
@media (max-width: 1199px){
  /* :not(.navigation) ist Pflicht: die Kopfleiste traegt ein EIGENES Raster
     (`.content.navigation .modul { grid-template-columns: auto 1fr auto }` fuer
     Logo | Menue | Icons). Ohne den Ausschluss beschneidet die Ein-Spalten-Regel
     dessen Elternspalte und das Logo wird von 259px auf 14px gequetscht
     (gemessen, bevor der Ausschluss drin war). */
  .wrapper_global .content:not(.navigation){
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "b";
  }
}


/* ===== Mobilnavigation ab 480px bis zur Desktopbreite (Tablets, schmale Fenster) =====
   BEFUND (gemessen 07.09.2026): Die Kopfleiste hatte zwischen 481 und 1199px WEDER das
   Desktop-Menue vollstaendig (es lief rechts aus dem Bild: 14 Eintraege bei 600px, 10 bei
   768px) NOCH den Burger (`display:none`) - die Navigation war dort schlicht nicht
   bedienbar. Auf einem iPad waren Musik, Vorlagen, Ratgeber, Kontakt, Warenkorb und Konto
   nicht erreichbar.

   URSACHE: dieselbe wie beim Inhalt weiter oben - der komplette Mobil-Nav-Block in
   style.css haengt an `@media only screen and (max-device-width: 480px)`. `device-width`
   ist die physische Geraetebreite, nicht die Fensterbreite; ein iPad meldet 768/1024px,
   die Regel greift nie.

   FIX: exakt DIESELBEN 27 Regeln (1:1 aus style.css uebernommen, nicht nachgebaut - der
   Block ist vollstaendig auf `.content.navigation` beschraenkt, keine Fremdselektoren),
   nur unter `max-width: 1199px` statt `max-device-width: 480px`. Dazu die eine Zeile, die
   das AEUSSERE Raster der Kopfleiste fliessend macht (`.content.navigation` selbst stand
   auf `0px 1200px 0px`); das INNERE `auto 1fr auto` des `.modul` bleibt unangetastet,
   sonst wird das Logo von 259px auf 14px gequetscht.
   GEMESSEN nachher: Burger sichtbar und klickbar 480-1199px, Menue oeffnet mit 9 Links,
   Logo 259px wie auf dem Desktop, 0 Nav-Elemente ausserhalb; ab 1200px unveraendert. */
@media (max-width: 1199px){
  /* Aussenraster fliessend - das innere Raster des .modul bleibt wie es ist */
  .wrapper_global .content.navigation{ grid-template-columns: minmax(0, 1fr); grid-template-areas: "b"; }
  .wrapper_global .content.navigation .modul{ grid-area: b; }

  .wrapper_global .content.navigation .modul {
    grid-template-areas: "a c d";
    grid-template-columns: auto 1fr auto;
    padding-right: 0;
  }
  .wrapper_global .content.navigation .modul .logo {
    grid-area: a;
    background-color: var(--blue-dark);
    padding: 1rem 1rem 0.5rem 1rem;
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    z-index: 4;
    width: 6rem;
  }
  .wrapper_global .content.navigation .modul .headline {
    grid-area: c;
    display: flex;
    height: var(--nav1-height);
    padding-top: 0.3rem;
  }
  .wrapper_global .content.navigation .modul .headline img {
    width: 10rem;
    height: auto;
  }
  .wrapper_global .content.navigation .modul .burger {
    grid-area: d;
    display: flex;
    align-items: center;
    height: var(--nav1-height);
  }
  .wrapper_global .content.navigation .modul .burger i {
    width: 3rem;
    display: flex;
    justify-content: center;
  }
  .wrapper_global .content.navigation .modul .burger i:before {
    font-family: 'FontAwesome';
    content: "\f0c9";
    font-weight: 900;
    line-height: var(--nav1-height);
    color: #FFF;
  }
  .wrapper_global .content.navigation.mobile-active .modul .burger i:before {
    content: "\e59b";
  }
  .wrapper_global .content.navigation .modul .logo img {
    height: auto;
    width: 4rem;
  }
  .wrapper_global .content.navigation .modul .nav1 {
    display: none;
  }
  .wrapper_global .content.navigation.mobile-active .modul .nav1 {
    position: fixed;
    height: auto;
    max-height: 100vh;
    width: 100vw;
    text-align: left;
    display: block;
    z-index: 3;
    background: var(--blue-dark);
    top: calc(var(--nav1-height) + 0.5rem);
    left: 0;
    padding: 2.5rem 1rem 0.5rem 1.5rem;
    overflow: scroll;
  }
  .wrapper_global .content.navigation.mobile-active .modul .nav1 ul {
    height: auto;
    display: block;
    align-items: center;
  }
  .wrapper_global .content.navigation.mobile-active .modul .nav1 ul li {
    display: block;
    margin-right: 0;
    font-family: Geist;
    font-weight: 500;
    transition: all 0.2s;
    line-height: 2;
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: #fff;
  }
  .wrapper_global .content.navigation.mobile-active .modul .nav1 .kontoinfos {
    height: auto;
    color: #fff;
    margin-left: 0;
    line-height: 1.3;
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.35);
    padding: 1rem;
    border-radius: 1rem;
    margin-top: 1rem;
  }
  .wrapper_global .content.navigation .modul .nav1 ul li a.icon i.cart:before {
    padding-top: 0;
  }
  .wrapper_global .content.navigation .modul .nav1 .kontoinfos span.userinfos {
    font-weight: 400;
    font-size: 1rem;
    opacity: 1;
  }
  .wrapper_global .content.navigation .modul .nav1 .kontoinfos span.userinfos strong {
    font-weight: 600;
    font-size: 1rem;
  }
  .wrapper_global .content.navigation.mobile-active .modul .nav1 ul li:nth-last-child(2),
  .wrapper_global .content.navigation.mobile-active .modul .nav1 ul li:nth-last-child(1) {
    display: inline-block;
  }
  .wrapper_global .content.navigation .modul .nav1 ul li a.icon i.user {
    margin-left: 0.75rem;
  }
  .wrapper_global .content.navigation .modul .nav1 ul li a.icon i.cart .badge {
    color: #FFF;
  }
  .wrapper_global .content.navigation.mobile-active .modul .nav1 ul li a.icon i {
    border-color: #fff;
  }
  .wrapper_global .content.navigation.mobile-active .modul .nav1 ul li a.icon i:before {
    color: #fff;
  }
  .wrapper_global .content.navigation.mobile-active .modul .nav1 ul li:last-child {
    margin-right: 0;
  }
  .wrapper_global .content.navigation.mobile-active .modul .nav1 ul li a {
    color: inherit;
    padding-bottom: 1rem;
  }
  .wrapper_global .content.navigation.mobile-active .modul .nav1 ul li:hover,
  .wrapper_global .content.navigation.mobile-active .modul .nav1 ul li.active {
    color: var(--blue-light);
  }
  .wrapper_global .content.navigation.mobile-active .modul .nav1 ul li:hover a,
  .wrapper_global .content.navigation.mobile-active .modul .nav1 ul li.active a {
    border-bottom: 3px solid var(--blue-light);
    padding-bottom: 0.2rem;
    transition: all 0.2s;
  }
  .wrapper_global .content.navigation.mobile-active .modul .nav1 ul li:hover a.icon,
  .wrapper_global .content.navigation.mobile-active .modul .nav1 ul li.active a.icon {
    border-bottom: none;
    padding-bottom: 0.2rem;
    transition: all 0.2s;
  }
}

/* Logo-Groesse zwischen Handy und Desktop: die uebernommene Mobilregel setzt
   `.logo img { width: 4rem }` (64px) — auf einem Handy richtig, auf einem Tablet zu klein
   (das Logo verliert sich in einer 768px breiten Leiste). Ab 600px daher die Wortmarke in
   Desktop-Groesse wie ab 1200px; darunter bleibt es bei Bildmarke + Schriftzug.
   Reichweite bewusst eng: nur .logo img in der Kopfleiste, nur 600-1199px. */
@media (min-width: 600px) and (max-width: 1199px){
  .wrapper_global .content.navigation .modul .logo{
    background-color: transparent; padding: 0; width: auto;
    border-bottom-left-radius: 0; border-bottom-right-radius: 0;
  }
  .wrapper_global .content.navigation .modul .logo img.no-mobile{ display: inline; width: auto; height: 3rem; }
  .wrapper_global .content.navigation .modul .logo img.only-mobile,
  .wrapper_global .content.navigation .modul .headline{ display: none; }
}

/* Zwei Korrekturen am geoeffneten Menue zwischen 600 und 1199px (gemessen 07.09.2026):

   1) SACKGASSE: Das Overlay `.nav1` (z-index 3) legte sich UEBER den Burger (z-index auto)
      — elementFromPoint an der Burger-Mitte lieferte `DIV.nav1`. Das Menue liess sich also
      oeffnen, aber nicht wieder schliessen. Der Burger bekommt einen hoeheren z-index als
      das Overlay; das X-Icon (`content:"\e59b"` im mobile-active-Zustand) ist damit auch
      wirklich klickbar.

   2) UEBERLAPPUNG: Das Logo (z-index 4, unten bei y=114) ragte 4px in den ersten
      Menuepunkt (oben bei y=110), weil das Overlay auf `top: calc(var(--nav1-height) +
      0.5rem)` sitzt, die Leiste hier aber niedriger beginnt. Das Overlay startet jetzt
      buendig unter der Leiste — gemessen statt geraten, per Positionierung am Elternteil.
      Zusaetzlich Innenabstand oben, damit der erste Punkt nicht an der Kante klebt. */
@media (min-width: 600px) and (max-width: 1199px){
  .wrapper_global .content.navigation .modul .burger{ position: relative; z-index: 6; }
  /* Das Overlay hing als `position:fixed` an `top: var(--nav1-height)` — also an einem
     FESTEN Wert, gemessen vom Fensterrand. Die Kopfleiste beginnt aber nicht dort: darueber
     sitzt die KI-Hinweisleiste, deren Hoehe mit der Breite umbricht. Gemessen: Unterkante
     der Leiste 109px (600), 114px (768), 93px (1024) — und 56px, sobald gescrollt und die
     Hinweisleiste weg ist. Ein fester Wert trifft keinen dieser Faelle; bei 768px ragte das
     Logo dadurch 28px in den ersten Menuepunkt.
     Loesung: das Overlay am ELTERNTEIL ausrichten (`absolute` zu `.modul`, `top:100%`)
     statt am Fenster — dann folgt es der Leiste in jedem Zustand von selbst, ohne dass
     irgendwo eine Hoehe gepflegt werden muss. */
  .wrapper_global .content.navigation .modul{ position: relative; }
  .wrapper_global .content.navigation.mobile-active .modul .nav1{
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: calc(100vh - 100%);
    padding-top: 1.5rem;
  }
}


/* ============================================================
   Preisbruecke Startseite (08.09.2026)
   Ersetzt dort die vollstaendige Sieben-Paket-Tabelle. Uebernimmt die
   Marken-Tokens und das Haekchen-Muster von .tai-pt-incl, damit die
   Startseite keine zweite Komponenten-Signatur bekommt.
   Alles auf .tai-pb gescoped - keine nackten Element-Selektoren.
   ============================================================ */
.tai-pb {
  max-width: 100%;
  min-width: 0;
  --tai-navy: #001357;
  --tai-mint-tx: #27D4BD;
  --tai-txt: #64748b;
  font-weight: 300;
  padding: 1rem 0 0;
}

.tai-pb-facts {
  list-style: none;
  /* linksbuendig zur Ueberschrift, nicht zentriert: die Kennwerte begannen sonst
     bei x=240 waehrend H2 und Fliesstext bei x=120 stehen (gemessen 08.09.2026,
     1440 px) - 120 px Versatz ohne Grund. */
  margin: 0;
  padding: 0;
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem 1.5rem;
}

.tai-pb-facts li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--tai-txt);
  font-size: .88rem;
  line-height: 1.5;
}

.tai-pb-facts li::before {
  content: "";
  position: absolute;
  left: 0; top: .42em;
  width: .72rem; height: .38rem;
  border-left: 2px solid var(--tai-mint-tx);
  border-bottom: 2px solid var(--tai-mint-tx);
  transform: rotate(-45deg);
}

/* Gewichtsduo: Kennwert eine Stufe ueber der Beschreibung, nicht fett. */
.tai-pb-facts li strong {
  display: block;
  color: var(--tai-navy);
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.35;
}

.tai-pb-facts li span {
  display: block;
  margin-top: .15rem;
  font-size: .82rem;
}

.tai-pb .center-cta { margin: 1.75rem 0 0; }

.tai-pb-note {
  text-align: center;
  color: var(--tai-txt);
  font-size: .8rem;
  max-width: 50rem;
  margin: 1.25rem auto 0;
  line-height: 1.6;
}

/* Zwischenbreiten: 4 Spalten brechen vor dem Tablet-Breakpoint auf 2.
   Geraetebreite bewusst NICHT abgefragt (max-device-width trifft Tablets nicht). */
@media (max-width: 900px) {
  .tai-pb-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .tai-pb-facts {
    grid-template-columns: minmax(0, 1fr);
    gap: .85rem;
    max-width: 22rem;
  }
  .tai-pb-facts li strong { font-size: 1rem; }
}

/* Preisbruecke: Kopf in die Mittelspalte (08.09.2026)
   Siehe Befund oben - ohne die alte Tabelle kollabierten die 1fr-Randspalten
   nicht mehr, der Kopf landete in Spalte 1 (155 px statt 1200 px).
   .d26-price-head kommt ausschliesslich auf der Startseite vor (geprueft:
   grep ueber _content/ -> nur home.html), die Regel ist damit eng genug. */
.content.keyvisual-gradient > .d26-price-head,
.content.keyvisual-gradient > .tai-pb {
  grid-column: b;   /* nur die Spalte, NICHT die benannte Zelle (grid-area legt
                       beide Kinder uebereinander - am 08.09. so gemessen). */
  grid-row: auto;
}

/* Preisbruecke auf dem Navy-Verlauf (08.09.2026) - Farbmuster 1:1 von
   .keyvisual-gradient .tai-pt-incl / .tai-pt-note uebernommen. */
.keyvisual-gradient .tai-pb-facts li { color: rgba(255, 255, 255, .95); }
.keyvisual-gradient .tai-pb-facts li strong { color: #fff; }
/* .88 statt der .78 des Bestandsmusters: der Verlauf wird nach rechts heller
   (bis rgb(52,141,197)), dort traegt jedes Alpha unter ~.9 zu wenig Kontrast.
   Gemessen 08.09.2026. Der Verlauf selbst ist Markenfarbe und bleibt. */
.keyvisual-gradient .tai-pb-facts li span { color: rgba(255, 255, 255, .88); }
.keyvisual-gradient .tai-pb-facts li::before {
  border-left-color: #56DFCD;
  border-bottom-color: #56DFCD;
}
.keyvisual-gradient .tai-pb-note { color: rgba(255, 255, 255, .85); }

/* ============================================================================
   HERO AUF ZWISCHENBREITEN — Nachtrag zum Tablet-Fix vom 08.09.2026 (d43ba17b)
   ============================================================================

   BEFUND (gemessen 08.09.2026, Puppeteer mit isMobile, echte Fensterbreiten):
   Der Hero blieb zwischen 481 und 768 px zweispaltig und lief rechts aus dem Bild.

     Breite   H1 links..rechts   Ueberstand
      480px      40 ..  440        keiner
      540px     288 ..  598        +58 px
      600px     312 ..  622        +22 px
      660px     336 ..  646        keiner

   Sichtbar abgeschnitten waren bei 540/600 px die halbe H1, das Eingabefeld
   ("Willkommen bei der Schreinere…") und der primaere CTA ("…erst der Downloa").
   Das Elterngrid stand dort auf `216px 413.5px` = 629,5 px in einem 540er Fenster.

   URSACHE: dieselbe wie beim Inhalt und der Navigation in d43ba17b — der
   Hero-Block haengt an `@media only screen and (max-device-width: 480px)`.
   `device-width` ist die physische Geraetebreite, nicht die Fensterbreite:
   auf einem Tablet oder in einem schmalen Desktop-Fenster greift die Regel nie.
   Der Fix vom 08.09. hat Inhalt und Navigation umgestellt, den Hero-Block aber
   ausgelassen — diese Luecke schliesst der Nachtrag hier.

   FIX: dieselben Hero-Regeln wie im 480er-Block, 1:1 uebernommen und nicht
   nachgebaut, nur unter `max-width: 768px` statt `max-device-width: 480px`.
   Schwelle 768 px, weil der Hero ab 660 px von selbst wieder passt und 768 px
   die etablierte Mobil-Grenze des Projekts ist.

   BEWUSST NICHT UEBERNOMMEN: die nackte Regel `.hero-glow { width: 100% }` aus
   dem 480er-Block. `.hero-glow` steht auf 28 Seiten auch ausserhalb des Heros
   (`content keyvisual-gradient hero-glow`); die Regel wuerde also weit ueber den
   Hero hinaus wirken. Die spezifische Variante
   `.content.hero .modul .inhalt .hero-glow` ist enthalten und genuegt.

   GEMESSEN NACHHER: siehe Bericht — H1, Eingabefeld und CTA vollstaendig
   sichtbar 375-1920 px, kein Ueberstand mehr bei 540/600 px, ab 769 px unveraendert.
   ============================================================================ */
@media (max-width: 768px) {

  .wrapper_global .content.hero {
    padding-top: 2.5rem;
  }

  .wrapper_global .content.hero .modul {
    grid-template-areas: "a"
      "b";
    grid-template-columns: 1fr;
  }

  .wrapper_global .content.hero .modul .eyecatcher {
    display: none;
  }

  .wrapper_global .content.hero .modul .inhalt .wrapper {
    padding: 0 1rem;
    margin-bottom: 1rem;
  }

  .wrapper_global .content.hero .modul .inhalt .wrapper h1 {
    font-size: 2rem;
    padding-right: 0;
    margin-top: 2rem;
    line-height: 1.1;
  }

  .wrapper_global .content.hero .modul .inhalt .wrapper h1 span.small {
    font-size: 1.5rem;
  }

  .wrapper_global .content.hero .modul .inhalt .wrapper .cta1 {
    margin-bottom: 1.5rem;
  }

  .wrapper_global .content.hero .modul .inhalt .hero-glow {
    width: auto;
  }
}

/* Hero-Innenabstand rechts (08.09.2026)
   .inhalt trug 40px links / 0 rechts und lief damit bis an den Fensterrand.
   Nur im Zwischenbereich, in dem der Hero einspaltig ist; ab 769 px unveraendert. */
@media (max-width: 768px) {
  .wrapper_global .content.hero .modul .inhalt {
    padding-right: 40px;
  }
}

/* Hinweiszeile ueber dem Namensfeld ohne weissen Wrapper (08.09.2026)
   Betrifft nur Heroes, in denen der .wrapper fehlt (Weihnachtsseite) - auf der
   Startseite traegt der vorhandene .wrapper den Grund und diese Regel greift nicht. */
.wrapper_global .content.hero .modul .inhalt > .input-label {
  display: inline-block;
  background: rgba(255, 255, 255, .85);
  color: #001357;
  padding: .35rem .7rem;
  border-radius: .35rem;
  max-width: 100%;
}

/* DREISPALTIGE KARTENREIHEN auf Zwischenbreiten (08.09.2026)
   spalten3 brach nur unter max-device-width:480px um und stand bei 600 px
   dreispaltig (672 px Inhalt in 600 px Fenster). Siehe Befund oben. */
@media (max-width: 767px) {
  .wrapper_global .content .modul.spalten3 {
    grid-template-areas: "a"
      "b"
      "c";
    grid-template-columns: 1fr;
    margin: 0;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .wrapper_global .content .modul.spalten3 .inhalt {
    padding: 2rem 2rem 1rem 2rem;
  }

  .wrapper_global .content .modul.spalten2 {
    padding: 1.5rem 1.5rem 1rem 1.5rem;
    margin: 0;
    grid-template-columns: 1fr;
    grid-template-areas: "a" "b";
    text-align: center;
  }
}

/* Textraster .grid-texte auf Zwischenbreiten (08.09.2026)
   Gleiche Ursache wie spalten3: bricht nur unter max-device-width:480px um und
   stand bei 600 px zweispaltig (242 + 261 px, rechte Spalte ueberstand um 7 px).
   Regel 1:1 aus dem 480er-Block uebernommen. Reichweite: `.grid-texte` kommt in
   genau einer Inhaltsdatei vor (telefonansagen-weihnachten). */
@media (max-width: 767px) {
  .wrapper_global .content .modul .inhalt .grid-texte {
    grid-template-columns: 1fr;
  }
}