/* ============================================================
   FiF-IT — gemeinsames Basis-CSS
   Ablegen unter: /css/fif-base.css   (erstellt 17.08.2026)

   Diese Regeln standen wortgleich in 26 Seiten und wurden bei
   jedem Seitenwechsel erneut übertragen, weil Inline-CSS nicht
   cachebar ist. Hier liegen sie einmal.

   Wird per <link> VOR dem seiteneigenen <style> geladen.
   index.html und partner.html bleiben unangetastet — deren CSS
   ist anders aufgebaut.
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-display);
  background: var(--bg-base);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(ellipse 800px 600px at 10% -10%, rgba(0, 229, 168, 0.08), transparent 60%),
    radial-gradient(ellipse 600px 500px at 90% 0%, rgba(77, 196, 255, 0.06), transparent 60%);
  background-attachment: fixed;
}

body::before {
  content: ''; position: fixed; inset: 0;
  background-image:
    linear-gradient(rgba(120, 200, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 200, 255, 0.025) 1px, transparent 1px);
  background-size: 60px 60px; pointer-events: none; z-index: 0;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }

/* HEADER */
header { position: sticky; top: 0; z-index: 100; background: rgba(10, 14, 20, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); }

.nav { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; max-width: var(--max-width); margin: 0 auto; }

.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text-primary); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; }

.logo-mark { width: 36px; height: 36px; border-radius: 8px; display: block; object-fit: contain; box-shadow: 0 0 30px var(--accent-glow); }

.logo-text small { display: block; font-family: var(--font-mono); font-size: 0.65rem; color: var(--text-muted); font-weight: 400; letter-spacing: 0.15em; text-transform: uppercase; margin-top: 2px; }

.nav-links { display: flex; gap: 22px; list-style: none; align-items: center; }

.nav-links a { color: var(--text-secondary); text-decoration: none; font-size: 0.92rem; font-weight: 500; transition: color 0.2s; position: relative; white-space: nowrap; }

.nav-links a:hover, .nav-links a.active { color: var(--accent); }

.nav-cta { background: var(--accent); color: var(--bg-base) !important; padding: 8px 16px; border-radius: 6px; font-weight: 600 !important; font-size: 0.88rem; transition: all 0.2s; white-space: nowrap; }

.nav-cta:hover { background: #00ffbe; box-shadow: 0 0 25px var(--accent-glow); transform: translateY(-1px); }

.menu-toggle { display: none; background: none; border: 1px solid var(--border-strong); color: var(--text-primary); padding: 8px 12px; border-radius: 6px; cursor: pointer; font-family: var(--font-mono); }

/* SUBMENU */
.has-submenu { position: relative; }

/* Das Mega-Menue (min-width 1120px) wird ueber left:50% an seinem
   Listenpunkt zentriert. Der sitzt weit rechts in der Navigation,
   deshalb lief das Menue rechts aus dem Bild: bei 1280 px Fensterbreite
   155 px, bei 1366 px 112 px, bei 1440 px 55 px, bei 1536 px 7 px.
   Sichtbar wurde es nur nicht, weil body overflow-x: hidden hat.
   Der Listenpunkt MIT Mega-Menue wird deshalb static - dann zentriert
   sich das Menue am <header> und damit im Fenster, so wie es gedacht
   war. Die uebrigen Untermenues bleiben an ihrem Listenpunkt.
   Korrigiert 10.09.2026. */
.has-submenu:has(.submenu.mega) { position: static; }

.nav-toggle { background: none; border: none; color: var(--text-secondary); font-family: inherit; font-size: 0.92rem; font-weight: 500; cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: 6px; transition: color 0.2s; white-space: nowrap; }

.nav-toggle:hover, .has-submenu:hover .nav-toggle { color: var(--accent); }

.chev { font-size: 0.7rem; transition: transform 0.25s; display: inline-block; }

.has-submenu:hover .chev, .has-submenu.open .chev { transform: rotate(180deg); color: var(--accent); }

.submenu { position: absolute; top: calc(100% + 18px); left: 50%; transform: translateX(-50%) translateY(-8px); background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: 12px; padding: 16px; min-width: 280px; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.02) inset; opacity: 0; visibility: hidden; transition: opacity 0.25s, transform 0.25s, visibility 0.25s; z-index: 200; }

.submenu::before { content: ''; position: absolute; top: -18px; left: 0; right: 0; height: 18px; }

.has-submenu:hover .submenu, .has-submenu:focus-within .submenu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

.submenu.mega { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; min-width: 1120px; padding: 24px; }

.submenu:not(.mega){left:0;transform:translateY(-8px);min-width:264px;}

.submenu:not(.mega) a{display:flex;align-items:center;gap:12px;padding:9px 10px;}

.submenu:not(.mega) .sub-ico{width:34px;height:34px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:9px;background:rgba(0,229,168,0.10);color:var(--accent);}

.submenu:not(.mega) .sub-ico svg{width:18px;height:18px;}

.submenu:not(.mega) .sub-text{display:flex;flex-direction:column;min-width:0;}

.submenu:not(.mega) .sub-desc{display:block;margin:2px 0 0;font-size:0.78rem;color:var(--text-muted);font-family:var(--font-mono);}

.submenu:not(.mega) a:hover{background:rgba(0,229,168,0.08);}

.has-submenu:hover .submenu:not(.mega),.has-submenu:focus-within .submenu:not(.mega){transform:translateY(0);}

.submenu.mega .sub-title { display: block; word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; line-height: 1.3; }

.mega-col .mega-col-title { font-family: var(--font-mono); font-size: 0.7rem; color: var(--accent); letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 12px; padding: 0 12px; font-weight: 600; }

.submenu a { display: block; padding: 10px 12px; border-radius: 8px; text-decoration: none; color: var(--text-primary); transition: background 0.2s, transform 0.2s; margin-bottom: 2px; }

.submenu a:hover { background: rgba(0, 229, 168, 0.06); color: var(--text-primary); }

.submenu a:hover .sub-title { color: var(--accent); }

.sub-title { display: block; white-space: normal; overflow-wrap: break-word; font-size: 0.92rem; font-weight: 500; color: var(--text-primary); transition: color 0.2s; margin-bottom: 2px; }

.sub-desc {
  white-space: normal;
  overflow-wrap: break-word; display: block; font-size: 0.78rem; color: var(--text-muted); font-family: var(--font-mono); }

.pdf-badge { display: inline-block; font-family: var(--font-mono); font-size: 0.6rem; background: rgba(255, 184, 77, 0.15); color: var(--warn); padding: 1px 6px; border-radius: 4px; margin-left: 6px; letter-spacing: 0.05em; vertical-align: middle; }

/* PAGE HERO (smaller hero for inner pages) */
.page-hero { padding: 100px 0 60px; border-bottom: 1px solid var(--border); position: relative; }

.breadcrumb { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-muted); margin-bottom: 20px; letter-spacing: 0.05em; }

.breadcrumb a { color: var(--text-muted); text-decoration: none; transition: color 0.2s; }

.breadcrumb a:hover { color: var(--accent); }

.breadcrumb .sep { margin: 0 10px; opacity: 0.5; }

.breadcrumb .current { color: var(--accent); }

.page-hero h1 { font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.1; letter-spacing: -0.02em; font-weight: 600; margin-bottom: 20px; max-width: 900px; }

.page-hero .lead { font-size: 1.15rem; color: var(--text-secondary); max-width: 720px; }

/* CONTENT */
.content { padding: 80px 0; }

.content h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); line-height: 1.2; letter-spacing: -0.02em; font-weight: 600; margin-bottom: 24px; margin-top: 48px; }

.content h2:first-child { margin-top: 0; }

.content h3 { font-size: 1.3rem; font-weight: 600; margin-bottom: 16px; margin-top: 32px; color: var(--text-primary); }

.content h4 { font-size: 1.05rem; font-weight: 600; margin-bottom: 10px; margin-top: 24px; color: var(--text-primary); }

.content p { color: var(--text-secondary); font-size: 1.05rem; margin-bottom: 18px; max-width: 900px; }

.content strong { color: var(--text-primary); font-weight: 600; }

.content em { color: var(--accent); font-style: normal; }

.content ul, .content ol { color: var(--text-secondary); margin-bottom: 24px; padding-left: 0; list-style: none; max-width: 900px; }

.content ul li { padding: 10px 0 10px 28px; position: relative; border-bottom: 1px solid var(--border); }

.content ul li::before { content: '→'; position: absolute; left: 0; color: var(--accent); font-family: var(--font-mono); }

.content ul li:last-child { border-bottom: none; }

.content a { color: var(--accent); text-decoration: none; border-bottom: 1px dashed var(--border-strong); transition: border-color 0.2s; }

.content a:hover { border-bottom-color: var(--accent); }

.content img { max-width: 100%; height: auto; border-radius: 12px; margin: 24px 0; border: 1px solid var(--border); }

.section-label { font-family: var(--font-mono); font-size: 0.78rem; color: var(--accent); letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 16px; display: flex; align-items: center; gap: 12px; }

.section-label::before { content: ''; width: 24px; height: 1px; background: var(--accent); }

/* CARDS GRID */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 32px 0; }

.feature-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }

.feature-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 32px; transition: all 0.3s; position: relative; overflow: hidden; }

.feature-card:hover { border-color: var(--border-strong); transform: translateY(-4px); }

.feature-card .icon { width: 44px; height: 44px; background: rgba(0, 229, 168, 0.08); border: 1px solid rgba(0, 229, 168, 0.2); border-radius: 10px; display: grid; place-items: center; margin-bottom: 20px; color: var(--accent); font-family: var(--font-mono); font-weight: 700; }

.feature-card h3 { font-size: 1.15rem; font-weight: 600; margin: 0 0 12px; }

.feature-card p { color: var(--text-secondary); font-size: 0.95rem; margin: 0; }

.feature-card ul { margin: 0; }

/* CALLOUT */
.callout { padding: 32px; background: linear-gradient(135deg, rgba(0, 229, 168, 0.05), rgba(77, 196, 255, 0.03)); border-left: 3px solid var(--accent); border-radius: 4px; font-size: 1.1rem; font-weight: 500; color: var(--text-primary); margin: 32px 0; }

.callout.warn { background: linear-gradient(135deg, rgba(255, 184, 77, 0.06), rgba(255, 184, 77, 0.02)); border-left-color: var(--warn); }

/* CTA BUTTONS */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 8px; font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; text-decoration: none !important; transition: all 0.2s; border: 1px solid transparent !important; cursor: pointer; border-bottom: 1px solid transparent !important; }

.btn-primary, .content a.btn-primary { background: var(--accent); color: var(--bg-base) !important; }

.btn-primary:hover, .content a.btn-primary:hover { background: #00ffbe; box-shadow: 0 8px 32px var(--accent-glow); transform: translateY(-2px); color: var(--bg-base) !important; }

.btn-ghost, .content a.btn-ghost { background: transparent; color: var(--text-primary) !important; border-color: var(--border-strong) !important; }

.btn-ghost:hover, .content a.btn-ghost:hover { border-color: var(--accent) !important; color: var(--accent) !important; }

.btn .arrow { transition: transform 0.2s; }

.btn:hover .arrow { transform: translateX(4px); }

.cta-row { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 32px; }

/* CONTACT BLOCK (used on most inner pages) */
.contact-block { padding: 80px 0; background: var(--bg-elevated); border-top: 1px solid var(--border); }

.contact-block .inner { max-width: 720px; margin: 0 auto; text-align: center; }

.contact-block h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: 16px; }

.contact-block p { color: var(--text-secondary); font-size: 1.1rem; margin-bottom: 32px; }

/* Vertrauensanker unter den CTA-Buttons (ergänzt 09.09.2026).
   --text-muted erfüllt WCAG AA gegen --bg-elevated. */
.contact-block .cta-trust { margin: 26px 0 0; font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.5; color: var(--text-muted); letter-spacing: 0.02em; }

@media (max-width: 560px) { .contact-block .cta-trust { font-size: 0.76rem; } }

/* ============================================================
   COOKIE-/DATENSCHUTZ-HINWEIS  —  schmale Fassung (14.09.2026)

   Die vorige Fassung war auf einem 1280x720-Schirm 375 Pixel
   hoch, also 52 % der Sichtflaeche, und lag genau ueber dem
   Knopf "Jetzt beraten lassen". Jetzt ist es eine Leiste von
   rund 70 Pixeln. Die Aussage bleibt dieselbe, nur kuerzer —
   die Langfassung steht in der Datenschutzerklaerung, auf die
   der Link zeigt.

   Solange die Leiste steht, weichen Chat-Knopf, Sprechblase und
   Chat-Fenster nach oben aus. Wie viel Platz die Leiste braucht,
   traegt das Skript in --hinweis-platz ein (Hoehe + Abstand nach
   unten), damit es bei jeder Fensterbreite passt.

   Markup und JavaScript stehen in includes/fuss.php.
   index.php traegt die Vorlage selbst — Aenderungen also an
   beiden Stellen.
   ============================================================ */
.cookie-banner {
  position: fixed;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 1000;
  max-width: 1180px;
  margin: 0 auto;
  line-height: 1.5;
  background: rgba(22, 28, 39, 0.97);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  padding: 0;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  overflow: hidden;
}
.cookie-banner.visible { opacity: 1; transform: translateY(0); }
.cookie-banner[hidden] { display: none !important; }
.cookie-banner::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-secondary), var(--accent));
  background-size: 200% 100%;
  animation: cookieShimmer 4s ease-in-out infinite;
}
@keyframes cookieShimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.cookie-content {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
}
.cookie-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(0, 229, 168, 0.08);
  border: 1px solid rgba(0, 229, 168, 0.25);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.cookie-icon svg { width: 18px; height: 18px; color: var(--accent); }
.cookie-text {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-secondary);
}
.cookie-text strong { color: var(--text-primary); font-weight: 600; }
.cookie-text a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.cookie-btn {
  flex-shrink: 0;
  min-height: 42px;
  padding: 10px 20px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s, color 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.cookie-btn-primary {
  background: var(--accent);
  color: var(--bg-base);
  border-color: var(--accent);
}
.cookie-btn-primary:hover {
  background: #00ffbe;
  box-shadow: 0 4px 16px rgba(0, 229, 168, 0.4);
  transform: translateY(-1px);
}
/* Ghost-Knopf bleibt definiert: news/ und aeltere Kopien der
   Vorlage verwenden ihn noch. */
.cookie-btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: var(--border-strong);
}
.cookie-btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}
body.hinweis-offen .chat-launcher {
  bottom: calc(var(--hinweis-platz, 94px) + 14px);
}
body.hinweis-offen .chat-tooltip {
  bottom: calc(var(--hinweis-platz, 94px) + 90px);
}
body.hinweis-offen .chat-panel {
  bottom: calc(var(--hinweis-platz, 94px) + 90px);
  max-height: calc(100vh - var(--hinweis-platz, 94px) - 130px);
}
@media (max-width: 640px) {
  /* Ab hier ist neben dem Satz kein Platz mehr fuer den Knopf:
     Symbol und Text bleiben oben, der Knopf rutscht auf volle
     Breite darunter — so bleibt er mit 44 px gut treffbar.
     (Zwischen 720 und 900 px waechst der Satz auf drei Zeilen;
     die Leiste ist dort rund 90 px hoch statt 72.) */
  .cookie-banner { left: 12px; right: 12px; bottom: 12px; }
  .cookie-content { flex-wrap: wrap; gap: 12px; padding: 13px 15px; }
  .cookie-text { flex: 1 1 0; font-size: 0.84rem; }
  .cookie-btn { flex: 1 1 100%; min-height: 44px; }
  .cookie-text a { white-space: normal; }
}
@media (max-width: 560px) {
  /* Auf dem Handy zaehlt jede Zeile: ohne das Symbol bleibt dem
     Satz rund 45 px mehr Breite, das ist eine Zeile weniger. */
  .cookie-icon { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cookie-banner { transition: none; }
  .cookie-banner::before { animation: none; }
}



/* ============================================================
   CHAT-PANEL (hierher verschoben 10.09.2026)
   Stand wortgleich im <style>-Block jeder Seite. Die
   Formularseiten hatten es nicht, dort erschien das Panel
   als unformatierter Text am Seitenende.
   Die Seiten behalten ihre eigene Kopie — gleiche Regeln,
   also ohne Wirkung; herausnehmen kann man sie später.
   ============================================================ */
/* ===== Chat-Panel (übernommen von index.html, 26.08.2026) =====
   Vorher öffnete der Chat auf dieser Seite ein separates Popup-Fenster.
   Jetzt wie auf der Startseite: eingebettet im Panel. ===== */
.chat-panel {
  position: fixed;
  right: 24px;
  bottom: 100px;
  z-index: 1000;
  width: 380px;
  max-width: calc(100vw - 48px);
  height: 620px;
  max-height: calc(100vh - 140px);
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.97);
  transform-origin: bottom right;
  transition: opacity 0.25s, transform 0.25s, visibility 0.25s;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.chat-panel.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.chat-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
  color: var(--bg-base);
  flex-shrink: 0;
}
.chat-panel-head .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--bg-base);
  box-shadow: 0 0 0 0 rgba(10,14,20,.5);
  animation: chat-panel-dot 2s ease-in-out infinite;
}
.chat-panel-head strong {
  font-size: 0.95rem;
  font-weight: 700;
  flex: 1;
}
.chat-panel-close {
  background: none;
  border: none;
  color: var(--bg-base);
  cursor: pointer;
  font-size: 1.3rem;
  line-height: 1;
  padding: 2px 6px;
  opacity: 0.75;
  transition: opacity 0.2s;
}
.chat-panel iframe {
  flex: 1;
  width: 100%;
  border: none;
  background: var(--bg-elevated);
}
.chat-panel-loading {
  position: absolute;
  inset: 44px 0 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  background: var(--bg-elevated);
}
.chat-panel.loaded .chat-panel-loading { display: none; }
/* TEAM CARDS */
.team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin: 32px 0; }

.team-card { padding: 32px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; display: flex; gap: 24px; align-items: center; }

.team-avatar { width: 72px; height: 72px; flex-shrink: 0; background: linear-gradient(135deg, var(--accent), var(--accent-secondary)); border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-weight: 700; font-size: 1.6rem; color: var(--bg-base); }

.team-card h3 { margin: 0 0 4px; font-size: 1.2rem; }

.team-card .role { font-family: var(--font-mono); font-size: 0.78rem; color: var(--accent); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 12px; }

.team-card p { margin: 0; font-size: 0.95rem; }

/* PARTNER LOGO GRID */
.partner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; margin: 32px 0; }

.partner-tile {
  aspect-ratio: 16/9;
  background: #f5f7fa;
  border: 1px solid var(--border);
  border-radius: 12px;
  display: grid;
  place-items: center;
  padding: 18px 24px;
  transition: all 0.3s;
  text-decoration: none !important;
  border-bottom: 1px solid var(--border) !important;
  position: relative;
  overflow: hidden;
}

.partner-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 229, 168, 0), rgba(77, 196, 255, 0));
  transition: background 0.3s;
  pointer-events: none;
}

.partner-tile:hover {
  border-color: var(--accent) !important;
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0, 229, 168, 0.15);
}

.partner-tile:hover::before {
  background: linear-gradient(135deg, rgba(0, 229, 168, 0.08), rgba(77, 196, 255, 0.05));
}

.partner-tile img {
  max-width: 100%;
  max-height: 56px;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: 0;
  border: none;
  position: relative;
  z-index: 1;
  transition: transform 0.3s;
}

.partner-tile > svg {
  display: block;
  height: 40px;
  width: auto;
  max-width: 100%;
  margin: 0;
  border: none;
  position: relative;
  z-index: 1;
  transition: transform 0.3s;
}

.partner-tile:hover img,
.partner-tile:hover > svg { transform: scale(1.05); }

/* DOWNLOAD CARDS */
.download-card { display: flex; align-items: center; gap: 20px; padding: 20px 24px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; margin: 12px 0; transition: all 0.2s; text-decoration: none !important; border-bottom: 1px solid var(--border) !important; max-width: 700px; }

.download-card:hover { border-color: var(--accent) !important; transform: translateX(4px); }

.download-card .file-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 8px; background: rgba(255, 184, 77, 0.12); border: 1px solid rgba(255, 184, 77, 0.3); color: var(--warn); display: grid; place-items: center; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; }

.download-card .file-info { flex: 1; }

.download-card .file-name { color: var(--text-primary); font-weight: 500; display: block; }

.download-card .file-meta { color: var(--text-muted); font-family: var(--font-mono); font-size: 0.78rem; display: block; margin-top: 2px; }

.download-card .arrow { color: var(--accent); font-size: 1.4rem; }

/* COMPARISON */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 32px 0; }

.compare-col { padding: 28px; border-radius: 12px; }

.compare-col.bad { background: rgba(255, 100, 100, 0.04); border: 1px solid rgba(255, 100, 100, 0.15); }

.compare-col.good { background: rgba(0, 229, 168, 0.04); border: 1px solid rgba(0, 229, 168, 0.2); }

.compare-col h4 { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 16px; }

.compare-col.bad h4 { color: #ff8888; }

.compare-col.good h4 { color: var(--accent); }

.compare-col ul li { padding: 8px 0 8px 24px; }

.compare-col.bad ul li::before { content: '✕'; color: #ff8888; }

.compare-col.good ul li::before { content: '✓'; color: var(--accent); }

/* FOOTER */
footer { background: var(--bg-base); border-top: 1px solid var(--border); padding: 60px 0 32px; }

.footer-grid { display: grid; grid-template-columns: minmax(280px, 1.5fr) minmax(260px, 1fr) minmax(160px, 0.7fr); gap: 40px; margin-bottom: 48px; }

@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .footer-newsletter { grid-column: span 2; }
  .footer-grid .footer-col:last-child { text-align: left !important; }
}

@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-newsletter { grid-column: span 1; }
}

.footer-newsletter h5,
.footer-newsletter h2 { color: var(--accent) !important; }

.nl-footer-text { font-size: 0.9rem; color: var(--text-secondary); margin: 0 0 14px; line-height: 1.55; max-width: 320px; }

.nl-footer-form {
  display: flex;
  max-width: 360px;
  margin-bottom: 10px;
  border-radius: 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  transition: border-color 0.2s;
  overflow: hidden;
}

.nl-footer-form:focus-within { border-color: var(--accent); }

.nl-footer-form input[type="email"] {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.88rem;
  outline: none;
}

.nl-footer-form input[type="email"]::placeholder { color: var(--text-muted); }

.nl-footer-form button {
  padding: 0 18px;
  background: var(--accent);
  color: var(--bg-base);
  border: none;
  font-weight: 700;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  transition: background 0.2s;
}

.nl-footer-form button:hover { background: #00ffbe; }

.nl-footer-hint { font-size: 0.75rem; color: var(--text-muted); margin: 0; line-height: 1.5; max-width: 360px; }

.nl-footer-hint a { color: var(--text-muted); text-decoration: underline; text-decoration-color: var(--text-muted); }

.nl-footer-hint a:hover { color: var(--accent); }

.footer-grid .footer-col:last-child { text-align: right; }

/* h5 bleibt als Selektor stehen: index.html und fif-bea-status.php
   tragen ihren Footer selbst und benutzen dort weiter h5.
   (10.09.2026) */
.footer-col h5,
.footer-col h2 { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 20px; font-weight: 500; }

.footer-col ul { list-style: none; }

.footer-col li { margin-bottom: 10px; }

.footer-col a { color: var(--text-secondary); text-decoration: none; font-size: 0.92rem; transition: color 0.2s; }

.footer-col a:hover { color: var(--accent); }

.footer-brand p { color: var(--text-secondary); font-size: 0.92rem; margin-top: 16px; max-width: 320px; }

.socials { display: flex; gap: 12px; margin-top: 24px; }

.socials a { width: 36px; height: 36px; border: 1px solid var(--border-strong); border-radius: 8px; display: grid; place-items: center; transition: all 0.2s; }

.socials a:hover { background: var(--accent); border-color: var(--accent); }

.socials svg { width: 16px; height: 16px; fill: var(--text-secondary); transition: fill 0.2s; }

.socials a:hover svg { fill: var(--bg-base); }

.footer-bottom { border-top: 1px solid var(--border); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted); flex-wrap: wrap; gap: 16px; }

/* ANIMATIONS */
/* Einblenden beim Scrollen — umgestellt 14.10.2026.
   Vorher war jedes .reveal per CSS unsichtbar, bis das Skript es bei
   10 % Sichtbarkeit einblendete. Folge: Inhalte im ersten Bild
   erschienen verzögert, und sehr hohe Blöcke (Datenschutz: der ganze
   Text ist ein Block) erreichten die 10 % erst, wenn der Seitenkopf
   schon aus dem Bild war.
   Jetzt ist .reveal von sich aus SICHTBAR. Das Skript in fuss.php bzw.
   index.php setzt .reveal-wartet nur auf Blöcke, die beim Laden
   unterhalb des Bildes liegen; nur die werden beim Scrollen
   eingeblendet. Ohne JavaScript bleibt alles sichtbar. */
.reveal.reveal-wartet { opacity: 0; transform: translateY(20px); }

.reveal.reveal-wartet.visible { opacity: 1; transform: translateY(0); transition: opacity 0.8s, transform 0.8s; }

/* RESPONSIVE */
@media (max-width: 1400px) {
  .logo-text small { display: none; }
  .logo { font-size: 1.05rem; }
  .nav-links { gap: 18px; }
  .nav-support, .nav-cta { padding: 7px 12px; font-size: 0.85rem; }
}

@media (max-width: 1200px) {
  .nav-links { display: none; }
  .menu-toggle { display: block; }
  .nav-links.open { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-elevated); padding: 20px; gap: 4px; border-bottom: 1px solid var(--border); max-height: calc(100vh - 80px); overflow-y: auto; }
  .nav-links.open li { width: 100%; }
  .nav-links.open > li > a, .nav-links.open .nav-toggle { display: block; width: 100%; text-align: left; padding: 14px 12px; border-radius: 8px; border-bottom: 1px solid var(--border); }
  .nav-links.open .nav-toggle { display: flex; justify-content: space-between; align-items: center; }
  .nav-links.open .submenu { position: static; transform: none; opacity: 1; visibility: visible; box-shadow: none; background: rgba(0, 229, 168, 0.03); border: 1px solid var(--border); min-width: 0 !important; margin: 4px 0 8px; padding: 12px; display: none; }
  .nav-links.open .submenu.mega { grid-template-columns: 1fr; }
  .nav-links.open .has-submenu.open .submenu { display: block; }
  .nav-links.open .has-submenu.open .submenu.mega { display: grid; }
  .nav-links.open .submenu::before { display: none; }
}

@media (max-width: 960px) {
  .feature-grid, .feature-grid.cols-2 { grid-template-columns: 1fr; }
  .compare { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .content { padding: 60px 0; }
  .page-hero { padding: 60px 0 40px; }
}

@media (max-width: 540px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

::selection { background: var(--accent); color: var(--bg-base); }

/* CHAT LAUNCHER */
.chat-launcher {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 999;
  height: 60px;
  width: 60px;
  padding: 0;
  border-radius: 30px;
  border: none;
  background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
  color: var(--bg-base);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  box-shadow: 0 8px 24px rgba(0, 229, 168, 0.35);
  transition: width 0.35s cubic-bezier(0.34, 1.4, 0.64, 1), gap 0.35s, padding 0.35s, transform 0.25s, box-shadow 0.25s;
  font-family: var(--font-display);
  overflow: hidden;
  white-space: nowrap;
}

.chat-launcher:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0, 229, 168, 0.5);
}

.chat-launcher .chat-icon-wrap {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  position: relative;
}

.chat-launcher .chat-icon,
.chat-launcher .close-icon {
  width: 24px;
  height: 24px;
  position: absolute;
  inset: 0;
  margin: auto;
  transition: opacity 0.25s, transform 0.3s;
}

.chat-launcher .close-icon {
  opacity: 0;
  transform: rotate(-90deg) scale(0.7);
}

.chat-launcher.open .chat-icon {
  opacity: 0;
  transform: rotate(90deg) scale(0.7);
}

.chat-launcher.open .close-icon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.chat-launcher .chat-label {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width 0.3s 0.05s, opacity 0.25s 0.1s;
}

.chat-launcher:hover .chat-label { max-width: 0; opacity: 0; }

.chat-launcher.open:hover {
  width: 60px;
  padding: 0;
  gap: 0;
}

.chat-launcher.open:hover .chat-label {
  max-width: 0;
  opacity: 0;
}

/* Pulse ring */
.chat-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--accent);
  animation: chat-ring 2.4s ease-out infinite;
  pointer-events: none;
}

@keyframes chat-ring {
  0% { transform: scale(1); opacity: 0.6; }
  80%, 100% { transform: scale(1.7); opacity: 0; }
}

.chat-launcher.open .chat-pulse,
.chat-launcher:hover .chat-pulse { opacity: 0; }

/* TOOLTIP / SPEECH BUBBLE */
.chat-tooltip {
  position: fixed;
  right: 24px;
  bottom: 100px;
  z-index: 998;
  width: 300px;
  max-width: calc(100vw - 48px);
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  padding: 20px 22px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(0.95);
  transform-origin: bottom right;
  transition: opacity 0.25s, transform 0.25s, visibility 0.25s;
}

.chat-tooltip.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.chat-tooltip::after {
  content: '';
  position: absolute;
  bottom: -7px;
  right: 28px;
  width: 14px; height: 14px;
  background: var(--bg-elevated);
  border-right: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
  transform: rotate(45deg);
}

.chat-tooltip-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
}

.chat-tooltip-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  animation: status-pulse 1.8s ease-in-out infinite;
}

.chat-tooltip-dot.offline {
  background: var(--warn);
  box-shadow: 0 0 10px var(--warn);
}

.chat-tooltip-title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-primary);
  font-weight: 600;
}

.chat-tooltip-text {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin: 0 0 14px;
  line-height: 1.5;
}

.chat-tooltip-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: var(--bg-base);
  border: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.88rem;
  padding: 9px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.chat-tooltip-cta:hover {
  background: #00ffbe;
  transform: translateX(2px);
}

.chat-tooltip-close {
  position: absolute;
  top: 8px; right: 10px;
  background: none; border: none;
  color: var(--text-muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  transition: color 0.2s;
}

.chat-tooltip-close:hover { color: var(--text-primary); }

@media (max-width: 540px) {
  .chat-launcher { right: 16px; bottom: 16px; }
  .chat-tooltip { right: 16px; bottom: 92px; }
  .chat-tooltip::after { right: 20px; }
}

/* SOS-Notfall-Button im Header. Seit 11.09.2026 in Rot (--danger)
   statt in der Warn-Farbe: ein Notfallknopf soll sich von einem
   blossen Hinweis unterscheiden. Der Puls bleibt unveraendert.
   .nav-support .sos-dot weiter unten bleibt bewusst orange — das
   ist die Anzeige ausserhalb der Geschaeftszeiten, kein Notfall. */
.nav-sos {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 6px;
  background: rgba(255, 45, 45, 0.08) !important;
  color: var(--danger) !important;
  border: 1px solid rgba(255, 45, 45, 0.35);
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: all 0.2s;
  position: relative;
  font-family: var(--font-mono);
  white-space: nowrap;
}

.nav-sos:hover {
  background: rgba(255, 45, 45, 0.18) !important;
  border-color: var(--danger);
  color: #ff7070 !important;
  box-shadow: 0 0 14px rgba(255, 45, 45, 0.35);
  transform: translateY(-1px);
}

.sos-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 8px var(--danger);
  animation: sos-pulse-anim 1.6s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes sos-pulse-anim {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.25); }
}

/* ============================================================
   SOS auf dem Handy (14.09.2026)

   Der SOS-Knopf sitzt in .nav-links — und die wird ab 1200 px
   Breite ausgeblendet. Auf dem Handy war der Notfallknopf damit
   erst nach zwei Tipps erreichbar (Menue auf, runterscrollen),
   also genau dort am schlechtesten, wo jemand unterwegs anruft.

   .nav-mobil steht als eigener Block neben dem Logo und
   enthaelt SOS und das Menue-Symbol. Auf dem Schreibtisch ist
   der Block ausgeblendet — waere er nur leer, wuerde die
   flex-Verteilung der Kopfzeile sich verschieben.
   ============================================================ */
.nav-mobil { display: none; }

.nav-sos-mobil {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 42px;
  padding: 0 14px;
  border-radius: 8px;
  background: rgba(255, 45, 45, 0.10);
  color: var(--danger);
  border: 1px solid rgba(255, 45, 45, 0.38);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.84rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s;
}
.nav-sos-mobil:hover,
.nav-sos-mobil:active {
  background: rgba(255, 45, 45, 0.22);
  border-color: var(--danger);
  color: var(--danger);
}
.nav-sos-mobil .sos-pulse { width: 7px; height: 7px; }

@media (max-width: 1200px) {
  .nav-mobil { display: flex; align-items: center; gap: 10px; }
  /* Das Menue-Symbol war 36 px hoch. 42 px liegt naeher an den
     44 px, die eine Fingerkuppe braucht, und steht mit SOS auf
     gleicher Hoehe. */
  .nav-mobil .menu-toggle {
    height: 42px;
    display: inline-flex;
    align-items: center;
    padding: 0 13px;
    font-size: 1.1rem;
    line-height: 1;
  }
}
@media (max-width: 380px) {
  /* Ganz schmale Geraete: Logo, SOS und Menue muessen zusammen
     in eine Zeile passen. */
  .nav-sos-mobil { padding: 0 11px; gap: 6px; }
  .nav-mobil { gap: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-sos-mobil .sos-pulse { animation: none; }
}

.nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  color: var(--text-secondary) !important;
  transition: all 0.2s;
}

.nav-icon:hover {
  border-color: var(--accent);
  color: var(--accent) !important;
  background: rgba(0, 229, 168, 0.05);
}

.nav-icon svg {
  width: 18px;
  height: 18px;
}

/* FiF-Support Button im Header */
.nav-support {
  background: transparent !important;
  color: var(--text-primary) !important;
  padding: 8px 14px;
  border-radius: 6px;
  font-weight: 600 !important;
  font-size: 0.88rem;
  border: 1px solid var(--border-strong);
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.nav-support:hover {
  border-color: var(--accent);
  color: var(--accent) !important;
  background: rgba(0, 229, 168, 0.05) !important;
}

.nav-support .sos-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--warn);
  box-shadow: 0 0 8px var(--warn);
  animation: sos-pulse 2s ease-in-out infinite;
  transition: background 0.3s, box-shadow 0.3s;
}

.nav-support .sos-dot.online {
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}

@keyframes sos-pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* Scroll-Fortschrittsbalken oben am Bildschirm */
.scroll-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-secondary));
  transform-origin: left center;
  transform: scaleX(0);
  z-index: 1000;
  pointer-events: none;
  box-shadow: 0 0 8px rgba(0, 229, 168, 0.5);
  transition: transform 0.05s linear;
}

/* Footer Review Link */
.footer-review-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 8px 12px;
  background: rgba(0, 229, 168, 0.05);
  border: 1px solid rgba(0, 229, 168, 0.2);
  border-radius: 6px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.82rem;
  transition: all 0.2s;
}

.footer-review-link:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(0, 229, 168, 0.08);
}

.footer-review-link svg { width: 14px; height: 14px; flex-shrink: 0; }

.footer-review-link .footer-stars { display: inline-flex; gap: 1px; }

.footer-review-link .footer-stars svg { fill: #ffb84d; width: 11px; height: 11px; }

.submenu.mega .sub-title{white-space:normal !important;overflow-wrap:anywhere !important;}

.submenu.mega .sub-desc{white-space:normal !important;overflow-wrap:anywhere !important;}

/* Sprungmarke (ergänzt 17.08.2026) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  padding: 12px 20px;
  background: var(--accent);
  color: #0a0e14;
  font-weight: 600;
  border-radius: 0 0 8px 0;
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
  outline: 3px solid #fff;
  outline-offset: -3px;
}