/* ============================================================
   Techtanium F3 — Startseiten-Block (FINAL, 2026-07-08)
   Scope: alles unter .tt-f3 (kollisionsfrei zu NOVA/blackline).
   Nutzt die vorhandenen F2-Design-Tokens (techtanium-tokens.css);
   var(--tt-*, fallback) => funktioniert im Theme UND standalone.
   KEIN @font-face, KEIN :root hier (liefert das Theme bzw. die
   lokale Vorschau-<style>). F2 bleibt unangetastet.
   ============================================================ */
.tt-f3{--f3-maxw:var(--tt-maxw,1360px);color:var(--tt-steel-light,#C9CFD5);background:var(--tt-anthracite,#1A1D21);
  font-family:var(--tt-font-body,'Inter',system-ui,-apple-system,'Segoe UI',sans-serif);font-size:15.5px;line-height:1.6}
/* Durchgehende Buehne NUR auf der Startseite (dort existiert .tt-f3):
   JTLs Content-Wrapper (#content/#main-wrapper) sind hell -> die transparenten
   .section zeigten das Weiss, helle Ueberschriften wurden unsichtbar. 0.6.11:
   Buehne = --tt-anthracite (#1A1D21) = EXAKT der Header-/Footer-Ton (vorher
   --tt-bg #0A0C0E, das wirkte dunkler als Header/Footer). Zusaetzlich
   den LEEREN Breadcrumb-Balken auf der Startseite ausblenden (weisser Streifen
   unter dem Header). :has() laeuft in allen modernen Browsern; ohne :has() bleibt
   es beim bisherigen Zustand (kein Schaden). KEINE andere Seite betroffen. */
body:has(.tt-f3) #main-wrapper,
body:has(.tt-f3) #content-wrapper,
body:has(.tt-f3) #content{background:var(--tt-anthracite,#1A1D21)}
body:has(.tt-f3) .breadcrumb-container{display:none}
.tt-f3 *{box-sizing:border-box}
.tt-f3 img{max-width:100%;display:block}
.tt-f3 a{color:inherit;text-decoration:none}
.tt-f3 picture{display:block}
.tt-f3 .wrap{max-width:var(--f3-maxw);margin:0 auto;padding:0 30px}
.tt-f3 h1,.tt-f3 h2,.tt-f3 h3,.tt-f3 h4{font-family:var(--tt-font-head,'Saira SemiCondensed','Arial Narrow',sans-serif);
  color:var(--tt-white,#F4F6F8);font-weight:600;line-height:1.08;letter-spacing:.005em;margin:0}
.tt-f3 p{margin:0}
.tt-f3 .kicker{font-family:var(--tt-font-body,'Inter',sans-serif);font-size:12px;font-weight:600;letter-spacing:.3em;
  text-transform:uppercase;color:var(--tt-orange,#FF6A00);display:inline-block}
.tt-f3 .section{padding:76px 0;border-top:1px solid var(--tt-hairline,rgba(255,255,255,.07))}
.tt-f3 .section--alt{background:var(--tt-anthracite,#1A1D21)}
.tt-f3 .section__head{max-width:730px;margin-bottom:38px}
.tt-f3 .section__head h2{font-size:clamp(30px,3vw,40px);margin:12px 0 10px}
.tt-f3 .section__head p{color:var(--tt-steel,#8E979F);font-size:16px}
.tt-f3 .hr-accent{width:46px;height:2px;background:var(--tt-orange,#FF6A00);margin-top:16px}

/* hero */
.tt-f3 .hero{position:relative;min-height:640px;display:flex;align-items:center;overflow:hidden;background:#000}
.tt-f3 .hero__bg,.tt-f3 .hero__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center right}
.tt-f3 .hero__scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,12,14,.97) 0%,rgba(10,12,14,.84) 36%,rgba(10,12,14,.34) 64%,rgba(10,12,14,.12) 100%)}
.tt-f3 .hero__scrim2{position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,12,14,.55) 0%,transparent 42%)}
.tt-f3 .hero .wrap{position:relative;z-index:2;width:100%}
.tt-f3 .hero__inner{max-width:650px;padding:56px 0}
.tt-f3 .hero h1{font-size:clamp(38px,4.6vw,56px);margin:16px 0;line-height:1.04}
.tt-f3 .hero h1 em{color:var(--tt-orange,#FF6A00);font-style:normal}
.tt-f3 .hero__lead{font-size:clamp(16px,1.5vw,18px);color:var(--tt-steel-light,#C9CFD5);max-width:540px;margin-bottom:28px}
.tt-f3 .cta-row{display:flex;gap:13px;flex-wrap:wrap;margin-bottom:30px}
.tt-f3 .btn{display:inline-flex;align-items:center;gap:9px;padding:14px 26px;border-radius:var(--tt-radius,2px);
  font-family:var(--tt-font-body,'Inter',sans-serif);font-weight:600;font-size:15px;border:1px solid transparent;transition:.2s var(--tt-ease,ease);cursor:pointer}
.tt-f3 .btn--primary{background:var(--tt-orange,#FF6A00);color:var(--tt-black,#0E1013);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.tt-f3 .btn--primary:hover{background:var(--tt-orange-hover,#FF8533)}
.tt-f3 .btn--ghost{border-color:var(--tt-hairline-2,rgba(255,255,255,.14));color:var(--tt-white,#F4F6F8)}
.tt-f3 .btn--ghost:hover{border-color:var(--tt-orange,#FF6A00);color:var(--tt-orange,#FF6A00)}
.tt-f3 .usp{display:flex;gap:26px;flex-wrap:wrap;padding-top:20px;border-top:1px solid var(--tt-hairline,rgba(255,255,255,.07))}
.tt-f3 .usp span{font-size:13.5px;color:var(--tt-steel,#8E979F);display:flex;align-items:center;gap:8px}
.tt-f3 .usp b{color:var(--tt-white,#F4F6F8);font-weight:600}
.tt-f3 .dot{width:5px;height:5px;background:var(--tt-orange,#FF6A00);flex:0 0 auto}

/* trust */
.tt-f3 .trust{background:var(--tt-anthracite,#1A1D21);border-top:1px solid var(--tt-line,#2E343B)}
.tt-f3 .trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;padding:32px 30px}
.tt-f3 .trust .t{display:flex;gap:13px;align-items:flex-start}
.tt-f3 .trust svg{flex:0 0 auto;stroke:var(--tt-orange,#FF6A00);fill:none;stroke-width:1.4;width:26px;height:26px}
.tt-f3 .trust b{color:var(--tt-white,#F4F6F8);font-size:14.5px;display:block;font-weight:600}
.tt-f3 .trust p{color:var(--tt-steel,#8E979F);font-size:13px;margin-top:3px}

/* sortiment grid */
.tt-f3 .pw-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tt-f3 .pw{position:relative;border:1px solid var(--tt-hairline,rgba(255,255,255,.07));border-radius:var(--tt-radius,2px);overflow:hidden;background:var(--tt-panel,#13171B);transition:.22s var(--tt-ease,ease)}
.tt-f3 .pw:hover{transform:translateY(-3px);border-color:var(--tt-hairline-2,rgba(255,255,255,.14));box-shadow:0 14px 30px rgba(0,0,0,.45)}
.tt-f3 .pw__img{aspect-ratio:16/10;width:100%;height:100%;object-fit:cover}
.tt-f3 .pw__grad{position:absolute;inset:0;background:linear-gradient(0deg,rgba(9,11,13,.92) 0%,rgba(9,11,13,.12) 48%,transparent 72%)}
.tt-f3 .pw__idx{position:absolute;top:11px;left:13px;z-index:2;font-family:var(--tt-font-mono,'IBM Plex Mono',monospace);font-size:11px;letter-spacing:.12em;color:var(--tt-steel,#8E979F)}
.tt-f3 .pw__cap{position:absolute;left:0;right:0;bottom:0;padding:15px 16px;z-index:2}
.tt-f3 .pw__cap h3{font-size:20px;font-weight:600}
.tt-f3 .pw__cap .arrow{color:var(--tt-orange,#FF6A00);font-size:12.5px;font-weight:600;opacity:0;transform:translateX(-5px);transition:.2s;margin-top:3px;display:inline-block}
.tt-f3 .pw:hover .arrow{opacity:1;transform:translateX(0)}
.tt-f3 .badge-live{position:absolute;top:11px;right:11px;z-index:3;font-family:var(--tt-font-body,'Inter',sans-serif);font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--tt-black,#0E1013);background:var(--tt-orange,#FF6A00);padding:3px 9px;border-radius:2px}

/* maritim highlight closing card */
.tt-f3 .maritim{position:relative;margin-top:16px;min-height:300px;border:1px solid var(--tt-hairline-2,rgba(255,255,255,.14));border-radius:var(--tt-radius,2px);overflow:hidden;display:flex;align-items:center;
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px)}
.tt-f3 .maritim__bg,.tt-f3 .maritim__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.tt-f3 .maritim__grad{position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,11,13,.94) 0%,rgba(9,11,13,.6) 46%,rgba(9,11,13,.2) 100%)}
.tt-f3 .maritim__body{position:relative;z-index:2;padding:40px 44px;max-width:600px}
.tt-f3 .maritim__body .num{font-family:var(--tt-font-mono,'IBM Plex Mono',monospace);font-size:12px;color:var(--tt-steel,#8E979F);letter-spacing:.12em}
.tt-f3 .maritim__body h3{font-size:clamp(26px,2.6vw,34px);margin:8px 0 10px}
.tt-f3 .maritim__body p{color:var(--tt-steel-light,#C9CFD5);font-size:15px;max-width:440px;margin-bottom:18px}
.tt-f3 .tag-row{display:flex;gap:8px;flex-wrap:wrap}
.tt-f3 .tag{font-size:12px;color:var(--tt-steel-light,#C9CFD5);border:1px solid var(--tt-hairline-2,rgba(255,255,255,.14));padding:5px 11px;border-radius:2px}

/* material */
.tt-f3 .mat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tt-f3 .mat{border:1px solid var(--tt-hairline,rgba(255,255,255,.07));border-radius:var(--tt-radius,2px);overflow:hidden;background:var(--tt-panel,#13171B)}
.tt-f3 .mat__img{aspect-ratio:16/10;width:100%;object-fit:cover}
.tt-f3 .mat__body{padding:22px 22px 24px}
.tt-f3 .mat__grade{display:inline-block;font-family:var(--tt-font-mono,'IBM Plex Mono',monospace);font-size:12px;letter-spacing:.08em;color:var(--tt-orange,#FF6A00);border:1px solid var(--tt-hairline-2,rgba(255,255,255,.14));padding:3px 10px;border-radius:2px;margin-bottom:12px}
.tt-f3 .mat__body h3{font-size:21px;margin-bottom:8px}
.tt-f3 .mat__body p{color:var(--tt-steel,#8E979F);font-size:14.5px}

/* profi tiles */
.tt-f3 .profi{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.tt-f3 .tile{position:relative;border:1px solid var(--tt-hairline,rgba(255,255,255,.07));border-radius:var(--tt-radius,2px);overflow:hidden;min-height:300px;display:flex;align-items:flex-end}
.tt-f3 .tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tt-f3 .tile__grad{position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,11,13,.92) 0%,rgba(9,11,13,.5) 48%,rgba(9,11,13,.18) 100%)}
.tt-f3 .tile__body{position:relative;z-index:2;padding:30px}
.tt-f3 .tile__body h3{font-size:24px;margin:8px 0}
.tt-f3 .tile__body p{color:var(--tt-steel-light,#C9CFD5);font-size:14.5px;max-width:340px}
.tt-f3 .tile__body .arrow{color:var(--tt-orange,#FF6A00);font-size:14px;font-weight:600;margin-top:14px;display:inline-block}

/* ANWENDUNGEN — vollstaendiges 8:3-Bild, KEIN Crop/Zoom (Punkt 5) */
.tt-f3 .appbanner{position:relative;background:#080b0d;border:1px solid var(--tt-hairline,rgba(255,255,255,.07));border-radius:var(--tt-radius,2px);overflow:hidden}
.tt-f3 .appbanner__media{aspect-ratio:8/3;width:100%;background:#080b0d}
.tt-f3 .appbanner__media img{width:100%;height:100%;object-fit:contain;object-position:center center;background:#080b0d}
.tt-f3 .appbanner__overlay{position:absolute;inset:0;display:flex;align-items:center}
.tt-f3 .appbanner__scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,11,13,.92) 0%,rgba(8,11,13,.55) 42%,rgba(8,11,13,0) 70%)}
.tt-f3 .appbanner__body{position:relative;z-index:2;padding:42px;max-width:600px}
.tt-f3 .appbanner__body h2{font-size:clamp(26px,2.8vw,36px);margin:12px 0 10px}
.tt-f3 .appbanner__body p{color:var(--tt-steel-light,#C9CFD5);font-size:15px;margin-bottom:18px}

/* AUSWAHLHILFE — 8:3-Banner (vollstaendig, zentriert) + Panel darunter (Punkt 6, Variante A) */
.tt-f3 .finderbanner{position:relative;background:#080b0d;border:1px solid var(--tt-hairline,rgba(255,255,255,.07));border-radius:var(--tt-radius,2px);overflow:hidden;margin-bottom:18px}
.tt-f3 .finderbanner__media{aspect-ratio:8/3;width:100%;background:#080b0d}
.tt-f3 .finderbanner__media img{width:100%;height:100%;object-fit:contain;object-position:center center;background:#080b0d}
.tt-f3 .finderbanner__scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,11,13,.8) 0%,rgba(8,11,13,.1) 34%,transparent 60%)}
.tt-f3 .finderbanner__cap{position:absolute;left:0;bottom:0;z-index:2;padding:22px 26px}
.tt-f3 .finderbanner__cap .l{font-family:var(--tt-font-mono,'IBM Plex Mono',monospace);font-size:13px;color:var(--tt-steel-light,#C9CFD5)}
.tt-f3 .finderbanner__cap .l b{color:var(--tt-orange,#FF6A00)}
.tt-f3 .finderpanel{background:var(--tt-panel,#13171B);border:1px solid var(--tt-hairline,rgba(255,255,255,.07));border-radius:var(--tt-radius,2px);padding:30px}
.tt-f3 .finderpanel h2{font-size:28px;margin:10px 0 8px}
.tt-f3 .finderpanel > p{color:var(--tt-steel,#8E979F);font-size:14.5px;margin-bottom:20px;max-width:640px}
.tt-f3 .paths{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tt-f3 .path{display:flex;align-items:center;gap:11px;border:1px solid var(--tt-hairline,rgba(255,255,255,.07));border-radius:var(--tt-radius,2px);padding:14px 15px;transition:.18s var(--tt-ease,ease);background:var(--tt-bg-2,#0E1114)}
.tt-f3 .path:hover{border-color:var(--tt-orange,#FF6A00);transform:translateY(-1px)}
.tt-f3 .path svg{width:20px;height:20px;stroke:var(--tt-orange,#FF6A00);fill:none;stroke-width:1.5;flex:0 0 auto}
.tt-f3 .path b{color:var(--tt-white,#F4F6F8);font-size:14px;font-weight:600;display:block}
.tt-f3 .path span{color:var(--tt-steel,#8E979F);font-size:12px}

/* responsive */
@media(max-width:1199px){
  .tt-f3 .pw-grid{grid-template-columns:repeat(3,1fr)}
  .tt-f3 .trust .wrap{grid-template-columns:repeat(2,1fr)}
  .tt-f3 .paths{grid-template-columns:repeat(2,1fr)}
  .tt-f3 .hero{min-height:560px}
}
@media(max-width:900px){
  .tt-f3 .mat-grid{grid-template-columns:1fr}
  .tt-f3 .profi{grid-template-columns:1fr}
}
@media(max-width:767px){
  .tt-f3 .wrap{padding:0 18px}
  .tt-f3 .section{padding:54px 0}
  .tt-f3 .pw-grid{grid-template-columns:repeat(2,1fr);gap:11px}
  .tt-f3 .pw__cap h3{font-size:17px}
  .tt-f3 .hero{min-height:500px}
  .tt-f3 .hero__inner{padding:36px 0}
  .tt-f3 .hero__bg img{object-position:center}
  .tt-f3 .hero__scrim{background:linear-gradient(0deg,rgba(10,12,14,.96) 10%,rgba(10,12,14,.5) 58%,rgba(10,12,14,.3) 100%)}
  .tt-f3 .usp{gap:12px 22px}
  .tt-f3 .trust .wrap{grid-template-columns:1fr}
  .tt-f3 .maritim__body{padding:26px}
  .tt-f3 .paths{grid-template-columns:1fr}
  /* Anwendungen: Bild vollstaendig oben, Text darunter (kein Crop) */
  .tt-f3 .appbanner__overlay{position:static}
  .tt-f3 .appbanner__scrim{display:none}
  .tt-f3 .appbanner__body{padding:22px;max-width:none;background:var(--tt-panel,#13171B)}
}
@media(max-width:430px){ .tt-f3 .pw-grid{grid-template-columns:1fr} }