/* Musikstudio Ebert - statische Website
   Design: "Hybrid" (freigegeben) - moderne Streaming-Plattform-Energie
   (Karten, Farbverlaeufe, bold Typografie) auf hellem, einladendem Grund.
   Nur visuelles Erscheinungsbild geaendert: Farben, Schrift, Buttons,
   Abstaende, Icons/Bild-Einfaerbung. Inhalt & Reihenfolge unveraendert. */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --ink: #1D1B23;
  --sub: #6B6873;
  --bg: #FAFAFB;
  --panel: #ffffff;
  --line: #ECEBF0;

  --accent: #1FB871;        /* primary green - used for main CTAs */
  --accent-dark: #159257;
  --purple: #8A4DFF;
  --pink: #FF3D77;
  --sun: #FFB93C;

  /* legacy names kept so nothing else silently falls back to old colors */
  --brand-accent: var(--accent);
  --brand-text: var(--ink);
  --brand-light: #F3F1FB;
  --brand-white: #fff;
  --max-width: 1170px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Inter",sans-serif;
  font-size:16px;
  line-height:1.65;
  color:var(--ink);
  background:var(--bg);
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent-dark)}
h1,h2,h3{font-family:"Inter",sans-serif;font-weight:700;color:var(--ink);line-height:1.25;overflow-wrap:break-word}
p{margin:0 0 1em}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(250,250,251,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.site-header-inner{
  max-width:var(--max-width); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:12px 20px; flex-wrap:wrap;
}
.site-header .logo{
  display:flex; align-items:center; padding:4px 10px 4px 4px; border-radius:14px;
}
.site-header .logo img{width:230px}
.main-nav ul{list-style:none;display:flex;gap:22px;margin:0;padding:0;flex-wrap:wrap}
.main-nav > ul > li{position:relative}
.main-nav a{text-decoration:none;font-weight:600;font-size:14.5px;color:var(--sub);padding:6px 2px;border-bottom:2px solid transparent;transition:.15s}
.main-nav a:hover{color:var(--ink);border-bottom-color:var(--accent)}
.main-nav .submenu{
  display:none; position:absolute; left:0; top:100%;
  background:#fff; list-style:none; margin:0; padding:10px 0;
  min-width:260px; box-shadow:0 12px 32px rgba(29,27,35,.14); border-radius:14px;
  flex-direction:column; gap:0; z-index:60; border:1px solid var(--line);
}
.main-nav li.has-children:hover .submenu{display:flex}
.main-nav .submenu li{padding:6px 18px}
.header-actions{display:flex;align-items:center;gap:16px;font-size:14px;margin-left:auto}
.header-actions a:first-child{color:var(--ink);text-decoration:none;font-weight:700}

/* ---------- Layout: rows / cols ---------- */
.fc-row{width:100%}
.fc-row-inner{
  max-width:var(--max-width); margin:0 auto;
  display:grid; gap:24px; padding:0 20px;
  /* grid-template-columns is set per-row inline, sized to that row's actual
     column count (fr units) -- see convert.py render_row() */
}
.fc-col{
  min-width:0;
}
@media (max-width:768px){
  .fc-row-inner{ grid-template-columns:1fr !important; }
  .site-header-inner{justify-content:center;text-align:center}
  .main-nav ul{justify-content:center}
}

/* ---------- Elements ---------- */
.fc-editor{}
.fc-editor h1{font-size:2.2em;margin-top:0}
.fc-editor h2{font-size:1.7em}
.fc-editor h3{font-size:1.4em}
.fc-editor ul{padding-left:1.2em}
.fc-image{margin:0}
.fc-button-wrap{margin:14px 0}
.fc-btn{
  display:inline-flex; align-items:center; gap:8px;
  text-decoration:none; font-family:"Poppins",sans-serif;
  background:var(--accent); color:#fff !important;
  padding:15px 30px; border-radius:999px; font-weight:700; font-size:15px;
  box-shadow:0 6px 16px rgba(31,184,113,.32);
  transition:transform .12s ease, background .15s ease, box-shadow .15s ease;
}
.fc-btn:hover{background:var(--accent-dark);transform:translateY(-2px);box-shadow:0 8px 20px rgba(31,184,113,.4)}
.fc-list{list-style:none;padding:0;margin:1em 0}
.fc-list li{padding-left:1.6em;position:relative;margin-bottom:.35em}
.fc-list li::before{
  content:"\2713"; position:absolute; left:0; top:1px;
  width:1.1em;height:1.1em;border-radius:50%;
  background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:.75em;
}
.fc-todo{
  border:2px dashed #e0a5b8; background:#fff5f8; color:#a33a58;
  padding:16px; border-radius:12px; font-size:14px; margin:20px 0;
}
.fc-divider{border:none;border-top:1px solid var(--line);margin:24px 0}
.fc-map iframe{width:100%;border-radius:16px}
.fc-slider{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px}
.fc-slider img{height:220px;width:auto;flex:0 0 auto;border-radius:16px}
.fc-box{
  background:#fff;border-radius:22px;box-shadow:0 10px 32px rgba(29,27,35,.08);
  padding:14px; border:1px solid var(--line);
}
.fc-box .fc-row-inner{padding:0;max-width:none;margin:0}

/* ---------- Instrument-/Angebots-Kacheln: farbige Akzente ----------
   Vier abwechselnde Akzentfarben fuer die zweispaltigen Angebots-Reihen
   (Text + Bild) auf Startseite und Unterrichts-Seiten - jede Reihe bekommt
   automatisch der Reihe nach eine der vier Farben (siehe convert.py). */
.fc-row.accent-green .fc-btn{background:var(--accent);box-shadow:0 6px 16px rgba(31,184,113,.32)}
.fc-row.accent-green .fc-btn:hover{background:var(--accent-dark)}
.fc-row.accent-purple .fc-btn{background:var(--purple);box-shadow:0 6px 16px rgba(138,77,255,.32)}
.fc-row.accent-purple .fc-btn:hover{background:#7135e0}
.fc-row.accent-pink .fc-btn{background:var(--pink);box-shadow:0 6px 16px rgba(255,61,119,.32)}
.fc-row.accent-pink .fc-btn:hover{background:#e01f5c}
.fc-row.accent-sun .fc-btn{background:var(--sun);color:#5c4008 !important;box-shadow:0 6px 16px rgba(255,185,60,.35)}
.fc-row.accent-sun .fc-btn:hover{background:#eba315}

/* Bild-Karte je Akzentfarbe: abgerundet, dezenter Schatten - Fotos bleiben
   unveraendert (kein Farbfilter mehr). */
.fc-row.accent-green .fc-col:has(.fc-image),
.fc-row.accent-purple .fc-col:has(.fc-image),
.fc-row.accent-pink .fc-col:has(.fc-image),
.fc-row.accent-sun .fc-col:has(.fc-image){
  background:#fff; border:1px solid var(--line); border-radius:22px; padding:14px;
  box-shadow:0 10px 30px rgba(29,27,35,.07);
}
.fc-row.accent-green .fc-image img,
.fc-row.accent-purple .fc-image img,
.fc-row.accent-pink .fc-image img,
.fc-row.accent-sun .fc-image img{border-radius:16px}

/* Gleiche Akzentfarben fuer Karten (z.B. Preis-Karten auf "Gebühren") -
   jede Karte bekommt der Reihe nach eine der vier Farben (siehe convert.py). */
.fc-box.accent-green .fc-btn{background:var(--accent);box-shadow:0 6px 16px rgba(31,184,113,.32)}
.fc-box.accent-green .fc-btn:hover{background:var(--accent-dark)}
.fc-box.accent-purple .fc-btn{background:var(--purple);box-shadow:0 6px 16px rgba(138,77,255,.32)}
.fc-box.accent-purple .fc-btn:hover{background:#7135e0}
.fc-box.accent-pink .fc-btn{background:var(--pink);box-shadow:0 6px 16px rgba(255,61,119,.32)}
.fc-box.accent-pink .fc-btn:hover{background:#e01f5c}
.fc-box.accent-sun .fc-btn{background:var(--sun);color:#5c4008 !important;box-shadow:0 6px 16px rgba(255,185,60,.35)}
.fc-box.accent-sun .fc-btn:hover{background:#eba315}

/* "Kündigung"-Buttons: bewusst rot statt bunt, damit sie klar als eigene,
   ernstere Aktion von den farbenfrohen Anmelde-CTAs abgesetzt sind. */
.fc-btn.fc-btn-red{background:#E5484D;box-shadow:0 6px 16px rgba(229,72,77,.32)}
.fc-btn.fc-btn-red:hover{background:#c93a3e}
.fc-btn.fc-btn-yellow{background:var(--sun);color:#5c4008 !important;box-shadow:0 6px 16px rgba(255,185,60,.35)}
.fc-btn.fc-btn-yellow:hover{background:#eba315}

/* ---------- Blog ---------- */
.blog-meta{color:var(--sub);font-size:14px;margin:0 0 4px;font-weight:600}
.blog-body h2{margin-top:1.6em}
.blog-body ul{padding-left:1.2em}
.blog-list-item{
  padding:28px 0; border-bottom:1px solid var(--line);
}
.blog-list-item:last-child{border-bottom:none}
.blog-list-item h2{margin:4px 0 10px}
.blog-list-item h2 a{text-decoration:none;color:var(--ink)}
.blog-list-item h2 a:hover{color:var(--accent-dark)}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--ink); color:#fff; margin-top:60px;
  border-radius:32px 32px 0 0;
}
.site-footer-inner{
  max-width:var(--max-width); margin:0 auto; padding:44px 20px 36px;
  display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between;
  font-size:14px;
}
.site-footer a{color:#fff; opacity:.85; text-decoration:none}
.site-footer a:hover{opacity:1; color:var(--accent)}