/* Ton- und Bild-Manufaktur Schmuck – gemeinsames Stylesheet */

@font-face{font-family:"Playfair Display";font-style:normal;font-weight:700;font-display:swap;src:url(schriften/playfair-700.woff2) format("woff2")}
@font-face{font-family:"Mukta";font-style:normal;font-weight:400;font-display:swap;src:url(schriften/mukta-400.woff2) format("woff2")}
@font-face{font-family:"Mukta";font-style:normal;font-weight:600;font-display:swap;src:url(schriften/mukta-600.woff2) format("woff2")}

:root{
  --dunkel:#000000;      /* Titelflächen */
  --mittel:#000000;      /* Textflächen, Kartenkörper */
  --creme:#e5d5c5;       /* gefüllte Knöpfe */
  --weiss:#ffffff;
  --text:#333333;        /* Fließtext auf Weiß */
  --linie:#dcdedd;
  --spalte:1280px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{
  margin:0; background:var(--weiss); color:var(--text);
  font-family:"Mukta",system-ui,sans-serif; font-weight:400;
  font-size:.8rem; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:"Playfair Display",Georgia,serif; font-weight:700; line-height:1.15; margin:0}
img{max-width:100%}
a:focus-visible, button:focus-visible{outline:2px solid currentColor; outline-offset:3px}

/* ---------- Kopfzeile ---------- */
.kopf{position:sticky; top:0; z-index:30; background:var(--weiss)}
.kopf.transparent{position:absolute; left:0; right:0; background:transparent}
.kopf.transparent a, .kopf.transparent .marke{color:var(--weiss)}
.kopf.transparent .klapp span{background:var(--weiss)}
.kopf-innen{
  max-width:var(--spalte); margin:0 auto; padding:1.4rem 2rem;
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
}
.menue{display:flex; flex-wrap:wrap; gap:2.25rem; list-style:none; margin:0; padding:0}
.menue a{color:var(--text); text-decoration:none; font-size:1.25em; padding-bottom:.35rem; border-bottom:2px solid transparent}
.menue a:hover{border-bottom-color:var(--linie)}
.menue a[aria-current="page"]{border-bottom-color:currentColor}
.marke{font-size:1.25em; white-space:nowrap; color:var(--text)}
.klapp{display:none; background:none; border:none; cursor:pointer; padding:.4rem; width:2.6rem; height:2.6rem}
.klapp span{display:block; height:2px; background:var(--text); margin:6px 0; transition:transform .2s, opacity .2s}
.klapp[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.klapp[aria-expanded="true"] span:nth-child(2){opacity:0}
.klapp[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ---------- Bausteine ---------- */
.band{padding:5rem 0}
.band.dunkel{background:var(--dunkel); color:var(--weiss)}
.band.mittel{background:var(--mittel); color:var(--weiss)}
.innen{max-width:var(--spalte); margin:0 auto; padding:0 2rem}
.eng{max-width:56rem; margin:0 auto}

.knopf{
  display:inline-block; font:inherit; text-decoration:none; cursor:pointer;
  padding:.6rem 2.4rem; border:1px solid currentColor; background:none; color:inherit;
}
.knopf:hover{background:currentColor}
.knopf:hover span{color:var(--dunkel)}
.knopf.gefuellt{background:var(--creme); border-color:var(--creme); color:var(--dunkel)}
.knopf.gefuellt:hover{background:#d8c4ae; border-color:#d8c4ae}
.knopf.weiss{background:var(--weiss); border-color:var(--weiss); color:var(--dunkel)}
.knopf-reihe{display:flex; flex-wrap:wrap; gap:1rem; margin-top:1.75rem}

/* Titelfläche mit Logo */
.titelflaeche{min-height:88vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:4rem 2rem}
.titelflaeche.dunkel{background:var(--dunkel)}
.logo{width:min(520px, 62vw); display:block}
.logo-linie{width:min(520px, 62vw); height:2px; background:currentColor; margin-top:.5rem}
.pfeil{margin-top:3rem; font-size:1.4rem; line-height:1; color:inherit; text-decoration:none; opacity:.75}
.pfeil:hover{opacity:1}

/* zweispaltiger Werkblock */
.werk{display:grid; grid-template-columns:1fr 1fr; align-items:stretch}
.werk .text{background:var(--mittel); color:var(--weiss); padding:4.5rem 3.5rem}
.werk .bild{background:var(--dunkel)}
.werk .bild img{width:100%; height:100%; object-fit:cover; display:block}
.werk.gespiegelt .text{order:2}
.werk.gespiegelt .bild{order:1}
.werk h2{font-size:2.1rem; margin-bottom:.4rem}
.werk .zeile{font-weight:600; margin:0 0 1.25rem}
.werk p{margin:0 0 1.1rem}

/* Karten */
.karten{display:grid; grid-template-columns:repeat(2,1fr); gap:2.5rem; margin-top:3rem}
.karte{display:flex; flex-direction:column; background:var(--mittel); color:var(--weiss)}
.karte .huelle{aspect-ratio:4/5; overflow:hidden; background:var(--dunkel)}
.karte .huelle img{width:100%; height:100%; object-fit:cover; object-position:50% 0; display:block}
.karte .körper{padding:2.25rem 2rem 2.5rem}
.karte h3{font-size:1.5rem; margin-bottom:.35rem}
.karte .zeile{font-weight:600; margin:0 0 1rem}
.karte .zitat{font-style:italic; margin:0 0 1rem}

/* Spaltenraster (Über uns, Auftragsarbeiten) */
.spalten{display:grid; grid-template-columns:repeat(3,1fr); gap:3.25rem 3.5rem; align-items:start}
.rahmen{aspect-ratio:1/1; overflow:hidden; margin:0; background:var(--dunkel)}
.rahmen img{width:100%; height:100%; object-fit:cover; display:block}
.rahmen.portrait img{object-position:50% 20%}
.spalte h2{font-size:1.32rem; margin:1.7rem 0 .8rem}
.spalte p{margin:0 0 1.15rem}
.spalte p:last-child{margin-bottom:0}
.betont{font-style:italic}

.logotafel{aspect-ratio:1/1; margin:0; display:grid; grid-template-rows:1fr 1fr}
.logotafel .haelfte{display:flex; align-items:center; justify-content:center; padding:1.4rem}
.logotafel .hell{background:var(--weiss); border:1px solid var(--linie); border-bottom:none}
.logotafel .dunkelhaelfte{background:var(--dunkel)}
.logotafel img{width:100%; max-height:100%; object-fit:contain; display:block}

/* Neuigkeiten */
.zentriert{text-align:center}
.zentriert .knopf-reihe{justify-content:center}
.knopf.schwarz{background:#000; border-color:#000; color:#fff}
.knopf.schwarz:hover{background:#222; border-color:#222}
.neuigkeit{display:block; text-align:center; margin-top:2.5rem}
.neuigkeit .text{max-width:44rem; margin:2rem auto 0}
.neuigkeit img{width:min(46vw, 620px); display:block; margin:0 auto}

/* ---------- Fußzeile ---------- */
.fuss{border-top:1px solid var(--linie); background:var(--weiss); color:var(--text)}
.fuss-innen{max-width:var(--spalte); margin:0 auto; padding:3rem 2rem 4rem; display:flex; flex-wrap:wrap; align-items:center; gap:1.75rem}
.fuss a{color:var(--text); text-decoration:underline; text-underline-offset:3px}
.fuss .knopf{text-decoration:none}

/* ---------- Breitenstufen ---------- */
@media (max-width:1100px){
  .spalten{grid-template-columns:repeat(2,1fr)}
  .werk .text{padding:3.5rem 2.5rem}
}
@media (max-width:820px){
  .werk{grid-template-columns:1fr}
  .werk.gespiegelt .text{order:2}
  .werk.gespiegelt .bild{order:1}
  .werk .bild{min-height:60vw}
  .karten{grid-template-columns:1fr}
  .neuigkeit{grid-template-columns:1fr; gap:1.75rem}
}
@media (max-width:700px){
  .neuigkeit img.cover-neu{width:76vw; margin:0 auto}
  .spalten{grid-template-columns:1fr}
  .band{padding:3.25rem 0}
  .innen{padding:0 1.25rem}
  .kopf{border-bottom:1px solid var(--linie)}
  .kopf.transparent{border-bottom:none}
  .kopf-innen{padding:.9rem 1.25rem}
  .klapp{display:block}
  nav[aria-label="Hauptmenü"]{position:relative}
  .menue{
    display:none; position:absolute; left:0; top:calc(100% + .9rem);
    background:var(--weiss); border:1px solid var(--linie); box-shadow:0 10px 24px rgba(0,0,0,.18);
    flex-direction:column; gap:0; min-width:15rem; padding:.5rem 0; z-index:40;
  }
  .menue.offen{display:flex}
  .menue li a{display:block; padding:.8rem 1.4rem; border-bottom:none; font-size:1.0625rem; color:var(--text)}
  .menue a[aria-current="page"]{font-weight:600; border-bottom:none}
  .fuss-innen{padding:2rem 1.25rem 3rem}
  .titelflaeche{min-height:78vh}
}

/* Proben */
.seitentitel{font-size:1.9rem; margin:.5rem 0 1.5rem}
hr{border:none; border-top:1px solid var(--linie); margin:2.5rem 0}
.probe{max-width:52rem}
.probe h2{font-size:1.35rem; margin:2.5rem 0 1.5rem}
.probe figure{margin:0; width:14rem; aspect-ratio:1/1; overflow:hidden; background:#fdf6e4}
.probe figure img{width:100%; height:100%; object-fit:cover; object-position:50% 0; display:block}
.proben-liste{margin:0; padding-left:1.4rem}
.proben-liste li{margin:.35rem 0}
.proben-liste a{color:var(--text); text-decoration:underline; text-underline-offset:3px}
.proben-liste a:hover{text-decoration-thickness:2px}

/* Auftragsarbeiten, Kontakt */
.spalte ul{margin:.4rem 0 0; padding-left:1.2rem}
.spalte li{margin:.3rem 0}
.bildlink{display:block}
.bildlink:hover .rahmen img{opacity:.88}
a.mail{color:inherit; text-decoration:underline; text-underline-offset:3px}
.band.dunkel a{color:var(--weiss)}
.band.dunkel a.knopf.weiss, .band.dunkel a.knopf.gefuellt{color:var(--dunkel)}
.band.dunkel p{margin:.3rem 0}

/* Rechtstexte */
h2.ds{font-size:1.35rem; margin:2.5rem 0 .8rem}
.ds-tabelle{width:100%; border-collapse:collapse; margin:1rem 0 0; font-size:.95em}
.ds-tabelle th, .ds-tabelle td{border:1px solid rgba(255,255,255,.35); padding:.6rem .8rem; text-align:left; vertical-align:top}
.ds-tabelle th{font-weight:600}
@media (max-width:700px){
  .ds-tabelle, .ds-tabelle tbody, .ds-tabelle tr, .ds-tabelle td{display:block; width:100%}
  .ds-tabelle thead{display:none}
  .ds-tabelle tr{margin-bottom:1rem; border:1px solid rgba(255,255,255,.35)}
  .ds-tabelle td{border:none; border-bottom:1px solid rgba(255,255,255,.2)}
}

/* Die Schmettergrille (versteckte Seite) */
.grille{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:7rem 1.5rem 5rem; color:var(--weiss); text-align:center;
  background:linear-gradient(rgba(0,0,0,.62), rgba(0,0,0,.62)), url(bilder/Schmettergrille-Hintergrund.webp) 50% 62%/cover no-repeat;
}
.grille-innen{max-width:48rem}
.grille h1{font-size:clamp(2.2rem, 6vw, 3.6rem)}
.grille .unterzeile{font-weight:600; font-size:1.05rem; margin:1rem 0 2rem}
.grille p{margin:0 0 1.2rem}
.grille .hinweis{opacity:.85; margin-top:1.75rem}

/* Bitcoin-Film (versteckte Seite) */
.titelbild{
  min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:8rem 1.5rem 4rem; color:var(--weiss); text-align:center;
  background:linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.55)), url(bilder/Bitcoin-Titelbild.webp) 30% 50%/cover no-repeat;
}
.titelbild-innen{max-width:46rem}
.titelbild h1{font-size:clamp(2.4rem, 7vw, 4rem); font-style:italic}
.titelbild p{margin-top:1.75rem}
.titelbild + .band{scroll-margin-top:0}
.synopsis{
  background:linear-gradient(rgba(255,255,255,.82), rgba(255,255,255,.82)), url(bilder/Bitcoin-Synopsis-Hintergrund.webp) center/cover no-repeat;
}
.vers{margin-top:1.75rem; line-height:1.9}
.vers.frage{margin-top:1.75rem}
.moodboards{display:grid; grid-template-columns:repeat(4,1fr); gap:1.75rem; margin-top:2.5rem}
.moodboards figure{margin:0}
.moodboards img{width:100%; display:block}
.moodboards figcaption{margin-top:.7rem}
.vision{
  background:linear-gradient(rgba(255,255,255,.88), rgba(255,255,255,.88)), url(bilder/Bitcoin-Vision-Strichzeichnung.webp) center/cover no-repeat;
}
.werk .text.hell{background:var(--weiss); color:var(--text)}
hr.hell{border-top-color:rgba(255,255,255,.35)}
.name{font-size:1.15rem; margin:1.4rem 0 .2rem}
.rolle{font-style:italic; margin:0 0 .8rem}
.spalte a{color:inherit}
@media (max-width:1100px){ .moodboards{grid-template-columns:repeat(2,1fr)} }
@media (max-width:700px){ .moodboards{grid-template-columns:1fr} .titelbild{min-height:88vh} }

.produktion .produzent{width:min(360px, 62vw); display:block; margin:2rem auto 2.25rem}
.band.dunkel.produktion p{margin:0 auto .9rem}

/* Widerrufsformular */
.formular{margin:2.5rem 0 1rem}
.feldreihe{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem}
.feld{margin-bottom:1.5rem}
.feld label{display:block; margin-bottom:.4rem}
.feld input, .feld textarea{
  width:100%; font:inherit; color:var(--text); background:var(--weiss);
  border:1px solid #9aa2a2; border-radius:0; padding:.6rem .7rem;
}
.feld input:focus, .feld textarea:focus{outline:2px solid var(--dunkel); outline-offset:1px}
.feld .hinweis{margin:.4rem 0 0; color:#6b7373}
.pflichtzeile{color:#6b7373; margin:.5rem 0 1.25rem}
.versteckt{position:absolute; left:-9999px}
@media (max-width:820px){ .feldreihe{grid-template-columns:1fr} }

/* DSG-Audio (versteckte Käuferseite) */
.dsg{min-height:100vh; display:flex; align-items:center}
.dsg .innen{width:100%}
.band.dunkel.dsg p{margin:0 auto 1.2rem}