/* ============================================================
   musikerhafen.de — gemeinsame Grundlage aller Seiten
   ------------------------------------------------------------
   Herausgelöst am 10.08.2026 aus dem Inline-CSS von index.html,
   damit Gutscheinseite, Datenschutz, AGB und Widerruf dasselbe
   Aussehen erben, ohne dass es viermal gepflegt werden muss.
   Alle Regeln sind unverändert übernommen.

   Seitenspezifisches bleibt in der jeweiligen Seite: Hero,
   About, Proberaum, Ausstattung, Location und Kontakt stehen
   weiterhin inline in index.html.

   Schriften liegen seit dem 17.08.2026 selbst auf dem Server und
   werden hier eingebunden — vorher kamen sie von Google Fonts.
   ============================================================ */

/* --- Schriften -------------------------------------------------
   Selbst ausgeliefert statt ueber das Google-CDN: ein externer
   Aufruf weniger im kritischen Ladepfad, und die IP-Adressen der
   Besucher gehen nicht mehr an Google (LG Muenchen I, 20.01.2022,
   3 O 17493/20). Beide Familien stehen unter der SIL Open Font
   License, siehe fonts/OFL.txt — Eigenauslieferung ist erlaubt.

   Die .woff2 sind aus der variablen DM Sans auf opsz 14 und die
   vier benutzten Gewichte festgelegt und auf Latin + Latin-Ext
   verkleinert. Die .ttf im selben Ordner bleiben liegen: die
   liest lib/ttf.php fuer die Gutschein-PDFs.

   font-display:swap zeigt sofort die Ersatzschrift, statt den Text
   bis zum Laden unsichtbar zu lassen.
   --------------------------------------------------------------- */
@font-face{font-family:'DM Sans';src:url('fonts/dmsans-light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:'DM Sans';src:url('fonts/dmsans-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'DM Sans';src:url('fonts/dmsans-medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'DM Sans';src:url('fonts/dmsans-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Bebas Neue';src:url('fonts/bebasneue-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}

/* --- Reset ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* --- Farbtokens ------------------------------------------- */
:root {
  --ink:   #0a0c14;
  --navy:  #12172b;
  --blue:  #1e2d5a;
  --gold:  #c9a84c;
  --gold2: #f0d080;
  --cream: #f0ebe0;
  --muted: #8890aa;
  --accent:#3a7bd5;
}

/* --- Grundgerüst ------------------------------------------ */
html { scroll-behavior: smooth; }
body {
  background: var(--ink);
  color: var(--cream);
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  overflow-x: hidden;
}

/* --- Navigation ------------------------------------------- */
nav {
  position: fixed; top:0; left:0; right:0; z-index:200;
  /* auto 1fr auto statt 1fr auto 1fr: bei gleich breiten Aussenspalten bekommt das
     schmale Logo genauso viel Platz wie die zwei Schaltflaechen daneben, und rechts
     stossen Menue und Buttons schon ab etwa 1600px aneinander. So nehmen Logo und
     Schaltflaechen nur ihre eigene Breite, das Menue zentriert sich im Rest. */
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  /* 6vw wie der Rest der Seite, aber nach oben gedeckelt: sonst frisst der
     Innenabstand auf 1280er-Notebooks genau den Platz, den das Menue braucht. */
  padding:1.2rem clamp(1.5rem,6vw,4rem);
  background:rgba(10,12,20,.9);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(201,168,76,.18);
}
.nav-logo {
  font-family:'Bebas Neue',sans-serif;
  font-size:1.6rem; letter-spacing:.12em; color:var(--gold); text-decoration:none;
}
.nav-logo span{color:var(--cream);}
.nav-logo{justify-self:start;}
.nav-links{display:flex;gap:1.5rem;list-style:none;justify-self:center;}
.nav-actions{justify-self:end;}
.nav-links a{color:var(--muted);text-decoration:none;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;transition:color .25s;}
.nav-links a:hover{color:var(--gold);}
.nav-cta{background:var(--gold);color:var(--ink);padding:.55rem 1.1rem;border-radius:4px;font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;transition:background .25s,transform .2s;}
.nav-cta:hover{background:var(--gold2);transform:translateY(-1px);}

/* Mehrere Schaltflaechen rechts in der Navigation. Ohne diesen Container waere
   ein zweiter Button ein drittes Flex-Kind und die space-between-Verteilung
   der Navigation bekaeme eine dritte Spalte. */
.nav-actions{display:flex;align-items:center;gap:.7rem;}
/* Auf Desktopbreite loest sich .nav-menu auf: dank display:contents ordnet die
   Navigation Logo, Links und Schaltflaechen genau wie zuvor an. Erst auf dem
   Handy wird daraus ein aufklappbares Feld. */
.nav-menu{display:contents;}

/* Hamburger-Schaltflaeche — nur auf schmalen Bildschirmen sichtbar. */
.nav-toggle{
  display:none;
  flex-direction:column;justify-content:center;gap:5px;
  width:42px;height:42px;padding:0;
  background:none;border:1px solid rgba(201,168,76,.35);border-radius:5px;
  cursor:pointer;
}
.nav-toggle span{display:block;height:2px;width:20px;margin:0 auto;background:var(--gold);transition:transform .25s,opacity .2s;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* --- Buttons ---------------------------------------------- */
.btn-primary{background:var(--gold);color:var(--ink);padding:.85rem 2.2rem;border-radius:4px;font-size:.9rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;transition:background .25s,transform .2s;}
.btn-primary:hover{background:var(--gold2);transform:translateY(-2px);}
.btn-outline{border:1px solid rgba(201,168,76,.45);color:var(--gold);padding:.85rem 2.2rem;border-radius:4px;font-size:.9rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;transition:border-color .25s,color .25s,transform .2s;}
.btn-outline:hover{border-color:var(--gold);color:var(--gold2);transform:translateY(-2px);}

/* --- Sektionen und Typografie ----------------------------- */
section{position:relative;z-index:1;}
.section-inner{max-width:1100px;margin:0 auto;padding:7rem 6vw;}
.section-label{font-size:.7rem;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:.7rem;}
.section-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(2.4rem,5vw,4rem);line-height:1.02;letter-spacing:.04em;color:var(--cream);margin-bottom:1.2rem;}
.section-title em{color:var(--gold);font-style:normal;}
.section-desc{color:var(--muted);line-height:1.75;max-width:520px;font-size:.98rem;}
.divider{height:1px;background:linear-gradient(90deg,transparent,rgba(201,168,76,.22),transparent);}

/* --- Angebotskarten --------------------------------------- */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;margin-top:3.5rem;}
.card{
  background:var(--navy);border:1px solid rgba(201,168,76,.12);border-radius:10px;
  padding:2.4rem 2rem;position:relative;overflow:hidden;
  transition:transform .3s,border-color .3s,box-shadow .3s;
}
.card:hover{transform:translateY(-6px);border-color:rgba(201,168,76,.4);box-shadow:0 24px 60px rgba(0,0,0,.5);}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold),var(--accent));opacity:0;transition:opacity .3s;}
.card:hover::before{opacity:1;}
.card.featured{border-color:rgba(201,168,76,.35);background:linear-gradient(145deg,#1e2d5a 0%,#12172b 100%);}
.card.featured::before{opacity:1;}
.card-badge{position:absolute;top:1.2rem;right:1.2rem;background:var(--gold);color:var(--ink);font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.3rem .7rem;border-radius:3px;}
.card-icon{font-size:2rem;margin-bottom:1.2rem;}
.card-name{font-family:'Bebas Neue',sans-serif;font-size:1.6rem;letter-spacing:.08em;color:var(--cream);margin-bottom:.3rem;}
.card-price{font-family:'Bebas Neue',sans-serif;font-size:3rem;color:var(--gold);letter-spacing:.04em;line-height:1;}
.card-price sup{font-size:1.4rem;vertical-align:super;}
.card-period{font-size:.78rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-top:.3rem;margin-bottom:1.6rem;}
.card-features{list-style:none;display:flex;flex-direction:column;gap:.65rem;margin-bottom:2rem;}
.card-features li{display:flex;align-items:flex-start;gap:.7rem;font-size:.88rem;color:var(--muted);line-height:1.5;}
.card-features li::before{content:'✦';color:var(--gold);font-size:.6rem;flex-shrink:0;margin-top:.3rem;}
.card-features li strong{color:var(--cream);font-weight:400;}
.card-btn{display:block;width:100%;text-align:center;border:1px solid rgba(201,168,76,.4);color:var(--gold);padding:.75rem;border-radius:5px;font-size:.82rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;transition:background .25s,color .25s;}
.card-btn:hover{background:var(--gold);color:var(--ink);}
.card.featured .card-btn{background:var(--gold);color:var(--ink);border-color:var(--gold);}
.card.featured .card-btn:hover{background:var(--gold2);}

/* --- Terminkalender (Startseite und kalender.php) ---------- */
.calendar-nav{display:flex;justify-content:space-between;align-items:center;margin:2rem 0 1rem;}
.calendar-nav a,.calendar-nav strong{color:var(--gold);text-decoration:none;}
.calendar-nav a:hover{color:var(--gold2);}
.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:.45rem;}
.weekday{text-align:center;color:var(--muted);font-size:.75rem;padding:.4rem;}
.day,.empty{min-height:3.2rem;}
.day{border:1px solid rgba(201,168,76,.25);border-radius:5px;background:var(--navy);color:var(--cream);cursor:pointer;font:inherit;}
.day:disabled{opacity:.35;cursor:not-allowed;}
.day:hover:not(:disabled){border-color:var(--gold);color:var(--gold);}
/* Muss nach :hover stehen und selbst :hover abdecken, sonst faerbt der Hover die
   Zahl des gewaehlten Tages gold auf Gold und sie verschwindet. */
.day[aria-current="date"],.day[aria-current="date"]:hover{background:var(--gold);color:var(--ink);border-color:var(--gold);}
.notice{padding:1rem 1.2rem;border-left:2px solid var(--accent);background:rgba(58,123,213,.1);color:var(--muted);margin:1.5rem 0;line-height:1.6;}
.notice.success{color:var(--gold2);}
.notice.error{color:#f0a0a0;}
.form-grid{display:grid;gap:1rem;margin-top:2rem;}
.form-grid label{color:var(--muted);font-size:.85rem;}
.form-grid input,.form-grid textarea{display:block;width:100%;margin-top:.35rem;padding:.8rem;background:var(--navy);border:1px solid rgba(201,168,76,.25);border-radius:4px;color:var(--cream);font:inherit;}
.form-grid textarea{min-height:7rem;resize:vertical;}
.form-grid button{padding:.85rem;background:var(--gold);border:0;border-radius:4px;color:var(--ink);font-weight:700;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:background .25s,transform .2s;}
.form-grid button:hover{background:var(--gold2);transform:translateY(-1px);}
.honeypot{position:absolute;left:-9999px;}
@media(max-width:600px){.day,.empty{min-height:2.5rem;}.calendar{gap:.25rem;}}

/* --- Footer ----------------------------------------------- */
footer{background:var(--ink);border-top:1px solid rgba(255,255,255,.06);padding:2.5rem 6vw;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;}
.footer-logo{font-family:'Bebas Neue',sans-serif;font-size:1.3rem;letter-spacing:.12em;color:var(--gold);}
.footer-copy{font-size:.75rem;color:var(--muted);}

/* --- Animationen ------------------------------------------ */
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:.6}50%{opacity:1}}
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease;}
.reveal.visible{opacity:1;transform:none;}

/* --- Responsive ------------------------------------------- */
/* Umbruch bei 1300px statt 768px: sechs Menuepunkte plus zwei Schaltflaechen
   brauchen zusammen rund 1140px, mit Innenabstand also ein Fenster ab etwa
   1330px. Darunter stossen Menue und Buttons aneinander, deshalb uebernimmt dort
   das Klappmenue. Tiefer kaeme man nur, indem ein Menuepunkt entfaellt. */
@media(max-width:1300px){
  nav{display:flex;justify-content:space-between;padding:1rem 4vw;}
  .nav-logo{font-size:1.35rem;}
  .nav-toggle{display:flex;}

  /* Aus der Leiste wird ein Feld, das unter ihr aufklappt. Es enthaelt die
     Menuepunkte UND die Schaltflaechen — nebeneinander in der Leiste waeren
     zwei Buttons plus Logo auf einem Telefon zu breit, und body hat
     overflow-x:hidden, es wuerde also abgeschnitten statt scrollbar. */
  .nav-menu{
    display:none;
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:1.4rem;
    padding:1.5rem 4vw 2rem;
    background:rgba(10,12,20,.98);
    backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(201,168,76,.18);
  }
  .nav-menu.offen{display:flex;}
  .nav-links{flex-direction:column;gap:1.1rem;}
  .nav-links a{font-size:.95rem;}
  .nav-actions{flex-direction:column;align-items:stretch;gap:.6rem;}
  .nav-cta{text-align:center;padding:.85rem 1.4rem;font-size:.85rem;}
}