/* ============================================================================
   SoloPlan – Design System  (Scan-first, übertragen von mf-cornsnakes 2026-06)
   Marke: Braun #463E31 + Sand #EACDA3. Akzent: Blau #4A90E2 (App-Farbe).
   Kein Schwarz/Weiß. Tokens, Basis, Header/Footer/Mobile, Hero, cs-*-Komponenten.
   ============================================================================ */

/* Selbst gehostete Display-Schrift (DSGVO: kein externer Request) */
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-var-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --cs-brown:      #463E31;  /* Marke dunkel: Header, Footer, Struktur     */
  --cs-brown-soft: #5A5040;  /* Hover / Borders auf Dunkel                 */
  --cs-sand:       #EACDA3;  /* heller Marken-Akzent, Text auf Dunkel      */
  --cs-paper:      #FAF5EA;  /* Seitenbasis – warmes Off-White (kein Weiß) */
  --cs-card:       #F3E7CF;  /* Karten / Kacheln                           */
  --cs-soft:       #F0DFC0;  /* sanfte Akzentbahn                          */
  --cs-rust:       #4A90E2;  /* Hauptakzent – SoloPlan-Blau                */
  --cs-rust-dark:  #3A7BC8;  /* Akzent Hover                               */
  --cs-sage:       #6F7B53;  /* Zweitakzent, sparsam                       */
  --cs-ink:        #2C2416;  /* Fließtext – warmes Dunkelbraun (kein Schwarz) */
  --cs-line:       #E0CFB0;  /* dezente Linien auf hell                    */

  --cs-radius:     12px;
  --cs-shadow:     0 2px 14px rgba(70,62,49,0.10);
  --cs-shadow-lg:  0 8px 28px rgba(70,62,49,0.16);
  --cs-measure:    44rem;    /* Lesemaß für Fließtext                      */
  --cs-wide:       1060px;   /* max. Breite für Raster                     */

  --cs-font-head: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --cs-font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ===== Basis ===== */
body { background-color: var(--cs-paper); color: var(--cs-ink); font-family: var(--cs-font-body); }
a { color: var(--cs-rust); }
a:hover { color: var(--cs-rust-dark); }
h1, h2, h3, h4 { color: var(--cs-brown); font-family: var(--cs-font-head); font-weight: 600; }
h1, h2, h3 { text-align: center; }
body, p, li { color: var(--cs-ink); }
.button, button { background-color: var(--cs-brown) !important; color: var(--cs-sand) !important; border-color: var(--cs-brown); }

/* Reset (Quark-Abstände oben) */
#page-wrapper { margin-top: 0 !important; padding-top: 0 !important; }
#body-wrapper.section { padding-top: 0 !important; }
#start { margin-top: 0 !important; }
#body-wrapper .container.grid-lg { padding-top: 0 !important; }

/* ===== Header / Brand ===== */
#header { background-color: var(--cs-brown) !important; }
nav { background-color: var(--cs-brown) !important; }
.navbar-brand img { height: 52px; width: auto; display: block; }
#header .navbar { display: flex; align-items: center; justify-content: space-between; }
#header .navbar-section.logo { flex: 0 0 auto; }
#header .navbar-section.desktop-menu { flex: 1; display: flex; justify-content: flex-end; align-items: center; }
#header .navbar-section a { color: var(--cs-sand) !important; }
#header .dropmenu > ul { display: flex; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
#header .dropmenu > ul > li > a { padding: 0.5rem 1rem; white-space: nowrap; }

/* ===== Footer ===== */
footer, #footer, .footer-wrapper { background-color: var(--cs-brown) !important; color: var(--cs-sand) !important; }
#footer p { color: var(--cs-sand) !important; }
footer a, #footer a { color: var(--cs-sand) !important; text-decoration: none; }
footer a:hover, #footer a:hover { text-decoration: underline; }
#footer .container { padding: 1.5rem 1rem; text-align: center; }

/* Kein horizontaler Scroll durch Full-Bleed (50vw) */
html, body { overflow-x: hidden; }
#page-wrapper { overflow-x: hidden; }

/* ============================================================================
   APP-HERO  (.cs-app-hero) – logo-zentriert, dunkler Marken-Verlauf
   ============================================================================ */
.cs-app-hero {
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-bottom: 0;
  background: radial-gradient(120% 120% at 50% 0%, #564B3A 0%, var(--cs-brown) 60%, #38312663 100%), var(--cs-brown);
  padding: 4.5rem 1.5rem 4rem; text-align: center;
}
.cs-app-hero__inner { max-width: 660px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 0.85rem; }
.cs-app-hero__logo { width: 132px; height: 132px; object-fit: contain; border-radius: 28px; box-shadow: 0 10px 30px rgba(0,0,0,0.35); }
.cs-app-hero h1 { color: var(--cs-sand) !important; font-size: 3.2rem; line-height: 1.05; margin: 0.4rem 0 0; text-shadow: 0 2px 10px rgba(0,0,0,0.35); }
.cs-app-hero h2 { color: var(--cs-sand) !important; font-family: var(--cs-font-body); font-size: 1.45rem; font-weight: 400; margin: 0; opacity: 0.95; }
.cs-app-hero p { color: rgba(234,205,163,0.92); font-size: 1.05rem; line-height: 1.6; max-width: 520px; margin: 0.3rem auto 0; }

/* Hero-CTA */
.cs-hero-cta { margin-top: 1.4rem; display: flex; gap: 0.8rem; flex-wrap: wrap; justify-content: center; }
.cs-btn {
  display: inline-block; padding: 0.7rem 1.6rem; border-radius: 8px;
  font-weight: 700; text-decoration: none !important; transition: transform .15s, background .15s, box-shadow .15s;
}
.cs-btn--primary { background: var(--cs-rust); color: #f2f8ff !important; box-shadow: 0 4px 14px rgba(74,144,226,0.35); }
.cs-btn--primary:hover { background: var(--cs-rust-dark); color: #fff !important; transform: translateY(-2px); }
.cs-btn--ghost { background: rgba(250,245,234,0.10); color: var(--cs-sand) !important; border: 1.5px solid var(--cs-sand); }
.cs-btn--ghost:hover { background: rgba(234,205,163,0.18); transform: translateY(-2px); }

/* ============================================================================
   STECKBRIEF-STRIP  (.cs-facts)
   ============================================================================ */
.cs-facts {
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  background: var(--cs-brown);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 0;
  padding: 1.4rem 1rem; border-top: 1px solid rgba(234,205,163,0.12);
}
.cs-fact { flex: 1 1 150px; min-width: 130px; max-width: 220px; text-align: center; padding: 0.4rem 0.9rem; border-right: 1px solid rgba(234,205,163,0.18); }
.cs-fact:last-child { border-right: none; }
.cs-fact .cs-fact__ico { font-size: 1.5rem; line-height: 1; display: block; margin-bottom: 0.35rem; }
.cs-fact .cs-fact__label { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(234,205,163,0.7); margin-bottom: 0.15rem; }
.cs-fact .cs-fact__value { display: block; color: var(--cs-sand); font-weight: 700; font-size: 0.98rem; line-height: 1.25; }

/* ============================================================================
   SECTIONS  (ruhige Papierfläche; Akzentbahnen gezielt statt Dauerwechsel)
   ============================================================================ */
.cs-section, .page-section {
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  padding: 3.4rem 1.5rem;
}
.cs-section { background-color: var(--cs-paper); }
.cs-section.is-soft,    .page-section.soft  { background-color: var(--cs-soft) !important; }
.cs-section.is-sand,    .page-section.light { background-color: var(--cs-paper); }
.cs-section.is-feature { background-color: var(--cs-sand); }
.cs-section.is-dark,    .page-section.dark  { background-color: var(--cs-brown); color: var(--cs-sand); }

.cs-section .cs-inner, .page-section .section-inner { max-width: var(--cs-wide); margin: 0 auto; }
.cs-section .cs-inner.is-narrow { max-width: var(--cs-measure); }
.cs-section > .cs-inner > p, .cs-section > .cs-inner > ul, .cs-section > .cs-inner > ol { max-width: var(--cs-measure); margin-left: auto; margin-right: auto; }

.cs-section p, .page-section .section-inner p { line-height: 1.7; margin: 0 auto 0.85rem; }
.cs-section li, .page-section .section-inner li { line-height: 1.6; }

/* Sektions-Eyebrow + Lead */
.cs-eyebrow { display: block; text-align: center; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.72rem; font-weight: 700; color: var(--cs-rust); margin-bottom: 0.5rem; }
.cs-section.is-dark .cs-eyebrow { color: var(--cs-sand); }
.cs-lead { text-align: center; font-size: 1.18rem; line-height: 1.6; color: var(--cs-brown-soft); max-width: 42rem; margin: 0 auto 1.5rem; }
.cs-section.is-dark .cs-lead { color: var(--cs-sand); }

/* Dark-Section Lesbarkeit */
.cs-section.is-dark h2, .cs-section.is-dark h3, .page-section.dark h2, .page-section.dark h3 { color: var(--cs-sand) !important; }
.cs-section.is-dark p, .cs-section.is-dark li, .page-section.dark p, .page-section.dark li { color: var(--cs-sand); }
.cs-section.is-dark a, .page-section.dark a { color: #bcd8f5; }

/* ============================================================================
   KARTEN-RASTER  (.cs-grid / .cs-card)
   ============================================================================ */
.cs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.2rem; margin: 1.6rem auto 0; max-width: var(--cs-wide); }
.cs-grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.cs-card {
  background: var(--cs-card); border-radius: var(--cs-radius); padding: 1.4rem 1.45rem;
  box-shadow: var(--cs-shadow); border-top: 3px solid var(--cs-rust);
  transition: transform .18s, box-shadow .18s;
}
.cs-card:hover { transform: translateY(-3px); box-shadow: var(--cs-shadow-lg); }
.cs-card .cs-card__ico { font-size: 1.7rem; line-height: 1; display: block; margin-bottom: 0.55rem; }
.cs-card h3 { text-align: left; font-size: 1.08rem; margin: 0 0 0.45rem; }
.cs-card p { text-align: left; font-size: 0.95rem; line-height: 1.55; margin: 0 0 0.4rem; }
.cs-card ul { margin: 0.3rem 0 0; padding-left: 1.1rem; }
.cs-card li { text-align: left; font-size: 0.93rem; margin-bottom: 0.28rem; }
.cs-section.is-dark .cs-card { background: #3d3629; border-top-color: var(--cs-sand); }
.cs-section.is-dark .cs-card h3 { color: var(--cs-sand) !important; }
.cs-section.is-dark .cs-card p, .cs-section.is-dark .cs-card li { color: rgba(234,205,163,0.9); }

/* ============================================================================
   SCREENSHOTS  (.cs-shots / .cs-shot)  – App-Einblicke (für später, wenn Screens da sind)
   ============================================================================ */
.cs-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.6rem 1.4rem; margin: 1.8rem auto 0; max-width: var(--cs-wide); }
.cs-shot { display: flex; flex-direction: column; align-items: center; text-align: center; }
.cs-shot img { width: 100%; max-width: 215px; height: auto; border-radius: 20px; box-shadow: 0 10px 28px rgba(70,62,49,0.22); margin-bottom: 0.9rem; }
.cs-shot h3 { font-size: 1.04rem; margin: 0 0 0.35rem; }
.cs-shot p { font-size: 0.9rem; line-height: 1.5; color: var(--cs-ink); margin: 0; max-width: 24rem; }
.cs-section.is-dark .cs-shot p { color: rgba(234,205,163,0.9); }

/* ============================================================================
   CALLOUTS  (.cs-callout  --rec | --tip | --important)
   ============================================================================ */
.cs-callout {
  max-width: var(--cs-measure); margin: 1.4rem auto; padding: 1.1rem 1.3rem 1.1rem 1.4rem;
  background: var(--cs-card); border-left: 5px solid var(--cs-rust); border-radius: 10px;
  box-shadow: var(--cs-shadow);
}
.cs-callout > :first-child { margin-top: 0; }
.cs-callout > :last-child { margin-bottom: 0; }
.cs-callout h3, .cs-callout h4 { text-align: left; margin: 0 0 0.4rem; font-size: 1.05rem; display: flex; align-items: center; gap: 0.5rem; }
.cs-callout p, .cs-callout li { text-align: left; }
.cs-callout--rec       { border-left-color: var(--cs-rust); }
.cs-callout--tip       { border-left-color: var(--cs-sage); background: #eef0e4; }
.cs-callout--important { border-left-color: #C24B3A; background: #f6e3da; }
.cs-callout__ico { font-size: 1.2rem; }

/* ============================================================================
   KONTAKT / CTA-BLOCK  (.cs-contact)  – wiederverwendbar, dunkler Abschluss
   ============================================================================ */
.cs-contact .cs-inner { text-align: center; }
.cs-contact h2 { color: var(--cs-sand) !important; }
.cs-contact p { color: var(--cs-sand); max-width: 40rem; margin: 0 auto 1rem; }
.cs-contact .cs-channels { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; margin: 1.2rem 0 0.5rem; }
.cs-contact .cs-channels a {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.6rem 1.25rem; border-radius: 8px;
  background: var(--cs-sand); color: var(--cs-brown) !important; font-weight: 700; text-decoration: none !important;
  transition: transform .15s, background .15s;
}
.cs-contact .cs-channels a:hover { background: #f3ddb8; transform: translateY(-2px); }
.cs-contact .cs-channels a.is-rust { background: var(--cs-rust); color: #f2f8ff !important; }
.cs-contact .cs-channels a.is-rust:hover { background: var(--cs-rust-dark); }

/* ===== Bestehende Buttons (page-section, Legal-Seiten) ===== */
.btn-wrap { text-align: center; margin-top: 1.5rem; }
.page-section.dark .btn-wrap a, .page-section.dark a.page-btn, .cs-section.is-dark .btn-wrap a {
  display: inline-block; padding: 0.7rem 2rem; border: 2px solid var(--cs-sand); color: var(--cs-sand) !important; border-radius: 8px; text-decoration: none !important; font-weight: bold; transition: background .2s; }
.page-section.dark .btn-wrap a:hover { background: rgba(234,205,163,0.15); }
.page-section.light .btn-wrap a, .page-section.light a.page-btn, .cs-section .btn-wrap a {
  display: inline-block; padding: 0.7rem 2rem; background: var(--cs-rust); color: #f2f8ff !important; border-radius: 8px; text-decoration: none !important; font-weight: bold; transition: background .2s, transform .15s; }
.page-section.light .btn-wrap a:hover, .cs-section .btn-wrap a:hover { background: var(--cs-rust-dark); transform: translateY(-2px); }

.page-section.light h2, .page-section.light h3 { color: var(--cs-brown) !important; }
.page-section.dark h2, .page-section.dark h3 { color: var(--cs-sand) !important; }
.page-section.dark a { color: #bcd8f5; }
.page-section.dark table { color: var(--cs-sand); }
.page-section.dark th { background-color: #3a3228; color: var(--cs-sand); }
.page-section.dark td { border-color: var(--cs-brown-soft); }
.page-section.dark hr { border-color: var(--cs-brown-soft); }
.section-inner p { margin-bottom: 0.75rem; }
.section-inner p:last-child { margin-bottom: 0; }

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 768px) {
  .cs-app-hero h1 { font-size: 2.3rem; }
  .cs-app-hero h2 { font-size: 1.2rem; }
  .cs-app-hero { padding: 3.5rem 1.2rem 3rem; }
  .cs-section, .page-section { padding: 2.4rem 1.1rem; }
  .cs-fact { border-right: none; }
}

/* ============================================================================
   Mobile Hamburger / Overlay / LangSwitcher
   ============================================================================ */
.mobile-menu, .mobile-container { display: none; }
.mobile-menu .button_container span { background: var(--cs-sand) !important; }
.mobile-menu .button_container.active .top,
.mobile-menu .button_container.active .middle,
.mobile-menu .button_container.active .bottom { background: var(--cs-sand) !important; }
.overlay { background: #2a2318 !important; }
.overlay nav a, .overlay nav a:link, .overlay nav a:visited { color: var(--cs-sand) !important; }
.overlay nav a:hover { color: #fff !important; }
.overlay .tree li { border-color: rgba(234,205,163,0.15); }
.overlay .mobile-logo { padding: 1.5rem; }
.mobile-langswitcher ul.langswitcher li a { color: rgba(234,205,163,0.6) !important; }
.mobile-langswitcher ul.langswitcher li a.active,
.mobile-langswitcher ul.langswitcher li a:hover { color: var(--cs-sand) !important; }

ul.langswitcher { display: flex; list-style: none; margin: 0 0 0 1.5rem; padding: 0; align-items: center; gap: 0; }
ul.langswitcher li { display: flex; align-items: center; }
ul.langswitcher li + li::before { content: '|'; color: rgba(234,205,163,0.4); padding: 0 0.3rem; }
ul.langswitcher li a { color: rgba(234,205,163,0.5) !important; text-transform: uppercase; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.05em; text-decoration: none !important; transition: color .2s; }
ul.langswitcher li a:hover, ul.langswitcher li a.active { color: var(--cs-sand) !important; }
.mobile-langswitcher { text-align: center; margin-top: 1.5rem; }
.mobile-langswitcher ul.langswitcher { justify-content: center; margin: 0; }