/* main.css – korrigiert: Theme-Variablen müssen greifen
   Kernfix: KEIN !important bei var()-Regeln, damit Theme-CSS (später geladen) sauber überschreiben kann. */

:root{
  --c-nav-bg: #4c4c4c;

  --c-header-bg: #d1d1d1;       /* gesamter Header inkl. leftfill */
  --c-ticker-bg: #f1f1f1;       /* Ticker-Hintergrund (mid + right) */
  --c-ticker-text: #000000;     /* Lauftext */
  --c-ticker-label-bg: #968d83; /* Trapez */
  --c-ticker-label-text: #eeeeee;

  --c-footer-bg: #4c4c4c;  /* footer hintergrund */
  --c-claim: rgba(0,0,0,0.55);
  --claim-x: 10px;
  --claim-y: -6px;

  --container-w: 1320px;
}

/* =========================
   BASE
   ========================= */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Arial, Helvetica, sans-serif;
  font-size:16px;
  line-height:1.75;
  color:#222;
  background:#fff;
}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}

.container{
  width:var(--container-w);
  max-width:96%;
  margin:0 auto;
}

/* =========================
   TOP TICKER
   ========================= */
.top-ticker{
  display:flex;
  width:100%;
  height:54px;
  line-height:54px;
  overflow:hidden;
  background: var(--c-ticker-bg);
}

/* links = Headerfarbe */
.top-ticker__leftfill{
  flex:1 1 auto;
  background: var(--c-header-bg);
}

/* rechts = Tickerfarbe bis Rand */
.top-ticker__rightfill{
  flex:1 1 auto;
  background: var(--c-ticker-bg);
}

/* Mittelteil */
.top-ticker__mid{
  width:var(--container-w);
  max-width:96%;
  background: var(--c-ticker-bg);
  display:flex;
  align-items:stretch;
  position:relative;
}

/* Trapez */
.ticker-label{
  width:95px;
  height:54px;
  background: var(--c-ticker-label-bg);
  position:relative;
  left:-16px;
  transform:skew(25deg);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.ticker-label span{
  transform:skew(-25deg);
  color: var(--c-ticker-label-text);
  font-weight:400;
  
}

/* Lauftext */
.ticker-track{
  position:relative;
  overflow:hidden;
  flex:1;
  height:54px;
  display:flex;
  align-items:center;
}
.ticker-move{
  display:inline-flex;
  white-space:nowrap;
  gap:60px;
  padding-left:10px;
  will-change:transform;
  animation: tickerMove 18s linear infinite;
  color: var(--c-ticker-text);
  /*font-size:116px;*/
}
.ticker-track:hover .ticker-move{ animation-play-state:paused; }

@keyframes tickerMove{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

@media (prefers-reduced-motion: reduce){
  .ticker-move{animation:none}
  .ticker-track{overflow:auto}
}

/* Ticker “nach rechts” schieben */
@media (min-width: 1200px){
  .top-ticker__leftfill{
    flex:0 0 890px;
  }
}

/* =========================
   HEADER (Branding Bereich)
   ========================= */
.site-header{
  width:100%;
  position:relative;
  z-index:10;
  background: var(--c-header-bg);
}

.header-top{
  padding:18px 0 10px;
  background: var(--c-header-bg);
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
}

.brand{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.brand-link{
  display:inline-flex;
  align-items:center;
}
.brand-logo{
  height:64px;
  width:auto;
  display:block;
}
.brand-claim{
  font-size:14px;
  color: var(--c-claim);
  position:relative;
  left: var(--claim-x);
  top: var(--claim-y);
}

/* CTA optional */
.header-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#337ab7;
  color:#fff;
  padding:10px 14px;
  border-radius:4px;
  font-weight:700;
}
.header-cta:hover{text-decoration:none;opacity:.95}

/* Desktop: Branding etwas nach oben */
@media (min-width: 901px){
  .header-top{ padding-top:0; }
  .brand{ transform: translateY(-30px); }
}

/* =========================
   MAIN NAV
   ========================= */
/* WICHTIG: kein !important, damit Theme-Variablen greifen */
.main-nav{ background: var(--c-nav-bg); }

.main-menu{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  gap:18px;
  height:56px;
}

/* Links */
.main-menu > li > a{
  color:#fff;
  font-weight:400;
  font-size:18px;
  letter-spacing:.2px;
  padding:0 10px;
  height:56px;
  display:flex;
  align-items:center;
}
.main-menu > li > a:hover{
  text-decoration:underline;
}

/* Burger rechts */
.hamburger-container{
  margin-left:auto;
  position:relative;
  display:flex;
  align-items:center;
  height:56px;
}
.hamburger-icon{
  appearance:none;
  border:0;
  background:transparent;
  color:#fff;
  font-size:32px;
  line-height:1;
  padding:0 10px;
  cursor:pointer;
  height:56px;
  display:flex;
  align-items:center;
}

/* Dropdown */
.dropdown{
  display:none;
  position:absolute;
  right:0;
  top:calc(100% + 10px);
  min-width:280px;
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  border-radius:4px;
  padding:10px 0;
  box-shadow:0 14px 40px rgba(0,0,0,.22);
  z-index:999;
}
.dropdown.active{display:block}
.dropdown li{list-style:none}
.dropdown a{
  display:block;
  padding:12px 16px;
  color:#111;
  font-weight:600;
  font-size:15px;
  line-height:1.8;
}
.dropdown li + li a{ border-top:1px solid rgba(0,0,0,.06); }
.dropdown a:hover{
  background:#f2f5f8;
  text-decoration:none;
}

/* =========================
   LAYOUT / CONTENT
   ========================= */
.site-main{
  width:var(--container-w);
  max-width:96%;
  margin:0 auto;
  padding:46px 0 26px;
}

.layout-leftnav .site-main{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap:40px;
  align-items:start;
}

.content{
  max-width:900px;
  font-size:16px;
  line-height:1.85;
  color:#333;
}

.content h2{
  margin:0 0 10px 0;
  font-size:32px;
  font-weight:700;
  line-height:1.25;
  color:#111;
}
.content h3{
  margin:22px 0 10px 0;
  font-size:18px;
  font-weight:700;
  line-height:1.35;
  color:#111;
}
.content p{
  margin:10px 0;
  color:#444;
}

/* Leftnav */
.leftnav-box{background:#fff}
.leftnav-title{
  font-size:13px;
  color:#777;
  font-weight:400;
  padding:14px 0 8px;
}
.leftnav-list{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid #eee;
}
.leftnav-list li{ border-bottom:1px solid #f0f0f0; }
.leftnav-list a{
  display:block;
  padding:12px 0;
  font-size:15px;
  font-weight:600;
  color:#222;
}
.leftnav-list a:hover{
  color:#337ab7;
  text-decoration:none;
}

.leftnav-search{ margin:16px 0 6px; }
.leftnav-search__label{
  display:block;
  font-size:12px;
  color:#666;
  margin-bottom:8px;
}
.leftnav-search__input{
  width:100%;
  padding:12px;
  border:1px solid #ddd;
  border-radius:4px;
  font-size:16px;
}

/* =========================
   FOOTER
   ========================= */
.site-footer{
  background: var(--c-footer-bg);
  color:#e6e6e6;
  padding:26px 0;
  border-top:1px solid #111;
}

.footer-inner{
  width:var(--container-w);
  max-width:96%;
  margin:0 auto;
}

.footer-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:24px;
}

.footer-title{
  font-weight:700;
  margin:0 0 10px 0;
  color:#fff;
}

.footer-links{
  list-style:none;
  margin:0;
  padding:0;
}
.footer-links li{ margin:0 0 8px 0; }
.footer-links a{
  color:#e6e6e6;
  text-decoration:none;
}
.footer-links a:hover{
  color:#fff;
  text-decoration:underline;
}

.footer-bottom{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,0.10);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  font-size:13px;
  color:#cfcfcf;
}
.footer-bottom-left,
.footer-bottom-right{ white-space:nowrap; }

/* Desktop: Tickerschrift größer */
  .ticker-move{
    font-size: 17px;   /* vorher 16px */
  }
  .ticker-label span{
    font-size: 16px;   /* vorher 14px */
  }



/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 900px){
  .header-cta{display:none}

  .header-top{
    padding:14px 0 10px;
    align-items:center;
  }
  .brand-logo{height:48px}
  .brand-claim{font-size:13px}

  .layout-leftnav .site-main{
    grid-template-columns:1fr;
    gap:18px;
  }
  .content{max-width:none}

  .footer-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-bottom{
    flex-direction:column;
    align-items:flex-start;
  }
  .footer-bottom-left,
  .footer-bottom-right{ white-space:normal; }
}

@media (max-width: 768px){
  .brand-logo{height:40px}

  .main-menu{
    gap:6px;
    overflow:hidden;
  }
  .main-menu > li:not(.hamburger-container){
    flex:1 1 auto;
    min-width:0;
  }
  .main-menu > li > a{
    font-size:18px;
    padding:0 6px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .hamburger-icon{
    font-size:35px;
    transform:translateY(-2px);
  }

  .dropdown{ min-width:300px; }

/*
  .ticker-move{ font-size:16px; }
*/

  .ticker-label{ left:-28px; }
}

/* Mobile: Tickerschrift minimal kleiner */


@media (max-width: 768px){
  .ticker-move{ font-size: 9px !important; }  
}


@media (max-width: 520px){
  .footer-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 420px){
  .ticker-label{ left:-28px; }
}

@media (max-width: 768px){
  /* Dropdown darf nicht abgeschnitten werden */
  .main-menu{
    overflow: visible !important;   /* war hidden */
  }

  /* Sicherheit: Dropdown über allem */
  .hamburger-container{ z-index: 1000; }
  .dropdown{ z-index: 9999; }
}


/* PATCHES */
/*
@media (max-width: 768px){
  .main-menu > li > a{
    font-size:18px;   
  }
}
*/




/* iOS/Brave: keine automatische Text-Skalierung */
html{
  -webkit-text-size-adjust: 100%;
}

/* Mobile-Overrides (hart durchsetzen) */
@media (max-width: 768px){

  /* Hamburger */
  .hamburger-icon{
    font-size:44px !important;
    transform:translateY(-4px) !important;
  }

  /* Dropdown Schrift */
  .dropdown a{
    font-size:18px !important;
    font-weight:400 !important;
    line-height:1.8 !important;
  }

  /* Content Schrift */
  .content,
  .content p,
  .content li{
    font-size:18px !important;
    line-height:1.9 !important;
  }

  /* Ticker Höhe */
  .top-ticker,
  .top-ticker__mid,
  .ticker-label,
  .ticker-track{
    height:42px !important;
    line-height:42px !important;
  }

  /* Ticker Schrift */
  .ticker-move{
    font-size:20px !important;
    line-height:42px !important;
  }
  .ticker-label span{
    font-size:17px !important;
	font-weight:600!important;
    line-height:42px !important;
  }
}

/* Mobil: Lauftext läuft UNTER das Trapez (Overlay) */
@media (max-width: 768px){

  /* Mid als Overlay-Container */
  .top-ticker__mid{
    position: relative !important;
    display: block !important;     /* nicht flex nebeneinander */
  }

  /* Trapez liegt oben drüber */
  .ticker-label{
    position: absolute !important;
    left: -16px !important;
    top: 0 !important;
    z-index: 3 !important;
    margin: 0 !important;
  }

  /* Lauftext-Kasten nimmt volle Breite ein (unter dem Trapez) */
  .ticker-track{
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
  }

  /* Text startet optisch rechts vom Trapez, kann aber darunter durchlaufen */
  .ticker-move{
    padding-left: 110px !important; /* ca. Trapezbreite + kleiner Puffer */
  }
}

/* Desktop: Lauftext läuft unter das Trapez (wie mobil) */
@media (min-width: 901px){

  /* Mid als Overlay-Container */
  .top-ticker__mid{
    position: relative !important;
    display: block !important;   /* statt flex nebeneinander */
  }

  /* Trapez liegt über dem Lauftext */
  .ticker-label{
    position: absolute !important;
    left: -30px !important;
    top: 0 !important;
    z-index: 3 !important;
    margin: 0 !important;
  }

  /* Lauftext-Kasten volle Breite */
  .ticker-track{
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
  }

  /* Text startet rechts vom Trapez, läuft am Ende darunter durch */
  .ticker-move{
    padding-left: 110px !important; /* ggf. 100–130px feinjustieren */
  }
}

/* Ticker schneller */
.ticker-move{
  animation-duration: 17s !important;
}

/* --- TICKER: kein Abstand zwischen den beiden Text-Kopien --- */
.ticker-move{
  gap: 0 !important;
}

/* optional: falls du irgendwo noch margin/padding auf spans hast */
.ticker-move > span{
  margin: 0 !important;
  padding: 0 !important;
}


@media (max-width: 768px){
  .ticker-move{ font-size: 18.5px !important; }  
}


/* HARD TEST: sichtbares Debug-Banner auf Mobile */
/*
@media (max-width: 768px){
  body::before{
    content: "MOBILE CSS AKTIV (<=768px)";
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2147483647;
    padding: 10px 12px;
    background: #ff00ff;
    color: #000;
    font: 700 16px/1.2 Arial, Helvetica, sans-serif;
    text-align: center;
    pointer-events: none;
  }
}
*/