/* =========================================================================
   Kira Graf — Pianistin
   Schrift : Fraunces (Titel) · Work Sans (Text)
   Farben  : Dry Vermouth · Stuffed Olive · Amber Liqueur · Cherry Bitters · Smoke & Jazz
   ========================================================================= */

/* --- Schriften liegen lokal: keine Verbindung zu Google, kein IP-Transfer -- */
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-var.woff2") format("woff2");
  font-weight:400 800; font-style:normal; font-display:swap}
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-italic-var.woff2") format("woff2");
  font-weight:400 800; font-style:italic; font-display:swap}
@font-face{font-family:"Work Sans";src:url("../fonts/worksans-var.woff2") format("woff2");
  font-weight:300 700; font-style:normal; font-display:swap}
@font-face{font-family:"Work Sans";src:url("../fonts/worksans-italic-var.woff2") format("woff2");
  font-weight:300 700; font-style:italic; font-display:swap}

:root{
  /* Palette */
  --vermouth:#F3F1D4; --olive:#AFAD7D; --amber:#D17B00;
  --cherry:#7A2A26;   --smoke:#0F1C17;  --neben:#3E4C46;
  --grund-rgb:15,28,23;

  /* Bild */
  --hero:url("../images/hero.jpg");
  --hero-pos-mobil:63% 22%;
  --hero-pos-breit:65% 26%;

  /* ---- STELLSCHRAUBEN FÜRS BILD -------------------------------------
     Zahl ändern, speichern, Seite neu laden — Wirkung ist sofort sichtbar.
       helligkeit  kleiner = dunkler                        (0.72 – 0.95)
       kontrast    größer  = Gesicht und Hände trennen sich (1.05 – 1.35)
       sattheit    größer  = kräftigere Farbe               (1.00 – 1.15)
       vignette    größer  = dunklere Ränder                (0.35 – 0.80)
     ------------------------------------------------------------------- */
  --bild-helligkeit:.74;
  --bild-kontrast:1.18;
  --bild-sattheit:1.10;
  --vignette:.72;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--smoke); color:var(--vermouth);
  font-family:"Work Sans","Helvetica Neue",Arial,sans-serif;
  font-size:18px; line-height:1.62; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
/* Fraunces ist variabel: opsz groß, SOFT leicht gerundet, WONK aus = ruhig und warm */
.display{
  font-family:"Fraunces",Georgia,serif;
  font-variation-settings:"opsz" 110,"SOFT" 22,"WONK" 0;
}

/* --- Filmkorn, rein aus CSS ------------------------------------------- */
.korn{
  position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.28;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.4'/></svg>");
  mix-blend-mode:overlay;
}

/* =========================== Erster Bildschirm ========================== */
.held{position:relative; background:var(--smoke)}

.bild{
  position:relative; width:100%; height:58svh; min-height:300px; overflow:hidden;
  background:var(--smoke);
}
.bild::before{
  content:""; position:absolute; inset:0;
  background-image:var(--hero); background-size:cover;
  background-position:var(--hero-pos-mobil);
  filter:brightness(var(--bild-helligkeit)) contrast(var(--bild-kontrast)) saturate(var(--bild-sattheit));
}
.bild::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(105% 88% at 60% 30%,
      transparent 16%,
      rgba(var(--grund-rgb),calc(var(--vignette) * .5)) 58%,
      rgba(var(--grund-rgb),var(--vignette)) 100%),
    radial-gradient(42% 46% at 95% 70%, rgba(var(--grund-rgb),.88) 0%, transparent 70%),
    radial-gradient(34% 34% at 95% 16%, rgba(var(--grund-rgb),.72) 0%, transparent 72%),
    linear-gradient(to left,  rgba(var(--grund-rgb),.86) 0%, rgba(var(--grund-rgb),.40) 16%, transparent 34%),
    linear-gradient(to bottom, transparent 60%, var(--smoke) 100%);
}

.oben{
  position:absolute; top:0; left:0; right:0; z-index:3;
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:20px 24px; font-size:12px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--vermouth);
  text-shadow:0 1px 14px rgba(var(--grund-rgb),.95), 0 0 4px rgba(var(--grund-rgb),.8);
}

.worte{position:relative; z-index:2; padding:6px 24px 40px; max-width:900px; margin:0 auto}
.satz{
  font-weight:600;
  font-size:clamp(33px,9vw,60px); line-height:1.08;
  letter-spacing:-.015em; margin:0 0 20px; max-width:16ch;
}
.satz .warm{color:var(--amber); font-style:italic; font-weight:600}
.unterzeile{
  font-size:clamp(16px,4.2vw,19px); font-weight:400; line-height:1.55;
  color:var(--vermouth); max-width:40ch; margin:0 0 26px;
}

.knopfreihe{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.knopf{
  flex:0 0 auto; display:inline-block; text-decoration:none;
  font-family:"Work Sans",Arial,sans-serif;
  font-size:15px; font-weight:600; letter-spacing:.02em;
  color:var(--smoke); background:var(--amber);
  padding:12px 20px; border-radius:2px;
}
.knopf:hover{background:#E08A0C}
.knopf.leer{background:transparent; color:var(--vermouth); border:1px solid #55665E; font-weight:500}
.knopf.leer:hover{border-color:var(--olive)}
.hinweis{margin:14px 0 0; font-size:14px; color:var(--olive)}

/* --- Trenner im Rhythmus der schwarzen Tasten ------------------------- */
.tasten{height:16px; opacity:.5;
  background-image:repeating-linear-gradient(90deg,
    transparent 0 7px, var(--olive) 7px 9px, transparent 9px 19px,
    var(--olive) 19px 21px, transparent 21px 43px, var(--olive) 43px 45px,
    transparent 45px 55px, var(--olive) 55px 57px, transparent 57px 67px,
    var(--olive) 67px 69px, transparent 69px 84px)}

/* ============================ Heller Teil ============================== */
.hellteil{background:var(--vermouth); color:var(--smoke); padding:0 24px}
.hellteil .innen{max-width:820px; margin:0 auto}
.hellteil .knopf{color:var(--vermouth); background:var(--cherry)}
.hellteil .knopf:hover{background:#8E332E}
.hellteil .hinweis{color:var(--neben)}
.hellteil .tasten{opacity:.4;
  background-image:repeating-linear-gradient(90deg,
    transparent 0 7px, var(--cherry) 7px 9px, transparent 9px 19px,
    var(--cherry) 19px 21px, transparent 21px 43px, var(--cherry) 43px 45px,
    transparent 45px 55px, var(--cherry) 55px 57px, transparent 57px 67px,
    var(--cherry) 67px 69px, transparent 69px 84px)}

.block{padding:60px 0}
.block h2{font-weight:600; font-size:clamp(26px,6.2vw,40px);
  line-height:1.16; letter-spacing:-.012em; margin:0 0 18px; max-width:19ch}
.block p{margin:0 0 16px; max-width:56ch}
.block .leise{color:var(--neben)}

.register{padding:52px 0 8px}
.reg{margin-bottom:46px}
.regkopf{display:flex; align-items:baseline; gap:12px; margin:0 0 6px}
.regkopf h3{margin:0; font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:700; color:var(--cherry)}
.regkopf .zahl{font-size:13px; color:var(--neben); margin-left:auto}
.regtext{margin:0 0 18px; color:var(--neben); max-width:48ch; font-size:16px}
.stuecke{list-style:none; margin:0; padding:0; font-size:16px; line-height:1.9}
.stuecke b{font-family:"Fraunces",Georgia,serif;
  font-variation-settings:"opsz" 40,"SOFT" 22,"WONK" 0;
  font-weight:500; font-size:18px}
.stuecke i{font-style:normal; color:var(--neben)}
.mehr{margin-top:12px; font-size:15px; color:var(--neben)}

/* ============================== Abschluss ============================== */
.schluss{background:var(--smoke); color:var(--vermouth); padding:66px 24px 78px}
.schluss .innen{max-width:820px; margin:0 auto}
.schluss h2{font-weight:600; font-size:clamp(27px,6.6vw,44px);
  line-height:1.14; letter-spacing:-.012em; margin:0 0 18px; max-width:17ch}
.schluss p{color:var(--olive); max-width:44ch; margin:0 0 26px}

@media (prefers-reduced-motion:no-preference){
  .auf{opacity:0; transform:translateY(14px); animation:auf 1s cubic-bezier(.2,.6,.2,1) forwards}
  .d1{animation-delay:.2s} .d2{animation-delay:.4s} .d3{animation-delay:.6s}
  @keyframes auf{to{opacity:1; transform:none}}
}
a:focus-visible{outline:2px solid var(--amber); outline-offset:3px}
.hellteil a:focus-visible{outline-color:var(--cherry)}

/* ==================== Breiter Bildschirm: Text im Bild ================= */
@media (min-width:900px){
  .held{min-height:100svh; display:flex; align-items:stretch}
  .bild{position:absolute; inset:0; height:100%}
  .bild::before{background-position:var(--hero-pos-breit)}
  .bild::after{
    background:
      radial-gradient(78% 92% at 63% 38%,
        transparent 13%,
        rgba(var(--grund-rgb),calc(var(--vignette) * .45)) 56%,
        rgba(var(--grund-rgb),var(--vignette)) 100%),
      radial-gradient(30% 42% at 93% 68%, rgba(var(--grund-rgb),.86) 0%, transparent 70%),
      radial-gradient(24% 30% at 94% 14%, rgba(var(--grund-rgb),.70) 0%, transparent 72%),
      linear-gradient(to left, rgba(var(--grund-rgb),.88) 0%, rgba(var(--grund-rgb),.48) 12%, transparent 30%),
      linear-gradient(100deg, rgba(var(--grund-rgb),.97) 0%, rgba(var(--grund-rgb),.92) 30%,
                 rgba(var(--grund-rgb),.52) 50%, rgba(var(--grund-rgb),0) 72%);
  }
  .worte{
    position:relative; z-index:2; display:flex; flex-direction:column;
    justify-content:flex-end; padding:0 44px 72px; width:100%;
    max-width:1180px; margin:0 auto;
  }
  .satz{max-width:14ch; font-size:clamp(44px,4.6vw,66px);
    text-shadow:0 2px 28px rgba(var(--grund-rgb),.9)}
  .unterzeile{max-width:36ch; text-shadow:0 1px 18px rgba(var(--grund-rgb),.95)}
  .hinweis{text-shadow:0 1px 14px rgba(var(--grund-rgb),.9)}
  .oben{padding:30px 44px; max-width:1180px; margin:0 auto; left:0; right:0}
  .hellteil,.schluss{padding-left:32px; padding-right:32px}
  .stuecke{columns:2; column-gap:44px}
  .stuecke li{break-inside:avoid}
}

/* ============ Aufklappbare Fortsetzung der Stückelisten =============== */
.mehr-auf{margin-top:16px}
.mehr-auf > summary{
  cursor:pointer; list-style:none; display:inline-block;
  font-family:"Work Sans",Arial,sans-serif;
  font-size:15px; font-weight:600; letter-spacing:.02em; color:var(--cherry);
  padding-bottom:3px;
}
.mehr-auf > summary::-webkit-details-marker{display:none}
.mehr-auf > summary::marker{content:""}
.mehr-auf > summary:hover{color:#8E332E}
.mehr-auf > summary .pfeil{display:inline-block; margin-left:6px; font-size:13px}
.mehr-auf[open] > summary{margin-bottom:16px}
.mehr-auf[open] > summary .pfeil{transform:rotate(180deg)}
.mehr-auf .zu{display:inline} .mehr-auf .offen{display:none}
.mehr-auf[open] .zu{display:none} .mehr-auf[open] .offen{display:inline}
.mehr-auf .stuecke{margin-top:2px}
summary:focus-visible{outline:2px solid var(--cherry); outline-offset:4px}

/* Verweise innerhalb der Registertexte */
.regtext a{color:var(--cherry); text-decoration:none; font-weight:500}
.regtext a:hover{color:#8E332E}
.regkopf h3{scroll-margin-top:28px}

/* ===================== Medienblock (dunkle Zone) ====================== */
.medien{background:var(--smoke); color:var(--vermouth); padding:14px 24px 66px}
.medien .innen{max-width:860px; margin:0 auto}
.klein-kopf{
  margin:0 0 20px; font-size:12px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--olive);
}

/* --- Hauptvideo --- */
.video-gross{
  position:relative; aspect-ratio:16/9; width:100%;
  border-radius:3px; overflow:hidden; cursor:pointer;
  background:
    repeating-linear-gradient(45deg, transparent 0 16px, rgba(175,173,125,.16) 16px 17px),
    linear-gradient(150deg, #16241E 0%, var(--smoke) 60%);
}
.video-gross .platz{
  position:absolute; left:14px; bottom:12px;
  font-size:12px; letter-spacing:.12em; color:var(--olive);
}

/* --- Abspieltaste --- */
.play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:66px; height:66px; border:0; border-radius:50%;
  background:var(--amber); cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 30px rgba(var(--grund-rgb),.55);
}
.play::before{
  content:""; width:0; height:0; margin-left:5px;
  border-left:19px solid var(--smoke);
  border-top:12px solid transparent; border-bottom:12px solid transparent;
}
.video-gross:hover .play{background:#E08A0C}
.play.klein{width:44px; height:44px}
.play.klein::before{border-left-width:13px; border-top-width:8px; border-bottom-width:8px; margin-left:3px}

/* --- Drei Ausschnitte --- */
.clips{
  display:flex; gap:12px; margin:14px 0 0;
  overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:6px; -webkit-overflow-scrolling:touch;
}
.clips::-webkit-scrollbar{height:0}
.clip{flex:0 0 76%; scroll-snap-align:start}
.clip .rahmen{
  position:relative; aspect-ratio:16/9; border-radius:3px; overflow:hidden;
  background:
    repeating-linear-gradient(45deg, transparent 0 12px, rgba(209,123,0,.18) 12px 13px),
    linear-gradient(150deg, #16241E 0%, var(--smoke) 70%);
}
.clip .unterschrift{
  margin:8px 2px 0; font-size:14px; color:var(--olive); line-height:1.4;
}

/* --- Tonaufnahmen --- */
.audio{list-style:none; margin:34px 0 0; padding:0; border-top:1px solid #2A3B34}
.audio li{
  display:flex; align-items:center; gap:14px;
  padding:14px 2px; border-bottom:1px solid #2A3B34;
}
.audio .taste{
  flex:0 0 auto; width:38px; height:38px; border-radius:50%;
  border:1px solid #55665E; background:transparent; cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center;
}
.audio .taste::before{
  content:""; width:0; height:0; margin-left:3px;
  border-left:11px solid var(--amber);
  border-top:7px solid transparent; border-bottom:7px solid transparent;
}
.audio .taste:hover{border-color:var(--amber)}
.audio .titel{
  font-family:"Fraunces",Georgia,serif;
  font-variation-settings:"opsz" 40,"SOFT" 22,"WONK" 0;
  font-weight:500; font-size:18px; line-height:1.25;
}
.audio .wer{display:block; font-family:"Work Sans",Arial,sans-serif;
  font-weight:400; font-size:14px; color:var(--olive); margin-top:2px}
.audio .dauer{margin-left:auto; font-size:14px; color:var(--olive); white-space:nowrap}

@media (min-width:760px){
  .medien{padding-left:32px; padding-right:32px}
  .clips{overflow:visible; display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
  .clip{flex:none}
  .play{width:78px; height:78px}
  .play::before{border-left-width:23px; border-top-width:14px; border-bottom-width:14px}
}

/* --- Tonaufnahmen im hellen Teil (Hotel-Block) ------------------------ */
.hellteil .audio{margin:22px 0 0; border-top:1px solid rgba(122,42,38,.22)}
.hellteil .audio li{border-bottom:1px solid rgba(122,42,38,.22)}
.hellteil .audio .taste{border-color:rgba(var(--grund-rgb),.3)}
.hellteil .audio .taste::before{border-left-color:var(--cherry)}
.hellteil .audio .taste:hover{border-color:var(--cherry)}
.hellteil .audio .wer,
.hellteil .audio .dauer{color:var(--neben)}
.audio-hinweis{margin:14px 0 0; font-size:15px; color:var(--neben)}

/* ============ Eine Aufnahme je Register, im hellen Teil =============== */
.aufnahme{
  display:flex; align-items:center; gap:16px;
  margin-top:26px; padding-top:22px;
  border-top:1px solid rgba(122,42,38,.22);
  text-decoration:none; color:inherit; cursor:pointer;
}
.aufnahme .vorschau{
  flex:0 0 42%; max-width:220px; position:relative;
  aspect-ratio:16/9; border-radius:3px; overflow:hidden;
  background:
    repeating-linear-gradient(45deg, transparent 0 12px, rgba(175,173,125,.22) 12px 13px),
    linear-gradient(150deg, #1A2A23 0%, var(--smoke) 70%);
}
.aufnahme .vorschau .play{width:42px; height:42px; box-shadow:0 4px 18px rgba(var(--grund-rgb),.45)}
.aufnahme .vorschau .play::before{
  border-left-width:13px; border-top-width:8px; border-bottom-width:8px; margin-left:3px}
.aufnahme:hover .vorschau .play{background:#E08A0C}
.aufnahme .kicker{
  display:block; font-size:11px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--cherry); margin-bottom:5px;
}
.aufnahme .was{
  display:block; font-family:"Fraunces",Georgia,serif;
  font-variation-settings:"opsz" 40,"SOFT" 22,"WONK" 0;
  font-weight:500; font-size:19px; line-height:1.25;
}
.aufnahme .dauer2{display:block; margin-top:5px; font-size:14px; color:var(--neben)}

/* =============================== Fußzeile ============================= */
.fuss{
  background:var(--smoke); color:var(--olive);
  border-top:1px solid #2A3B34; padding:24px 24px 34px; font-size:14px;
}
.fuss .innen{
  max-width:860px; margin:0 auto;
  display:flex; justify-content:space-between; align-items:center;
  gap:10px 26px; flex-wrap:wrap;
}
.fuss a{color:var(--olive); text-decoration:none}
.fuss a:hover{color:var(--vermouth)}
.fuss nav{display:flex; gap:22px; flex-wrap:wrap}

@media (min-width:900px){
  .fuss{padding-left:32px; padding-right:32px}
}

/* --- Symbole der sozialen Netzwerke in der Fußzeile ------------------- */
.fuss .sozial{display:flex; gap:18px; align-items:center}
.fuss .sozial a{display:block; line-height:0}
.fuss .sozial img{
  width:20px; height:20px; display:block;
  filter:brightness(0) invert(1); opacity:.58;
  transition:opacity .2s ease;
}
.fuss .sozial a:hover img{opacity:1}
.fuss .rechtliches{display:flex; gap:22px; flex-wrap:wrap}

@media (max-width:620px){
  .fuss .innen{flex-direction:column; align-items:flex-start; gap:18px}
}
.fuss .name{white-space:nowrap}

/* ======================= Umschalter Hell / Dunkel ===================== */
.oben .rechts{display:flex; align-items:center; gap:16px}





/* ========================== Dunkle Ansicht ============================ */
html[data-thema="dunkel"]{color-scheme:dark}
html[data-thema="dunkel"] .hellteil{background:var(--smoke); color:var(--vermouth)}
html[data-thema="dunkel"] .hellteil .leise,
html[data-thema="dunkel"] .hellteil .regtext,
html[data-thema="dunkel"] .hellteil .mehr,
html[data-thema="dunkel"] .hellteil .stuecke i,
html[data-thema="dunkel"] .hellteil .aufnahme .dauer2{color:var(--olive)}
html[data-thema="dunkel"] .hellteil .regkopf h3,
html[data-thema="dunkel"] .hellteil .mehr-auf > summary,
html[data-thema="dunkel"] .hellteil .regtext a,
html[data-thema="dunkel"] .hellteil .aufnahme .kicker{color:var(--amber)}
html[data-thema="dunkel"] .hellteil .mehr-auf > summary:hover,
html[data-thema="dunkel"] .hellteil .regtext a:hover{color:#E08A0C}
html[data-thema="dunkel"] .hellteil .aufnahme{border-top-color:#2A3B34}
html[data-thema="dunkel"] .hellteil .knopf{background:var(--amber); color:var(--smoke)}
html[data-thema="dunkel"] .hellteil .knopf:hover{background:#E08A0C}
html[data-thema="dunkel"] .hellteil a:focus-visible{outline-color:var(--amber)}
html[data-thema="dunkel"] .hellteil .tasten{opacity:.5;
  background-image:repeating-linear-gradient(90deg,
    transparent 0 7px, var(--olive) 7px 9px, transparent 9px 19px,
    var(--olive) 19px 21px, transparent 21px 43px, var(--olive) 43px 45px,
    transparent 45px 55px, var(--olive) 55px 57px, transparent 57px 67px,
    var(--olive) 67px 69px, transparent 69px 84px)}

/* ------------------- Umschalter Hell / Dunkel ------------------------- */
.thema-schalter{
  background:none; border:0; padding:0; margin:0; line-height:0; cursor:pointer;
  color:var(--vermouth); opacity:.72; transition:opacity .2s ease;
}
.thema-schalter:hover{opacity:1}
.thema-schalter svg{
  width:18px; height:18px; display:block; fill:none; stroke:currentColor;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
.thema-schalter .mond{display:none}
html[data-thema="dunkel"] .thema-schalter .sonne{display:none}
html[data-thema="dunkel"] .thema-schalter .mond{display:block}
.thema-schalter:focus-visible{outline:2px solid var(--amber); outline-offset:4px}

/* --------------------------- Knopf nach oben -------------------------- */
.nach-oben{
  position:fixed; bottom:2rem; right:2rem;
  width:50px; height:50px; border:none; border-radius:50%;
  background:var(--amber); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; z-index:999;
  transition:all .3s ease;
  box-shadow:0 4px 12px rgba(var(--grund-rgb),.28);
}
.nach-oben.sichtbar{opacity:.9; visibility:visible}
.nach-oben:hover{
  opacity:1; background:#E08A0C; transform:translateY(-3px);
  box-shadow:0 6px 16px rgba(var(--grund-rgb),.34);
}
.nach-oben svg{width:24px; height:24px; color:#fff}
@media (max-width:760px){
  .nach-oben{bottom:1rem; right:1rem; width:45px; height:45px}
  .nach-oben svg{width:20px; height:20px}
}
@media (prefers-reduced-motion:reduce){ .nach-oben{transition:none} }
/* Dunkle Ansicht: tieferer Grund, weniger Grünstich */
html[data-thema="dunkel"]{
  --smoke:#0A0F0D;
  --grund-rgb:10,15,13;
  --vignette:.78;
}