/* Kopf und Fuß der Website (alle Seiten, auch die App-Landingpage mit ihrem eigenen Design).
   Eigene Datei mit Rückfallwerten, damit die Regeln unabhängig von main.css bzw. app.css funktionieren. */

.skip{position:absolute;left:-9999px;top:10px;background:#04191D;color:#fff;padding:8px 14px;border-radius:999px;z-index:100}
.skip:focus{left:16px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Kopfzeile ---------- */
.top{position:sticky;top:0;z-index:40;background:#000;border-bottom:1px solid #1C1C1C;color:#fff;font-family:"Inter",system-ui,sans-serif}
.top .wrap{max-width:1240px;margin:0 auto;padding:0 clamp(16px,3.2vw,40px);display:flex;align-items:center;gap:36px;height:60px}
.brand{display:inline-flex;align-items:center;text-decoration:none;color:inherit}
.brand svg.logo{height:26px;width:auto;display:block}
.menu{display:flex;gap:28px;font-size:15px}
.menu a{text-decoration:none;color:#8E8E93}
.menu a:hover,.menu a[aria-current]{color:#fff}
.top__end{margin-left:auto;display:flex;align-items:center;gap:18px;font-size:14px}
.top .btn,.lang-consent .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:auto;min-height:36px;transform:none;padding:0 16px;border-radius:999px;font:500 14px/1 "Inter",system-ui,sans-serif;text-decoration:none;white-space:nowrap;border:0;cursor:pointer;letter-spacing:0;transition:background .15s ease}
.top .btn--ink{background:#fff;color:#000}
.top .btn--ink:hover{background:#E5E5EA}
.navm{display:none}
.navm summary{list-style:none;cursor:pointer;width:40px;height:40px;display:grid;place-items:center;border-radius:10px}
.navm summary::-webkit-details-marker{display:none}
.navm summary span,.navm summary span::before,.navm summary span::after{display:block;width:20px;height:2px;background:#fff;border-radius:2px;position:relative;transition:transform .2s ease}
.navm summary span::before,.navm summary span::after{content:"";position:absolute;left:0}
.navm summary span::before{top:-6px}
.navm summary span::after{top:6px}
.navm[open] summary span{background:transparent}
.navm[open] summary span::before{transform:translateY(6px) rotate(45deg)}
.navm[open] summary span::after{transform:translateY(-6px) rotate(-45deg)}
.navm nav{position:absolute;left:0;right:0;top:60px;background:#000;border-bottom:1px solid #1C1C1C;padding:8px clamp(16px,3.2vw,40px) 20px;display:grid}
.navm nav a{padding:12px 0;color:#fff;text-decoration:none;font-size:17px;border-bottom:1px solid #1C1C1C}
.navm nav a[aria-current]{color:var(--band-accent,#0099B5)}
/* Bereichsfarben in der Navigation */
/* Unterstrich beim Überfahren und für die aktive Seite: App und Top3 in Weiß, Health, Invest, Tech in ihrer Bereichsfarbe */
.menu a,.navm a{text-decoration-thickness:2px;text-underline-offset:8px;text-decoration-color:#fff}
.menu a:hover,.menu a[aria-current],.navm a[aria-current]{color:#fff;text-decoration-line:underline}
.menu a[data-bereich="health"],.navm a[data-bereich="health"]{text-decoration-color:#0099B5}
.menu a[data-bereich="invest"],.navm a[data-bereich="invest"]{text-decoration-color:#FFCC49}
.menu a[data-bereich="tech"],.navm a[data-bereich="tech"]{text-decoration-color:#94A0A9}

/* Sprachauswahl und Hinweis zur Übersetzung */
/* Sprachwahl: zwei kleine Flaggen, die aktive Sprache mit weißem Unterstrich (Artur, 30.10.2026) */
.lang{display:inline-flex;align-items:center;gap:10px}
.lang a{position:relative;display:block;padding:6px 0;line-height:0;opacity:.45;transition:opacity .15s ease}
.lang svg{display:block;width:21px;height:14px;border-radius:3px;box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.lang a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:#fff;transform:scaleX(0);transition:transform .15s ease}
.lang a:hover{opacity:.8}
.lang a[aria-current]{opacity:1}
.lang a[aria-current]::after{transform:scaleX(1)}
.lang-consent{max-width:440px;width:calc(100% - 32px);border:0;border-radius:20px;padding:24px;background:#fff;color:#04191D;font-family:"Inter",system-ui,sans-serif;box-shadow:0 30px 60px -20px rgba(0,0,0,.5)}
.lang-consent::backdrop{background:rgba(0,0,0,.5)}
.lang-consent p{margin:0;font-size:14.5px;line-height:1.55;color:#4E6469}
.lang-consent p+p{margin-top:10px}
.lang-consent .lang-consent__h{font:500 21px/1.2 "Jost",sans-serif;color:#04191D}
.lang-consent__btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.lang-consent .btn--ink{background:#012128;color:#fff}
.lang-consent .btn--light{background:#EBF3F4;color:#04191D}
/* Leiste und Hervorhebungen von Google Übersetzer ausblenden */
.goog-te-banner-frame,.skiptranslate>iframe,#goog-gt-tt,.goog-te-balloon-frame,.goog-te-spinner-pos{display:none!important}
body{top:0!important}
.goog-text-highlight{background:none!important;box-shadow:none!important}

/* ---------- Fußzeile: Logo und Social Media, darunter Rechtliches und Copyright, ganz unten der Hinweis ---------- */
.foot{--f-ink:#04191D;--f-ink-2:#4E6469;--f-line:#CFE0E3;--f-chip:#FFFFFF;--f-hover:var(--teal-ink,#007A91);
  margin-top:var(--space,clamp(48px,6vw,80px));border-top:1px solid var(--f-line);padding:32px 0 28px;font:400 14px/1.6 "Inter",system-ui,sans-serif;color:var(--f-ink-2)}
.foot .wrap{max-width:1240px;margin:0 auto;padding:0 clamp(16px,3.2vw,40px)}
.foot__top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px}
.foot .brand{color:var(--f-ink)}
.social{display:flex;flex-wrap:wrap;gap:6px}
.social a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--f-ink-2);background:var(--f-chip);transition:color .15s ease,background .15s ease}
.social a:hover{color:#fff;background:#012128}
.social svg{width:19px;height:19px}
.foot__bottom{margin-top:22px;padding-top:18px;border-top:1px solid var(--f-line);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 24px}
.foot__links{display:flex;flex-wrap:wrap;gap:6px 22px}
.foot__links a{text-decoration:none;color:var(--f-ink)}
.foot__links a:hover{color:var(--f-hover)}
.foot__copy{margin:0;font-size:13px}
.foot__note{margin:14px 0 0;font-size:12px;line-height:1.5;max-width:100ch}
/* Dunkle Variante (App-Landingpage) */
.foot--dark{--f-ink:#FFFFFF;--f-ink-2:#8E8E93;--f-line:#1C1C1C;--f-chip:#121212;--f-hover:#0099B5;margin-top:0;background:#000}
.foot--dark .social a:hover{background:#0099B5}

/* Hinweis-Fenster (Rabattcode kopiert) */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:#04191D;color:#fff;padding:10px 16px;border-radius:999px;font:400 14px/1.4 "Inter",system-ui,sans-serif;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;z-index:60;margin:0}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

@media (max-width:1080px){
  .menu{display:none}
  .navm{display:block}
  .top__end .btn{display:none}
}
@media (max-width:760px){
  .top .wrap{height:54px;gap:16px}
  .navm nav{top:54px}
  .brand svg.logo{height:22px}
}
@media (prefers-reduced-motion:reduce){ .navm summary span,.toast,.social a{transition:none} }