/* =====================================================================
   TEMM-Feedback — NEUBAU Design-Ebene (Navy-Edel, lebendig)
   Liegt ÜBER app.css. Ziel: kein KI-Kästchen-Look, sondern Erlebnis.
   Marke: Navy #000066 · Orange #ff4c0f · Weiß. Zivil, warm, taktil.
   ===================================================================== */

:root {
  --navy: #000066;
  --navy-800: #0a0a52;
  --navy-700: #16166e;
  --navy-600: #26268c;
  --orange: #ff4c0f;
  --orange-600: #e63e07;
  --orange-soft: #fff1ec;
  --gold: #ffb020;

  --ink: #191a2e;
  --muted: #5b6076;
  --line: rgba(0,0,102,.10);
  --paper: #f7f8fd;

  --temm-primary: #000066;          /* app.css-Variablen auf echte Marke ziehen */
  --temm-primary-light: #26268c;
  --temm-primary-soft: #ececf8;
  --temm-primary-glow: rgba(0,0,102,.22);

  --disp: "Segoe UI", "SF Pro Display", system-ui, -apple-system, sans-serif;
  --shadow-lift: 0 18px 48px -18px rgba(0,0,80,.28), 0 6px 18px -10px rgba(0,0,80,.16);
  --shadow-soft2: 0 10px 30px -16px rgba(0,0,80,.20);
}

/* ---- Untergrund: warmes Papier über die GANZE App (Toms Vorlagen-Ton) ---- */
html, body {
  background:
    radial-gradient(60% 45% at 88% -6%, rgba(255,196,15,.10), transparent 60%),
    radial-gradient(55% 40% at 4% 2%, rgba(255,76,15,.05), transparent 62%),
    #faf9f6;
  background-attachment: fixed;
  color: #23243a;
}

/* ---- Kopf: Tiefe + Lichtstreifen + Orange-Kante ---- */
.header {
  background:
    radial-gradient(600px 200px at 78% -40%, rgba(255,76,15,.34) 0%, transparent 60%),
    linear-gradient(120deg, var(--navy) 0%, var(--navy-700) 58%, #201a63 100%);
  border-bottom: 3px solid var(--orange);
  padding: 18px 2rem;
}
.header .brand-text .name { letter-spacing:-.3px; }
.header .brand-text .sub { color:#ffd9cc; opacity:1; font-weight:600; letter-spacing:.3px; }

/* =====================================================================
   SIDEBAR — echte Navigations-Schiene, lebendig
   ===================================================================== */
.sidebar {
  position: sticky; top: 1rem; align-self: start;
  background: linear-gradient(180deg, var(--navy) 0%, #05053f 100%);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 18px;
  padding: 14px 12px;
  box-shadow: 0 20px 44px -22px rgba(0,0,80,.55);
  gap: 3px;
  position: relative; overflow: hidden;
}
.sidebar::after {
  content:''; position:absolute; z-index:0; inset:0;
  background: radial-gradient(220px 120px at 110% -6%, rgba(255,76,15,.30), transparent 60%);
  pointer-events:none;
}
.sidebar .sidebar-section {
  color: #9aa0d6 !important; position:relative; z-index:1;
}
.sidebar-section:first-child { padding-top: 6px !important; }
.sidebar a {
  position: relative; z-index:1;
  border-radius: 12px;
  padding: 11px 14px 11px 18px;
  color: #e9eaff;
  font-weight: 600;
  display: flex; align-items: center; gap: 10px;
  transition: background .18s, color .18s, transform .18s;
}
.sidebar a::before {
  content:''; position:absolute; left:7px; top:50%; transform:translateY(-50%) scaleY(0);
  width:3px; height:18px; border-radius:3px; background:var(--orange); transition:transform .2s;
}
.sidebar a:hover:not(.active) { background: rgba(255,255,255,.07); color:#fff; transform: translateX(2px); }
.sidebar a:hover:not(.active)::before { transform:translateY(-50%) scaleY(1); }
.sidebar a.active {
  background: linear-gradient(120deg, var(--orange) 0%, var(--orange-600) 100%);
  color:#fff;
  box-shadow: 0 12px 26px -10px rgba(255,76,15,.6);
}
.sidebar a.active::before { transform:translateY(-50%) scaleY(1); background:#fff; }
.sidebar .logout { color:#aab0e8 !important; border-top-color: rgba(255,255,255,.12) !important; }
.sidebar .logout:hover { background: rgba(255,255,255,.06); color:#fff !important; }

/* =====================================================================
   HERO — der Wow-Moment auf der Übersicht
   ===================================================================== */
.hero {
  position: relative; overflow: hidden;
  border-radius: 26px;
  padding: 2.4rem 2.4rem 2.2rem;
  color: #fff;
  background:
    radial-gradient(520px 300px at 88% -30%, rgba(255,76,15,.42) 0%, transparent 62%),
    radial-gradient(460px 320px at -10% 120%, rgba(96,120,255,.40) 0%, transparent 60%),
    linear-gradient(120deg, var(--navy) 0%, var(--navy-700) 60%, #211a66 100%);
  box-shadow: var(--shadow-lift);
  margin-bottom: 1.5rem;
  isolation: isolate;
}
.hero::after {
  content:''; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(3px 3px at 20% 30%, rgba(255,255,255,.5), transparent),
    radial-gradient(2px 2px at 70% 20%, rgba(255,255,255,.35), transparent),
    radial-gradient(2px 2px at 40% 70%, rgba(255,255,255,.30), transparent),
    radial-gradient(2px 2px at 85% 65%, rgba(255,255,255,.30), transparent);
  animation: heroTwinkle 6s ease-in-out infinite alternate;
}
@keyframes heroTwinkle { from{opacity:.5} to{opacity:1} }
.hero-orb {
  position:absolute; z-index:-1; border-radius:50%; filter: blur(6px);
  background: radial-gradient(circle at 30% 30%, rgba(255,76,15,.55), rgba(255,76,15,0) 70%);
  width: 220px; height: 220px; top:-60px; right:-40px;
  animation: floatOrb 9s ease-in-out infinite alternate;
}
@keyframes floatOrb { from{ transform: translate(0,0) } to{ transform: translate(-24px,18px) } }
.hero .eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:#ffd9cc; margin-bottom:.7rem;
}
.hero .eyebrow .dot { width:8px; height:8px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 4px rgba(255,76,15,.25); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{ box-shadow:0 0 0 4px rgba(255,76,15,.25)} 50%{ box-shadow:0 0 0 9px rgba(255,76,15,0)} }
.hero h1 {
  color:#fff !important; -webkit-text-fill-color:#fff !important;
  font-family:var(--disp); font-weight:800; letter-spacing:-.5px;
  font-size: clamp(26px, 3.4vw, 40px); line-height:1.08; margin:0 0 .6rem;
  text-wrap: balance;
}
.hero h1 .accent {
  background: linear-gradient(90deg, var(--orange) 0%, var(--gold) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.hero p.lead { font-size:15.5px; line-height:1.6; color:#e7e9ff; max-width:60ch; margin:0; }
.hero .hero-cta { display:flex; gap:12px; flex-wrap:wrap; margin-top:1.4rem; }
.hero .hero-cta .btn { border:none; }
.hero .hero-cta .btn-primary {
  background: linear-gradient(120deg, var(--orange) 0%, var(--orange-600) 100%);
  box-shadow: 0 12px 26px -10px rgba(255,76,15,.6);
}
.hero .hero-cta .btn-primary:hover { transform: translateY(-2px); }
.hero .hero-cta .btn-glass {
  background: rgba(255,255,255,.12); color:#fff;
  border:1px solid rgba(255,255,255,.28); backdrop-filter: blur(6px);
  padding:10px 20px; border-radius:12px; font-weight:600; cursor:pointer; transition:.2s;
}
.hero .hero-cta .btn-glass:hover { background: rgba(255,255,255,.2); }

/* Kennzahl-Streifen im Hero */
.hero-metrics { display:flex; gap:2rem; margin-top:1.6rem; flex-wrap:wrap; }
.hero-metric .n { font-size:30px; font-weight:800; letter-spacing:-1px; line-height:1;
  background:linear-gradient(90deg,#fff,#ffd9cc); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero-metric .l { font-size:11.5px; text-transform:uppercase; letter-spacing:.12em; color:#c9ccff; font-weight:700; margin-top:4px; }

/* =====================================================================
   ICEBREAKER — Neugier-Feld, echte Daten, jedes Mal anders
   ===================================================================== */
.icebreaker {
  position:relative; overflow:hidden;
  border-radius:20px; padding:1.5rem 1.6rem;
  background: linear-gradient(120deg, #fff 0%, var(--orange-soft) 100%);
  border:1px solid #ffdccf;
  box-shadow: var(--shadow-soft2);
  display:flex; gap:1.1rem; align-items:flex-start;
  margin-bottom:1.5rem;
}
.icebreaker::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:5px;
  background:linear-gradient(180deg,var(--orange),var(--gold));
}
.icebreaker .ib-emoji {
  font-size:30px; line-height:1; flex:none;
  filter: drop-shadow(0 6px 12px rgba(255,76,15,.3));
  animation: ibpop .6s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes ibpop { from{transform:scale(.4) rotate(-12deg); opacity:0} to{transform:none; opacity:1} }
.icebreaker .ib-kicker { font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--orange-600); }
.icebreaker .ib-text { font-size:16px; line-height:1.5; color:var(--ink); font-weight:600; margin-top:3px; }
.icebreaker .ib-sub { font-size:13px; color:var(--muted); margin-top:5px; }
.icebreaker .ib-refresh {
  margin-left:auto; flex:none; align-self:center;
  border:1px solid #ffcbb8; background:#fff; color:var(--orange-600);
  width:38px; height:38px; border-radius:12px; cursor:pointer; font-size:16px; transition:.2s;
}
.icebreaker .ib-refresh:hover { transform: rotate(90deg); background:var(--orange-soft); }

/* =====================================================================
   SECTION HEADS + EINTRITTS-ANIMATION
   ===================================================================== */
.section-head { display:flex; align-items:baseline; gap:12px; margin:.4rem 0 1rem; }
.section-head h2 { font-family:var(--disp); font-weight:800; letter-spacing:-.3px; font-size:19px; margin:0; }
.section-head .rule { flex:1; height:1px; background:linear-gradient(90deg,var(--line),transparent); }

.reveal { animation: reveal .55s cubic-bezier(.2,.7,.3,1) both; }
.reveal-1{animation-delay:.04s}.reveal-2{animation-delay:.10s}.reveal-3{animation-delay:.16s}
.reveal-4{animation-delay:.22s}.reveal-5{animation-delay:.28s}.reveal-6{animation-delay:.34s}
@keyframes reveal { from{opacity:0; transform: translateY(14px)} to{opacity:1; transform:none} }
@media (prefers-reduced-motion: reduce){ .reveal,.hero::after,.hero-orb,.icebreaker .ib-emoji{animation:none!important} }

/* =====================================================================
   FEATURE-KACHELN (was das Tool kann/verändert) — lebendig, nicht tot
   ===================================================================== */
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.feature {
  position:relative; overflow:hidden;
  background:#fff; border:1px solid var(--line); border-radius:18px;
  padding:1.4rem 1.3rem; box-shadow: var(--shadow-soft2);
  transition: transform .25s, box-shadow .25s;
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.feature::after {
  content:''; position:absolute; right:-40px; top:-40px; width:120px; height:120px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,76,15,.10), transparent 70%);
}
.feature .fi {
  width:46px; height:46px; border-radius:14px; display:grid; place-items:center; font-size:22px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-600) 100%); color:#fff;
  box-shadow: 0 8px 18px -8px var(--temm-primary-glow); margin-bottom:.8rem;
}
.feature h3 { font-size:15.5px; margin:0 0 .3rem; color:var(--navy); }
.feature p { font-size:13.5px; color:var(--muted); line-height:1.55; margin:0; }
.feature .fi.orange { background: linear-gradient(135deg, var(--orange) 0%, var(--orange-600) 100%); box-shadow:0 8px 18px -8px rgba(255,76,15,.5); }

/* =====================================================================
   KARTEN allgemein: taktiler, weniger „tot"
   ===================================================================== */
.card {
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow: var(--shadow-soft2);
}
.card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.card.accent-left { border-left:4px solid var(--orange); }

/* Datenschutz-Karte: seriöser, edler statt Checklisten-Grau */
.ds-card { background: linear-gradient(180deg,#fff, #fbfcff); }
.ds-badge {
  display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:800;
  color:#0b7; background:#e8faf1; border:1px solid #b8ebd2; border-radius:999px; padding:5px 12px;
  letter-spacing:.04em;
}
.ds-grid { display:grid; grid-template-columns:1fr 1fr; gap:.7rem 1.4rem; margin-top:1rem; }
@media (max-width:700px){ .ds-grid{ grid-template-columns:1fr } .feature-grid{ grid-template-columns:1fr } }
.ds-item { display:grid; grid-template-columns:26px 1fr; gap:.4rem .7rem; align-items:start; }
.ds-item .ck { color:#0b7; font-weight:800; }

/* =====================================================================
   TAGS für Kursart / Tageshälfte / Status — farbig, lebendig
   ===================================================================== */
.chip { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700;
  padding:4px 10px; border-radius:999px; line-height:1.4; }
.chip-navy { background:var(--temm-primary-soft); color:var(--navy); }
.chip-orange { background:var(--orange-soft); color:var(--orange-600); border:1px solid #ffd6c6; }
.chip-vm { background:#fff6e5; color:#a86400; border:1px solid #ffe4b0; }
.chip-nm { background:#eef1ff; color:#33409a; border:1px solid #d4dbff; }
.chip-live { background:#e8faf1; color:#0b7; border:1px solid #b8ebd2; }
.chip-live .pip { width:7px;height:7px;border-radius:50%;background:#0b7; animation:pulse2 1.6s infinite; }
@keyframes pulse2{0%,100%{opacity:1}50%{opacity:.3}}

/* aktueller Kurs hervorgehoben */
.course-current {
  border:1.5px solid var(--orange) !important;
  box-shadow: 0 14px 34px -16px rgba(255,76,15,.45) !important;
  background: linear-gradient(120deg,#fff, var(--orange-soft)) !important;
}

/* Buttons: Orange als Energiefarbe verfügbar */
.btn-orange { background:linear-gradient(120deg,var(--orange),var(--orange-600)); color:#fff;
  box-shadow:0 10px 22px -10px rgba(255,76,15,.6); }
.btn-orange:hover{ transform:translateY(-2px); }

@media (max-width: 900px){
  .hero{ padding:1.8rem 1.4rem; border-radius:20px; }
  .sidebar{ position:static; }
  .hero-metrics{ gap:1.2rem; }
}