/* ── TOOLTIP SYSTEM — #667 ─────────────────────────────── */
.tip-wrap{position:relative;display:inline-flex;align-items:center;vertical-align:middle}
.tip-icon{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:rgba(100,116,139,.15);color:#64748b;font-size:10px;font-weight:700;cursor:default;margin-left:4px;flex-shrink:0;line-height:1;user-select:none;transition:background .15s,color .15s;border:1px solid rgba(100,116,139,.2)}
.tip-icon:hover{background:rgba(0,120,174,.18);color:#0078AE;border-color:rgba(0,120,174,.3)}
/* #1300: `width:max-content` ist hier KEINE Verschoenerung, sondern die Reparatur.
   Eine absolut gesetzte Blase mit nur `left` leitet ihre Breite aus dem UMGEBENDEN
   Block ab, und das ist `.tip-wrap` - ein Kasten von 19 bis 24 Pixeln, der nur das
   Fragezeichen enthaelt. `max-width` kam damit NIE zum Zug, `min-width:100px` klemmte,
   und jede Blase im ganzen Produkt war 100px breit. Gemessen auf /pricing: 100 x 851 px
   fuer 503 Zeichen, also rund 53 Zeilen in einer Saeule, die die halbe Preiskarte samt
   Kaufknopf verdeckte. `max-content` laesst die Breite vom INHALT kommen; erst dadurch
   wird `max-width` ueberhaupt wirksam.

   DIE RANDKLAMMER (--tip-schub) gehoert zwingend dazu: eine 260px breite Blase, die auf
   einem Zeichen nahe am Bildrand zentriert steht, laeuft sonst seitlich aus dem Bild -
   ein Fehler, den die 100px-Breite bisher zufaellig verdeckt hat.
   static/js/tooltips_tippen.js misst nach dem Oeffnen und setzt den Schub; der Pfeil
   unten rechnet ihn wieder heraus und bleibt damit ueber dem Zeichen stehen. Ohne das
   Skript ist --tip-schub schlicht 0 und die Blase steht wie vorher zentriert. */
/* #1305 - DIE BLASE ERBT, WO SIE STEHT.
   Gemessen auf /profile/edit: `templates/profile_wizard.html:147` setzt
   `label { text-transform:uppercase; letter-spacing:.4px }`. Das Makro aus
   includes/tooltip.html steckt die Blase in genau dieses <label> - und beide
   Eigenschaften werden VERERBT. Der Hilfetext stand deshalb in Grossbuchstaben.
   Die Vorlage kannte das Problem fuer ihre EIGENEN Unterelemente (sechsmal
   `text-transform:none` von Hand daneben geschrieben); an die Blase hat niemand
   gedacht, weil sie aus einem Makro kommt und im Quelltext gar nicht als Text
   erscheint.
   Gezaehlt ueber alle 120 Vorlagen unter templates/ (ohne _archive): acht nutzen
   das Makro, 44 Aufrufe, davon NEUN innerhalb eines <label>. Eine Vorlage setzt
   die Eigenschaften am blanken Element-Selektor `label {}` - profile_wizard.html,
   und dort sind alle drei Aufrufe betroffen. Deshalb steht die Heilung hier an der
   Blase und nicht dort an der Vorlage: der naechste Hilfetext in einer
   Grossbuchstaben-Beschriftung soll gar nicht erst falsch aussehen.
   Es sind ausdruecklich ALLE vererbten Schrifteigenschaften, nicht nur die zwei
   gefundenen - die anderen sind im Baum reichlich vorhanden (271 Regeln in den
   zehn Vorlagen mit Hilfetexten) und wuerden dieselbe Klasse noch einmal
   aufmachen. */
.tip-bubble{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(calc(-50% + var(--tip-schub, 0px)));background:#153D64;color:#fff;font-size:12px;font-weight:400;line-height:1.5;padding:7px 11px;border-radius:7px;white-space:normal;width:max-content;max-width:min(380px, calc(100vw - 24px));min-width:100px;pointer-events:none;opacity:0;transition:opacity .18s ease;z-index:8000;box-shadow:0 4px 14px rgba(0,0,0,.22);text-align:left;text-transform:none;letter-spacing:normal;word-spacing:normal;font-style:normal;font-variant:normal;text-indent:0;text-shadow:none}
.tip-bubble::after{content:'';position:absolute;top:100%;left:calc(50% - var(--tip-schub, 0px));transform:translateX(-50%);border:5px solid transparent;border-top-color:#153D64}
/* #1287: `tip-offen` kommt vom Antippen (static/js/tooltips_tippen.js). Hover deckt
   die Maus ab, focus-within die Tastatur - auf dem Handy gibt es weder das eine noch
   verlaesslich das andere. */
.tip-wrap:hover .tip-bubble,.tip-wrap:focus-within .tip-bubble,.tip-wrap.tip-offen .tip-bubble{opacity:1}
/* Angetippt bleibt die Blase stehen. VERWEISE DARIN sind anklickbar, die Blase selbst
   ist es NICHT (#1300): mit `pointer-events:auto` auf der ganzen Blase verschluckte eine
   offene Blase jeden Klick auf das, was unter ihr liegt. Gemessen auf /pricing: der
   Kaufknopf der Premium-Karte lag unter der Blase und war auf einem Beruehrungsgeraet
   nicht erreichbar. Ein Hilfetext darf erklaeren, nicht blockieren. */
.tip-wrap.tip-offen .tip-bubble{pointer-events:none}
.tip-wrap.tip-offen .tip-bubble a{pointer-events:auto}
/* Ein Zeichen, das man antippen soll, sieht auch antippbar aus. */
.tip-icon{cursor:pointer}
/* Aufzaehlung: Zeilenumbrueche im Text bleiben erhalten (stil='liste'). */
.tip-bubble.tip-liste{white-space:pre-line;line-height:1.55}
/* #1303: `stil='breit'` ist ersatzlos entfallen. Die Obergrenze der GRUNDREGEL steht
   jetzt auf 380px, und das ist ein gemessener Wert, kein geschaetzter: der laengste
   Hilfetext im ganzen Baum hat 443 Zeichen (der ATS-Text auf /coach, gezaehlt ueber alle
   220 tip()-Aufrufe). In Inter Tight 12px/18px braucht er
       370px -> 8 Zeilen      380px -> 7 Zeilen      430px -> 6 Zeilen
   380px ist damit der kleinste Wert, bei dem KEIN Hilfetext im Baum ueber sieben Zeilen
   kommt. Eine zweite, breitere Variante braucht es dafuer nicht mehr. */
/* AUF DUNKLEM GRUND. Das Zeichen ist grau auf halbdurchsichtigem Grau - entworfen fuer
   helle Flaechen. Auf dem dunkelblauen Kopfbereich von /coach ist es damit praktisch
   unsichtbar, dieselbe Fehlerklasse wie beim Rueckweg-Knopf (#1300 Punkt 3b). Eine
   Kachel, die auf dunklem Grund sitzt, setzt `tip-dunkelgrund` auf die Huelle; Zeichen
   UND Blase richten sich danach. */
.tip-wrap.tip-dunkelgrund .tip-icon{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.75)}
.tip-wrap.tip-dunkelgrund .tip-icon:hover{background:rgba(255,255,255,.30);color:#fff;border-color:rgba(255,255,255,.85)}
.tip-wrap.tip-dunkelgrund .tip-bubble{border:1px solid rgba(255,255,255,.35)}
/* ══════════════════════════════════════════════════════════════════════════════
   #1303 - DIE BLASE LIEGT NICHT MEHR IN DER KARTE, SONDERN AUF EINER EIGENEN EBENE

   DER BEFUND (gemessen auf /pricing): die Blase war nach #1300 nicht mehr 100px schmal,
   der Text brach aber mitten im Wort ab ("tailors i", "it ge", "for th") - abgeschnitten
   an der rechten Kante der Preiskarte.

   DIE URSACHE IST DOPPELT, und der zweite Teil ist der wichtige:
     `.px-card` traegt `overflow:hidden`  -> beschneidet jedes absolut gesetzte Kind.
     `.px-card` traegt einen `transform`  -> und ein Element mit transform ist auch fuer
                                             `position:fixed`-Nachfahren der Bezugsrahmen.
   Ein blosses `position:fixed` an der Blase waere also NICHT herausgekommen. Der Text ist
   ausserdem laenger, als die Karte breit ist - innerhalb der Karte gibt es keine Loesung.

   DIE EBENE ist EIN Element, das `static/js/tooltips_tippen.js` einmal an `<body>`
   haengt. Beim Oeffnen wandert der Text hinein, das Skript stellt sie an die Stelle des
   Fragezeichens, klammert sie an den Fensterrand und klappt sie nach oben, wenn unten
   kein Platz ist. Der Pfeil zeigt weiter auf das Zeichen: `--tip-schub` traegt den
   Abstand zwischen der Mitte der Blase und der Mitte des Zeichens.

   OHNE DAS SKRIPT bleibt alles wie vorher - die Blase im Dokument, mit ihrer alten
   CSS-Loesung. Deshalb steht die Ausblendung an `html.tip-ebene-bereit`: die Klasse setzt
   das Skript selbst, erst wenn die Ebene wirklich steht.
   ══════════════════════════════════════════════════════════════════════════════ */
.tip-bubble.tip-ebene{position:fixed;left:0;top:0;right:auto;bottom:auto;
  transform:none;margin:0;z-index:9999;
  transition:opacity .18s ease,visibility 0s linear .18s;visibility:hidden}
.tip-bubble.tip-ebene.tip-ebene-an{opacity:1;visibility:visible;
  transition:opacity .18s ease,visibility 0s}
/* Der Pfeil der Ebene sitzt ueber dem Zeichen, nicht in der Mitte der Blase. */
.tip-bubble.tip-ebene::after{left:calc(50% - var(--tip-schub, 0px))}
/* Solange die Ebene arbeitet, schweigt die Blase im Dokument. `.tip-wrap` im Selektor
   ist wichtig: die Ebene selbst traegt auch `.tip-bubble`, liegt aber nicht in einer
   Huelle - sie darf hier nicht mitgetroffen werden. */
html.tip-ebene-bereit .tip-wrap .tip-bubble{display:none}
/* Auf dunklem Grund braucht die Ebene eine Kante. Sie steht nicht in der Huelle, kann
   die Regel `.tip-wrap.tip-dunkelgrund .tip-bubble` also nicht erben - das Skript setzt
   diese Klasse beim Oeffnen mit. */
.tip-bubble.tip-aufdunkel{border:1px solid rgba(255,255,255,.35)}

/* Position: bottom */
.tip-bubble.tip-b{bottom:auto;top:calc(100% + 8px)}
.tip-bubble.tip-b::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:#153D64}
/* Position: right */
.tip-bubble.tip-r{left:calc(100% + 8px);bottom:auto;top:50%;transform:translateY(-50%)}
.tip-bubble.tip-r::after{top:50%;left:-10px;transform:translateY(-50%);border-top-color:transparent;border-right-color:#153D64}
/* Label row helper */
.tip-lr{display:flex;align-items:center;gap:2px;margin-bottom:3px}
.tip-lr>label{margin-bottom:0!important;font-size:11px;font-weight:500;color:var(--muted,#64748b)}
/* Dark mode */
[data-theme="dark"] .tip-icon{background:rgba(148,163,184,.18);color:#94a3b8;border-color:rgba(148,163,184,.2)}
[data-theme="dark"] .tip-icon:hover{background:rgba(0,120,174,.25);color:#60a5fa;border-color:rgba(0,120,174,.4)}
[data-theme="dark"] .tip-bubble{background:#0f172a;border:1px solid #334155;box-shadow:0 4px 14px rgba(0,0,0,.5)}
[data-theme="dark"] .tip-bubble::after{border-top-color:#0f172a}
[data-theme="dark"] .tip-bubble.tip-b::after{border-top-color:transparent;border-bottom-color:#0f172a}