:root{
  --tf-red:#e30613;
  --tf-dark:#2f2f2f;
  --tf-mid:#777777;
  --tf-bg:#f2f2f2;
  --card:#ffffff;
  --border:rgba(47,47,47,0.16);
  --shadow:0 14px 36px rgba(0,0,0,0.10);
  --focus:rgba(227,6,19,0.22);
  --radius:18px;
}

/* ===== TOPFORM Futura Webfonts ===== */
@font-face{
  font-family: "TOPFORM Futura";
  src: url("/public/assets/fonts/Futura_Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "TOPFORM Futura";
  src: url("/public/assets/fonts/Futura_Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
  font-family: "TOPFORM Futura", Futura, "Futura PT", system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  color:var(--tf-dark);
  line-height:1.45;

  /* Fußballrasen als Hintergrund */
  background:
    linear-gradient(rgba(227,6,19,0.15), rgba(227,6,19,0.15)),
    url("/public/assets/bg_grass.jpg") center/cover no-repeat fixed;
}
a{color:var(--tf-red);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1120px;margin:0 auto;padding:28px}
.shell{
  background: rgba(255,255,255,0.88);
  border:1px solid rgba(255,255,255,0.25);
  border-radius: calc(var(--radius) + 6px);
  padding:18px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
}
.header{
  background: rgba(255,255,255,0.92);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:14px 16px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.08);
}
.nav{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.brand{display:flex;gap:14px;align-items:center;min-width:260px}
.brand img{height:56px;width:auto;display:block}
.brand .slogan{display:flex;flex-direction:column;gap:4px;line-height:1.1}
.brand .slogan .tag{font-size:12px;letter-spacing:.6px;text-transform:uppercase;color:var(--tf-mid)}
.brand .slogan .claim{font-size:14px;font-weight:700;color:var(--tf-dark)}
.navlinks{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-left:auto}
.nav a{font-weight:700;color:var(--tf-dark);padding:8px 12px;border-radius:9999px}
.nav a:hover{background:rgba(227,6,19,0.08);text-decoration:none}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:0 10px 26px rgba(0,0,0,0.06)}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.hr{height:1px;background:rgba(47,47,47,0.12);margin:14px 0}
.small{font-size:13px;color:var(--tf-mid)}
h2{margin:0 0 6px 0}
h3{margin:10px 0 6px 0}
label{display:block;font-size:13px;color:var(--tf-mid);margin:10px 0 6px}
input,textarea,select{
  width:100%;padding:10px 12px;background:#fff;border:1px solid rgba(47,47,47,0.25);
  border-radius:14px;color:var(--tf-dark);outline:none
}
input:focus,textarea:focus,select:focus{border-color:var(--tf-red);box-shadow:0 0 0 4px var(--focus)}
textarea{min-height:96px;resize:vertical}
.btn{display:inline-block;padding:10px 14px;border-radius:9999px;border:1px solid rgba(47,47,47,0.22);background:#fff;color:var(--tf-dark);font-weight:800;cursor:pointer}
.btn.primary{background:var(--tf-red);border-color:var(--tf-red);color:#fff}
.btn.primary:hover{filter:brightness(.95)}
.btn:hover{background:rgba(47,47,47,0.04)}
.table{width:100%;border-collapse:collapse;overflow:hidden;border-radius:var(--radius);border:1px solid var(--border);background:var(--card)}
.table th,.table td{padding:10px 10px;border-bottom:1px solid rgba(47,47,47,0.12);text-align:left;vertical-align:top}
.table th{font-size:12px;color:var(--tf-mid);text-transform:uppercase;letter-spacing:.6px;background:rgba(47,47,47,0.04)}
.flash{padding:10px 12px;border-radius:var(--radius);margin:12px 0;border:1px solid var(--border);background:var(--card)}
.flash.ok{background:rgba(227,6,19,0.06)}
.flash.err{border-color:rgba(227,6,19,0.35);background:rgba(227,6,19,0.10)}
.prizes{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin-top:10px}
.prize{border:1px solid rgba(47,47,47,0.12);border-radius:var(--radius);padding:12px;background:rgba(242,242,242,0.45)}
.prize img{width:100%;height:120px;object-fit:contain;display:block;margin:0 auto 8px auto}
.prize .title{font-weight:800;margin:0 0 4px 0}
.prize .desc{font-size:13px;color:var(--tf-mid);margin:0}
.footer{margin-top:18px;color:rgba(255,255,255,0.92);font-size:12px;text-align:center}
.footer a{color:#ffffff;text-decoration:underline}

.prize img{
  width:100%;
  height:140px;          /* etwas höher für iPhone */
  object-fit:contain;
  display:block;
  margin:0 auto 10px auto;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.18));
}

/* iPhone hervorheben */
.prize--hero{
  border: 2px solid rgba(227,6,19,0.35);
  background: rgba(227,6,19,0.06);
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.10);
}

.prize--hero .title{
  color: var(--tf-red);
  letter-spacing: .2px;
}

.prize--hero img{
  height: 170px; /* iPhone größer */
  filter: drop-shadow(0 16px 24px rgba(0,0,0,0.22));
}
/* 3) Optional: iPhone-Kachel auch breiter (noch stärkerer Fokus) */
/* Wenn du willst, dass das iPhone auf Desktop über zwei Spalten läuft (sehr wertig), ergänze zusätzlich: */

@media (min-width: 900px){
  .prizes{
    grid-template-columns: 2fr 1fr 1fr;
    align-items: stretch;
  }
}

/* Logo responsiv */
.brand img{
  height: 56px;
  width: auto;
  max-width: 48vw;   /* verhindert Überbreite auf Mobile */
  object-fit: contain;
}

/* Hamburger Button (Desktop: versteckt) */
.nav-toggle{
  display:none;
  margin-left:auto;
  width:44px;
  height:44px;
  border-radius:9999px;
  border:1px solid rgba(47,47,47,0.18);
  background:#fff;
  align-items:center;
  justify-content:center;
  gap:4px;
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  width:18px;
  height:2px;
  background:var(--tf-dark);
  border-radius:2px;
}

.brand{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  min-width: 0;
  flex: 0 1 auto;
}

/* Slogan 2pt größer als zuvor */
.brand .claim{
  font-size: 16px;         /* vorher 14px -> +2 */
  font-weight: 700;
  color: var(--tf-dark);
  line-height: 1.15;
  white-space: nowrap;     /* verhindert hässliche Zeilenumbrüche */
}

/* Logo bleibt responsiv */
.brand img{
  height:56px;
  width:auto;
  max-width: 320px;        /* damit das Menü daneben Platz hat */
  object-fit: contain;
}

/* Mobile: etwas kompakter */
@media (max-width: 820px){
  .brand img{height:44px; max-width: 70vw;}
  .brand .claim{font-size:14px;} /* 16 -> 14 auf Mobile, bleibt lesbar */
}

/* Mobile Layout */
@media (max-width: 820px){
  .container{padding:16px}

  .brand{
    min-width: 0;     /* wichtig: verhindert Umbruch-Probleme */
    flex: 1 1 auto;
  }

  .brand img{
    height: 44px;     /* kleiner auf Mobile */
    max-width: 56vw;
  }

  /* Nav: Button anzeigen, Links einklappbar */
  .nav-toggle{display:flex}

  .navlinks{
    width:100%;
    margin-left:0;
    display:none;     /* zugeklappt */
    flex-direction:column;
    gap:6px;
    padding-top:10px;
  }
	
	.greet{
  font-weight: 800;
  color: var(--tf-dark);
  margin-right: 6px;
  white-space: nowrap;
  opacity: .95;
}
@media (max-width: 820px){
  .greet{
    width:100%;
    padding: 6px 2px 2px;
    margin-right:0;
  }
}

  .navlinks.open{display:flex}

  .nav a{
    width:100%;
    padding:10px 12px;
    border-radius:14px;
    background:rgba(47,47,47,0.04);
  }
  .nav a:hover{background:rgba(227,6,19,0.08)}
}

/* --- Anpassung: Claim zentriert unter Logo --- */
.brand{
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.brand .claim{
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
}
@media (max-width: 820px){
  .brand .claim{ white-space: normal; font-size: 14px; }
}

.nowrap { white-space: nowrap; }

.sep{ opacity:.55; margin:0 10px; }

.welcome{
  margin: 10px 0 0;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.08);
  font-weight: 700;
}

/* Tabellen: nie das Layout sprengen */
.table-wrap{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

/* Tabellen verhalten sich stabil */
table.table{
  width: 100%;
  border-collapse: collapse;
}

/* lange Inhalte (E-Mail/Links) dürfen umbrechen */
.table td, .table th{
  max-width: 360px;          /* Desktop */
  overflow-wrap: anywhere;   /* bricht lange strings */
  word-break: break-word;
}

/* Mobile: enger, mehr Umbruch */
@media (max-width: 820px){
  .table td, .table th{
    max-width: 220px;
  }
}

.only-desktop{ display:block; }
.only-mobile{ display:none; }

@media (max-width: 820px){
  .only-desktop{ display:none; }
  .only-mobile{ display:block; }
}

/* Mobile Cards */
.cardlist{ display:flex; flex-direction:column; gap:12px; }
.mcard{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 12px 12px;
}
.mcard .row{ display:flex; justify-content:space-between; gap:12px; }
.mcard .lbl{ font-size:12px; opacity:.75; }
.mcard .val{ font-weight:800; text-align:right; }
.mcard .title{ font-weight:900; font-size:16px; margin-bottom:8px; }
.mcard input{ width: 70px; text-align:center; }
.mcard .actions{ margin-top:10px; display:flex; gap:10px; flex-wrap:wrap; }


/* ---------- Responsive: Desktop-Tabelle + Mobile-Karten ---------- */
.only-desktop{ display:block; }
.only-mobile{ display:none; }

@media (max-width: 820px){
  .only-desktop{ display:none; }
  .only-mobile{ display:block; }
}

/* Mobile Cards (Matches) */
.cardlist{ display:flex; flex-direction:column; gap:12px; }
.mcard{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 16px;
  padding: 12px 12px;
}
.mcard .title{
  font-weight: 900;
  font-size: 16px;
  margin: 0 0 10px 0;
}
.mcard .row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding: 6px 0;
  border-top: 1px solid rgba(0,0,0,.06);
}
.mcard .row:first-of-type{ border-top: 0; padding-top: 0; }
.mcard .lbl{ font-size:12px; opacity:.75; }
.mcard .val{ font-weight:800; text-align:right; }
.mcard input{
  width: 76px;
  text-align:center;
}

/* Damit normale Wörter nicht buchstabenweise umbrechen */
.mcard, .mcard *{
  word-break: normal;
  overflow-wrap: normal;
}




/* ===== TOPFORM Futura weights ===== */
body{ font-weight: 500; }
strong, b, h1, h2, h3, h4, .btn, .nav a { font-weight: 700; }

/* ===== Landing-Headline: zweizeilig & markig =====
   Unterstützt mehrere Markup-Varianten (damit es auch bei leicht anderer index.php greift).
   Empfohlenes Markup:
   <h2 class="hero-title"><span class="hero-title__top">Deutschland in TOPFORM</span><span class="hero-title__bottom">Das WM-TIPPSPIEL</span></h2>
*/

.tf-red{ color: var(--tf-red); }

.hero-title,
.tf-hero-title,
.home-hero-title{
  margin: 0 0 10px 0;
  line-height: 1.06;
}

.hero-title__top,
.hero-title .line1,
.tf-hero-top,
.tf-title-top{
  display:block;
  font-weight: 900;
  color: #111;
  font-size: clamp(22px, 3.1vw, 36px);
  letter-spacing: .2px;
}

.hero-title__bottom,
.hero-title .line2,
.tf-hero-bottom,
.tf-title-bottom{
  display:block;
  font-weight: 900;
  color: var(--tf-red);
  font-size: clamp(22px, 3.4vw, 40px);
  letter-spacing: 1.1px;
  text-transform: uppercase;
  margin-top: 4px;
}

/* Optional: leichter Schatten für mehr „Punch“ (sehr dezent) */
.hero-title__bottom,
.hero-title .line2,
.tf-hero-bottom,
.tf-title-bottom{
  text-shadow: 0 2px 0 rgba(0,0,0,0.06);
}

@media (max-width: 820px){
  .hero-title__top,
  .hero-title .line1,
  .tf-hero-top,
  .tf-title-top{
    font-size: 22px;
  }
  .hero-title__bottom,
  .hero-title .line2,
  .tf-hero-bottom,
  .tf-title-bottom{
    font-size: 23px;
    letter-spacing: .8px;
  }
}
/* =========================================================
   Landing Headline – TOPFORM markig, kompakter Zeilenabstand
   (passt zu index.php: .hero-title + .hero-title__line--black/--red)
   ========================================================= */
.hero-title{
  margin: 0 0 14px 0;
  line-height: 1.05;
}
.hero-title__line{
  display:block;              /* macht <br> überflüssig */
  margin:0;
  padding:0;
  line-height: 1.0;
}
.hero-title br{ display:none; } /* verhindert doppelten Zeilenumbruch / extra Abstand */

.hero-title__line--black{
  color:#111;
  font-weight:700;
  font-size: 34px;
  letter-spacing: 0.01em;
}
.hero-title__line--red{
  color:#c10016;              /* TOPFORM Rot (falls euer CI-Wert abweicht: hier anpassen) */
  font-weight:700;
  font-size: 42px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;            /* KOMPAKT: kleiner Zeilenabstand */
  text-shadow: 0 1px 0 rgba(0,0,0,.06);
}

@media (max-width: 480px){
  .hero-title{ margin-bottom: 10px; }
  .hero-title__line--black{ font-size: 28px; }
  .hero-title__line--red{ font-size: 34px; margin-top: 3px; }
}
/* =========================================================
   PATCH v2: Preise ab Tablet/„Desktop“ untereinander
   -> Breakpoint bewusst früher als 900px, damit auch
      nicht-maximierte Desktop-Fenster 1-spaltig sind.
   ========================================================= */

@media (min-width: 640px){
  .prizes{
    grid-template-columns: 1fr !important;
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
    gap: 16px;
  }

  /* Bilder größer – skaliert sauber mit */
  .prize img{
    height: clamp(170px, 22vw, 220px) !important;
    margin-bottom: 10px;
  }

  /* Hero-Preis noch etwas stärker */
  .prize--hero img{
    height: clamp(200px, 26vw, 260px) !important;
  }

  .prize .title{ font-size: 1.08rem; }
  .prize .desc{ font-size: 1.0rem; line-height: 1.35; }
}

/* =========================================================
   FINAL OVERRIDE: Preise immer untereinander (1 Spalte)
   -> robust gegen alle vorherigen Media-Queries / Grid-Regeln
   ========================================================= */

.prizes{
  grid-template-columns: 1fr !important;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  gap: 16px;
}

/* Bilder größer auf größeren Screens */
@media (min-width: 640px){
  .prize img{ height: 200px !important; }
  .prize--hero img{ height: 250px !important; }
}

/* =========================================================
   RED ACCENT (clean): flacher Look + TOPFORM Akzent
   Überschreibt die letzte Card-Optik
   ========================================================= */

.prize{
  /* flacher, ruhiger */
  box-shadow: none !important;
  transform: none !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  background: #fff;
}

/* Kein "Lift" beim Hover */
@media (hover:hover){
  .prize:hover{
    transform: none !important;
    box-shadow: none !important;
    border-color: rgba(0,0,0,.14) !important;
  }
}

/* Akzent nur beim Hero-Preis: feine Top-Leiste */
.prize--hero{
  position: relative;
  border-color: rgba(212,0,26,.22) !important;
}

.prize--hero::before{
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 0;
  height: 4px;
  background: #D4001A;               /* TOPFORM Rot */
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

/* Bild ruhig, ohne grauen Kasten */
.prize img{
  background: transparent !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  padding: 0 !important;
  border-radius: 12px;
}

/* Typo etwas sportlicher */
.prize--hero .title{
  color: #111;
}

.prize--hero .desc{
  color: rgba(0,0,0,.80);
}

/* =========================================================
   DESIGN-OVERRIDE: Eckig + mehr Anthrazit (#4c565c)
   (Append-only, ganz ans Ende der styles.css)
   ========================================================= */

:root{
  --tf-anth: #4c565c;
  --tf-dark: var(--tf-anth);                 /* UI-Grundton */
  --tf-mid: rgba(76,86,92,.78);
  --border: rgba(76,86,92,.22);
  --shadow: 0 10px 24px rgba(0,0,0,.08);
  --radius: 0px;                              /* global eckig */
}

/* --- Global: Rundungen hart entfernen (nur UI-Elemente) --- */
.card,
.table,
.flash,
.prize,
.top-banner img,
input, textarea, select,
.btn,
.nav a,
.badge, .tag,
.notice, .alert,
.modal, .panel,
button{
  border-radius: 0 !important;
}

/* Auch wenn irgendwo calc(var(--radius)+...) genutzt wird */
.card,
.table,
.flash{
  border-radius: 0 !important;
}

/* --- Typo/Farben: Anthrazit dominanter --- */
body{
  color: var(--tf-anth) !important;
}

h1,h2,h3{
  color: var(--tf-anth) !important;
}

/* --- Navigation Links: statt Pillen jetzt klare „Tabs“ --- */
.nav a{
  color: var(--tf-anth) !important;
  padding: 10px 12px;
  border: 1px solid transparent;
}

.nav a:hover{
  background: rgba(76,86,92,.06) !important;
  border-color: rgba(76,86,92,.18) !important;
}

/* --- Buttons: eckig + anthrazit als Sekundärton --- */
.btn{
  border-color: rgba(76,86,92,.28) !important;
  color: var(--tf-anth) !important;
  background: #fff !important;
}

.btn:hover{
  background: rgba(76,86,92,.06) !important;
}

.btn.primary{
  /* Rot bleibt Akzent, aber „erwachsener“ gerahmt */
  background: var(--tf-red) !important;
  border-color: var(--tf-red) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* --- Inputs: eckig + anthrazit Rahmen --- */
input,textarea,select{
  border-radius: 0 !important;
  border-color: rgba(76,86,92,.28) !important;
  color: var(--tf-anth) !important;
}

input:focus,textarea:focus,select:focus{
  border-color: var(--tf-red) !important;
  box-shadow: 0 0 0 4px rgba(227,6,19,0.18) !important;
}

/* --- Tabellen: klarer, weniger „weich“ --- */
.table{
  border-color: rgba(76,86,92,.22) !important;
}

.table th{
  background: rgba(76,86,92,.06) !important;
  color: rgba(76,86,92,.85) !important;
}

/* --- Cards/Flashes: eckig, anthrazit Linien --- */
.card, .flash{
  border-color: rgba(76,86,92,.22) !important;
  box-shadow: var(--shadow) !important;
}

/* --- Preise/Prizes: eckig + ruhiger Rahmen --- */
.prize{
  background: rgba(255,255,255,.72) !important;
  border-color: rgba(76,86,92,.18) !important;
}

.prize--hero{
  /* Hero bleibt rot akzentuiert, aber eckig */
  transform: none !important;
  box-shadow: var(--shadow) !important;
}

/* --- Bannerbilder: eckig --- */
.top-banner img{
  border-radius: 0 !important;
}

/* =========================================================
   Anthrazit-Kopfzeile (2px) auf Cards/Prizes/Alerts
   ========================================================= */

.card, .prize, .flash, .notice, .alert, .panel{
  position: relative;
  overflow: hidden; /* sorgt dafür, dass die Linie sauber „abschneidet“ */
}

.card::before,
.prize::before,
.flash::before,
.notice::before,
.alert::before,
.panel::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: #4c565c; /* Anthrazit */
  pointer-events: none;
}

/* Optional: bei Hero-Preis rot statt anthrazit (wenn du willst) */
/*
.prize--hero::before{
  background: var(--tf-red);
}
*/



/* ===== WM-TIPPSPIEL Header Reskin ===== */

.header{
  background:
    linear-gradient(90deg,
      rgba(245,245,245,0.96) 0%,
      rgba(245,245,245,0.92) 34%,
      rgba(20,24,30,0.72) 46%,
      rgba(8,10,14,0.88) 58%,
      rgba(8,10,14,0.94) 100%
    ),
    url('header_bg.jpg') center center / cover no-repeat;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 10px 26px rgba(0,0,0,0.22);
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
}

.header::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: #e30613;
}

.brand .claim{
  color: #4c565c !important;
}

.brand .tag{
  color: #6b7378 !important;
}

.navlinks{
  margin-left: auto;
}

.nav a{
  color: #ffffff !important;
  background: transparent !important;
  border: 1px solid transparent;
  padding: 10px 12px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

.nav a:hover{
  color: #ffffff !important;
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.14) !important;
  text-decoration: none;
}

.nav a.active,
.nav a[aria-current="page"]{
  color: #e30613 !important;
  position: relative;
}

.nav a.active::after,
.nav a[aria-current="page"]::after{
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -6px;
  height: 3px;
  background: #e30613;
}

.nav-toggle{
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
}

.nav-toggle span{
  background: #ffffff !important;
}

@media (max-width: 820px){
  .navlinks{
    background: rgba(10,12,16,0.92);
    padding: 12px 0 0 0;
  }

  .nav a{
    width: 100%;
    color: #ffffff !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
  }

  .nav a:hover{
    background: rgba(255,255,255,0.10) !important;
  }
}


@media (max-width: 820px){
  .header{
    background:
      linear-gradient(90deg,
        rgba(245,245,245,0.97) 0%,
        rgba(245,245,245,0.95) 58%,
        rgba(22,26,32,0.78) 72%,
        rgba(8,10,14,0.92) 100%
      ),
      url('header_bg.jpg') left center / cover no-repeat;
  }

  .brand{
    align-items: flex-start;
  }

  .brand img{
    max-width: 68vw;
    height: auto;
  }

  .brand .claim{
    color: #4c565c !important;
    text-align: left;
  }
}


/* Promo-Banner im rechten Bereich (Startseite) */
.promo-banner{
  display: block;
  border: 1px solid rgba(76,86,92,.22);
  background: #fff;
}

.promo-banner img{
  display: block;
  width: 100%;
  height: auto;
}

/* dezent „wertig“, kein Spielkram */
@media (hover:hover){
  .promo-banner:hover{
    border-color: rgba(76,86,92,.35);
  }
}

/* Hinweisblock: Registrierung nur über Vertriebspartner */
.partner-hinweis{
  border: 2px solid rgba(76,86,92,.45);
  background: rgba(76,86,92,.06);
  padding: 12px 14px;
  margin: 12px 0 14px;
  color: #4c565c;
}

.partner-hinweis strong{
  color: #4c565c;
}

.partner-hinweis__sub{
  margin-top: 8px;
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
}

.partner-hinweis__label{
  font-weight: 700;
  letter-spacing: .2px;
}

.partner-hinweis__link{
  font-weight: 700;
  text-decoration: underline;
  color: #4c565c;
}

.partner-hinweis__link:hover{
  color: var(--tf-red);
}