/* -------------------------------------------------------------------------- 1. Marken- und Rechenwerte -------------------------------------------------------------------------- Kontrast auf Navy #1a3a5c (relative Leuchtdichte L = 0.04416):#ffffff reines Weiss ................ 11,15:1 AA + AAA #dce5ef Fliesstext gedaempft ......... 8,57:1 AA + AAA #aebfd4 Beschriftungen,Sekundaeres .. 5,94:1 AA #9db0c8 Fundstellen,Fusszeile ....... 5,04:1 AA (auch als Kleinschrift) #c8a44e Gold,grosse Zahl ............ 4,70:1 AA Fliesstext,AAA gross #7fd6a6 Gruenton "out of pocket" ..... 6,27:1 AA #ff9e8f Rotton "out of pocket" ....... 5,64:1 AA Kontrast auf Weiss:#2d3748 Text ........................ 12,18:1 AA + AAA #5a6a82 gedaempft ................... 5,60:1 AA #1a3a5c Navy ........................ 11,15:1 AA + AAA #14663f Gruen (nur Druck) ........... 6,99:1 AA #9b1c1c Rot (nur Druck) ............. 8,17:1 AA + AAA ACHTUNG:Gold auf Weiss erreicht nur 2,37:1. Gold traegt daher nie Text auf hellem Grund - dort ist es ausschliesslich Linie,Rand und Fokusrahmen. -------------------------------------------------------------------------- */ .tla-rechner,.tla-kopf,.tla-formular,.tla-ergebnis,.tla-vergleich,.tla-fehler{--tla-navy:#1a3a5c;--tla-navy-tief:#14304c;--tla-gold:#c8a44e;--tla-gold-matt:#a8873a;--tla-text:#2d3748;--tla-gedaempft:#5a6a82;--tla-rahmen:#e8ecf2;--tla-flaeche:#f7f9fc;--tla-auf-navy:#dce5ef;--tla-auf-navy-leise:#aebfd4;--tla-auf-navy-fein:#9db0c8;--tla-gruen:#7fd6a6;--tla-gruen-dunkel:#14663f;--tla-rot:#ff9e8f;--tla-rot-dunkel:#9b1c1c;--tla-warn:#e0a458;--tla-schrift:Barlow,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--tla-radius:14px;--tla-radius-klein:8px;--tla-luft:20px}.tla-rechner-container{container-type:inline-size;container-name:tla;max-width:100%}.tla-rechner,.tla-formular,.tla-feld,.tla-blatt,.tla-blatt__teil,.tla-vergleich{min-width:0;max-width:100%}.tla-feld select,.tla-feld input{max-width:100%}.tla-rechner{display:grid;/* minmax(0,1fr),nicht 1fr:"1fr" heisst minmax(auto,1fr),und das Auto-Minimum ist die max-content-Breite des Inhalts. Auf dem Arbeitsblatt war das am 28.09.2026 das Formular mit 556px - auf einem 390px breiten Handy liess sich die ganze Seite seitlich schieben. */ grid-template-columns:minmax(0,1fr);gap:18px;align-items:start;box-sizing:border-box;margin:0;padding:0;max-width:100%;scroll-margin-top:96px;font-family:var(--tla-schrift);color:var(--tla-text);font-size:16px;line-height:1.55;text-align:left}.tla-rechner *,.tla-rechner *::before,.tla-rechner *::after{box-sizing:border-box}@container tla (min-width:720px){.tla-rechner{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:24px}/* 🔴 Der Haftbereich eines sticky Grid-Kindes ist in Chrome der GANZE Grid-Container,nicht seine Zeile. Am 29.09.2026 stand das Ergebnis deshalb im TDY-Modus quer ueber der Vergleichstabelle:das Panel klebte weiter,waehrend die Tabelle darunter durchlief,und verdeckte deren rechte Haelfte (Spalten "VQ on base" und "Hotel in the area"). Der Umschlag [data-tla-ergebnis] ist jetzt das Grid-Kind und wird auf die Zeilenhoehe gestreckt;sticky sitzt eine Ebene tiefer. Damit endet der Haftbereich dort,wo die Zeile endet - also spaetestens am oberen Rand der Verkaufsschicht. */ .tla-rechner>[data-tla-ergebnis]{align-self:stretch}.tla-rechner>.tla-ergebnis,.tla-rechner>[data-tla-ergebnis]>.tla-ergebnis{position:sticky;top:24px}.tla-rechner>.tla-vergleich,.tla-rechner>.tla-cta,.tla-rechner>.tla-garantie,.tla-rechner>.tla-faq,.tla-rechner>.tla-blattlink,.tla-rechner>.tla-quelle{position:relative;z-index:1}.tla-rechner>.tla-vergleich,.tla-rechner>.tla-quelle,.tla-rechner>.tla-cta,.tla-rechner>.tla-garantie,.tla-rechner>.tla-faq,.tla-rechner>.tla-blattlink,.tla-rechner>.tla-fehler{grid-column:1 / -1}}/* 🔴 Fallback fuer den @container-Block direkt darueber - ABSICHTLICH doppelt. Beobachtet am 27.09.2026:der LiteSpeed-CSS-Minifier hat von den zwei gleichlautenden @container-tla-Bloecken dieser Datei nur einen in die kombinierte Datei uebernommen;das Desktop-Layout fiel auf eine Spalte zusammen. Das Link-Tag traegt seitdem data-no-optimize="1" - und falls irgendein anderer Optimierer @container erneut frisst,haelt dieser @media-Block das Layout am WordPress-Desktop-Breakpoint 782px. Er muss inhaltlich mit dem @container-Block UND mit dem Arbeitsblatt-Block in Abschnitt 12 uebereinstimmen (deshalb hier auch --blatt einspaltig). */ @supports not (container-type:inline-size){@media screen and (min-width:782px){.tla-rechner{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:24px}/* 🔴 Der Haftbereich eines sticky Grid-Kindes ist in Chrome der GANZE Grid-Container,nicht seine Zeile. Am 29.09.2026 stand das Ergebnis deshalb im TDY-Modus quer ueber der Vergleichstabelle:das Panel klebte weiter,waehrend die Tabelle darunter durchlief,und verdeckte deren rechte Haelfte (Spalten "VQ on base" und "Hotel in the area"). Der Umschlag [data-tla-ergebnis] ist jetzt das Grid-Kind und wird auf die Zeilenhoehe gestreckt;sticky sitzt eine Ebene tiefer. Damit endet der Haftbereich dort,wo die Zeile endet - also spaetestens am oberen Rand der Verkaufsschicht. */ .tla-rechner>[data-tla-ergebnis]{align-self:stretch}.tla-rechner>.tla-ergebnis,.tla-rechner>[data-tla-ergebnis]>.tla-ergebnis{position:sticky;top:24px}.tla-rechner>.tla-vergleich,.tla-rechner>.tla-cta,.tla-rechner>.tla-garantie,.tla-rechner>.tla-faq,.tla-rechner>.tla-blattlink,.tla-rechner>.tla-quelle{position:relative;z-index:1}.tla-rechner>.tla-vergleich,.tla-rechner>.tla-quelle,.tla-rechner>.tla-cta,.tla-rechner>.tla-garantie,.tla-rechner>.tla-faq,.tla-rechner>.tla-blattlink,.tla-rechner>.tla-fehler{grid-column:1 / -1}.tla-rechner--blatt{grid-template-columns:minmax(0,1fr)}.tla-rechner--blatt>[data-tla-ergebnis],.tla-rechner--blatt>[data-tla-ergebnis]>.tla-ergebnis{position:static}}}/* Die Live-Seite hat dunklen Grund. Nur der kartenlose Kopf nutzt deshalb die vorhandene helle Schrift. Fuer helle Einbettungen am umgebenden Element data-tla-umfeld="hell" setzen oder --tla-kopf-farbe ueberschreiben. Die weiteren neuen Bloecke nutzen dieselbe weisse Karte wie das Formular;ihre Lesbarkeit ist damit unabhaengig vom Hintergrund des Themes. */ .tla-kopf{color:var(--tla-kopf-farbe,var(--tla-auf-navy));font-family:var(--tla-schrift)}[data-tla-umfeld="hell"] .tla-kopf{--tla-kopf-farbe:var(--tla-text)}.tla-kopf h1,.tla-kopf p{color:inherit}.tla-rechner .tla-cta,.tla-rechner .tla-garantie,.tla-rechner .tla-faq,.tla-rechner .tla-blattlink{margin:0;padding:var(--tla-luft);color:var(--tla-text);background:#ffffff;border:1px solid var(--tla-rahmen);border-radius:var(--tla-radius)}.tla-rechner :is(.tla-cta,.tla-garantie,.tla-faq) :is(h2,p,strong,summary){color:inherit}.tla-rechner .tla-blattlink a{color:var(--tla-navy);text-decoration:underline}.tla-cta__knoepfe{display:flex;flex-wrap:wrap;gap:12px}.tla-rechner .tla-cta a.tla-knopf{display:inline-flex;align-items:center;justify-content:center;width:auto;min-width:44px;min-height:44px;padding:12px 22px;color:var(--tla-auf-navy);background:var(--tla-navy);border:1px solid var(--tla-navy);border-radius:var(--tla-radius-klein);text-decoration:none;text-align:center;white-space:normal;box-shadow:none;transition:none;animation:none;transform:none}.tla-rechner .tla-cta a.tla-knopf--hell{color:var(--tla-navy);background:var(--tla-flaeche)}.tla-rechner .tla-cta a.tla-knopf:focus-visible{outline:3px solid var(--tla-navy);outline-offset:3px}.tla-formular{display:flex;flex-direction:column;gap:16px;margin:0;padding:var(--tla-luft);background:#ffffff;border:1px solid var(--tla-rahmen);border-radius:var(--tla-radius);box-shadow:0 1px 2px rgba(26,58,92,0.05);font-family:var(--tla-schrift);color:var(--tla-text)}.tla-formular[data-tla-live] noscript{display:none}.tla-formular:not(:has([name="mil_to_mil"]:checked)) [data-tla-nur-mil-to-mil]{display:none}.tla-formular:has([name="mil_to_mil"]:checked) [data-tla-ohne-mil-to-mil]{display:none}.tla-feld{display:block;margin:0}.tla-feld>span,.tla-feld__text{display:block;margin-bottom:6px;font-size:14px;font-weight:600;line-height:1.35;letter-spacing:0.01em;color:var(--tla-text)}.tla-feld__hilfe{display:block;margin:-2px 0 8px;font-size:13px;font-weight:400;line-height:1.45;letter-spacing:0;color:var(--tla-gedaempft)}.tla-feld input[type="text"],.tla-feld input[type="number"],.tla-feld input[type="date"],.tla-feld input[type="email"],.tla-feld select,.tla-formular input[type="text"],.tla-formular input[type="number"],.tla-formular input[type="date"],.tla-formular select{display:block;width:100%;min-height:46px;padding:10px 12px;font-family:inherit;font-size:16px;font-weight:500;line-height:1.4;color:var(--tla-text);font-variant-numeric:tabular-nums;background:#ffffff;border:1px solid #cfd8e4;border-radius:var(--tla-radius-klein);appearance:none;-webkit-appearance:none;transition:border-color 140ms ease,box-shadow 140ms ease}.tla-formular select{padding-right:34px;background-image:linear-gradient(45deg,transparent 50%,var(--tla-gedaempft) 50%),linear-gradient(135deg,var(--tla-gedaempft) 50%,transparent 50%);background-position:calc(100% - 18px) calc(50% + 1px),calc(100% - 13px) calc(50% + 1px);background-size:5px 5px,5px 5px;background-repeat:no-repeat}.tla-formular input:hover,.tla-formular select:hover{border-color:#b3c1d3}.tla-formular input:focus,.tla-formular select:focus{border-color:var(--tla-navy);box-shadow:0 0 0 3px rgba(26,58,92,0.1);outline:none}.tla-feld--schalter{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:12px;row-gap:2px;align-items:start;min-height:44px;padding:10px 8px 10px 0;margin-left:-4px;padding-left:4px;border-radius:var(--tla-radius-klein);cursor:pointer}.tla-feld--schalter:hover{background:var(--tla-flaeche)}.tla-feld--schalter input[type="checkbox"]{grid-column:1;grid-row:1;width:22px;height:22px;margin:0;outline-offset:3px;accent-color:var(--tla-navy);cursor:pointer;flex:none}.tla-feld--schalter>span,.tla-feld--schalter .tla-feld__text{grid-column:2;grid-row:1;margin-bottom:0;align-self:center;font-size:15px;font-weight:600}.tla-feld--schalter .tla-feld__hilfe{grid-column:2;grid-row:2;margin:2px 0 0}.tla-knopf{display:inline-flex;align-items:center;justify-content:center;min-height:48px;min-width:44px;width:100%;padding:12px 22px;font-family:inherit;font-size:16px;font-weight:700;letter-spacing:0.02em;color:#ffffff;background:var(--tla-navy);border:1px solid var(--tla-navy);border-radius:var(--tla-radius-klein);cursor:pointer;transition:background-color 140ms ease,transform 100ms ease}.tla-knopf:hover{background:#12304f}.tla-knopf:active{transform:translateY(1px)}.tla-ergebnis{padding:var(--tla-luft);background:var(--tla-navy);border:1px solid var(--tla-navy);border-radius:var(--tla-radius);font-family:var(--tla-schrift);color:var(--tla-auf-navy);font-size:15px;line-height:1.55;overflow:hidden}.tla-rechner .tla-ergebnis p,.tla-rechner .tla-ergebnis li,.tla-rechner .tla-ergebnis dt,.tla-rechner .tla-ergebnis dd,.tla-rechner .tla-ergebnis span,.tla-rechner .tla-ergebnis em,.tla-rechner .tla-ergebnis h2,.tla-rechner .tla-ergebnis h3{color:inherit !important}.tla-rechner .tla-ergebnis .tla-ergebnis__zahl,.tla-rechner .tla-ergebnis .tla-ergebnis__zahl span{color:var(--tla-gold) !important;font-size:clamp(34px,9cqw,76px) !important}.tla-rechner .tla-ergebnis strong{color:#ffffff !important}.tla-rechner .tla-ergebnis .tla-fundstelle,.tla-rechner .tla-ergebnis .tla-ergebnis__klein,.tla-rechner .tla-ergebnis .tla-anm{color:var(--tla-auf-navy-fein) !important}.tla-rechner .tla-ergebnis ul,.tla-rechner .tla-ergebnis ol,.tla-rechner .tla-ergebnis li,.tla-rechner .tla-ergebnis dl,.tla-rechner .tla-ergebnis dt,.tla-rechner .tla-ergebnis dd,.tla-rechner .tla-ergebnis p{background:transparent !important}.tla-rechner.tla-rechner .tla-ergebnis strong,.tla-rechner.tla-rechner .tla-ergebnis strong span{color:#ffffff !important}.tla-rechner.tla-rechner .tla-knopf{color:#ffffff !important;background:var(--tla-navy) !important;border-color:var(--tla-navy) !important;text-decoration:none !important}.tla-rechner.tla-rechner .tla-knopf--gold{color:var(--tla-navy) !important;background:var(--tla-gold) !important;border-color:var(--tla-gold) !important}.tla-rechner.tla-rechner .tla-knopf--zweit{color:var(--tla-navy) !important;background:#ffffff !important;border-color:var(--tla-navy) !important}.tla-ergebnis p{margin:0}.tla-ergebnis__satz{margin:0 0 16px;font-size:11px;font-weight:700;line-height:1.5;text-transform:uppercase;letter-spacing:0.12em;color:var(--tla-auf-navy-leise)}.tla-ergebnis__mie{padding:18px 0 20px;margin:0 0 18px;border-bottom:1px solid rgba(200,164,78,0.28);text-align:left}/* Die wichtigste Zahl der Seite:was der Gast tatsaechlich behaelt. Der laengste realistische Wert ist "$13,575.00" - zehn Zeichen. Bei 44px und tabellarischen Ziffern sind das rund 240px,die auf ein 360px-Handy abzueglich Kartenrand (320px nutzbar) passen. Darum nowrap:die Zahl darf nie umbrechen,sonst zerfaellt die Aussage. */ .tla-ergebnis__zahl{display:block;margin:2px 0 6px;font-size:clamp(44px,11vw,76px);font-weight:800;line-height:1.02;letter-spacing:-0.018em;color:var(--tla-gold);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1,"lnum" 1;white-space:nowrap}.tla-ergebnis__label{margin:0;font-size:14px;font-weight:600;line-height:1.4;color:var(--tla-auf-navy)}.tla-anm{display:block;font-size:13px;color:var(--tla-gedaempft)}.tla-ergebnis__klein{display:inline-block;font-size:13px;font-weight:400;line-height:1.45;color:var(--tla-auf-navy-leise);font-variant-numeric:tabular-nums}.tla-ergebnis__aufteilung{margin:10px 0 0;padding:8px 10px;font-size:13px;line-height:1.5;color:var(--tla-auf-navy-leise);font-variant-numeric:tabular-nums;background:rgba(255,255,255,0.05);border-left:2px solid rgba(200,164,78,0.5);border-radius:0 var(--tla-radius-klein) var(--tla-radius-klein) 0}.tla-ergebnis__zeilen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:16px;row-gap:0;margin:0;padding:0;font-variant-numeric:tabular-nums}.tla-ergebnis__zeilen dt{grid-column:1;padding:9px 0;font-size:14px;font-weight:500;line-height:1.4;color:var(--tla-auf-navy-leise);border-top:1px solid rgba(255,255,255,0.1)}.tla-ergebnis__zeilen dd{grid-column:2;margin:0;padding:9px 0;font-size:15px;font-weight:700;line-height:1.4;text-align:right;/* Betraege duerfen nie umbrechen - "$2,593." in der einen und "50" in der naechsten Zeile waere schlimmer als jede Enge. Saetze muessen es:in dieser Spalte steht nicht nur Geld,sondern auch "set at your ceiling -
     you pay nothing on top". Bei 782px Fensterbreite lief genau dieser Satz mit 306px aus einer 161px breiten Zelle heraus. Die Ausnahme haengt am data-tla-wert-Attribut,weil genau die Felder Betraege tragen,die der Browser bei einer Live-Neuberechnung neu schreibt. */ white-space:normal;overflow-wrap:anywhere;color:#ffffff;font-variant-numeric:tabular-nums;border-top:1px solid rgba(255,255,255,0.1)}.tla-ergebnis__zeilen>dt:first-of-type,.tla-ergebnis__zeilen>dt:first-of-type + dd{border-top:0}.tla-ergebnis__text{font-size:14px;font-weight:500;white-space:normal;text-align:right;color:var(--tla-auf-navy)}@media screen and (max-width:781px){.tla-ergebnis__zeilen{grid-template-columns:minmax(0,1fr)}.tla-ergebnis__zeilen dd{grid-column:1;padding-top:0;border-top:0;text-align:left;white-space:normal}}.tla-ergebnis__zeilen dd[data-tla-wert],.tla-ergebnis__zeilen dd[data-tla-rechnung]{white-space:nowrap;overflow-wrap:normal}.tla-ergebnis__oop{color:var(--tla-gruen);font-weight:800}.tla-ergebnis__oop--warn{color:var(--tla-rot)}.tla-ergebnis__inklusive{margin:16px 0 0;padding:12px 14px;font-size:13px;line-height:1.55;color:var(--tla-auf-navy);background:var(--tla-navy-tief);border:1px solid rgba(255,255,255,0.09);border-radius:var(--tla-radius-klein)}.tla-ergebnis__uhr{display:inline-flex;align-items:center;min-height:44px;margin-top:14px;padding:2px 0;font-size:14px;font-weight:600;color:var(--tla-gold);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color 140ms ease}.tla-ergebnis__uhr:hover{color:#e0be6b}.tla-fundstelle{display:inline;margin-left:4px;font-size:11px;font-weight:400;line-height:1.4;letter-spacing:0.02em;/* nowrap haelt kurze Fundstellen wie "JTR Table 2-14" zusammen. Lange zerreisst es dagegen nicht - es schob sie am 28.09.2026 auf dem Handy ueber den rechten Seitenrand hinaus. */ white-space:normal;overflow-wrap:anywhere;color:var(--tla-auf-navy-fein)}@media screen and (min-width:600px){.tla-fundstelle{white-space:nowrap}}.tla-formular .tla-fundstelle,.tla-vergleich .tla-fundstelle,.tla-quelle .tla-fundstelle,.tla-blatt__teil .tla-fundstelle{color:var(--tla-gedaempft)}.tla-blatt__teil .tla-ergebnis .tla-fundstelle{color:var(--tla-auf-navy-fein)}.tla-hinweis{margin:16px 0 0;padding:12px 14px;font-size:13px;line-height:1.55;color:var(--tla-auf-navy);background:rgba(255,255,255,0.05);border-left:3px solid var(--tla-auf-navy-leise);border-radius:0 var(--tla-radius-klein) var(--tla-radius-klein) 0}.tla-hinweis p{margin:0}.tla-hinweis p + p{margin-top:8px}.tla-hinweis strong{color:#ffffff;font-weight:700}.tla-hinweis--wichtig{border-left-color:var(--tla-warn);background:rgba(224,164,88,0.1)}.tla-hinweis--vat{border-left-color:var(--tla-gruen);background:rgba(127,214,166,0.09)}/* Steht ein Hinweis ausserhalb der Navy-Karte,dreht er sich um. Seit dem 29.09.2026 gehoert das Arbeitsblatt dazu:seine Abschnitte stehen jetzt auf weissen Flaechen,und der Hinweiskasten "Never turn down a home" stand dort mit 1,27:1 - der fette Vorspann sogar weiss auf weiss. Der Hinweis IM Ergebnisblock bleibt hell,der ist weiter navy. */ .tla-rechner>.tla-hinweis,.tla-formular .tla-hinweis,.tla-blatt__teil>.tla-hinweis{color:var(--tla-text);background:var(--tla-flaeche);border-left-color:var(--tla-navy)}.tla-rechner>.tla-hinweis strong,.tla-formular .tla-hinweis strong,.tla-blatt__teil>.tla-hinweis strong{color:var(--tla-text)}.tla-blatt__teil>.tla-hinweis--wichtig{background:rgba(224,164,88,0.12);border-left-color:var(--tla-warn)}.tla-quelle{margin:18px 0 0;padding-top:14px;font-size:11.5px;line-height:1.6;letter-spacing:0.01em;color:var(--tla-auf-navy-fein);border-top:1px solid rgba(255,255,255,0.12)}.tla-quelle a{color:var(--tla-auf-navy);text-decoration:underline;text-underline-offset:2px}.tla-rechner>.tla-quelle{color:var(--tla-gedaempft);border-top-color:var(--tla-rahmen)}.tla-rechner>.tla-quelle a{color:var(--tla-navy)}.tla-rechner.tla-rechner .tla-ergebnis .tla-quelle a,.tla-rechner.tla-rechner .tla-ergebnis a{color:var(--tla-auf-navy) !important}.tla-fehler{margin:0;padding:14px 16px;font-family:var(--tla-schrift);font-size:14px;font-weight:500;line-height:1.55;color:#7a1616;background:#fdf2f0;border:1px solid #f0cdc6;border-left:3px solid var(--tla-rot-dunkel);border-radius:var(--tla-radius-klein)}.tla-fehler strong{font-weight:700}.tla-vergleich{max-width:100%;margin:4px 0 0;padding:0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;background:#ffffff;border:1px solid var(--tla-rahmen);border-radius:var(--tla-radius);font-family:var(--tla-schrift);color:var(--tla-text)}.tla-vergleich table{width:100%;min-width:540px;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}.tla-vergleich caption{padding:14px 16px 10px;text-align:left;font-size:15px;font-weight:700;color:var(--tla-text)}.tla-vergleich th,.tla-vergleich td{padding:11px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--tla-rahmen)}.tla-vergleich thead th{position:sticky;top:0;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.09em;color:var(--tla-gedaempft);background:var(--tla-flaeche);border-bottom:1px solid #d7dfea;white-space:nowrap}.tla-vergleich tbody th{font-weight:600;color:var(--tla-text)}.tla-vergleich td{white-space:nowrap;font-variant-numeric:tabular-nums}.tla-vergleich td[data-tla-text],.tla-vergleich td.tla-vergleich__text{white-space:normal}.tla-vergleich tbody tr:last-child th,.tla-vergleich tbody tr:last-child td{border-bottom:0}.tla-vergleich__stark th,.tla-vergleich__stark td{font-weight:700;color:var(--tla-navy);background:rgba(200,164,78,0.1);border-bottom-color:rgba(200,164,78,0.35)}.tla-vergleich__stark th{box-shadow:inset 3px 0 0 var(--tla-gold)}.tla-vergleich__fussnote{margin:0;padding:10px 16px 14px;font-size:11.5px;line-height:1.6;color:var(--tla-gedaempft)}.tla-spanne{font-size:0.86em;font-weight:400;white-space:nowrap;color:var(--tla-gedaempft);font-variant-numeric:tabular-nums}.tla-ergebnis .tla-spanne{color:var(--tla-auf-navy-fein)}.tla-rechner :focus-visible,.tla-formular :focus-visible,.tla-ergebnis :focus-visible,.tla-vergleich :focus-visible{outline:3px solid var(--tla-gold);outline-offset:2px;border-radius:4px}.tla-ergebnis :focus-visible{outline-offset:3px}.tla-formular input:focus-visible,.tla-formular select:focus-visible,.tla-knopf:focus-visible{outline:3px solid var(--tla-gold);outline-offset:2px;box-shadow:none}.tla-vergleich:focus-visible{outline:3px solid var(--tla-gold);outline-offset:-3px}@media (prefers-reduced-motion:reduce){.tla-rechner *,.tla-formular *,.tla-ergebnis *,.tla-vergleich *{transition-duration:0.01ms;animation-duration:0.01ms;animation-iteration-count:1;scroll-behavior:auto}.tla-knopf:active{transform:none}}@media print{.tla-kopf,.tla-rechner .tla-cta,.tla-rechner .tla-garantie,.tla-rechner .tla-faq,.tla-rechner .tla-blattlink,.tla-rechner .tla-blattlink a,.tla-rechner .tla-cta a.tla-knopf{color:#000000;background:#ffffff;border-color:#999999;border-radius:0;box-shadow:none}.tla-rechner .tla-cta a.tla-knopf{display:inline;min-height:0;min-width:0;padding:0;border:0;text-decoration:underline}.tla-faq__eintrag::details-content{content-visibility:visible;display:block}.tla-faq__eintrag>.tla-faq__antwort{display:block}.tla-faq__eintrag{break-inside:avoid}.tla-rechner{display:block;color:#000000;font-size:11pt}.tla-formular,.tla-ergebnis,.tla-vergleich,.tla-fehler{background:#ffffff;color:#000000;border:1px solid #999999;border-radius:0;box-shadow:none;padding:12pt;margin:0 0 10pt;break-inside:avoid;page-break-inside:avoid}.tla-rechner>.tla-ergebnis,.tla-rechner>[data-tla-ergebnis]{position:static}.tla-formular[data-tla-live] noscript,.tla-knopf{display:none}.tla-ergebnis__satz{color:#333333}.tla-ergebnis__zahl{font-size:34pt;color:var(--tla-gold-matt)}.tla-ergebnis__label,.tla-ergebnis__text,.tla-ergebnis__inklusive,.tla-hinweis,.tla-hinweis strong,.tla-ergebnis__zeilen dd{color:#000000}.tla-ergebnis__klein,.tla-ergebnis__aufteilung,.tla-ergebnis__zeilen dt,.tla-fundstelle,.tla-quelle,.tla-spanne,.tla-ergebnis .tla-spanne{color:#333333}.tla-ergebnis__mie{border-bottom:1pt solid #999999}.tla-ergebnis__zeilen dt,.tla-ergebnis__zeilen dd{border-top:1pt solid #cccccc}.tla-ergebnis__oop{color:var(--tla-gruen-dunkel)}.tla-ergebnis__oop--warn{color:var(--tla-rot-dunkel)}.tla-ergebnis__aufteilung,.tla-ergebnis__inklusive,.tla-hinweis{background:#ffffff;border-left:2pt solid #666666}.tla-ergebnis__uhr{color:#000000;min-height:0;text-decoration:underline}.tla-ergebnis__uhr::after{content:" (" attr(href) ")";font-size:9pt;color:#333333}.tla-rechner .tla-blattlink a::after{content:""}.tla-rechner .tla-blattlink a{overflow-wrap:anywhere}.tla-quelle{border-top:1pt solid #999999}.tla-vergleich{overflow:visible}.tla-vergleich table{min-width:0;width:100%;font-size:9.5pt}.tla-vergleich thead th{position:static;background:#ffffff;color:#000000;border-bottom:1pt solid #666666}.tla-vergleich td{white-space:normal}.tla-vergleich__stark th,.tla-vergleich__stark td{background:#ffffff;color:#000000;box-shadow:none;border-bottom:1pt solid #666666}.tla-vergleich__stark th::before{content:"> "}}/* ========================================================================= 9 Modus-abhaengige Felder (Nachtrag aus der WordPress-Anbindung) ========================================================================= TLA und TDY sind zwei verschiedene Ansprueche. Table 68-11,Command Sponsorship und der Non-A-Deckel gibt es nur bei TLA,die Reisetage nur bei TDY. darstellung.php markiert die Felder mit data-tla-nur-tla und data-tla-nur-tdy;ausgeblendet wird hier. Massgeblich ist data-tla-modus am Umschlag. Das Attribut setzt das mu-plugin serverseitig aus dem GET-Parameter - es steht also schon im ausgelieferten HTML und stimmt auch ohne JavaScript. Ein Wechsel der Anspruchsart laedt die Seite ohnehin neu,weil dabei ganze Textbloecke im Ergebnis wechseln,die JavaScript nicht schreiben darf. Bewusst NICHT ueber :has([name="modus"] option[value="tdy"]:checked) geloest:option:checked haengt an der aktuellen Auswahl,nicht am gelieferten selected-Attribut. Der Selektor funktioniert zwar in aktuellen Browsern,aber er braucht :has() UND eine dynamische option-Selektion. Faellt eines von beidem aus,blendet die Regel die falsche Haelfte des Formulars aus. Das Attribut am Umschlag kann das nicht. Wichtig - nachgeprueft am gerenderten HTML,nicht geraten:bei den Kontrollkaestchen sitzt das data-Attribut auf dem <input>INNERHALB des <label>,bei den Zahlenfeldern dagegen auf dem <label>selbst:<label class="tla-feld tla-feld--schalter"><input name="non_a" data-tla-nur-tla><label class="tla-feld" data-tla-nur-tla>display:none allein auf dem Attribut wuerde beim Kaestchen also nur das Kaestchen wegnehmen und die Beschriftung stehen lassen - eine Zeile "KMCC Lodging issued a Non-Availability letter" ohne anklickbares Feld,mitten im TDY-Formular,wo es diese Frage gar nicht gibt. Deshalb je Fall zwei Selektoren:das Element selbst und das umschliessende Feld. */ .tla-rechner[data-tla-modus="tdy"] [data-tla-nur-tla],.tla-rechner[data-tla-modus="tdy"] .tla-feld:has(>[data-tla-nur-tla]){display:none}.tla-rechner:not([data-tla-modus="tdy"]) [data-tla-nur-tdy],.tla-rechner:not([data-tla-modus="tdy"]) .tla-feld:has(>[data-tla-nur-tdy]){display:none}.tla-formular:not(:has([name="mil_to_mil"]:checked)) .tla-feld:has(>[data-tla-nur-mil-to-mil]){display:none}.tla-formular:has([name="mil_to_mil"]:checked) .tla-feld:has(>[data-tla-ohne-mil-to-mil]){display:none}@container tla (min-width:720px){.tla-rechner--blatt{grid-template-columns:minmax(0,1fr)}.tla-rechner--blatt>[data-tla-ergebnis],.tla-rechner--blatt>[data-tla-ergebnis]>.tla-ergebnis{position:static}}.tla-blatt{display:flex;flex-direction:column;gap:22px}/* 🔴 Jeder Teil braucht seine eigene weisse Flaeche. Ohne sie steht der dunkelblaue Blatttext (--tla-navy,--tla-text) auf dem dunkelblauen Seitenhintergrund von tla-ramstein.com - "What the housing office needs","Landlord contact worksheet" und "Your deadlines" waren am 29.09.2026 auf dem Bildschirm praktisch unlesbar. Auf dem Abnahmebild vom 28.09. steht es schon genauso;nur die Tabellen hatten eine eigene Flaeche und fielen deshalb nicht auf. Die Kontrastangaben an den Farben ("11,15:1 auf Weiss") gelten erst mit dieser Regel. */ .tla-blatt__teil{margin:0;padding:18px 20px;background:#ffffff;border:1px solid var(--tla-rahmen);border-radius:var(--tla-radius);color:var(--tla-text)}.tla-blatt__teil>.tla-blatt__tabelle,.tla-blatt__teil>.tla-vergleich{border:0;border-radius:0}@media print{.tla-blatt__teil{padding:0;border:0}}.tla-blatt__teil>h2{margin:0 0 10px;font-family:var(--tla-schrift);font-size:20px;font-weight:700;line-height:1.3;color:var(--tla-navy)}.tla-blatt__liste{display:flex;flex-direction:column;gap:12px;margin:0;padding-left:22px;line-height:1.6}.tla-blatt__liste li{padding-left:2px}.tla-blatt__teil p,.tla-blatt__teil li,.tla-blatt__teil td,.tla-blatt__teil th,.tla-blatt__teil blockquote,.tla-blatt__teil strong,.tla-blatt__teil em{color:inherit}.tla-blatt__teil .tla-ergebnis p,.tla-blatt__teil .tla-ergebnis li,.tla-blatt__teil .tla-ergebnis strong,.tla-blatt__teil .tla-ergebnis em{color:unset}.tla-blatt blockquote{margin:10px 0 0;padding:10px 14px;background:#ffffff;border-left:3px solid var(--tla-gold);border-radius:var(--tla-radius-klein);font-size:14px;line-height:1.6}.tla-blatt blockquote p{margin:0}.tla-blatt blockquote footer{margin-top:6px}.tla-blatt__tabelle{margin-top:14px}.tla-blatt__leer{height:34px;border-right:1px solid var(--tla-rahmen)}.tla-blatt__leer:last-child{border-right:0}/* Zwei gleichwertige Knoepfe. Kein Tor heisst auch:optisch kein Unterschied zwischen "drucken" und "schick es mir". */ .tla-blatt__knopfreihe{display:grid;grid-template-columns:1fr;gap:10px}@container tla (min-width:480px){.tla-blatt__knopfreihe{grid-template-columns:1fr 1fr}}.tla-knopf--zweit{color:var(--tla-navy);background:#ffffff;border:1px solid var(--tla-navy)}.tla-knopf--zweit:hover{background:var(--tla-flaeche)}.tla-blatt__mail{display:flex;flex-direction:column;gap:12px;margin-top:14px;padding:16px;background:#ffffff;border:1px solid var(--tla-rahmen);border-radius:var(--tla-radius)}.tla-blatt__mail[hidden]{display:none}.tla-blatt__meldung{margin:0;min-height:1.4em;font-size:14px;color:var(--tla-navy)}@media print{.tla-rechner--blatt,.tla-blatt{display:block}.tla-blatt__teil{margin:0 0 14pt;break-inside:avoid;page-break-inside:avoid}.tla-blatt__teil>h2{font-size:14pt;color:#000000;break-after:avoid;page-break-after:avoid}.tla-rechner--blatt .tla-formular,.tla-blatt__knoepfe,.tla-blatt__mail{display:none}.tla-blatt__liste li,.tla-blatt blockquote{color:#000000}.tla-blatt blockquote{border-left:2pt solid #666666;border-radius:0}.tla-blatt__tabelle th,.tla-blatt__tabelle td{border:1pt solid #666666}.tla-blatt__leer{height:26pt}.tla-blatt__fristen{break-inside:avoid;page-break-inside:avoid}}.tla-rechner.tla-rechner .tla-bloecke{width:100%;border-collapse:collapse;margin:1rem 0;color:var(--tla-auf-navy)}.tla-rechner.tla-rechner .tla-bloecke caption{text-align:left;padding-bottom:.5rem;color:var(--tla-auf-navy)}.tla-rechner.tla-rechner .tla-bloecke th,.tla-rechner.tla-rechner .tla-bloecke td{padding:.5rem .75rem;text-align:right;border-bottom:1px solid var(--tla-navy-tief)}.tla-rechner.tla-rechner .tla-bloecke th[scope="row"]{text-align:left}.tla-rechner.tla-rechner .tla-bloecke .tla-anm{display:block;font-size:.8em;font-weight:400;color:var(--tla-auf-navy-leise)}.tla-rechner.tla-rechner .tla-garantie-tqsa{border:2px solid var(--tla-gold);border-radius:8px;padding:1rem 1.25rem;margin:1rem 0;color:var(--tla-auf-navy)}.tla-rechner.tla-rechner .tla-garantie-tqsa p{color:inherit}.tla-rechner.tla-rechner .tla-garantie-tqsa__name{font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--tla-gold)}.tla-rechner.tla-rechner .tla-buchungsbalken{position:sticky;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 1rem;margin:1rem calc(-1 * var(--tla-luft)) calc(-1 * var(--tla-luft));border-radius:8px 8px 0 0;z-index:2;background:var(--tla-navy-tief);color:var(--tla-auf-navy)}@media (max-width:720px){.tla-rechner.tla-rechner .tla-buchungsbalken{flex-wrap:wrap}}.tla-rechner.tla-rechner .tla-ergebnis .tla-buchungsbalken .tla-knopf--gold{color:var(--tla-navy) !important}/* Modus-Sichtbarkeit,gleiche Mechanik wie Abschnitt 9:massgeblich ist data-tla-modus am Umschlag. Im TQSA-Modus verschwinden die TLA-Felder (die TDY-Felder nimmt schon :not([data-tla-modus="tdy"]) aus Abschnitt 9);ausserhalb von TQSA verschwinden die TQSA-Felder. */ .tla-rechner[data-tla-modus="tqsa"] [data-tla-nur-tla],.tla-rechner[data-tla-modus="tqsa"] .tla-feld:has(>[data-tla-nur-tla]){display:none}.tla-rechner:not([data-tla-modus="tqsa"]) [data-tla-nur-tqsa],.tla-rechner:not([data-tla-modus="tqsa"]) .tla-feld:has(>[data-tla-nur-tqsa]){display:none}.tla-rechner[data-tla-modus="tqsa"] [data-tla-ohne-tqsa]{display:none}