/* =========================================================================
   Trolli Angebot — Frontend
   Alles ist unter .tga-app gescopt. Die Webfonts (Caprasimo für die
   Überschriften, Figtree für alles andere — dieselbe Paarung wie auf
   trolligarten.de) werden separat eingebunden (siehe
   TGA_Frontend::register_assets), damit sie parallel laden statt über eine
   renderblockierende @import-Kette.
   ========================================================================= */

.tga-app{
  /* Palette. Die echten Werte werden pro Installation als gescopte Custom
     Properties auf genau dieser Klasse gesetzt — nie auf :root — damit das
     Plugin weder die Variablen des Themes erbt noch sie überschreibt. */
  --tga-primary:#506840;
  --tga-primary-dark:#425634;
  --tga-ink:#201E1D;
  --tga-dark:#1A2315;
  --tga-accent:#B8862F;
  --tga-ok:#4E7A3B;
  --tga-paper:#F5EAD8;
  --tga-primary-rgb:80,104,64;
  --tga-ink-rgb:32,30,29;
  --tga-dark-rgb:26,35,21;
  --tga-accent-rgb:184,134,47;
  --tga-paper-rgb:245,234,216;

  /* Neutrale Töne, durchgehend aus der Palette abgeleitet, damit eine
     geänderte Papier-/Textfarbe die ganze Oberfläche mitnimmt. */
  --tga-card:#FFFDF7;
  --tga-surface:rgba(var(--tga-paper-rgb),.58);
  --tga-surface-2:rgba(var(--tga-paper-rgb),.30);
  --tga-line:rgba(var(--tga-ink-rgb),.14);
  --tga-line-strong:rgba(var(--tga-ink-rgb),.26);
  --tga-muted:rgba(var(--tga-ink-rgb),.62);
  --tga-faint:rgba(var(--tga-ink-rgb),.42);

  /* Schriftrollen. Caprasimo ist eine kräftige Display-Schrift und trägt
     ausschliesslich die grossen Überschriften; Figtree übernimmt Fliesstext
     UND alle Bedienelemente (Buttons, Labels, Kartentitel). */
  --tga-display:'Caprasimo',Georgia,'Times New Roman',serif;
  --tga-ui:'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --tga-body:'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  --tga-radius:22px;
  --tga-radius-sm:14px;
  --tga-radius-xs:10px;
  --tga-shadow:0 1px 2px rgba(var(--tga-dark-rgb),.05), 0 14px 38px -14px rgba(var(--tga-dark-rgb),.20);
  --tga-shadow-sm:0 1px 2px rgba(var(--tga-dark-rgb),.06);

  --tga-ease-out:cubic-bezier(0.23,1,0.32,1);
  --tga-ease-in-out:cubic-bezier(0.77,0,0.175,1);
  --tga-spring:cubic-bezier(0.34,1.4,0.64,1);

  --tga-pad:26px;

  /* Harter Reset, damit das Theme nicht durchschlägt. `all:initial` setzt nur
     dieses eine Element zurück — deshalb bekräftigt der Härtungsblock am Ende
     dieser Datei die Palette auch auf <button>/<a>/<input>-Nachfahren. */
  all:initial;
  display:block;
  /* Der Container-*Name* ist immer gesetzt; der `container-type`, der ihn
     aktiviert, folgt weiter unten und ist an einen Desktop-Viewport gebunden.
     Die Begründung steht bei dieser Regel. */
  container-name:tga;
  max-width:100%;
  font-family:var(--tga-body);
  font-size:16px;
  color:var(--tga-ink);
  line-height:1.55;
  text-align:left;
  box-sizing:border-box;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.tga-app *,
.tga-app *::before,
.tga-app *::after{box-sizing:border-box;margin:0;padding:0;}
.tga-app button{font-family:inherit;font-size:inherit;line-height:inherit;}
.tga-app img{max-width:100%;display:block;}
.tga-app a{text-decoration:none;color:inherit;}
.tga-app svg{flex:none;}

/* -------------------------------------------------------------------------
   Query-Container — nur auf Desktop-Viewports
   -------------------------------------------------------------------------
   `container-type:inline-size` lässt das Layout auf die Breite reagieren, die
   der Shortcode tatsächlich bekommt (etwa eine schmale Page-Builder-Spalte)
   statt auf den Viewport. Das ist wertvoll, darf aber nicht dauerhaft an sein.

   Inline-size-Containment setzt die intrinsische Inline-Grösse des Widgets auf
   0. Muss ein Vorfahre seine eigene Höhe aus dem Inhalt des Widgets ableiten —
   genau das tut Elementors `.e-con-inner` auf Telefonen, wo es ein
   Spalten-Flex-Container mit `max-width:min(100%,767px)` ist — misst Blink den
   umschlossenen Teilbaum bei dieser Breite von null. Jede Textzeile bricht auf
   ein Wort um, die gemessene Höhe landet bei rund 10 000px, und diese Zahl wird
   zur Höhe des Wrappers. Das Widget selbst zeichnet weiterhin korrekt, der
   Besucher sieht aber tausende Pixel leere Seite darunter.

   Von innen lässt sich das nicht heilen: width:100%, min-width, display:
   flow-root, contain-intrinsic-width und ein Container auf einem inneren
   Wrapper wurden alle gemessen und erzeugten die Lücke weiterhin. Nur der
   Verzicht auf das Containment hilft.

   Deshalb ist es oberhalb aller üblichen Mobile-/Tablet-Breakpoints der
   Page-Builder eingeschränkt (Elementor: Mobile <=767, Tablet <=1024).
   Darunter ist das Widget schmal, weil der *Bildschirm* schmal ist, und der
   `@media`-Zwilling, der in dieser Datei jede `@container`-Regel begleitet,
   erzeugt exakt dasselbe Layout — es geht also nichts verloren. Darüber passt
   sich ein Widget in einer 320px-Spalte weiterhin an, und genau dafür gibt es
   Container-Queries.
   ------------------------------------------------------------------------- */
@media (min-width:1025px){
  .tga-app{container-type:inline-size;}
}

.tga-inner{max-width:1140px;margin:0 auto;padding:0 20px;}

/* -------------------------------------------------------------------------
   Obere Leiste
   ------------------------------------------------------------------------- */
.tga-topbar{background:var(--tga-dark);color:#fff;font-size:13px;}
.tga-topbar .tga-inner{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px;flex-wrap:wrap;padding-top:7px;padding-bottom:7px;}
.tga-topbar a{color:#D3DBC8;transition:color .16s ease;}
.tga-topbar a:hover{color:#fff;}
.tga-topbar-msg{display:inline-flex;align-items:center;gap:9px;color:#fff;font-weight:500;}
.tga-dot{width:7px;height:7px;border-radius:50%;background:var(--tga-accent);box-shadow:0 0 0 3px rgba(var(--tga-accent-rgb),.30);animation:tga-pulse 2.6s var(--tga-ease-in-out) infinite;}
@keyframes tga-pulse{0%,100%{box-shadow:0 0 0 3px rgba(var(--tga-accent-rgb),.30);}50%{box-shadow:0 0 0 7px rgba(var(--tga-accent-rgb),0);}}

/* -------------------------------------------------------------------------
   Kopfzeile
   ------------------------------------------------------------------------- */
.tga-header{background:var(--tga-card);border-bottom:1px solid var(--tga-line);}
.tga-header .tga-inner{display:flex;align-items:center;justify-content:space-between;min-height:78px;padding-top:12px;padding-bottom:12px;gap:14px;}
.tga-logo-row{display:flex;align-items:center;gap:13px;min-width:0;}
.tga-mark{width:46px;height:46px;border-radius:14px;background:var(--tga-primary);display:grid;place-items:center;flex:none;color:#fff;}
.tga-mark svg{width:24px;height:24px;transition:transform .55s var(--tga-ease-out);}
.tga-brand{font-family:var(--tga-ui);font-weight:700;color:var(--tga-ink);font-size:16.5px;letter-spacing:-.01em;line-height:1.2;min-width:0;overflow-wrap:anywhere;}
.tga-brand small{display:block;font-family:var(--tga-ui);font-weight:600;color:var(--tga-muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase;margin-top:2px;}
.tga-phone-pill{display:inline-flex;align-items:center;gap:8px;font-family:var(--tga-ui);font-weight:600;color:var(--tga-ink);font-size:14px;padding:10px 17px;min-height:44px;border:1px solid var(--tga-line-strong);border-radius:999px;transition:border-color .18s ease,background .18s ease,transform .16s var(--tga-ease-out);}
.tga-phone-pill:hover{border-color:var(--tga-primary);background:rgba(var(--tga-primary-rgb),.06);}
.tga-phone-pill:active{transform:scale(.97);}
.tga-phone-pill svg{width:16px;height:16px;color:var(--tga-primary);}

/* -------------------------------------------------------------------------
   Intro / Hero
   ------------------------------------------------------------------------- */
.tga-intro{padding:46px 20px 28px;}
.tga-intro--compact{padding:30px 20px 6px;}
.tga-banner{border-radius:var(--tga-radius);overflow:hidden;margin-bottom:26px;box-shadow:var(--tga-shadow);}
.tga-banner img{width:100%;height:auto;max-height:340px;object-fit:cover;}
.tga-eyebrow{display:inline-block;font-family:var(--tga-ui);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tga-accent);font-weight:700;}
.tga-h1{font-family:var(--tga-display);font-weight:400;font-size:clamp(28px,4.4vw,46px);line-height:1.08;letter-spacing:-.018em;margin:14px 0 13px;max-width:20ch;color:var(--tga-ink);}
.tga-lead{color:var(--tga-muted);max-width:60ch;font-size:16.5px;}
.tga-trust{display:flex;gap:10px 24px;flex-wrap:wrap;margin-top:24px;}
.tga-trust--bare{padding-top:22px;padding-bottom:2px;}
.tga-trust span{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--tga-ink);font-weight:500;}
.tga-trust svg{width:15px;height:15px;color:var(--tga-ok);}

/* -------------------------------------------------------------------------
   Layout-Raster
   Überall minmax(0,1fr), damit die intrinsische Mindestbreite eines Feldes die
   Spalte nie über ihren Container hinausdrücken kann (was rechts abschneidet).
   ------------------------------------------------------------------------- */
.tga-grid{display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:26px;align-items:start;padding-bottom:56px;}
@container tga (max-width:940px){.tga-grid{grid-template-columns:minmax(0,1fr);}}
@media(max-width:940px){.tga-grid{grid-template-columns:minmax(0,1fr);}}

.tga-no-sidebar .tga-grid{grid-template-columns:minmax(0,1fr);max-width:820px;}
.tga-v-standard .tga-grid,
.tga-v-compact .tga-grid,
.tga-v-lite .tga-grid{padding-top:0;padding-bottom:0;}
.tga-v-hero .tga-grid{padding-bottom:8px;}
.tga-v-compact .tga-grid{max-width:700px;}
.tga-v-lite .tga-grid{max-width:530px;}
.tga-v-compact .tga-inner,
.tga-v-lite .tga-inner{padding-left:0;padding-right:0;}

.tga-panel{min-width:0;background:var(--tga-card);border:1px solid var(--tga-line);border-radius:var(--tga-radius);box-shadow:var(--tga-shadow);overflow:hidden;}

/* Dichte compact / lite: rundum engere Abstände. */
.tga-d-compact{--tga-pad:20px;}

/* -------------------------------------------------------------------------
   Fortschrittsanzeige
   ------------------------------------------------------------------------- */
.tga-progress{padding:22px var(--tga-pad) 6px;border-bottom:1px solid var(--tga-line);background:linear-gradient(180deg,var(--tga-card),var(--tga-surface-2));}
.tga-progress-meta{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:14px;}
.tga-step-label{font-family:var(--tga-ui);font-weight:700;font-size:15px;color:var(--tga-ink);min-width:0;overflow-wrap:anywhere;}
.tga-step-count{font-size:12px;color:var(--tga-muted);flex:none;white-space:nowrap;font-variant-numeric:tabular-nums;}

/* Keine feste Höhe: die Anzeige wächst mit den Punkten und ihren
   Beschriftungen, sodass diese nie über die untere Kante hinauslaufen. */
.tga-ruler{position:relative;margin:0 2px;padding-bottom:6px;}
.tga-track{position:absolute;top:10px;left:0;right:0;height:2px;background:var(--tga-line-strong);border-radius:2px;}
.tga-fill{position:absolute;top:10px;left:0;height:2px;width:0;background:var(--tga-primary);border-radius:2px;transition:width .5s var(--tga-ease-in-out);}
.tga-ticks{position:relative;display:flex;justify-content:space-between;align-items:flex-start;}
/* flex:1 1 0 + min-width:0 gibt jedem Punkt einen gleich grossen, schrumpfbaren
   Platz, damit eine lange Beschriftung nie in die Nachbarin hineinwächst. */
.tga-tick{display:flex;flex-direction:column;align-items:center;gap:7px;flex:1 1 0;min-width:0;}
.tga-tick:first-child{align-items:flex-start;}
.tga-tick:last-child{align-items:flex-end;}
.tga-pin{width:22px;height:22px;border-radius:50%;background:var(--tga-card);border:2px solid var(--tga-line-strong);display:grid;place-items:center;font-family:var(--tga-ui);font-size:10.5px;font-weight:700;color:var(--tga-muted);transition:.28s var(--tga-ease-out);position:relative;z-index:1;flex:none;font-variant-numeric:tabular-nums;}
.tga-tick.is-done .tga-pin{background:var(--tga-primary);border-color:var(--tga-primary);color:#fff;}
.tga-tick.is-active .tga-pin{border-color:var(--tga-primary);color:var(--tga-primary);box-shadow:0 0 0 4px rgba(var(--tga-primary-rgb),.16);}
.tga-cap{max-width:100%;font-size:10.5px;color:var(--tga-muted);text-align:center;letter-spacing:.01em;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tga-tick:first-child .tga-cap{text-align:left;}
.tga-tick:last-child .tga-cap{text-align:right;}
.tga-tick.is-active .tga-cap{color:var(--tga-ink);}
/* Schmal: die Beschriftungen weglassen — der aktuelle Schritt steht schon oben. */
@container tga (max-width:660px){.tga-cap{display:none;}.tga-ruler{padding-bottom:8px;}}
@media(max-width:660px){.tga-cap{display:none;}.tga-ruler{padding-bottom:8px;}}

/* -------------------------------------------------------------------------
   Schritte
   ------------------------------------------------------------------------- */
.tga-step{display:none;padding:28px var(--tga-pad) 30px;}
.tga-step.is-active{display:block;animation:tga-fade .42s var(--tga-ease-out);}
@keyframes tga-fade{from{opacity:0;transform:translateY(7px);}to{opacity:1;transform:none;}}

.tga-h2{font-family:var(--tga-display);font-weight:400;font-size:23px;letter-spacing:-.012em;margin-bottom:6px;color:var(--tga-ink);line-height:1.22;}
.tga-h2--lite{font-size:20px;margin-top:8px;margin-bottom:16px;}
.tga-sub{color:var(--tga-muted);font-size:14.5px;margin-bottom:24px;max-width:62ch;}
.tga-req{color:var(--tga-accent);font-weight:700;}
.tga-hint{font-family:var(--tga-ui);font-weight:400;color:var(--tga-faint);font-size:12px;}

/* --- Leistungskarten --- */
.tga-cards{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;}
@container tga (max-width:540px){.tga-cards{grid-template-columns:minmax(0,1fr);}}
@media(max-width:540px){.tga-cards{grid-template-columns:minmax(0,1fr);}}
.tga-cards--lite{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:9px;}

.tga-card{position:relative;display:flex;gap:14px;align-items:flex-start;padding:16px 42px 16px 16px;border:1.5px solid var(--tga-line);border-radius:var(--tga-radius-sm);cursor:pointer;background:var(--tga-card);text-align:left;width:100%;min-height:44px;
  transition:border-color .2s var(--tga-ease-out),background .2s ease,box-shadow .2s ease,transform .16s var(--tga-ease-out);
  opacity:0;transform:translateY(9px);animation:tga-rise .48s var(--tga-ease-out) forwards;animation-delay:calc(var(--i,0)*55ms);}
@keyframes tga-rise{to{opacity:1;transform:none;}}
.tga-card:hover{border-color:var(--tga-line-strong);background:var(--tga-surface-2);}
.tga-card:active{transform:scale(.985);}
.tga-card:focus-visible{outline:2px solid var(--tga-primary);outline-offset:2px;}
.tga-card.is-sel{border-color:var(--tga-primary);background:rgba(var(--tga-primary-rgb),.07);box-shadow:0 0 0 3px rgba(var(--tga-primary-rgb),.12);}

.tga-card--lite{flex-direction:column;align-items:flex-start;gap:9px;padding:13px;}
.tga-card--lite .tga-card-ic{width:34px;height:34px;border-radius:10px;}
.tga-card--lite .tga-card-h{font-size:13.5px;}

.tga-card-ic{width:46px;height:46px;border-radius:14px;background:var(--tga-surface);display:grid;place-items:center;flex:none;color:var(--tga-primary);transition:background .2s var(--tga-ease-out),color .2s ease,transform .38s var(--tga-ease-out);}
.tga-card-ic svg{width:23px;height:23px;}
.tga-card.is-sel .tga-card-ic{background:var(--tga-primary);color:#fff;transform:none;}
/* Eigene hochgeladene Icons behalten ihre Farben und stehen deshalb auf Weiss. */
.tga-ic-img{width:24px;height:24px;object-fit:contain;display:block;}
.tga-card-ic.is-custom{background:#fff;border:1px solid var(--tga-line);}
.tga-card.is-sel .tga-card-ic.is-custom{background:#fff;}
.tga-card-txt{min-width:0;}
.tga-card-h{display:block;font-family:var(--tga-ui);font-size:15px;font-weight:700;margin-bottom:3px;color:var(--tga-ink);overflow-wrap:anywhere;line-height:1.35;}
.tga-card-p{display:block;font-size:12.5px;color:var(--tga-muted);line-height:1.5;overflow-wrap:anywhere;}
.tga-card-check{position:absolute;top:14px;right:14px;width:19px;height:19px;border-radius:50%;border:2px solid var(--tga-line-strong);display:grid;place-items:center;opacity:0;transform:scale(.6);transition:.2s var(--tga-spring);}
.tga-card.is-sel .tga-card-check{opacity:1;transform:scale(1);border-color:var(--tga-primary);background:var(--tga-primary);}
.tga-card-check svg{width:11px;height:11px;color:#fff;}

/* --- Chips (eine Auswahl) --- */
.tga-chips{display:flex;flex-wrap:wrap;gap:9px;}
.tga-chip{font-family:var(--tga-ui);padding:11px 18px;min-height:44px;border:1.5px solid var(--tga-line);border-radius:999px;cursor:pointer;font-size:14px;font-weight:600;background:var(--tga-card);color:var(--tga-ink);text-align:center;
  transition:border-color .17s ease,background .17s ease,color .17s ease,transform .14s var(--tga-ease-out);}
.tga-chip:hover{border-color:var(--tga-line-strong);background:var(--tga-surface-2);}
.tga-chip:active{transform:scale(.95);}
.tga-chip:focus-visible{outline:2px solid var(--tga-primary);outline-offset:2px;}
.tga-chip.is-sel{border-color:var(--tga-primary);background:var(--tga-primary);color:#fff;}

/* --- Mehrfachauswahl-Kacheln --- */
.tga-tiles{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:9px;}
@container tga (max-width:520px){.tga-tiles{grid-template-columns:minmax(0,1fr);}}
@media(max-width:520px){.tga-tiles{grid-template-columns:minmax(0,1fr);}}
.tga-tile{display:flex;align-items:center;gap:11px;padding:12px 14px;min-height:48px;border:1.5px solid var(--tga-line);border-radius:var(--tga-radius-sm);background:var(--tga-card);cursor:pointer;text-align:left;font-size:14px;color:var(--tga-ink);
  transition:border-color .17s ease,background .17s ease,transform .14s var(--tga-ease-out);}
.tga-tile:hover{border-color:var(--tga-line-strong);background:var(--tga-surface-2);}
.tga-tile:active{transform:scale(.98);}
.tga-tile:focus-visible{outline:2px solid var(--tga-primary);outline-offset:2px;}
.tga-tile.is-sel{border-color:var(--tga-primary);background:rgba(var(--tga-primary-rgb),.07);}
.tga-tile-box{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--tga-line-strong);display:grid;place-items:center;flex:none;transition:.18s var(--tga-ease-out);}
.tga-tile-box svg{width:12px;height:12px;color:#fff;opacity:0;transform:scale(.5);transition:.18s var(--tga-spring);}
.tga-tile.is-sel .tga-tile-box{background:var(--tga-primary);border-color:var(--tga-primary);}
.tga-tile.is-sel .tga-tile-box svg{opacity:1;transform:scale(1);}

/* -------------------------------------------------------------------------
   Material-Vergleichskarten
   -------------------------------------------------------------------------
   Eine Pille kann „Feinsteinzeug 20 mm“ nur behaupten. Eine Karte kann
   daneben zeigen, wie das Material aussieht und wofür es taugt — und genau
   diese Entscheidung („welcher Belag?“) ist die, bei der ein Besucher sonst
   aussteigt und anruft. Deshalb tragen Material-, Belag-, Ausführungs- und
   Bauartfragen Karten mit Farbtupfer und einer Zeile Klartext.
   ------------------------------------------------------------------------- */
.tga-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:10px;}
@container tga (max-width:420px){.tga-opts{grid-template-columns:minmax(0,1fr);}}
@media(max-width:420px){.tga-opts{grid-template-columns:minmax(0,1fr);}}
.tga-opt{position:relative;display:block;width:100%;min-width:0;padding:13px 14px 14px;border:1.5px solid var(--tga-line);border-radius:var(--tga-radius-sm);background:var(--tga-card);cursor:pointer;text-align:left;overflow:hidden;
  transition:border-color .18s var(--tga-ease-out),background .18s ease,box-shadow .18s ease,transform .16s var(--tga-ease-out);}
.tga-opt:hover{border-color:var(--tga-line-strong);background:var(--tga-surface-2);}
.tga-opt:active{transform:scale(.985);}
.tga-opt:focus-visible{outline:2px solid var(--tga-primary);outline-offset:2px;}
.tga-opt.is-sel{border-color:var(--tga-primary);background:rgba(var(--tga-primary-rgb),.07);box-shadow:inset 0 0 0 1px var(--tga-primary);}
.tga-opt-sw{display:block;width:100%;height:26px;border-radius:7px;margin-bottom:10px;border:1px solid rgba(var(--tga-ink-rgb),.10);
  box-shadow:inset 0 1px 2px rgba(var(--tga-ink-rgb),.12);}
.tga-opt-h{display:block;font-family:var(--tga-ui);font-size:14px;font-weight:700;color:var(--tga-ink);line-height:1.35;overflow-wrap:anywhere;}
.tga-opt-p{display:block;font-size:12px;color:var(--tga-muted);line-height:1.45;margin-top:3px;overflow-wrap:anywhere;}

/* -------------------------------------------------------------------------
   Maßband-Regler
   -------------------------------------------------------------------------
   Der frühere „− 31 m² +“-Stepper verlangte bis zu 400 Klicks für eine
   Terrasse und gab keinerlei Gefühl dafür, ob 30 m² viel oder wenig ist. Der
   Regler zeigt den Bereich, der Griff lässt sich ziehen, das Feld daneben
   nimmt eine getippte Zahl an, und vier Schnellwerte treffen die häufigsten
   Fälle mit einem Tipp. Der Rasterhintergrund macht daraus optisch ein
   Maßband — das Werkzeug, das der Besucher aus dem eigenen Garten kennt.
   ------------------------------------------------------------------------- */
.tga-tape{--tga-p:0;background:var(--tga-card);border:1.5px solid var(--tga-line);border-radius:var(--tga-radius-sm);padding:15px 17px 13px;
  transition:border-color .2s var(--tga-ease-out),box-shadow .2s ease;}
.tga-tape:focus-within{border-color:var(--tga-primary);box-shadow:0 0 0 3px rgba(var(--tga-primary-rgb),.15);}
.tga-tape-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:6px;}
.tga-tape-cap{font-size:12.5px;color:var(--tga-muted);min-width:0;overflow-wrap:anywhere;}
.tga-tape-val{display:flex;align-items:baseline;gap:5px;flex:none;background:var(--tga-surface);border:1.5px solid var(--tga-line);border-radius:var(--tga-radius-xs);padding:5px 11px;
  transition:border-color .18s var(--tga-ease-out);}
.tga-tape:focus-within .tga-tape-val{border-color:var(--tga-primary);}
.tga-tape-unit{font-size:13px;font-weight:700;color:var(--tga-muted);font-family:var(--tga-ui);}
/* Die Gestaltung des Zahlenfelds steht bewusst NACH dem allgemeinen
   input-Block weiter unten — beide haben dieselbe Spezifität (0,2,1), es
   gewinnt also die spätere Regel. Siehe „Felder“. */

.tga-tape-body{position:relative;height:44px;touch-action:pan-y;}
/* Zwei Strichdichten übereinander: alle 40px ein langer, alle 8px ein
   kurzer Strich — die Teilung eines echten Rollmaßbands. */
.tga-tape-ticks{position:absolute;left:15px;right:15px;top:0;height:13px;pointer-events:none;
  background-image:repeating-linear-gradient(90deg,rgba(var(--tga-ink-rgb),.30) 0 1px,transparent 1px 40px),
                   repeating-linear-gradient(90deg,rgba(var(--tga-ink-rgb),.16) 0 1px,transparent 1px 8px);
  background-size:100% 13px,100% 7px;background-position:0 100%,0 100%;background-repeat:no-repeat;}
.tga-tape-rail{position:absolute;left:0;right:0;top:18px;height:8px;border-radius:999px;background:var(--tga-surface);border:1px solid var(--tga-line);overflow:hidden;}
.tga-tape-fill{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--tga-primary);
  width:calc(var(--tga-p) * (100% - 30px) + 15px);}
.tga-tape-fill::after{content:"";position:absolute;inset:0;opacity:.30;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.9) 0 1px,transparent 1px 8px);}

.tga-tape-range{position:absolute;inset:0;width:100%;height:44px;margin:0;padding:0;background:transparent;cursor:pointer;
  -webkit-appearance:none;appearance:none;outline:0;border:0;}
.tga-tape-range::-webkit-slider-runnable-track{height:44px;background:transparent;border:0;}
.tga-tape-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:7px;
  width:30px;height:30px;border-radius:11px;border:2.5px solid var(--tga-primary);
  background:linear-gradient(var(--tga-primary),var(--tga-primary)) center/2px 13px no-repeat,var(--tga-card);
  box-shadow:0 3px 10px -2px rgba(var(--tga-dark-rgb),.35);cursor:grab;
  transition:transform .16s var(--tga-ease-out),box-shadow .16s ease;}
.tga-tape-range::-moz-range-track{height:44px;background:transparent;border:0;}
.tga-tape-range::-moz-range-thumb{width:30px;height:30px;border-radius:11px;border:2.5px solid var(--tga-primary);
  background:linear-gradient(var(--tga-primary),var(--tga-primary)) center/2px 13px no-repeat,var(--tga-card);
  box-shadow:0 3px 10px -2px rgba(var(--tga-dark-rgb),.35);cursor:grab;
  transition:transform .16s var(--tga-ease-out);}
.tga-tape-range:active::-webkit-slider-thumb{transform:scale(1.12);cursor:grabbing;}
.tga-tape-range:active::-moz-range-thumb{transform:scale(1.12);cursor:grabbing;}
.tga-tape-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(var(--tga-primary-rgb),.30);}
.tga-tape-range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px rgba(var(--tga-primary-rgb),.30);}
@media (hover:hover) and (pointer:fine){
  .tga-tape-range:hover::-webkit-slider-thumb{transform:scale(1.06);}
  .tga-tape-range:hover::-moz-range-thumb{transform:scale(1.06);}
}

.tga-tape-scale{display:flex;justify-content:space-between;gap:8px;font-family:var(--tga-ui);font-size:11px;font-weight:600;color:var(--tga-muted);margin-top:2px;}
.tga-tape-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px;}
.tga-tape-chip{font-family:var(--tga-ui);font-size:12.5px;font-weight:700;cursor:pointer;background:var(--tga-surface);
  border:1.5px solid var(--tga-line);border-radius:999px;padding:7px 14px;color:var(--tga-muted);
  transition:border-color .16s ease,color .16s ease,background .16s ease,transform .14s var(--tga-ease-out);}
.tga-tape-chip:hover{border-color:var(--tga-line-strong);color:var(--tga-ink);}
.tga-tape-chip:active{transform:scale(.95);}
.tga-tape-chip:focus-visible{outline:2px solid var(--tga-primary);outline-offset:2px;}
.tga-tape-chip.is-sel{background:var(--tga-primary);border-color:var(--tga-primary);color:#fff;}
.tga-tape-note{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--tga-muted);margin-top:11px;line-height:1.45;}
.tga-tape-note svg{width:14px;height:14px;flex:none;color:var(--tga-accent);}

/* --- Zahlen-Stepper (weiterhin verfügbar, z. B. für eigene Vorlagen) --- */
.tga-stepper{display:inline-flex;align-items:center;gap:4px;border:1.5px solid var(--tga-line);border-radius:999px;padding:4px;background:var(--tga-card);}
.tga-step-btn{width:38px;height:38px;border-radius:50%;border:none;background:var(--tga-surface);color:var(--tga-ink);display:grid;place-items:center;cursor:pointer;
  transition:background .16s ease,color .16s ease,transform .14s var(--tga-ease-out);}
.tga-step-btn svg{width:16px;height:16px;}
.tga-step-btn:hover{background:rgba(var(--tga-primary-rgb),.14);color:var(--tga-primary);}
.tga-step-btn:active{transform:scale(.9);}
.tga-step-btn:focus-visible{outline:2px solid var(--tga-primary);outline-offset:2px;}
.tga-step-btn[disabled]{opacity:.35;cursor:not-allowed;}
.tga-step-val{min-width:96px;text-align:center;font-family:var(--tga-ui);font-weight:700;font-size:15px;color:var(--tga-ink);padding:0 6px;font-variant-numeric:tabular-nums;}
.tga-step-val em{font-style:normal;font-weight:500;font-size:12.5px;color:var(--tga-muted);}

/* --- Bedingte Blöcke je Leistung --- */
.tga-cond{display:none;}
.tga-cond.is-shown{display:block;animation:tga-fade .36s var(--tga-ease-out);}
.tga-cond-head{font-family:var(--tga-ui);font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--tga-primary);margin-bottom:14px;padding-bottom:9px;border-bottom:1px solid var(--tga-line);}
.tga-cond.is-shown + .tga-cond.is-shown{margin-top:8px;}
/* Das letzte Feld im Block hat keinen unteren Abstand — ohne das hier klebte
   die nächste Frage („Gewünschter Zeitraum“) an der letzten Kachel. */
.tga-cond.is-shown{margin-bottom:20px;}

/* --- Felder --- */
.tga-field{margin-bottom:20px;}
.tga-field:last-child{margin-bottom:0;}
.tga-field--spaced{margin-top:26px;}
.tga-field--narrow{max-width:280px;}
.tga-cols-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;}
.tga-cols-2 > *{min-width:0;}
.tga-cols-plz{display:grid;grid-template-columns:minmax(0,140px) minmax(0,1fr);gap:14px;}
.tga-cols-plz > *{min-width:0;}
@container tga (max-width:540px){.tga-cols-2,.tga-cols-plz{grid-template-columns:minmax(0,1fr);}}
@media(max-width:540px){.tga-cols-2,.tga-cols-plz{grid-template-columns:minmax(0,1fr);}}

.tga-label{display:block;font-family:var(--tga-ui);font-size:13px;font-weight:700;margin-bottom:8px;color:var(--tga-ink);}

.tga-app input[type=text],.tga-app input[type=tel],.tga-app input[type=email],
.tga-app input[type=date],.tga-app input[type=number],.tga-app input[type=url],
.tga-app select,.tga-app textarea{
  width:100%;padding:12px 15px;min-height:48px;border:1.5px solid var(--tga-line);border-radius:var(--tga-radius-xs);
  font-family:var(--tga-body);font-size:15px;color:var(--tga-ink);background:var(--tga-card);line-height:1.45;
  transition:border-color .17s var(--tga-ease-out),box-shadow .17s ease;-webkit-appearance:none;appearance:none;}
.tga-app textarea{resize:vertical;min-height:104px;}
.tga-app input:focus,.tga-app select:focus,.tga-app textarea:focus{outline:none;border-color:var(--tga-primary);box-shadow:0 0 0 3px rgba(var(--tga-primary-rgb),.15);}
.tga-app input::placeholder,.tga-app textarea::placeholder{color:var(--tga-faint);opacity:1;}

/* Das Zahlenfeld des Maßbands ist ein <input type=text> und würde sonst die
   volle Breite, die 48px-Höhe und den Rahmen der übrigen Formularfelder
   erben; es soll aber wie ein Wert aussehen, nicht wie ein Eingabefeld.
   Gleiche Spezifität wie die Regel darüber (0,2,1) — deshalb steht sie hier
   danach und nicht oben bei der Maßband-Komponente. */
.tga-app input.tga-tape-num{width:4.6ch;min-width:4.6ch;max-width:6ch;min-height:0;padding:0;border:0;border-radius:0;background:transparent;
  text-align:right;font-family:var(--tga-ui);font-weight:700;font-size:22px;line-height:1.15;color:var(--tga-ink);font-variant-numeric:tabular-nums;}
.tga-app input.tga-tape-num:focus{border:0;box-shadow:none;outline:none;}

/* --- Dringend-Schalter --- */
.tga-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:15px 17px;margin-top:24px;min-height:44px;
  border:1.5px solid var(--tga-line);border-radius:var(--tga-radius-sm);background:var(--tga-card);cursor:pointer;text-align:left;
  transition:border-color .2s var(--tga-ease-out),background .2s ease;}
.tga-toggle-row.is-on{border-color:var(--tga-accent);background:rgba(var(--tga-accent-rgb),.10);}
.tga-toggle-row:focus-visible{outline:2px solid var(--tga-primary);outline-offset:2px;}
.tga-toggle-txt{min-width:0;overflow-wrap:anywhere;}
.tga-toggle-txt strong{display:block;font-family:var(--tga-ui);font-size:14.5px;font-weight:700;color:var(--tga-ink);}
.tga-toggle-txt span{font-size:12.5px;color:var(--tga-muted);}
.tga-switch{width:48px;height:28px;border-radius:999px;background:var(--tga-line-strong);position:relative;flex:none;transition:background .22s var(--tga-ease-out);}
.tga-toggle-row.is-on .tga-switch{background:var(--tga-accent);}
.tga-knob{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:left .24s var(--tga-spring);box-shadow:0 1px 3px rgba(0,0,0,.22);}
.tga-toggle-row.is-on .tga-knob{left:23px;}

/* -------------------------------------------------------------------------
   Aufklappzeile für die freiwilligen Angaben
   -------------------------------------------------------------------------
   Ein leeres Textfeld und eine grosse Ablagefläche machen den Maß-Schritt
   optisch doppelt so lang, wie er inhaltlich ist — und beides ist freiwillig.
   Zugeklappt ist es eine Zeile, aufgeklappt steht alles da. <details> braucht
   dafür kein JavaScript.
   ------------------------------------------------------------------------- */
.tga-more{display:block;margin-top:22px;border:1.5px dashed var(--tga-line-strong);border-radius:var(--tga-radius-sm);background:var(--tga-surface-2);
  transition:border-color .18s var(--tga-ease-out),background .18s ease;}
.tga-more[open]{background:var(--tga-card);border-style:solid;border-color:var(--tga-line);}
.tga-more:hover{border-color:var(--tga-primary);}
.tga-more-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 17px;cursor:pointer;list-style:none;min-height:44px;}
.tga-more-head::-webkit-details-marker{display:none;}
.tga-more-head::marker{content:"";}
.tga-more-head:focus-visible{outline:2px solid var(--tga-primary);outline-offset:2px;border-radius:var(--tga-radius-sm);}
.tga-more-txt{min-width:0;overflow-wrap:anywhere;}
.tga-more-txt strong{display:block;font-family:var(--tga-ui);font-size:14.5px;font-weight:700;color:var(--tga-ink);}
.tga-more-txt span{display:block;font-size:12.5px;color:var(--tga-muted);line-height:1.45;}
.tga-more-chev{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:50%;background:var(--tga-card);color:var(--tga-primary);
  transition:transform .24s var(--tga-ease-out);}
.tga-more-chev svg{width:16px;height:16px;}
.tga-more[open] .tga-more-chev{transform:rotate(180deg);}
.tga-more-body{padding:2px 17px 17px;}

/* --- Upload --- */
.tga-drop{display:block;width:100%;border:1.5px dashed var(--tga-line-strong);border-radius:var(--tga-radius-sm);padding:28px 18px;text-align:center;cursor:pointer;background:var(--tga-surface-2);
  transition:border-color .18s var(--tga-ease-out),background .18s ease;}
.tga-drop:hover,.tga-drop:focus-visible,.tga-drop.is-dragging{border-color:var(--tga-primary);background:rgba(var(--tga-primary-rgb),.06);outline:none;}
.tga-drop svg{width:30px;height:30px;color:var(--tga-muted);margin:0 auto 9px;transition:transform .38s var(--tga-ease-out),color .18s ease;}
.tga-drop:hover svg{transform:translateY(-3px);color:var(--tga-primary);}
.tga-drop strong{display:block;font-size:14px;font-family:var(--tga-ui);font-weight:700;color:var(--tga-ink);}
.tga-drop span{display:block;font-size:12.5px;color:var(--tga-muted);margin-top:3px;}
.tga-filelist{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px;}
.tga-file-tag{display:inline-flex;align-items:center;gap:8px;max-width:100%;background:var(--tga-surface);border:1px solid var(--tga-line);border-radius:9px;padding:8px 11px;font-size:12.5px;color:var(--tga-ink);animation:tga-fade .26s var(--tga-ease-out);}
.tga-file-tag svg{width:13px;height:13px;color:var(--tga-muted);}
.tga-file-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px;}
.tga-file-tag button{background:none;border:none;cursor:pointer;color:var(--tga-muted);font-size:17px;line-height:1;padding:0 2px;transition:color .15s ease,transform .14s var(--tga-ease-out);}
.tga-file-tag button:hover{color:var(--tga-primary-dark);}
.tga-file-tag button:active{transform:scale(.85);}

/* --- WhatsApp-Button auf dem Kontaktschritt --- */
.tga-wa-inline{margin-top:22px;padding-top:20px;border-top:1px dashed var(--tga-line);}
.tga-wa-inline .tga-btn-wa{width:100%;}

/* --- Prüfliste --- */
.tga-review{display:flex;flex-direction:column;}
.tga-review-row{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--tga-line);opacity:0;transform:translateY(6px);animation:tga-rise .42s var(--tga-ease-out) forwards;}
.tga-review-row:last-child{border-bottom:none;}
.tga-review-k{color:var(--tga-muted);font-size:13.5px;flex:none;width:42%;}
.tga-review-v{font-family:var(--tga-ui);font-weight:600;text-align:right;font-size:13.5px;color:var(--tga-ink);min-width:0;overflow-wrap:anywhere;}

/* --- Einwilligung --- */
.tga-consent{display:flex;gap:11px;align-items:flex-start;margin-top:22px;font-size:13px;color:var(--tga-muted);line-height:1.55;cursor:pointer;}
.tga-consent input{margin-top:3px;width:18px;height:18px;accent-color:var(--tga-primary);flex:none;}
.tga-consent a{color:var(--tga-primary);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
.tga-inline-err{color:#B3261E;font-size:12.5px;margin-top:8px;display:none;}
.tga-inline-err.is-shown{display:block;animation:tga-fade .2s var(--tga-ease-out);}

/* -------------------------------------------------------------------------
   Navigation
   ------------------------------------------------------------------------- */
.tga-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px var(--tga-pad);border-top:1px solid var(--tga-line);background:var(--tga-surface-2);}
.tga-nav--single{justify-content:stretch;}
.tga-btn{font-family:var(--tga-ui);font-weight:700;font-size:15px;border-radius:999px;padding:13px 24px;min-height:48px;cursor:pointer;border:1.5px solid transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  transition:background .17s ease,border-color .17s ease,transform .14s var(--tga-ease-out),box-shadow .17s ease,filter .17s ease;}
.tga-btn svg{width:16px;height:16px;}
.tga-btn--block{width:100%;}
.tga-btn:disabled{opacity:.55;cursor:not-allowed;}
.tga-btn.is-hidden{visibility:hidden;}
.tga-btn.is-loading{pointer-events:none;opacity:.85;}
.tga-btn:focus-visible{outline:2px solid var(--tga-primary);outline-offset:2px;}

.tga-btn-primary{background:var(--tga-primary);color:#fff;box-shadow:0 7px 18px -9px rgba(var(--tga-primary-rgb),.9);}
.tga-btn-primary:hover{background:var(--tga-primary-dark);}
.tga-btn-primary:active{transform:scale(.97);}
.tga-btn-primary:hover svg:last-child{transform:translateX(3px);}
.tga-btn-primary svg{transition:transform .26s var(--tga-ease-out);}

.tga-btn-ghost{background:var(--tga-card);color:var(--tga-ink);border-color:var(--tga-line-strong);}
.tga-btn-ghost:hover{border-color:var(--tga-primary);background:rgba(var(--tga-primary-rgb),.05);}
.tga-btn-ghost:active{transform:scale(.97);}

/* WhatsApp-Markengrün, weisse Beschriftung erzwungen (siehe Härtungsblock). */
.tga-btn-wa{background:#25D366;color:#fff;}
.tga-btn-wa:hover{filter:brightness(1.05);}
.tga-btn-wa:active{transform:scale(.97);}
.tga-btn-wa--block{width:100%;margin-top:14px;}

.tga-spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:tga-spin .7s linear infinite;}
@keyframes tga-spin{to{transform:rotate(360deg);}}

/* -------------------------------------------------------------------------
   Seitenleiste
   ------------------------------------------------------------------------- */
.tga-aside{position:sticky;top:20px;display:flex;flex-direction:column;gap:16px;min-width:0;}
@container tga (max-width:940px){.tga-aside{position:static;}}
@media(max-width:940px){.tga-aside{position:static;}}

.tga-price-card{background:var(--tga-dark);color:#fff;border-radius:var(--tga-radius);padding:22px;box-shadow:var(--tga-shadow);}
.tga-price-card .tga-eyebrow{color:var(--tga-accent);font-size:10.5px;}
.tga-price-card h4{font-family:var(--tga-ui);font-size:14px;font-weight:700;color:#fff;margin-top:5px;}
.tga-price-value{font-family:var(--tga-display);font-size:28px;font-weight:400;letter-spacing:-.02em;margin-top:12px;color:#fff;line-height:1.15;overflow-wrap:anywhere;}
.tga-price-note{font-size:11.5px;color:#C6CFBB;margin-top:10px;line-height:1.55;}

.tga-summary{background:var(--tga-card);border:1px solid var(--tga-line);border-radius:var(--tga-radius);box-shadow:var(--tga-shadow);overflow:hidden;}
.tga-summary-head{padding:17px 19px;background:var(--tga-dark);color:#fff;}
.tga-summary-head .tga-eyebrow{color:var(--tga-accent);font-size:10.5px;}
.tga-summary-head h4{font-family:var(--tga-ui);font-size:16px;font-weight:700;margin-top:4px;color:#fff;}
.tga-summary-body{padding:6px 19px 17px;}
.tga-summary-empty{color:var(--tga-faint);font-size:13.5px;padding:12px 0;}
.tga-summary-row{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px dashed var(--tga-line);font-size:13.5px;animation:tga-fade .3s var(--tga-ease-out);}
.tga-summary-row:last-child{border-bottom:none;}
.tga-summary-k{color:var(--tga-muted);flex:none;max-width:48%;overflow-wrap:anywhere;}
.tga-summary-v{font-family:var(--tga-ui);font-weight:600;text-align:right;color:var(--tga-ink);min-width:0;overflow-wrap:anywhere;}

.tga-help{background:var(--tga-card);border:1px solid var(--tga-line);border-radius:var(--tga-radius);padding:19px;font-size:13px;color:var(--tga-muted);}
.tga-help strong{display:block;color:var(--tga-ink);font-family:var(--tga-ui);font-weight:700;margin-bottom:6px;font-size:14px;}
.tga-help p{margin-bottom:4px;}
.tga-help-phones a{color:var(--tga-primary);font-weight:700;}

/* -------------------------------------------------------------------------
   Erfolgsbildschirm
   ------------------------------------------------------------------------- */
.tga-done{display:none;text-align:center;padding:48px var(--tga-pad) 44px;}
.tga-done.is-shown{display:block;animation:tga-fade .5s var(--tga-ease-out);}
.tga-done-badge{width:76px;height:76px;border-radius:50%;background:rgba(var(--tga-primary-rgb),.14);display:grid;place-items:center;margin:0 auto 20px;animation:tga-pop .55s var(--tga-spring);}
@keyframes tga-pop{0%{transform:scale(.6);opacity:0;}60%{transform:scale(1.08);}100%{transform:scale(1);opacity:1;}}
.tga-done-badge svg{width:38px;height:38px;color:var(--tga-ok);}
.tga-done .tga-h2{font-size:26px;margin-bottom:9px;}
.tga-done p{color:var(--tga-muted);max-width:50ch;margin:0 auto;}
.tga-ref{display:inline-block;font-family:var(--tga-ui);font-size:13px;background:var(--tga-surface);padding:9px 16px;border-radius:999px;margin-top:16px;color:var(--tga-ink);font-weight:700;font-variant-numeric:tabular-nums;}
.tga-next{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:620px;margin:28px auto 0;text-align:left;}
@container tga (max-width:580px){.tga-next{grid-template-columns:minmax(0,1fr);}}
@media(max-width:580px){.tga-next{grid-template-columns:minmax(0,1fr);}}
.tga-next-card{background:var(--tga-surface);border-radius:var(--tga-radius-sm);padding:16px;}
.tga-next-num{font-family:var(--tga-ui);font-size:12px;color:var(--tga-accent);font-weight:700;}
.tga-next-card strong{display:block;font-family:var(--tga-ui);font-size:14px;font-weight:700;margin:6px 0 3px;color:var(--tga-ink);}
.tga-next-card span{font-size:12.5px;color:var(--tga-muted);line-height:1.5;}

.tga-wa-share{max-width:460px;margin:28px auto 0;padding:18px;border:1px solid var(--tga-line);border-radius:var(--tga-radius);background:var(--tga-surface-2);}
.tga-wa-share .tga-btn-wa{width:100%;}
.tga-wa-note{font-size:11.5px;color:var(--tga-muted);margin-top:11px;line-height:1.55;text-align:left;}

.tga-done-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px;}

.tga-footnote{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;text-align:center;font-size:12px;color:var(--tga-muted);margin:16px auto 0;max-width:1140px;padding:0 20px 24px;}

/* -------------------------------------------------------------------------
   Honeypot — ausserhalb des Bildschirms, nie display:none (Bots überspringen
   versteckte Felder).
   ------------------------------------------------------------------------- */
.tga-hp{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;}

/* -------------------------------------------------------------------------
   Toast + Rütteln bei Validierungsfehlern
   ------------------------------------------------------------------------- */
@keyframes tga-shake{10%,90%{transform:translateX(-1px);}20%,80%{transform:translateX(2px);}30%,50%,70%{transform:translateX(-4px);}40%,60%{transform:translateX(4px);}}
.tga-shake{animation:tga-shake .42s var(--tga-ease-out);}

/* An <body> gehängt, nicht ans Widget, damit der Container-Query-Kontext
   dieses position:fixed-Element nicht am Panel verankert. */
.tga-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(140%);
  background:#1A2315;color:#fff;font-family:'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  padding:13px 20px;border-radius:14px;font-size:14px;font-weight:500;line-height:1.45;
  box-shadow:0 14px 36px -10px rgba(0,0,0,.5);z-index:99999;max-width:min(90vw,420px);
  transition:transform .42s cubic-bezier(0.23,1,0.32,1);}
.tga-toast.is-shown{transform:translateX(-50%) translateY(0);}

/* -------------------------------------------------------------------------
   Schmale Container: Innenabstände kürzen, damit die Navigationszeile passt.
   ------------------------------------------------------------------------- */
@container tga (max-width:440px){
  .tga-app{--tga-pad:18px;}
  .tga-nav{gap:10px;}
  .tga-h2{font-size:20px;}
  .tga-cards--lite{grid-template-columns:minmax(0,1fr);}
  .tga-step-val{min-width:74px;}
  .tga-btn{padding:13px 18px;}
}
@media(max-width:440px){
  .tga-app{--tga-pad:18px;}
  .tga-nav{gap:10px;}
  .tga-h2{font-size:20px;}
  .tga-cards--lite{grid-template-columns:minmax(0,1fr);}
  .tga-step-val{min-width:74px;}
  .tga-btn{padding:13px 18px;}
}

/* -------------------------------------------------------------------------
   Angeheftete Navigation auf schmalen Bildschirmen
   -------------------------------------------------------------------------
   Auf dem Telefon ist ein Schritt meist höher als der Viewport, die Zeile
   „Zurück / Weiter“ liegt also unterhalb der Falz und der Besucher muss bis
   ans Ende jedes Schritts scrollen, um sie zu finden. Angeheftet bleibt sie
   einen Daumen entfernt, während ausgefüllt wird.

   Zwei Dinge machen das möglich:

   • `.tga-panel` tauscht `overflow:hidden` gegen `overflow:clip`. Beide
     schneiden gleich ab — inklusive der runden Ecken — aber `hidden` erzeugt
     einen Scroll-Container, der `position:sticky` darin still abschaltet,
     `clip` dagegen nicht. Ein Browser ohne `overflow:clip` behält `hidden`,
     die Zeile bleibt einfach im Fluss, und das Formular funktioniert wie
     zuvor.

   • `position:fixed` kommt nicht in Frage. Überall dort, wo `.tga-app` ein
     Query-Container ist, macht dessen Layout-Containment ihn zum enthaltenden
     Block für fixierte Nachfahren — eine fixierte Leiste würde am Widget statt
     am Bildschirm hängen, aus demselben Grund, aus dem der Toast an <body>
     geht. Sticky ist in beiden Fällen richtig und vom Containment unberührt.

   Die Zeile ist das letzte Kind des Panels, ihr Sticky-Bereich endet also an
   dessen Unterkante: sie schwebt nie über der Seite darüber oder darunter.
   Auf dem Erfolgsbildschirm setzt das Skript sie auf `display:none`.
   ------------------------------------------------------------------------- */
@container tga (max-width:700px){
  .tga-panel{overflow:clip;}
  .tga-nav{position:sticky;bottom:0;z-index:12;
    padding-bottom:max(20px,env(safe-area-inset-bottom,0px));
    box-shadow:0 -12px 26px -20px rgba(var(--tga-dark-rgb),.75);}
  .tga-nav [data-tga-back]{flex:0 0 auto;}
  .tga-nav [data-tga-next]{flex:1 1 auto;}
}
@media(max-width:700px){
  .tga-panel{overflow:clip;}
  .tga-nav{position:sticky;bottom:0;z-index:12;
    padding-bottom:max(20px,env(safe-area-inset-bottom,0px));
    box-shadow:0 -12px 26px -20px rgba(var(--tga-dark-rgb),.75);}
  .tga-nav [data-tga-back]{flex:0 0 auto;}
  .tga-nav [data-tga-next]{flex:1 1 auto;}
}

/* -------------------------------------------------------------------------
   Barrierefreiheit
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .tga-app *,.tga-app *::before,.tga-app *::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;}
  .tga-card{opacity:1;transform:none;}
  .tga-review-row{opacity:1;transform:none;}
}
/* Hover-Transformationen auf Touch abschalten, wo :hover nach dem Tippen hängt. */
@media (hover: none){
  .tga-card:hover .tga-card-ic{transform:none;}
  .tga-drop:hover svg{transform:none;}
  .tga-btn-primary:hover svg{transform:none;}
  .tga-header:hover .tga-mark svg{transform:none;}
}
@media (hover: hover){
  .tga-header:hover .tga-mark svg{transform:rotate(-8deg) scale(1.06);}
  .tga-card:hover .tga-card-ic{transform:translateY(-2px) rotate(-3deg);}
  .tga-card:hover .tga-card-ic.is-custom{transform:translateY(-2px);}
}

/* =========================================================================
   Theme-Isolierung (Härtung)
   -------------------------------------------------------------------------
   Viele Themes und Page-Builder gestalten nackte <button>, <a> und
   Formularelemente im Inhaltsbereich mit einem zusammengesetzten Selektor wie
   `.entry-content button` (Spezifität 0,1,1). Das schlägt eine
   Komponentenregel mit einer Klasse wie `.tga-btn` (0,1,0) — die Farben des
   Themes bluten also ins Widget, obwohl `.tga-app` `all:initial` setzt, das
   nur dieses eine Element zurücksetzt, nicht seine Nachfahren.

   Jede Regel unten ist deshalb zweimal geschrieben:
     • `#tga-app …`                       — ID-Spezifität, erste Instanz.
     • `.tga-app.tga-app.tga-app …`       — 0,3,0, jede Instanz der Seite.
   Beide tragen `!important`, was zusammen jede realistische Theme-Regel
   schlägt, auch ein Theme, das `!important` auf `button` oder `a` setzt.
   Nackte spans und divs bleiben unangetastet: die gestaltet kein Theme.
   ========================================================================= */

/* Themes greifen bei Überschriften — manchmal bei `*` — zu `text-transform`
   und `letter-spacing`, was `all:initial` auf dem Wurzelelement nicht
   aufhalten kann. Beides über alle Nachfahren auf ID- / 0,3,0-Spezifität
   neutralisieren und danach die wenigen Stellen wieder setzen, an denen das
   Design sie absichtlich nutzt (die folgenden Regeln gewinnen, weil sie
   später kommen). */
#tga-app *,
.tga-app.tga-app.tga-app *{
  text-transform:none!important;
  letter-spacing:normal!important;
  /* `font-style` needs !important too: a theme that sets `font-style:italic`
     on headings — or on `*` — otherwise tilts the entire widget, because
     `all:initial` on the root does not reach descendants. The design uses no
     italics anywhere, so this can be absolute. */
  font-style:normal!important;
  text-indent:0!important;
  text-shadow:none!important;
  text-decoration-style:solid;
}

/* The hero and the top bar sit directly on the page background. With
   `all:initial` the wrapper is transparent, which is right for the embedded
   variants (they blend into whatever section they are dropped in) but leaves
   the hero unreadable on a dark theme. The two variants that actually own the
   page therefore carry the paper tone themselves. */
.tga-v-full,
.tga-v-hero{background:var(--tga-paper);}
.tga-v-hero{border-radius:var(--tga-radius);padding-bottom:8px;}
#tga-app h1,#tga-app h2,#tga-app h3,#tga-app h4,#tga-app h5,#tga-app h6,
#tga-app p,#tga-app label,#tga-app input,#tga-app textarea,#tga-app select,
.tga-app.tga-app.tga-app h1,.tga-app.tga-app.tga-app h2,.tga-app.tga-app.tga-app h3,
.tga-app.tga-app.tga-app h4,.tga-app.tga-app.tga-app h5,.tga-app.tga-app.tga-app h6,
.tga-app.tga-app.tga-app p,.tga-app.tga-app.tga-app label,
.tga-app.tga-app.tga-app input,.tga-app.tga-app.tga-app textarea,.tga-app.tga-app.tga-app select{
  font-family:var(--tga-body)!important;
}
/* Bedienelemente laufen auf Figtree in kräftigen Schnitten. */
#tga-app .tga-brand,#tga-app .tga-eyebrow,#tga-app .tga-step-label,#tga-app .tga-card-h,
#tga-app .tga-cond-head,#tga-app .tga-step-val,#tga-app .tga-toggle-txt strong,
#tga-app .tga-drop strong,#tga-app .tga-btn,#tga-app .tga-chip,#tga-app .tga-label,
#tga-app .tga-summary-head h4,#tga-app .tga-price-card h4,#tga-app .tga-next-card strong,
#tga-app .tga-next-num,#tga-app .tga-help strong,#tga-app .tga-ref,#tga-app .tga-phone-pill,
#tga-app .tga-pin,#tga-app .tga-review-v,#tga-app .tga-summary-v,
.tga-app.tga-app.tga-app .tga-brand,.tga-app.tga-app.tga-app .tga-eyebrow,
.tga-app.tga-app.tga-app .tga-step-label,.tga-app.tga-app.tga-app .tga-card-h,
.tga-app.tga-app.tga-app .tga-cond-head,.tga-app.tga-app.tga-app .tga-step-val,
.tga-app.tga-app.tga-app .tga-toggle-txt strong,.tga-app.tga-app.tga-app .tga-drop strong,
.tga-app.tga-app.tga-app .tga-btn,.tga-app.tga-app.tga-app .tga-chip,
.tga-app.tga-app.tga-app .tga-label,.tga-app.tga-app.tga-app .tga-summary-head h4,
.tga-app.tga-app.tga-app .tga-price-card h4,.tga-app.tga-app.tga-app .tga-next-card strong,
.tga-app.tga-app.tga-app .tga-next-num,.tga-app.tga-app.tga-app .tga-help strong,
.tga-app.tga-app.tga-app .tga-ref,.tga-app.tga-app.tga-app .tga-phone-pill,
.tga-app.tga-app.tga-app .tga-pin,.tga-app.tga-app.tga-app .tga-review-v,
.tga-app.tga-app.tga-app .tga-summary-v{
  font-family:var(--tga-ui)!important;
}
/* Nur die grossen Überschriften tragen Caprasimo. */
#tga-app .tga-h1,#tga-app .tga-h2,#tga-app .tga-price-value,
.tga-app.tga-app.tga-app .tga-h1,.tga-app.tga-app.tga-app .tga-h2,
.tga-app.tga-app.tga-app .tga-price-value{
  font-family:var(--tga-display)!important;font-weight:400!important;
}
/* …und die bewusste Grossschreibung / Sperrung. */
#tga-app .tga-eyebrow,
.tga-app.tga-app.tga-app .tga-eyebrow{text-transform:uppercase!important;letter-spacing:.14em!important;}
#tga-app .tga-cond-head,
.tga-app.tga-app.tga-app .tga-cond-head{text-transform:uppercase!important;letter-spacing:.07em!important;}
#tga-app .tga-brand small,
.tga-app.tga-app.tga-app .tga-brand small{text-transform:uppercase!important;letter-spacing:.06em!important;font-family:var(--tga-ui)!important;}
#tga-app .tga-h1,
.tga-app.tga-app.tga-app .tga-h1{letter-spacing:-.018em!important;}
#tga-app .tga-h2,
.tga-app.tga-app.tga-app .tga-h2{letter-spacing:-.012em!important;}
#tga-app .tga-price-value,
.tga-app.tga-app.tga-app .tga-price-value{letter-spacing:-.02em!important;}
#tga-app .tga-step-val em,
.tga-app.tga-app.tga-app .tga-step-val em{font-style:normal!important;}

/* Geerbte Theme-Optik auf nativen Elementen neutralisieren. */
/* Themes hand out generous `padding`, `margin` and `min-height` on bare
   <button>. Zero them all here and re-assert the real geometry on each
   component below — those rules come later in the file, so they win.

   `font-family` belongs here too: a theme that writes
   `button{font-family:"Comic Sans MS"!important}` beats the non-important
   `.tga-app button{font-family:inherit}` further up, and every <span> nested
   inside the button then inherits the theme's face. Card titles are listed
   individually in the UI-font block above, but their explanatory second
   lines are not — one rule on the button itself covers both, and every
   future one. */
#tga-app button,
.tga-app.tga-app.tga-app button{
  font-family:var(--tga-ui)!important;
  -webkit-appearance:none!important;appearance:none!important;
  background:none!important;background-color:transparent!important;background-image:none!important;
  color:inherit!important;box-shadow:none!important;text-shadow:none!important;
  text-transform:none!important;letter-spacing:normal!important;white-space:normal!important;
  min-height:0!important;width:auto!important;float:none!important;
  padding:0!important;margin:0!important;line-height:1.55!important;font-size:16px!important;
}
#tga-app a,
.tga-app.tga-app.tga-app a{color:inherit!important;background:none!important;text-decoration:none!important;}
#tga-app .tga-consent a,
.tga-app.tga-app.tga-app .tga-consent a{text-decoration:underline!important;}

/* Leistungskarten. */
#tga-app .tga-card,
.tga-app.tga-app.tga-app .tga-card{background:var(--tga-card)!important;border:1.5px solid var(--tga-line)!important;border-radius:var(--tga-radius-sm)!important;width:100%!important;min-width:0!important;max-width:100%!important;overflow-wrap:anywhere;}
#tga-app .tga-card:hover,
.tga-app.tga-app.tga-app .tga-card:hover{background:var(--tga-surface-2)!important;border-color:var(--tga-line-strong)!important;}
#tga-app .tga-card.is-sel,
.tga-app.tga-app.tga-app .tga-card.is-sel{background:rgba(var(--tga-primary-rgb),.07)!important;border-color:var(--tga-primary)!important;box-shadow:0 0 0 3px rgba(var(--tga-primary-rgb),.12)!important;}
#tga-app .tga-card-ic,
.tga-app.tga-app.tga-app .tga-card-ic{background:var(--tga-surface)!important;color:var(--tga-primary)!important;}
#tga-app .tga-card.is-sel .tga-card-ic,
.tga-app.tga-app.tga-app .tga-card.is-sel .tga-card-ic{background:var(--tga-primary)!important;color:#fff!important;}
#tga-app .tga-card-ic.is-custom,
#tga-app .tga-card.is-sel .tga-card-ic.is-custom,
.tga-app.tga-app.tga-app .tga-card-ic.is-custom,
.tga-app.tga-app.tga-app .tga-card.is-sel .tga-card-ic.is-custom{background:#fff!important;}
#tga-app .tga-card-h,
.tga-app.tga-app.tga-app .tga-card-h{color:var(--tga-ink)!important;}
#tga-app .tga-card-p,
.tga-app.tga-app.tga-app .tga-card-p{color:var(--tga-muted)!important;}
#tga-app .tga-card-check,
.tga-app.tga-app.tga-app .tga-card-check{border:2px solid var(--tga-line-strong)!important;}
#tga-app .tga-card.is-sel .tga-card-check,
.tga-app.tga-app.tga-app .tga-card.is-sel .tga-card-check{background:var(--tga-primary)!important;border-color:var(--tga-primary)!important;}

/* Chips. */
#tga-app .tga-chip,
.tga-app.tga-app.tga-app .tga-chip{background:var(--tga-card)!important;color:var(--tga-ink)!important;border:1.5px solid var(--tga-line)!important;border-radius:999px!important;}
#tga-app .tga-chip.is-sel,
.tga-app.tga-app.tga-app .tga-chip.is-sel{background:var(--tga-primary)!important;color:#fff!important;border-color:var(--tga-primary)!important;}

/* Kacheln. */
#tga-app .tga-tile,
.tga-app.tga-app.tga-app .tga-tile{background:var(--tga-card)!important;color:var(--tga-ink)!important;border:1.5px solid var(--tga-line)!important;border-radius:var(--tga-radius-sm)!important;width:100%!important;}
#tga-app .tga-tile.is-sel,
.tga-app.tga-app.tga-app .tga-tile.is-sel{background:rgba(var(--tga-primary-rgb),.07)!important;border-color:var(--tga-primary)!important;}
#tga-app .tga-tile-box,
.tga-app.tga-app.tga-app .tga-tile-box{border:1.5px solid var(--tga-line-strong)!important;border-radius:6px!important;width:20px!important;}
#tga-app .tga-tile.is-sel .tga-tile-box,
.tga-app.tga-app.tga-app .tga-tile.is-sel .tga-tile-box{background:var(--tga-primary)!important;border-color:var(--tga-primary)!important;}

/* Stepper. */
#tga-app .tga-step-btn,
.tga-app.tga-app.tga-app .tga-step-btn{background:var(--tga-surface)!important;color:var(--tga-ink)!important;border-radius:50%!important;width:38px!important;min-height:38px!important;}
#tga-app .tga-step-btn:hover,
.tga-app.tga-app.tga-app .tga-step-btn:hover{background:rgba(var(--tga-primary-rgb),.14)!important;color:var(--tga-primary)!important;}

/* Dringend-Schalter + Ablagefläche (beide sind <button>-Elemente). */
#tga-app .tga-toggle-row,
.tga-app.tga-app.tga-app .tga-toggle-row{background:var(--tga-card)!important;border:1.5px solid var(--tga-line)!important;border-radius:var(--tga-radius-sm)!important;width:100%!important;}
#tga-app .tga-toggle-row.is-on,
.tga-app.tga-app.tga-app .tga-toggle-row.is-on{background:rgba(var(--tga-accent-rgb),.10)!important;border-color:var(--tga-accent)!important;}
#tga-app .tga-drop,
.tga-app.tga-app.tga-app .tga-drop{background:var(--tga-surface-2)!important;border:1.5px dashed var(--tga-line-strong)!important;border-radius:var(--tga-radius-sm)!important;width:100%!important;color:inherit!important;}
#tga-app .tga-drop:hover,
#tga-app .tga-drop.is-dragging,
.tga-app.tga-app.tga-app .tga-drop:hover,
.tga-app.tga-app.tga-app .tga-drop.is-dragging{background:rgba(var(--tga-primary-rgb),.06)!important;border-color:var(--tga-primary)!important;}

/* Buttons (auch als <a class="tga-btn …"> verwendet). */
#tga-app .tga-btn,
.tga-app.tga-app.tga-app .tga-btn{border:1.5px solid transparent!important;border-radius:999px!important;min-height:48px!important;}
#tga-app .tga-btn--block,
.tga-app.tga-app.tga-app .tga-btn--block{width:100%!important;}
#tga-app .tga-btn-primary,
#tga-app a.tga-btn-primary,
.tga-app.tga-app.tga-app .tga-btn-primary,
.tga-app.tga-app.tga-app a.tga-btn-primary{background:var(--tga-primary)!important;color:#fff!important;box-shadow:0 7px 18px -9px rgba(var(--tga-primary-rgb),.9)!important;}
#tga-app .tga-btn-primary:hover,
.tga-app.tga-app.tga-app .tga-btn-primary:hover{background:var(--tga-primary-dark)!important;}
#tga-app .tga-btn-ghost,
.tga-app.tga-app.tga-app .tga-btn-ghost{background:var(--tga-card)!important;color:var(--tga-ink)!important;border-color:var(--tga-line-strong)!important;}
#tga-app .tga-btn-ghost:hover,
.tga-app.tga-app.tga-app .tga-btn-ghost:hover{border-color:var(--tga-primary)!important;}

/* WhatsApp: grüner Markenhintergrund, WEISSE Beschriftung. Auf ID- /
   0,3,0-Spezifität mit !important geschrieben, damit weder die Linkfarbe
   eines Themes noch `.tga-help a` weiter oben in dieser Datei den Text je
   umfärben kann. */
#tga-app .tga-btn-wa,
#tga-app a.tga-btn-wa,
#tga-app .tga-btn-wa span,
#tga-app .tga-btn-wa svg,
.tga-app.tga-app.tga-app .tga-btn-wa,
.tga-app.tga-app.tga-app a.tga-btn-wa,
.tga-app.tga-app.tga-app .tga-btn-wa span,
.tga-app.tga-app.tga-app .tga-btn-wa svg{color:#fff!important;fill:currentColor;}
#tga-app .tga-btn-wa,
#tga-app a.tga-btn-wa,
.tga-app.tga-app.tga-app .tga-btn-wa,
.tga-app.tga-app.tga-app a.tga-btn-wa{background:#25D366!important;border-color:#25D366!important;text-decoration:none!important;}

/* Links mit einer bewussten Farbe. */
#tga-app .tga-topbar a,
.tga-app.tga-app.tga-app .tga-topbar a{color:#D3DBC8!important;}
#tga-app .tga-topbar a:hover,
.tga-app.tga-app.tga-app .tga-topbar a:hover{color:#fff!important;}
#tga-app .tga-help-phones a,
.tga-app.tga-app.tga-app .tga-help-phones a{color:var(--tga-primary)!important;}
#tga-app .tga-consent a,
.tga-app.tga-app.tga-app .tga-consent a{color:var(--tga-primary)!important;}
#tga-app .tga-phone-pill,
.tga-app.tga-app.tga-app .tga-phone-pill{color:var(--tga-ink)!important;border:1px solid var(--tga-line-strong)!important;}

/* Formularelemente. */
#tga-app input[type=text],#tga-app input[type=tel],#tga-app input[type=email],
#tga-app input[type=date],#tga-app input[type=number],#tga-app input[type=url],
#tga-app select,#tga-app textarea,
.tga-app.tga-app.tga-app input[type=text],.tga-app.tga-app.tga-app input[type=tel],
.tga-app.tga-app.tga-app input[type=email],.tga-app.tga-app.tga-app input[type=date],
.tga-app.tga-app.tga-app input[type=number],.tga-app.tga-app.tga-app input[type=url],
.tga-app.tga-app.tga-app select,.tga-app.tga-app.tga-app textarea{
  background:var(--tga-card)!important;color:var(--tga-ink)!important;border:1.5px solid var(--tga-line)!important;
  border-radius:var(--tga-radius-xs)!important;width:100%!important;max-width:100%!important;font-family:var(--tga-body)!important;
}
#tga-app input:focus,#tga-app select:focus,#tga-app textarea:focus,
.tga-app.tga-app.tga-app input:focus,.tga-app.tga-app.tga-app select:focus,.tga-app.tga-app.tga-app textarea:focus{
  border-color:var(--tga-primary)!important;
}

/* Überschriften und Absätze: die stylen Themes im Inhalt besonders gern um. */
#tga-app .tga-h1,#tga-app .tga-h2,
.tga-app.tga-app.tga-app .tga-h1,.tga-app.tga-app.tga-app .tga-h2{
  color:var(--tga-ink)!important;text-transform:none!important;
}
#tga-app .tga-summary-head h4,#tga-app .tga-price-card h4,#tga-app .tga-price-value,
.tga-app.tga-app.tga-app .tga-summary-head h4,.tga-app.tga-app.tga-app .tga-price-card h4,
.tga-app.tga-app.tga-app .tga-price-value{color:#fff!important;}

/* Die echte Geometrie jeder Komponente wieder setzen, nachdem der
   generische <button>-Reset oben Padding, Margin und Zeilenhöhe genullt hat. */
#tga-app .tga-card,
.tga-app.tga-app.tga-app .tga-card{padding:16px 42px 16px 16px!important;line-height:1.55!important;}
#tga-app .tga-card--lite,
.tga-app.tga-app.tga-app .tga-card--lite{padding:13px!important;}
#tga-app .tga-chip,
.tga-app.tga-app.tga-app .tga-chip{padding:11px 18px!important;min-height:44px!important;width:auto!important;font-size:14px!important;line-height:1.4!important;}
#tga-app .tga-tile,
.tga-app.tga-app.tga-app .tga-tile{padding:12px 14px!important;min-height:48px!important;font-size:14px!important;line-height:1.45!important;}
#tga-app .tga-btn,
.tga-app.tga-app.tga-app .tga-btn{padding:13px 24px!important;font-size:15px!important;line-height:1.4!important;}
#tga-app .tga-toggle-row,
.tga-app.tga-app.tga-app .tga-toggle-row{padding:15px 17px!important;min-height:44px!important;line-height:1.5!important;}
#tga-app .tga-drop,
.tga-app.tga-app.tga-app .tga-drop{padding:28px 18px!important;line-height:1.5!important;}
#tga-app .tga-step-btn,
.tga-app.tga-app.tga-app .tga-step-btn{padding:0!important;height:38px!important;font-size:16px!important;}
#tga-app .tga-file-tag button,
.tga-app.tga-app.tga-app .tga-file-tag button{padding:0 2px!important;font-size:17px!important;line-height:1!important;}
#tga-app .tga-phone-pill,
.tga-app.tga-app.tga-app .tga-phone-pill{padding:10px 17px!important;min-height:44px!important;border-radius:999px!important;}
#tga-app .tga-card-h,#tga-app .tga-card-p,#tga-app .tga-toggle-txt strong,#tga-app .tga-toggle-txt span,
.tga-app.tga-app.tga-app .tga-card-h,.tga-app.tga-app.tga-app .tga-card-p,
.tga-app.tga-app.tga-app .tga-toggle-txt strong,.tga-app.tga-app.tga-app .tga-toggle-txt span{
  font-size:inherit;line-height:inherit;
}
#tga-app .tga-card-h,
.tga-app.tga-app.tga-app .tga-card-h{font-size:15px!important;line-height:1.35!important;}
#tga-app .tga-card-p,
.tga-app.tga-app.tga-app .tga-card-p{font-size:12.5px!important;line-height:1.5!important;}

/* Die Papierfläche der seitenfüllenden Varianten auch gegen ein Theme
   durchsetzen, das `background` auf Container legt. */
#tga-app.tga-v-full,#tga-app.tga-v-hero,
.tga-app.tga-app.tga-app.tga-v-full,.tga-app.tga-app.tga-app.tga-v-hero{
  background:var(--tga-paper)!important;
}
/* Fliesstext und Überschriften behalten ihre Farbe, auch wenn das Theme
   `color` auf p/span/div legt. */
#tga-app .tga-lead,#tga-app .tga-sub,#tga-app .tga-card-p,
.tga-app.tga-app.tga-app .tga-lead,.tga-app.tga-app.tga-app .tga-sub,
.tga-app.tga-app.tga-app .tga-card-p{color:var(--tga-muted)!important;}
#tga-app .tga-trust span,#tga-app .tga-label,#tga-app .tga-step-label,
.tga-app.tga-app.tga-app .tga-trust span,.tga-app.tga-app.tga-app .tga-label,
.tga-app.tga-app.tga-app .tga-step-label{color:var(--tga-ink)!important;}
#tga-app .tga-eyebrow,
.tga-app.tga-app.tga-app .tga-eyebrow{color:var(--tga-accent)!important;}
#tga-app .tga-trust svg,
.tga-app.tga-app.tga-app .tga-trust svg{color:var(--tga-ok)!important;}
#tga-app .tga-topbar,#tga-app .tga-topbar span,
.tga-app.tga-app.tga-app .tga-topbar,.tga-app.tga-app.tga-app .tga-topbar span{color:#fff!important;}
#tga-app .tga-summary-body,#tga-app .tga-summary-k,
.tga-app.tga-app.tga-app .tga-summary-body,.tga-app.tga-app.tga-app .tga-summary-k{color:var(--tga-muted)!important;}

/* Material-Vergleichskarten (<button>-Elemente). */
#tga-app .tga-opt,
.tga-app.tga-app.tga-app .tga-opt{background:var(--tga-card)!important;color:var(--tga-ink)!important;
  border:1.5px solid var(--tga-line)!important;border-radius:var(--tga-radius-sm)!important;
  width:100%!important;min-width:0!important;max-width:100%!important;
  padding:13px 14px 14px!important;line-height:1.45!important;font-size:14px!important;overflow-wrap:anywhere;}
#tga-app .tga-opt:hover,
.tga-app.tga-app.tga-app .tga-opt:hover{background:var(--tga-surface-2)!important;border-color:var(--tga-line-strong)!important;}
#tga-app .tga-opt.is-sel,
.tga-app.tga-app.tga-app .tga-opt.is-sel{background:rgba(var(--tga-primary-rgb),.07)!important;border-color:var(--tga-primary)!important;
  box-shadow:inset 0 0 0 1px var(--tga-primary)!important;}
#tga-app .tga-opt-h,
.tga-app.tga-app.tga-app .tga-opt-h{color:var(--tga-ink)!important;font-family:var(--tga-ui)!important;font-size:14px!important;line-height:1.35!important;}
#tga-app .tga-opt-p,
.tga-app.tga-app.tga-app .tga-opt-p{color:var(--tga-muted)!important;font-size:12px!important;line-height:1.45!important;}
/* Der Farbtupfer trägt seine Farbe inline — ein Theme-Hintergrund würde ihn
   verfälschen, ein Theme-Rahmen ihn verziehen. */
#tga-app .tga-opt-sw,
.tga-app.tga-app.tga-app .tga-opt-sw{height:26px!important;border-radius:7px!important;border:1px solid rgba(var(--tga-ink-rgb),.10)!important;}

/* Maßband-Regler. */
#tga-app .tga-tape,
.tga-app.tga-app.tga-app .tga-tape{background:var(--tga-card)!important;border:1.5px solid var(--tga-line)!important;
  border-radius:var(--tga-radius-sm)!important;padding:15px 17px 13px!important;width:100%!important;max-width:100%!important;}
#tga-app .tga-tape-cap,
.tga-app.tga-app.tga-app .tga-tape-cap{color:var(--tga-muted)!important;font-size:12.5px!important;line-height:1.45!important;}
#tga-app .tga-tape-val,
.tga-app.tga-app.tga-app .tga-tape-val{background:var(--tga-surface)!important;border:1.5px solid var(--tga-line)!important;border-radius:var(--tga-radius-xs)!important;}
/* (1,1,1) bzw. (0,4,1) und später in der Datei — schlägt damit die
   generische input[type=text]-Regel weiter oben, die dem Zahlenfeld sonst
   volle Breite, 48px Höhe und einen Rahmen aufzwingen würde. */
#tga-app input.tga-tape-num,
.tga-app.tga-app.tga-app input.tga-tape-num{background:transparent!important;border:0!important;border-radius:0!important;
  width:4.6ch!important;max-width:6ch!important;min-height:0!important;padding:0!important;
  color:var(--tga-ink)!important;font-family:var(--tga-ui)!important;text-align:right!important;
  font-size:22px!important;font-weight:700!important;line-height:1.15!important;}
#tga-app .tga-tape-rail,
.tga-app.tga-app.tga-app .tga-tape-rail{background:var(--tga-surface)!important;border:1px solid var(--tga-line)!important;border-radius:999px!important;}
#tga-app .tga-tape-fill,
.tga-app.tga-app.tga-app .tga-tape-fill{background:var(--tga-primary)!important;border-radius:999px!important;}
/* Der Regler ist ein <input> ohne type-Treffer in den Regeln oben, aber
   Themes greifen ihn trotzdem über nackte input-Selektoren ab. */
#tga-app .tga-tape-range,
.tga-app.tga-app.tga-app .tga-tape-range{-webkit-appearance:none!important;appearance:none!important;
  background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important;
  width:100%!important;height:44px!important;min-height:0!important;}
#tga-app .tga-tape-chip,
.tga-app.tga-app.tga-app .tga-tape-chip{background:var(--tga-surface)!important;color:var(--tga-muted)!important;
  border:1.5px solid var(--tga-line)!important;border-radius:999px!important;
  padding:7px 14px!important;width:auto!important;min-height:0!important;font-size:12.5px!important;line-height:1.4!important;
  font-family:var(--tga-ui)!important;}
#tga-app .tga-tape-chip.is-sel,
.tga-app.tga-app.tga-app .tga-tape-chip.is-sel{background:var(--tga-primary)!important;border-color:var(--tga-primary)!important;color:#fff!important;}
#tga-app .tga-tape-scale,#tga-app .tga-tape-scale span,#tga-app .tga-tape-note,
.tga-app.tga-app.tga-app .tga-tape-scale,.tga-app.tga-app.tga-app .tga-tape-scale span,
.tga-app.tga-app.tga-app .tga-tape-note{color:var(--tga-muted)!important;}
#tga-app .tga-tape-note svg,
.tga-app.tga-app.tga-app .tga-tape-note svg{color:var(--tga-accent)!important;}

/* Aufklappzeile. <details>/<summary> sind Elemente, die kaum ein Theme
   anfasst — aber `list-style` und der Marker sitzen auf <summary> selbst und
   müssen erzwungen werden, sonst steht ein fremdes Dreieck davor. */
#tga-app .tga-more,
.tga-app.tga-app.tga-app .tga-more{display:block!important;border-radius:var(--tga-radius-sm)!important;
  width:100%!important;max-width:100%!important;background:var(--tga-surface-2)!important;}
#tga-app .tga-more[open],
.tga-app.tga-app.tga-app .tga-more[open]{background:var(--tga-card)!important;}
#tga-app .tga-more-head,
.tga-app.tga-app.tga-app .tga-more-head{list-style:none!important;display:flex!important;
  padding:14px 17px!important;line-height:1.5!important;cursor:pointer!important;}
#tga-app .tga-more-head::-webkit-details-marker,
.tga-app.tga-app.tga-app .tga-more-head::-webkit-details-marker{display:none!important;}
#tga-app .tga-more-txt strong,
.tga-app.tga-app.tga-app .tga-more-txt strong{color:var(--tga-ink)!important;font-family:var(--tga-ui)!important;font-size:14.5px!important;}
#tga-app .tga-more-txt span,
.tga-app.tga-app.tga-app .tga-more-txt span{color:var(--tga-muted)!important;font-size:12.5px!important;}
#tga-app .tga-more-chev,
.tga-app.tga-app.tga-app .tga-more-chev{background:var(--tga-card)!important;color:var(--tga-primary)!important;border-radius:50%!important;}

/* Rastersicherheit: die min-width eines Themes darf nie waagerecht überlaufen. */
#tga-app .tga-cards,#tga-app .tga-tiles,#tga-app .tga-opts,
.tga-app.tga-app.tga-app .tga-cards,.tga-app.tga-app.tga-app .tga-tiles,
.tga-app.tga-app.tga-app .tga-opts{width:100%!important;max-width:100%!important;}