/* ======================================
   Fira Sans einbinden
====================================== */
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;400;500;600;700&display=swap');

/* ======================================
   Basis / Variablen
====================================== */
:root {
  --color-primary: #e0002a;
  --color-primary-soft: #ff4b63;

  --color-bg-page: #26282e;
  --color-text-main: #222429;
  --color-text-muted: #6b6f7c;
  --color-border-soft: #dde0e9;

  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 26px;
  --radius-pill: 999px;

  --shadow-soft: 0 18px 40px rgba(15, 19, 40, 0.16);
}

/* Reset */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Fira Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  color: #f3f4f8;
  background: var(--color-bg-page);
  -webkit-font-smoothing: antialiased;
}

/* Links */
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Überschriften */
h1, h2, h3 {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 0 0 0.4rem 0;
  color: var(--color-text-main);
}
h1 { font-size: 2.2rem; }
h2 { font-size: 1.7rem; }
h3 {
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* ======================================
   Buttons
====================================== */
.button-primary,
.button-link,
.button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.75rem 1.6rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.95rem;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out, background 0.15s ease-out, color 0.15s ease-out;
}

.button-primary,
.button-link {
  background: linear-gradient(135deg, var(--color-primary) 0, var(--color-primary-soft) 100%);
  color: #fff;
  box-shadow: 0 14px 34px rgba(224, 0, 42, 0.45);
}
.button-primary:hover,
.button-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(224, 0, 42, 0.6);
}

.button-secondary {
  background: #fff;
  color: var(--color-text-main);
  border: 1px solid var(--color-border-soft);
  box-shadow: 0 10px 24px rgba(11, 15, 35, 0.06);
}
.button-secondary:hover { background: #f6f7fb; }

/* ======================================
   Header
====================================== */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;

  height: 96px;
  padding: 0 1.6rem;
  display: flex;
  align-items: center;
  background: #fff;

  transition: height 320ms cubic-bezier(.4,0,.2,1),
              padding 320ms cubic-bezier(.4,0,.2,1),
              box-shadow 320ms cubic-bezier(.4,0,.2,1),
              background-color 320ms cubic-bezier(.4,0,.2,1);
}

.header-inner {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0.7rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.logo-owner img { height: 96px; width: auto; display: block; }
.logo-gtue img  { height: 60px; width: auto; display: block; }

.header-right {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.site-header.header-shrink{
  height: 64px;
  padding: 0 1.2rem;
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
}
.site-header.header-shrink .header-inner { padding-top: 0.4rem; padding-bottom: 0.4rem; }
.site-header.header-shrink .logo-owner img { height: 60px; }
.site-header.header-shrink .logo-gtue img  { height: 48px; }

/* ======================================
   Navigation – Desktop
====================================== */
.main-nav { flex: 1; margin-left: 2rem; }

.nav-level-1 {
  list-style: none;
  display: flex;
  gap: 2rem;
  margin: 0;
  padding: 0;
}

.nav-item > a {
  position: relative;
  font-size: 1.02rem;
  font-weight: 500;
  color: #333741;
  padding: 0.7rem 0;
  letter-spacing: 0.02em;
}

.nav-item > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.2rem;
  width: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #e0002a, #ff4b63);
  transition: width 0.2s ease-out;
}
.nav-item > a:hover::after { width: 100%; }
.nav-item > a:hover { color: #111; }

.nav-item.has-sub { position: relative; }

.nav-level-2 {
  list-style: none;
  margin: 0;
  padding: 1rem 1.1rem;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 24px;
  min-width: 260px;

  background: #fff;
  border: none;
  border-radius: 0 0 14px 14px;
  box-shadow: 0 12px 28px rgba(10,10,20,0.18);

  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.18s ease-out, transform 0.18s ease-out;
}

.nav-item.has-sub::after {
  content: "";
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: 24px;
}

.nav-item.has-sub:hover > .nav-level-2 {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.nav-level-2 li + li { margin-top: 0.2rem; }
.nav-level-2 li a {
  display: block;
  padding: 0.55rem 0.3rem;
  font-size: 0.95rem;
  color: #333741;
}
.nav-level-2 li a:hover { background: #fff; }

/* Burger / Mobile-Button */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.9rem;
  cursor: pointer;
  color: #333741;
}

/* ======================================
   Mobile Navigation
====================================== */
.mobile-nav { display: none; background: #fff; border-bottom: 1px solid var(--color-border-soft); }
.mobile-nav.open { display: block; }

.mobile-nav-level-1,
.mobile-nav-level-2 { list-style: none; margin: 0; padding: 0; }

.mobile-item { border-top: 1px solid #eceef4; }

.mobile-nav a,
.mobile-sub-toggle {
  display: block;
  padding: 0.95rem 1.25rem;
  font-size: 0.98rem;
  color: #262933;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
}
.mobile-sub-toggle { cursor: pointer; }

.mobile-nav-level-2 { display: none; background: #f5f6fb; }
.mobile-item.open > .mobile-nav-level-2 { display: block; }

/* ======================================
   Hero
====================================== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero-start    { background: url("/assets/img/hero-start.jpg") center/cover no-repeat; background-attachment: fixed; }
.hero-oldtimer { background: url("/assets/img/hero-oldtimer.jpg") center/cover no-repeat; background-attachment: fixed; }
.hero-19-2     { background: url("/assets/img/hero-19-2.jpg") center/cover no-repeat; background-attachment: fixed; }
.hero-21       { background: url("/assets/img/hero-21.jpg") center/cover no-repeat; background-attachment: fixed; }
.hero-hu       { background: url("/assets/img/hero-hu-uma.jpg") center/cover no-repeat; background-attachment: fixed; }
.hero-feinstaub{ background: url("/assets/img/hero-feinstaub.jpg") center/cover no-repeat; background-attachment: fixed; }
.hero-aenderung{ background: url("/assets/img/hero-aenderung.jpg") center/cover no-repeat; background-attachment: fixed; }
.hero-gas      { background: url("/assets/img/hero-gas.jpg") center/cover no-repeat; background-attachment: fixed; }
.hero-sp       { background: url("/assets/img/hero-sp.jpg") center/cover no-repeat; background-attachment: fixed; }

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(5,8,18,0.80) 0%, rgba(5,8,18,0.55) 45%, rgba(5,8,18,0.30) 100%);
  z-index: 1;
}
.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.8rem;
}
.hero-textbox {
  max-width: 620px;
  background: rgba(10, 12, 26, 0.75);
  border-radius: 24px;
  padding: 2rem 2.2rem;
  border: 1px solid rgba(255,255,255,0.25);
  backdrop-filter: blur(10px);
}
.hero-textbox h1 { color: #fff; }
.hero-textbox p  { margin-top: 0.4rem; margin-bottom: 1.4rem; color: #f3f4f8; }
.hero-actions { display: flex; justify-content: center; margin-top: 1.2rem; }

/* ======================================
   Main / Sections
====================================== */
.page-main { padding: 2.8rem 1.2rem 3rem; }
.page-section { margin-bottom: 2.4rem; }
.page-section-inner { max-width: 1100px; margin: 0 auto; }

/* ======================================
   Footer (Standard)
====================================== */
.site-footer {
  padding: 2rem 1.2rem 1.6rem;
  background: #cc0025;
}
.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
}
.footer-inner a { color: #fff; font-size: 0.85rem; }
.footer-left { font-size: 0.85rem; color: #fff; }

/* ======================================
   Überschriften auf dunklem Content
====================================== */
.page-main h1, .page-main h2, .page-main h3 { color: #f3f4f8; }

/* ======================================
   FORMULAR / INPUTS – WICHTIG: KEIN GLOBAL input{width:100%}
   Nur Textfelder / Textarea breit
====================================== */

/* Textfelder gezielt auf 100% */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
input[type="search"],
textarea,
select {
  width: 100%;
  padding: 12px;
  margin: 0 0 15px 0;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
}

/* Radios/Checkboxes NICHT kaputt stylen */
input[type="radio"],
input[type="checkbox"] {
  width: auto !important;
  padding: 0 !important;
  margin: 0 0.5rem 0 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  vertical-align: middle !important;
}

/* Labels: sauberer Textfluss */
label { display: inline-block; }

/* Für deine Radio-Labels (ib-card) */
.ib-card label.ib-radio {
  display: block;
  padding-left: 0 !important;
  margin: 0.35rem 0;
}
.ib-card label.ib-radio input[type="radio"]{
  position: static !important;
  transform: none !important;
}

/* ======================================
   Responsive
====================================== */
@media (max-width: 1024px) {
  .main-nav { display: none; }
  .nav-toggle { display: block; margin-left: auto; }
}

@media (max-width: 768px) {
  .header-inner { padding-inline: 1rem; }
  .logo-owner img { height: 56px; }
  .site-header.header-shrink .logo-owner img { height: 48px; }
  .logo-gtue img { height: 44px; }
  .site-header.header-shrink .logo-gtue img { height: 38px; }

  .hero { min-height: 90vh; }
  .hero-inner { padding: 0 1.2rem; }
  .hero-textbox { padding: 1.6rem; }

  .page-main { padding: 2.2rem 1.2rem 2.6rem; }

  .footer-inner { flex-direction: column; align-items: flex-start; }
}

/* ================================
   FIX: GTÜ-FOOTER wieder korrekt
================================ */

/* Wenn du den "gtue-footer" nutzt (dein Premium-Footer) */
.gtue-footer{
  background: #cc0025;
  color:#fff;
  padding: 3rem 1.7rem 1.4rem;
  margin-top: 1rem;
  box-shadow: 0 -10px 35px rgba(0,0,0,0.22);
}

.gtue-footer-inner{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.4rem;
}

.gtue-footer-col h3{
  font-size: 1.15rem;
  margin: 0 0 0.8rem 0;
  font-weight: 700;
  letter-spacing: 0.02em;
  color:#fff;
  text-transform: none;
}

.gtue-footer-col p,
.gtue-footer-col a{
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.80);
}

.gtue-footer-col a:hover{ color:#fff; text-decoration: underline; }

.gtue-footer-bottom{
  text-align:center;
  margin-top: 2.2rem;
  padding-top: 1.4rem;
  border-top: 0;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.72);
}

/* Responsive */
@media (max-width: 900px){
  .gtue-footer-inner{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px){
  .gtue-footer-inner{ grid-template-columns: 1fr; }
}

/* =========================================================
   ÄNDERUNGSABNAHME CHECK – Seiten-spezifische Styles
   (vorher: inline <style> + /assets/css/aenderungsabnahme-radio-fix.css)
   Scope: <body class="aenderungscheck-page">
========================================================= */

body.aenderungscheck-page{
  background:#2b2f35;
}

/* INFOTEXT-BEREICH: dunkel + weiß */
body.aenderungscheck-page .info-dark{
  background:#2b2f35;
  color:#fff;
  padding: 3rem 0;
}

body.aenderungscheck-page .info-dark .page-section-inner{
  max-width: 980px;
  margin: 0 auto;
  padding: 0 1rem;
}

body.aenderungscheck-page .info-dark h1,
body.aenderungscheck-page .info-dark h2,
body.aenderungscheck-page .info-dark h3{
  color:#fff;
  margin-top: 0;
}

body.aenderungscheck-page .info-dark p,
body.aenderungscheck-page .info-dark li{
  color: rgba(255,255,255,.88);
  line-height: 1.65;
}

body.aenderungscheck-page .info-dark ul{
  margin: .6rem 0 1rem 1.15rem;
}

body.aenderungscheck-page .info-dark hr{
  border: 0;
  border-top: 1px solid rgba(255,255,255,.18);
  margin: 2rem 0;
}

body.aenderungscheck-page .info-dark .lead{
  color: rgba(255,255,255,.86);
}

/* CHECK-BEREICH: dunkel, Cards weiß */
body.aenderungscheck-page .ib-check-page{
  background:#2b2f35;
  padding: 1.5rem 0 3.2rem;
}

body.aenderungscheck-page .ib-check-container{
  max-width: 980px;
  margin: 0 auto;
  padding: 0 1rem;
}

body.aenderungscheck-page .ib-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  border-radius:14px;
  padding: 1.05rem 1.1rem;
  margin: .85rem 0;
  box-shadow: 0 8px 22px rgba(0,0,0,.10);
  color:#111;
}

body.aenderungscheck-page .ib-card h3{
  margin: 0 0 .55rem 0;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0;
  color:#111;
  text-transform: none;
}

body.aenderungscheck-page .ib-sub{
  margin: -.15rem 0 .6rem 0;
  color: rgba(0,0,0,.72);
}

/* Radio-Labels sauber ausrichten (Punkt direkt vor Text) */
body.aenderungscheck-page label.ib-radio{
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0.35rem 0;
  line-height: 1.45;
  color: #111;
  padding-left: 0 !important;
}

/* Radio selbst nicht "kaputtstylen" (überschreibt globale/Theme-Regeln) */
body.aenderungscheck-page label.ib-radio input[type="radio"]{
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  margin: 0.2rem 0 0 0 !important;
  width: auto !important;
  height: auto !important;
  flex-shrink: 0;
  accent-color: var(--color-primary);
}

body.aenderungscheck-page .ib-list{
  margin:.35rem 0 .6rem 1.1rem;
  color:#111;
}

body.aenderungscheck-page .ib-card select{
  width:100%;
  padding:.75rem .85rem;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.20);
  font-size: 1rem;
  background:#fff;
  color:#111;
}

body.aenderungscheck-page .ib-note{
  margin-top:.7rem;
  padding:.65rem .8rem;
  background: rgba(224,0,42,.06);
  border: 1px solid rgba(224,0,42,.18);
  border-radius:12px;
  color: rgba(0,0,0,.78);
  line-height: 1.55;
  font-size: .95rem;
}

/* Actions */
body.aenderungscheck-page .ib-actions{
  display:flex;
  gap:.7rem;
  flex-wrap:wrap;
  margin-top: 1rem;
}

body.aenderungscheck-page .ib-btn{
  border:0;
  border-radius:999px;
  padding:.8rem 1.2rem;
  font-weight:800;
  cursor:pointer;
}

body.aenderungscheck-page .ib-btn-primary{ background:#e0002a; color:#fff; }
body.aenderungscheck-page .ib-btn-secondary{ background: rgba(255,255,255,.12); color:#fff; }

/* Ergebnis immer lesbar */
body.aenderungscheck-page .ib-result{
  margin-top: 1.1rem;
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  padding: 1rem;
  color:#111 !important;
}

body.aenderungscheck-page .ib-result *{
  color:#111 !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
}

body.aenderungscheck-page .ib-result h3{
  font-size: 1.15rem;
  font-weight: 900;
  margin: .2rem 0 .6rem 0;
  text-transform: none;
}

body.aenderungscheck-page .ib-result ul{
  margin: .35rem 0 .75rem 1.15rem;
}

/* Badges */
body.aenderungscheck-page .ib-badge{
  display:inline-block;
  padding:.35rem .7rem;
  border-radius:999px;
  font-weight:900;
  font-size:.9rem;
  margin-bottom:.6rem;
}

body.aenderungscheck-page .ib-badge.red{
  background: rgba(224,0,42,.14) !important;
  color:#a1001f !important;
  border:1px solid rgba(224,0,42,.35) !important;
}

body.aenderungscheck-page .ib-badge.yellow{
  background: rgba(245,180,0,.18) !important;
  color:#7a5600 !important;
  border:1px solid rgba(245,180,0,.45) !important;
}

body.aenderungscheck-page .ib-badge.green{
  background: rgba(0,160,70,.14) !important;
  color:#0b6b33 !important;
  border:1px solid rgba(0,160,70,.35) !important;
}

/* Link-Button im Result */
body.aenderungscheck-page .ib-result a.ib-btn-primary{
  color:#fff !important;
  text-decoration:none;
}

/* Disclaimer */
body.aenderungscheck-page .ib-disclaimer{
  margin-top: .9rem;
  color: rgba(255,255,255,.80);
  line-height: 1.6;
  font-size: .95rem;
}