/* Track deinen IMF (/track-deinen-imf).
 * Nur diese eine Seite - Klassen mit "ti"-/"tl"-/"tr"-Praefix, damit nichts
 * mit den bestehenden Seiten-Kuerzeln (.pd*, .v*, .k*) kollidiert.
 * Farben ausschliesslich aus tokens.css - kein hartkodiertes #fff/#000, siehe
 * CLAUDE.md. Das .imfw/.imftrack/.imfrail/.imfzmark/.imfthumb-Regler-CSS
 * kommt unveraendert aus startseite.css (Startseite-Komponente wiederverwendet,
 * Wiedererkennungseffekt - siehe Ergebnis-Panel weiter unten).
 *
 * Umsetzung nach Redesign-Prompt (23.08.2026, "Variante 1a - Messprotokoll").
 * Alle dort genannten Hex-Werte sind 1:1 bereits vorhandene Tokens
 * (--color-cta, --sky-*, --navy-*, --color-text-muted, --color-border,
 * --color-gold ...) - deshalb hier keine neuen Custom Properties, nur
 * Referenzen auf tokens.css. Zwei Faelle wurden bewusst NICHT uebernommen:
 * 1) Das Ergebnis-Panel im Prompt ist IMMER dunkel (navy), unabhaengig vom
 *    Aussentheme - wie der bestehende Footer. Dafuer gibt es keinen
 *    automatisch wechselnden Semantik-Token; die Navy-Skala wird hier
 *    deshalb fest referenziert und nur ueber [data-theme="dark"] einen Ton
 *    dunkler geschaltet (kein neuer Hex-Wert, nur eine neue Kombination
 *    bestehender Skalenstufen).
 * 2) Die Garantie-Zone bleibt bei 30 % IMF (Prompt nennt 28 %) - 30 % ist
 *    an zu vielen Stellen (BRAND.md, SEO.md, FAQ, Startseite) als Markenfakt
 *    bestaetigt, ein Wechsel auf 28 % waere ein stiller Bruch mit dem Rest
 *    der Seite und wird hier nicht ungefragt uebernommen.
 */

/* ===== Hero + Formular + Etikett (Zustand 1) ===== */
.timf-hero{
    padding:76px 0 68px;
    background:linear-gradient(180deg,var(--sky-50) 0%,var(--color-bg) 78%);
}
[data-theme="dark"] .timf-hero{background:var(--color-bg)}
.tihgrid{display:grid;grid-template-columns:1.02fr .98fr;gap:60px;align-items:start}

.tihcol .eyebrow{margin-bottom:2px}
.titag{font-family:var(--font-accent);font-size:27px;font-weight:700;color:var(--sky-700);margin:2px 0 0}
[data-theme="dark"] .titag{color:var(--sky-300)}
.tihtext{font:400 17px/1.65 var(--font-body);color:var(--color-text-muted);margin:16px 0 0;max-width:46ch;text-wrap:pretty}

/* ===== Formular-Karte ===== */
.tw-label-form{margin-top:26px}
.tw-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:26px;box-shadow:0 14px 34px -22px rgba(11,19,38,.35)}
.tw-label-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}
/* Die Beschriftungen sind unterschiedlich lang: "Mindestens haltbar bis"
   bricht auf schmalen Schirmen auf zwei Zeilen, "Los-Nr." nie. Ohne das
   hier sassen die beiden Eingabefelder deshalb versetzt zueinander
   (Befund Bert 13.09.2026). Die Felder fuellen die Rasterzeile und
   schieben ihr Eingabefeld nach unten - damit liegen beide auf einer
   Linie, egal wie viele Zeilen die Beschriftung braucht. */
.tw-label-field{display:flex;flex-direction:column;justify-content:flex-end}
.tw-label-field label{display:block;font:700 11.5px/1.3 var(--font-body);text-transform:uppercase;letter-spacing:.09em;color:var(--color-text-muted);margin:0 0 6px}
/* Feste Hoehe statt Polster: das Datumsfeld baut in WebKit und Blink zwei
   Pixel hoeher als das Textfeld: nebeneinander sah man den Versatz an den
   Rundungen (Befund Bert 13.09.2026). */
.tw-label-field input{width:100%;box-sizing:border-box;height:50px;border-radius:12px;border:1.5px solid var(--color-border);background:var(--color-surface);color:var(--color-ink);font:600 17px/1 var(--font-body);padding:0 15px;font-feature-settings:'tnum'}
.tw-label-field input::placeholder{color:var(--color-text-muted);font-weight:500}

/* Kalenderknopf im MHD-Feld. Das native Datumsfeld liegt mit Deckkraft 0
   genau darueber und faengt den Tipp ab - so oeffnet der Picker auf jedem
   Geraet, ohne dass das Textfeld daneben seinen Tastaturfokus verliert. */
.tw-mhd{position:relative}
.tw-mhd input[type="text"]{padding-right:46px}
.tw-mhd-kal{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  color:var(--color-text-muted);cursor:pointer}
.tw-mhd-kal:hover{color:var(--color-link);background:var(--color-bg-alt)}
.tw-mhd-kal input[type="date"]{position:absolute;inset:0;width:100%;height:100%;
  opacity:0;border:0;padding:0;margin:0;cursor:pointer;background:none;
  -webkit-appearance:none;appearance:none}
.tw-mhd-kal:focus-within{color:var(--color-link);box-shadow:var(--focus-ring)}
.tw-label-field input:focus-visible{outline:none;border-color:var(--sky-500);box-shadow:0 0 0 3px rgba(66,166,230,.18)}

.tw-form-err{color:var(--color-error);font:600 13.5px/1.5 var(--font-body);margin:14px 0 0}
/* Kein eigener Radius mehr: 13px machte "Mein Wagyu finden" zum einzigen
   CTA im Shop, der keine Pille ist. Die Form kommt jetzt aus `.tw .btn`
   (komponenten.css), Breite und Polster bleiben eigen - der Knopf sitzt
   unter einem Formular und traegt dessen Breite. */
.timf-etikett-form .btn{width:100%;box-sizing:border-box;margin-top:18px;padding:17px 20px;font:700 16.5px/1 var(--font-body)}
.tihhint{text-align:center;font:600 13px/1.5 var(--font-body);color:var(--color-text-muted);margin:14px 0 0}
.tihhint b{color:var(--color-ink);font-feature-settings:'tnum'}

/* ===== Etikett mit Markierungen =====
   Container haelt exakt das Bildseitenverhaeltnis (1209:970); die SVG
   liegt mit viewBox 0 0 100 100 und preserveAspectRatio="none" darueber -
   dadurch bleiben die Ellipsen-Koordinaten Prozentwerte relativ zum Foto,
   nicht feste Pixel, und verzerren nicht (Container-Verhaeltnis = Bild-
   verhaeltnis, x/y skalieren also gleich). */
.tw-label{position:relative;width:100%;max-width:560px;margin:0 auto;aspect-ratio:1209/970;border:3px solid var(--color-surface);border-radius:8px;box-shadow:0 22px 48px -18px rgba(11,19,38,.5);transform:rotate(-1.1deg);overflow:visible}
.tw-label-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:5px;display:block}
.tw-label-overlay{position:absolute;inset:0;width:100%;height:100%;overflow:visible}

/* Kein vector-effect:non-scaling-stroke - der Strich soll mit dem Etikett
   mitskalieren (Container und Bild haben dasselbe Seitenverhaeltnis, x/y
   skalieren also gleichmaessig, kein Verzerrungsrisiko).

   Dash-Laenge am 07.09.2026 von "9 6" auf "4 2.5" verkleinert. Die alte
   Vorgabe (wenige grosse Segmente, "zwei, drei Stifthiebe") stammt aus der
   Zeit der kleinen Ellipsen. Auf den groesseren Markierungen ergab sie nur
   noch drei bis vier Striche je Umlauf - die Oberkante fehlte dann ganz und
   die Marke las sich als zwei Klammern statt als Umrandung. Ansage Bert
   07.09.2026: die Bereiche sollen definitiv eingekreist sein. Im Browser
   gegen vier Varianten geprueft. */
/* --navy-900 (#111c35) liest sich neben dem hellen Etikett fast schwarz -
   --navy-700 (#22345a, "Navy-Sektionen/Footer" laut tokens.css) ist der
   sichtbar blaue CI-Ton, denselben nutzen die Nummern-Plaketten und die
   Legende darunter. */
.tll-mark{fill:none;stroke:var(--navy-700);stroke-width:1.3;stroke-dasharray:4 2.5;stroke-linecap:round;opacity:0;animation:tlfadein .5s ease forwards,tlmarch 18s linear infinite}
.tll-mark.tlm-2{animation-delay:.85s,.85s}
.tll-mark.tlm-1{animation-delay:.3s,.3s}
@keyframes tlfadein{to{opacity:1}}
/* Versatz muss ein Vielfaches des Dash-Zyklus sein (4 + 2,5 = 6,5), sonst
   springt die Animation beim Neustart: 14 x 6,5 = 91. */
@keyframes tlmarch{to{stroke-dashoffset:-91}}

.tlnum{position:absolute;width:23px;height:23px;border-radius:50%;background:var(--navy-700);color:var(--color-text-inverse);display:grid;place-items:center;font:700 12px/1 var(--font-body);opacity:0;animation:tlfadein .4s ease forwards}
.tlnum-1{animation-delay:.6s}
.tlnum-2{animation-delay:1.15s}

.tllegend{display:flex;flex-direction:column;align-items:center;gap:6px;font-family:var(--font-accent);font-size:15.5px;color:var(--navy-700);margin:16px 0 0}
.tllegend span{display:flex;align-items:center;gap:8px}
[data-theme="dark"] .tllegend{color:var(--sky-300)}
/* Dieselbe Plakette wie auf dem Foto (navy-900, heller Text) - nicht die
   Legende-Textfarbe, die mit dem Theme wechselt: die Nummern auf dem Foto
   selbst sind fix, die Legende soll optisch dieselbe Farbe zeigen. */
.tllegend b{display:inline-grid;place-items:center;width:19px;height:19px;border-radius:50%;background:var(--navy-700);color:var(--color-text-inverse);font:700 11px/1 var(--font-body);flex-shrink:0}

@media (prefers-reduced-motion:reduce){
    .tll-mark,.tlnum{animation:none;opacity:1}
}

@media (max-width:900px){
    .tihgrid{grid-template-columns:1fr;gap:36px}
    .tihcol-etikett{order:-1}
}
@media (max-width:400px){
    .tw-label-fields{grid-template-columns:1fr}
}

/* ===== Fehlerkarte (Zustand 3) ===== */
.timf-fehler{background:var(--color-bg-alt);border-top:1px solid var(--color-border);padding:44px 0}
.tfband{display:flex;align-items:flex-start;gap:24px}
.tfband img{width:74px;height:74px;flex-shrink:0}
.tfband h2{font-family:var(--font-display);font-size:26px;margin:0 0 8px}
.tfband p{font:400 16px/1.6 var(--font-body);color:var(--color-text-muted);margin:0;max-width:640px}
.tfband a{color:var(--color-link)}

@media (max-width:640px){
    .tfband{flex-direction:column;align-items:flex-start;gap:14px}
}

/* ===== Ergebnis-Panel (Zustand 2) =====
   Immer dunkel (Navy), unabhaengig vom Aussentheme - wie der Footer.
   Deshalb feste Navy-Skala statt Farb-Tokens, die mit dem Theme wechseln;
   Text entsprechend fest hell (--color-text-inverse), nicht --color-ink
   (das im Dark Mode selbst hell wird und im Light Mode dunkel bliebe -
   auf einem immer-dunklen Panel waere das im Light Mode unlesbar). */
/* Farbrollen der Ergebniskarte (Ansage Bert 06.09.2026): Im Hellmodus bleibt
   die Karte auf unserem Hellblau, das Dunkelblau ist dem Dark Mode
   vorbehalten. Die vorher hellblauen Elemente werden im Hellmodus dunkelblau -
   die Rollen tauschen also, nicht nur der Hintergrund. Damit das an einer
   Stelle steht statt in fuenfzehn Regeln verstreut, laufen alle Farben ueber
   lokale Variablen auf .timf-result. Wer eine Farbe aendert, aendert sie hier.

   Das Gold des DMs-Badges gilt laut DESIGN_SYSTEM.md nur auf Navy. Im
   Hellmodus faellt es deshalb weg und wird zu Navy - auf Hellblau waere es
   weder regelkonform noch lesbar. */
.timf-result{
  --tr-grund:var(--sky-100);
  --tr-text:var(--navy-900);
  --tr-text-leise:var(--navy-500);
  --tr-akzent:var(--navy-600);
  --tr-panel:var(--sky-200);
  --tr-linie:var(--sky-300);
  --tr-rail:linear-gradient(90deg,rgba(17,28,53,.08) 0%,rgba(17,28,53,.26) 52%,rgba(17,28,53,.6) 100%);
  --tr-thumb:var(--navy-900);
  --tr-thumb-rand:var(--sky-100);
  --tr-badge:var(--navy-900);
  --tr-fotoschatten:0 18px 40px -20px rgba(17,28,53,.45);
  background:var(--tr-grund);padding:64px 0 68px
}
[data-theme="dark"] .timf-result{
  --tr-grund:var(--navy-950);
  --tr-text:var(--color-text-inverse);
  --tr-text-leise:var(--navy-300);
  --tr-akzent:var(--sky-300);
  --tr-panel:var(--navy-800);
  --tr-linie:var(--navy-600);
  --tr-rail:linear-gradient(90deg,rgba(160,218,254,.1) 0%,rgba(160,218,254,.32) 52%,rgba(160,218,254,.78) 100%);
  --tr-thumb:var(--color-text-inverse);
  --tr-thumb-rand:var(--navy-900);
  --tr-badge:var(--color-gold);
  --tr-fotoschatten:0 20px 44px -18px rgba(0,0,0,.6);
}

.trkopf{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:28px}
.trfound{font-family:var(--font-accent);font-size:20px;color:var(--tr-akzent)}
.trmeta{font:700 11.5px/1 var(--font-body);text-transform:uppercase;letter-spacing:.1em;color:var(--tr-text-leise);font-feature-settings:'tnum'}

.trwrap{display:grid;grid-template-columns:.86fr 1.14fr;gap:52px;align-items:start}
.trphoto{position:relative}
/* Das Foto zeigt den kompletten Anschnitt (Ansage Bert 06.09.2026). Vorher
   erzwang aspect-ratio:1 zusammen mit object-fit:cover ein Quadrat und schnitt
   den breiteren Messausschnitt links und rechts an - genau die Stelle, an der
   die Marmorierung sitzt. Jetzt behaelt das Bild sein eigenes Verhaeltnis. */
.trphoto img{width:100%;height:auto;object-fit:contain;border-radius:16px;display:block;box-shadow:var(--tr-fotoschatten);cursor:zoom-in}
.trcap{font-family:var(--font-accent);font-size:17px;color:var(--tr-text);margin:12px 0 0}
.trcapsub{font:400 13px/1.5 var(--font-body);color:var(--tr-text-leise);margin:2px 0 0}

/* Marmorierungs-Lupe: folgt dem Cursor, zeigt denselben Bildausschnitt
   vergroessert. Nur auf Geraeten mit echtem Hover/Maus - auf Touch bleibt
   das Foto ein normales Bild ohne Lupe (kein 'hover', der nie endet). */
.trlens{position:absolute;width:170px;height:170px;border-radius:50%;border:3px solid var(--tr-grund);box-shadow:0 8px 24px rgba(17,28,53,.35);pointer-events:none;opacity:0;transition:opacity .15s;background-repeat:no-repeat}
.trlens.on{opacity:1}
@media (hover:none){.trlens{display:none}}

.trdmp{display:flex;align-items:baseline;gap:8px}
.trdmp b{font-family:var(--font-display);font-size:104px;line-height:.92;color:var(--tr-text);font-feature-settings:'tnum'}
.trdmp span{font-family:var(--font-display);font-size:30px;color:var(--tr-akzent)}
.trmeas{font:700 11.5px/1.5 var(--font-body);text-transform:uppercase;letter-spacing:.08em;color:var(--tr-text-leise);margin:4px 0 0}

.timf-result .imfw{max-width:none;margin-top:28px}
.timf-result .imfhead span,.timf-result .imfzlbl,.timf-result .imfscale,.timf-result .imfpoles{color:var(--tr-text-leise)}
.timf-result .imfhead b{color:var(--tr-text)}
.timf-result .imfzlbl{color:var(--tr-akzent)}
.timf-result .imfrail{background:var(--tr-rail)}
.timf-result .imfzmark{border-color:var(--tr-akzent)}
.timf-result .imfthumb{background:var(--tr-thumb);border-color:var(--tr-thumb-rand)}
.timf-result .imfthumb::after{display:none}

.trbms{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:26px;background:var(--tr-panel);border-radius:16px;padding:20px 22px}
.tbadge{font-family:var(--font-display);font-size:30px;color:var(--tr-badge);font-feature-settings:'tnum'}
.tbmsnote{font:400 14.5px/1.55 var(--font-body);color:var(--tr-text)}

.trsec{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
.trtile{border:1px solid var(--tr-linie);border-radius:16px;padding:18px 20px}
.trtile b{display:block;font-family:var(--font-display);font-size:32px;color:var(--tr-text);font-feature-settings:'tnum'}
.trtile span{display:block;font:700 11px/1.4 var(--font-body);text-transform:uppercase;letter-spacing:.06em;color:var(--tr-text-leise);margin-top:4px}

.trherkunft{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px;padding-top:24px;border-top:1px solid var(--tr-linie)}
.thk{display:block}
.thk span{display:block;font:600 12.5px/1.3 var(--font-body);color:var(--tr-text-leise)}
.thk b{display:block;font:600 14px/1.4 var(--font-body);color:var(--tr-text);margin-top:3px}

@keyframes trrise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.timf-result,.timf-fehler{animation:trrise .6s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){
    .timf-result,.timf-fehler{animation:none}
}

@media (max-width:920px){
    .trwrap{grid-template-columns:1fr;gap:26px}
}
@media (max-width:700px){
    .trherkunft{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
    .trdmp b{font-size:64px}
    .trsec{grid-template-columns:1fr}
}

/* ===== "WTF is IMF?" ===== */
.timf-erklaer{background:var(--color-bg-alt);border-top:1px solid var(--color-border);padding:72px 0}
.tegrid{display:grid;grid-template-columns:.82fr 1.18fr;gap:56px;align-items:start}
/* aspect-ratio explizit erzwungen, nicht nur ueber die HTML-Attribute
   abgeleitet - sonst zieht sich das Bild im Grid-Kontext auf falsche
   Proportionen. Wrapper traegt die Groesse, das Bild selbst und das
   Scan-Overlay liegen beide absolut darin (dasselbe Muster wie .lupe auf
   der Startseite). */
.tecamwrap{container-type:inline-size;position:relative;width:100%;aspect-ratio:990/575;border-radius:16px;overflow:hidden;background:var(--color-surface);margin-top:24px}
.tecam{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Scan-Overlay: dieselbe "Bildfeld"-Position wie auf der Startseite
   (page/index.tpl, .lupe: x 356..584, y 66..260 von 990x575), als Prozent -
   ohne dieses Overlay ist der Kamera-Bildschirm leer/schwarz, das sah nach
   einem fehlenden Asset aus statt nach einer Kamera in Benutzung. */
.tecamscr{position:absolute;left:35.96%;top:11.48%;width:23.03%;height:33.74%;background-size:cover;background-position:center;border-radius:2px}

.teschritte{display:flex;flex-direction:column}
.tesrow{display:grid;grid-template-columns:52px 1fr;gap:20px;padding:20px 0;border-bottom:1px solid var(--color-border)}
.tesrow:first-child{padding-top:0}
.tesrow:last-child{border-bottom:0}
.tesnum{font-family:var(--font-display);font-size:40px;line-height:1}
/* Absteigende Saettigung, aber sky-400/600 sind fuer helle Flaechen kali-
   briert (tokens.css: "Links / interaktiver Text auf Weiss") - auf dem
   dunklen Seitenhintergrund des Dark Mode verlieren sie zu viel Kontrast.
   Dort bleibt die ganze Reihe bei den hellen Sky-Stufen. */
.tesrow:nth-child(1) .tesnum{color:var(--sky-300)}
.tesrow:nth-child(2) .tesnum{color:var(--sky-400)}
.tesrow:nth-child(3) .tesnum{color:var(--sky-600)}
[data-theme="dark"] .tesrow:nth-child(1) .tesnum{color:var(--sky-300)}
[data-theme="dark"] .tesrow:nth-child(2) .tesnum{color:var(--sky-200)}
[data-theme="dark"] .tesrow:nth-child(3) .tesnum{color:var(--sky-100)}
.tesrow h3{font-family:var(--font-display);font-size:23px;margin:0 0 4px;color:var(--color-ink)}
.tesrow p{font:400 15.5px/1.6 var(--font-body);color:var(--color-text-muted);margin:0}

.tequote{font-family:var(--font-accent);font-size:19px;color:var(--color-ink);margin:20px 0 0}

.teglossarintro{font:400 15.5px/1.7 var(--font-body);color:var(--color-text);margin:28px 0 0;max-width:70ch}
.teglossarintro a{color:var(--color-link);text-decoration:underline;text-underline-offset:2px}
.teglossar{display:flex;flex-direction:column;gap:10px;margin-top:18px}

/* Weg in die Tiefe: das Glossar beantwortet knapp, der Blogbeitrag
   ausfuehrlich. Gedaempft gesetzt, damit der Verweis den Wert oben
   nicht ueberstimmt. */
.teglossarmehr{font:400 15px/1.6 var(--font-body);color:var(--color-text-muted);margin:16px 0 0}
.teglossarmehr a{color:var(--color-link);text-decoration:underline;text-underline-offset:2px}
.teglossarmehr a:hover{text-decoration-thickness:2px}

.teprinzip{max-width:760px;margin-top:56px;padding-top:40px;border-top:1px solid var(--color-border)}
.teprinzip h3{font-family:var(--font-display);font-size:26px;margin:0 0 16px;color:var(--color-ink)}
.teprinzip p{font:400 16px/1.7 var(--font-body);color:var(--color-text-muted);margin:0 0 14px}
.teprinzip p:last-child{margin-bottom:0}

@media (max-width:900px){
    .tegrid{grid-template-columns:1fr;gap:32px}
}