/* Farben und Technik über dem Layout aus Danyels Vorschau (base.css bleibt der Aufbau).
   Navy-Bühne, Orange als einziger Akzent, Weiß; Dunkelmodus vollständig über Tokens. */
@font-face{font-family:"Manrope";src:url("fonts/manrope.woff2") format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"DM Sans";src:url("fonts/dmsans.woff2") format("woff2");font-weight:400 700;font-display:swap}

:root{color-scheme:light;
  --bg:#F7F8FB;--ink:#111C31;--muted:#4F5D71;--line:#DBE1E9;--panel:#FFFFFF;--panel-2:#EEF1F6;
  --accent:#C4461F;--gold:#E6653C;--on-accent:#FFFFFF;--glow:#EEF1F6;
  --navy:#0D1930;--on-navy:#F1F3FA;--navy-accent:#FF916B;
  --shadow:0 22px 70px rgba(13,25,48,.14)}
:root[data-theme=dark]{color-scheme:dark;
  --bg:#0E1729;--ink:#F1F3FA;--muted:#B7C3D4;--line:#2C3A52;--panel:#17243B;--panel-2:#1C2B45;
  --accent:#FF916B;--gold:#FF916B;--on-accent:#0E1729;--glow:#1C2B45;
  --navy:#08101F;--shadow:0 22px 70px rgba(0,0,0,.45)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){color-scheme:dark;
  --bg:#0E1729;--ink:#F1F3FA;--muted:#B7C3D4;--line:#2C3A52;--panel:#17243B;--panel-2:#1C2B45;
  --accent:#FF916B;--gold:#FF916B;--on-accent:#0E1729;--glow:#1C2B45;
  --navy:#08101F;--shadow:0 22px 70px rgba(0,0,0,.45)}}

body{font-family:"DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* Buttons: lesbarer Kontrast in beiden Modi */
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.hero-home .btn-primary,.page-intro .btn-primary{background:#E6653C;border-color:#E6653C;color:#0D1930}
.page-intro .btn-secondary{color:#fff}
.btn-light{color:#0D1930}

/* Flächen, die im Original feste Hellfarben hatten */
.footer{background:var(--navy)}
.signal{background:#15223B}
:root[data-theme=dark] .signal{background:#0B1426}
.signal-label{background:var(--gold)}
.contact-section{background:var(--panel-2);color:var(--ink)}
.contact-section p:not(.eyebrow){color:var(--muted)}
.contact-section h2 em{color:var(--gold)}
.about-band{background:var(--glow)}
.work-row:hover{background:var(--panel-2)}
.card{border-top-color:var(--gold)}
.page-intro{background:linear-gradient(115deg,#0E1A32,#1B2E4B 70%,#2A2438)}
:root[data-theme=dark] .page-intro{background:linear-gradient(115deg,#08101F,#132440 70%,#221D30)}
:root[data-theme=dark] .hero-home{background:radial-gradient(circle at 85% 45%,#24344B,#0F1C33 37%,#060E1C 75%)}
:root[data-theme=dark] .belief-section{background:linear-gradient(110deg,#0B1628,#050C18)}

/* Inhalte sind ohne JavaScript und in Vorschaubildern sichtbar; nur mit JS blenden sie ein */
.reveal{opacity:1;transform:none}
.js .reveal:not(.visible){opacity:0;transform:translateY(18px)}

/* Kleine Schutzmaßnahmen gegen seitliches Überlaufen */
main{overflow-x:clip}
@media (max-width:820px){.hero-home h1{white-space:normal}}
.hero-photo-frame img,.about-band-image img,.about-portrait img{background:#EDE7DF}

/* Rechtliches, im Stil der übrigen Unterseiten */
.legal h3{font:800 1.2rem Manrope,sans-serif;letter-spacing:-.03em;margin:34px 0 8px}
.legal p{margin:0 0 12px}
.preview-banner{background:#111C31;color:#F7F8FB;font-size:.75rem;font-weight:700;text-align:center;padding:6px 16px}

@media (prefers-reduced-motion:reduce){.js .reveal:not(.visible){opacity:1;transform:none}}
.nav-links{scrollbar-width:none}.nav-links::-webkit-scrollbar{display:none}

/* Fünf Leistungen: 3 + 2 ohne Lücke (Startseite und Leistungsseite) */
@media (min-width:821px){
  .service-grid,.cards{grid-template-columns:repeat(6,minmax(0,1fr))}
  .service-grid>*,.cards>*{grid-column:span 2}
  .service-grid>:nth-child(n+4):nth-last-child(-n+2),.cards>:nth-child(n+4):nth-last-child(-n+2){grid-column:span 3}
}
@media (max-width:820px){.service-grid>.service-tile:last-child{grid-column:1/-1}}
/* Marketing-Seiten im Dunkelmodus */
:root[data-theme=dark] .marketing-hero{background:radial-gradient(circle at 82% 32%,#24344B,#0F1C33 44%,#060E1C 82%)}
:root[data-theme=dark] .marketing-deliverables{background:#0B1628}
.marketing-faq a,.marketing-faq a:visited{color:var(--accent)}
.marketing-listen:focus-visible{outline:3px solid #FF916B}