/* ================================================= */
/* === GLOBAL ====================================== */

/* Farb-Variablen (konsolidiert) */
:root {
  /* Hintergründe / Flächen */
  --background_body: #e8eddf;
  --background_text: #cfd7c2;
  --weiss: #fff;

  /* Text / Neutral */
  --schwarz: #000;
  --dunkelgrau: #333;
  --dunkelgrau2: #2b2b2b;
  --grau: #666;
  --hellgrau: #f4f4f4;
  --hellgrau2: #ddd;
  --hellgrau3: #eaeaea;

  /* Rahmen */
  --umrandung: #999;

  /* Buttons / Akzente */
  --button: #6b8f71;
  --button_text: #fff;
  --button_hover: #5a7d62;
  --gruen: #6B8F71;
  --gruen-hover: #5a7d62;
}

/* Reset + Basis */
html, body { margin:0; padding:0; font-family: Arial, sans-serif; }
body { background-color: var(--background_body); }

.container { max-width: 900px; margin: 2em auto; padding: 1em; }
h1 { font-size: 2.5em; margin-top: 0; }
h2 { font-size: 1.5em; margin-top: 1.5em; }
h3 { font-size: 1.3em; margin-top: 1.3em; }
p  { font-size: 1em; line-height: 1.6; margin: 1em 0; }
ul { text-align: left; font-size: 1em; margin: 1em auto; padding-left: 1.2em; }
li  { line-height: 1.6; }

footer{
  clear: both;
  padding-top: 20px;
  text-align: center;
  margin-top: 3em;
  font-size: .9em;
  color: var(--grau);
  padding-bottom: 2em;
  flex: 0 0 auto;
}
footer a { color: var(--grau); text-decoration: none; margin: 0 .5em; }
footer a:hover { text-decoration: underline; }

.button{
  display:inline-block;
  padding:.5em 1em;
  text-decoration:none;
  border-radius:4px;
  font-weight:700;
  transition: background .3s, transform .2s;
  cursor:pointer;
}

/* Home-Link */
.home-link{
  position:absolute;
  top:15px; right:20px;
  color: var(--schwarz);
  text-decoration: underline;
  cursor: pointer;
}
.home-link:hover{ color: darkblue; }

/* Den Standard-Container-Abstand direkt NACH einem Hero schlanker machen */
.hero + .container,
.book-hero + .container{
  margin-top: clamp(8px, 1.8vw, 20px);
}

/* ================================================= */
/* === HOME / INDEX ================================ */

@font-face{
  font-family:"Sweet Dreams";
  src:url("../fonts/EmilysCandy-Regular.ttf") format("truetype");
  font-weight:400; font-style:normal;
}

body.home{
  --maxw: 1100px;
  --pad: clamp(16px, 4vw, 36px);
  --side-scale: 1;
  background: #dcd6c5 url("../images/homepage-background-large.jpg") center/cover fixed no-repeat;
  color:#1b1b1b;
  padding: clamp(12px,3vh,28px) var(--pad);
  font: 400 clamp(16px,1.6vw,20px)/1.45 "Georgia","Times New Roman",ui-serif,serif;
}
body.home .wrap{
  min-height:100svh;
  display:grid;
  place-items:start center;
  padding: var(--pad);
}
/* Desktop: drei Spalten, Seitenspalten schrumpfen adaptiv */
body.home .stage{
  display:grid;
  grid-template-columns:
    clamp(120px, 18vw, 240px)      /* links */
    minmax(520px, 1fr)             /* intro */
    clamp(140px, 18vw, 240px);     /* rechts */
  grid-template-areas: "left intro right";
  align-items:center;
  width: min(100%, var(--maxw));
  column-gap: clamp(20px, 4vw, 48px);
}
body.home .left  { grid-area:left;  position:relative; }
body.home .intro { grid-area:intro; text-align:center; position:relative; z-index:1; padding-inline: clamp(8px, 2vw, 16px); }
body.home .right { grid-area:right; position:relative; }

body.home .intro h1{
  font-family:"Sweet Dreams","Emilys Candy","Goudy Old Style","Cormorant Garamond",Garamond,ui-serif,serif;
  font-weight:400;
  font-size: clamp(34px,5.2vw,64px);
  margin:0 0 .5em;
}
body.home .intro p{
  margin:0 auto; max-width:45ch; text-wrap: balance;
}

/* Foto-Stapel */
body.home .stack{ position:relative; min-height:520px; }
body.home .photo{ position:absolute; transition: transform .25s ease; z-index:50; }
body.home .photo img{
  display:block; width:100%; height:auto;
  filter:
    drop-shadow(0 2px 3px rgba(0,0,0,.35))
    drop-shadow(0 8px 12px rgba(0,0,0,.25));
}
body.home .photo:hover{ transform: translateY(-3px) rotate(-.5deg); }

/* Positionen */
body.home .left  .p1{ width:calc(240px * var(--side-scale)); left:0;     top:10px;   transform:rotate(-6deg); z-index:51; }
body.home .left  .p2{ width:calc(220px * var(--side-scale)); left:30px;  top:190px;  transform:rotate(3deg);  z-index:52; }
body.home .left  .p3{ width:calc(260px * var(--side-scale)); left:-10px; top:370px;  transform:rotate(-8deg); z-index:53; }

body.home .right .p4{ width:calc(280px * var(--side-scale)); right:0;     top:20px;   transform:rotate(7deg);  z-index:53; }
body.home .right .p5{ width:calc(200px * var(--side-scale)); right:20px;  top:250px;  transform:rotate(-2deg); z-index:52; }
body.home .right .p6{ width:calc(250px * var(--side-scale)); right:-10px; top:445px;  transform:rotate(5deg);  z-index:51; }

/* ================================================= */
/* === PAGE: ALBUM ================================= */

body.album-page{
  margin:0;
  background-color: var(--background_body);
  color: var(--grau);
  display:flex; flex-direction:column;
  min-height:100vh;
}
.album-header{ width:100%; height:auto; overflow:visible; flex-shrink:0; }
.album-header img{ display:block; width:100%; height:auto; }

.album-header .home-link {
  color: var(--hellgrau);
  text-shadow: 0 2px 6px rgba(0,0,0,.45);
}
.album-header .home-link:hover { color: var(--weiss); }

body.album-page > footer{ margin-top: auto; }
.container.album-layout{
  flex: 1 0 auto;
  display:flex;
  flex-direction:row;
  max-width:1400px;
  margin:0 auto;
  padding:40px 20px;
  gap:40px;
}
.left{  flex:0 0 25%; min-width:200px; }
.right{ flex:1 1 75%; }

.album-title{ font-size:2em; font-weight:700; margin-bottom:10px; }
.artist{ font-size:1.2em; color:#555; margin-bottom:20px; }
.album-title .edition{ font-size:.6em; font-weight:400; opacity:.8; white-space:nowrap; margin-left:.25em; }
.artist.credits{ font-size:.85rem; opacity:.8; line-height:1.2; margin-top:.2rem; }

.platforms a{
  display:flex; align-items:center; gap:10px;
  border-radius:6px;
  padding:10px 16px;
  margin-bottom:10px;
  text-decoration:none;
  color: var(--schwarz);
  font-weight:700;
  transition: background-color .2s ease;
}
.platforms a:hover{ background-color: var(--hellgrau3); }

/* Tracks */
.track{
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:8px 0; border-bottom:1px solid var(--grau);
  width:100%; box-sizing:border-box;
}
.track-header{ display:flex; flex-direction:column; flex-grow:1; max-width:100%; }
.track-title{ font-weight:700; }
.track-subline{ font-size:.9em; color: var(--grau); }
.track-time{ color: var(--grau); white-space:nowrap; padding-left:10px; text-align:right; }
.track.active-track{ outline:3px solid currentColor; border-radius:8px; }
.highlight-play{ outline:2px solid currentColor; }

/* Lyrics */
.lyrics{
  background-color: var(--background_body);
  border-left:2px solid var(--gruen);
  padding:10px 0 10px 10px;
  margin:10px 0 20px 0;
  font-style:italic;
  font-size:.95em;
  line-height:1.4;
  white-space:normal;
  display:none;
  border-radius:4px;
  width:100%;
  box-sizing:border-box;
  text-align:left;
}
.lyrics-toggle{
  display:inline-block; width:20px; height:auto; margin-left:5px;
  cursor:pointer; transition: transform .2s ease; vertical-align:middle;
}
.lyrics-toggle:hover{ transform: scale(1.2) rotate(5deg); }

.play-button{
  font-size:1.4em; background:none; border:none; cursor:pointer;
  margin-right:10px; padding:4px 8px; user-select:none;
  transition: transform .2s ease; touch-action: manipulation;
}
.play-button:hover{ transform: scale(1.2); }

/* ================================================= */
/* === PAGE: BÜCHER ================================ */

body.buecher{
  margin:0; padding:0;
  background-color: var(--background_body);
  line-height:1.6;
}
/* Hero oben auf der Bücher-Seite */
.book-hero{
  /* background-image: url('../images/background-mauer-grau-panorama-250.jpg'); */
  background-image: url('../images/buecher-lichterkette-panorama.jpg');
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 250px;
  color: var(--hellgrau);
  text-shadow: 1px 1px 2px var(--dunkelgrau2);
  background-size:cover;
  background-position:center;
}

.book-hero .home-link{
  color: var(--hellgrau);
  text-shadow: 0 2px 6px rgba(0,0,0,.45);
}
.book-hero .home-link:hover{ color: var(--dunkelgrau2); }

/* Container direkt nach dem Hero: Top-Abstand + Top-Padding weg */
.book-hero + .container{
  margin-top: clamp(12px, 2vw, 24px);
  padding-top: 0;
}

/* Der innere Wrapper begrenzt die Zeilenbreite und zentriert den Text */
.book-hero-content{
  max-width: 900px;
  width: min(92vw, 900px);
  margin: 0 auto;
  padding: 0 16px;
  text-align: center;
}

.book-hero-content h1{ margin: .2em 0 .3em; }
.book-hero-content h2{ margin: 0; font-weight: 400; line-height: 1.3; }
.book{
  display: block;
  background: var(--background_text);
  border: 1px solid var(--umrandung);
  padding: 1em;
  margin-top: 1.5em;
  border-radius: 4px;
}
.book::after{
  content: "";
  display: block;
  clear: both;
}
.book img{
  float: left;
  max-width: 150px;
  width: 150px;
  height: auto;
  border-radius: 4px;
  margin: .2em 1.2em .6em 0;
}
.book-button{
  display:inline-block; padding:.6em 1.2em;
  background: var(--button); color: var(--button_text);
  text-decoration:none; border-radius:4px; margin-top:.5em; font-weight:700;
  transition: background .3s ease, transform .2s ease;
}
.book-button:hover{ background: var(--button_hover); transform: scale(1.05); }

/* Buch-Überschriften bündig oben starten */
.book h1,
.book h2{
  margin-top: 0;           /* standardmäßigen oberen Abstand entfernen */
  padding-top: 0;
  line-height: 1.2;
}

/* Cover nicht künstlich nach unten schieben */
.book img{
  margin: 0 1.2em .6em 0;  /* statt .2em oben */
}

/* ================================================= */
/* === PAGE: KATJA ================================= */

.katja-container{
  max-width:1200px; margin:auto; padding:2em;
  display:flex; flex-wrap:wrap; gap:2em;
}
.sidebar{ flex:1 1 300px; max-width:300px; }
.portrait{ width:100%; border-radius:6px; display:block; }
.steckbrief{ background: var(--background_text); padding:1em; border-radius:6px; margin-top:1em; }
.steckbrief dt{ font-weight:700; }
.steckbrief dd{ margin:0 0 .5em 0; }
.text-content{ flex:2 1 500px; min-width:300px; }

/* ======================================================================= */
/* === PAGE: SCHREIB MIR ================================================= */
/* ======================================================================= */

body.kontakt{
  margin:0; padding:0;
  background-color: var(--background_body);
  line-height:1.6;
}

/* Hero oben auf der Kontakt-Seite */
.kontakt-hero{
  background-image: url('../images/schreib-mir-panorama.jpg');
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align: center;
  min-height: clamp(200px, 38vh, 420px);
  padding: clamp(16px, 6vw, 32px) clamp(12px, 4vw, 24px);
  box-sizing: border-box;
  color: var(--hellgrau);
  text-shadow: 1px 1px 2px var(--dunkelgrau2);
  background-size:cover;
  background-position:center;
}

.kontakt-hero .home-link{
  color: var(--hellgrau);
  text-shadow: 0 2px 6px rgba(0,0,0,.45);
}
.kontakt-hero .home-link:hover{ color: var(--dunkelgrau2); }

.kontakt-hero + .container{
  margin-top: clamp(12px, 2vw, 24px);
  padding-top: 0;
}

/* Der innere Wrapper begrenzt die Zeilenbreite und zentriert den Text */
.kontakt-hero-content{
  max-width: 900px;
  width: min(92vw, 900px);
  margin: 0 auto;
  padding: 0 16px;
}
.kontakt-hero-content h1{
  margin: 0 0 .25em;
  font-size: clamp(22px, 7vw, 40px);
  line-height: 1.2;
}
.kontakt-hero-content h2{
  margin: 0;
  font-weight: 400;
  font-size: clamp(16px, 4.8vw, 22px);
  line-height: 1.3;
  text-wrap: balance; /* optional */
}

.kontakt-container{
  max-width:700px; margin:2em auto; padding:2em;
  background: var(--background_text); border-radius:8px;
  box-shadow:0 0 10px rgba(0,0,0,.1);
}
.kontakt-container form{ display:flex; flex-direction:column; gap:1em; }
.kontakt-container input,
.kontakt-container textarea{
  padding:.8em; font-size:1em; border:1px solid var(--background_text); border-radius:4px;
}
.kontakt-container input:focus,
.kontakt-container textarea:focus{
  outline:none; border-color: var(--gruen); box-shadow:0 0 5px var(--gruen);
}
.kontakt-container button{
  padding:.8em; font-size:1em; background: var(--gruen);
  border:none; cursor:pointer; border-radius:4px;
}
.kontakt-container button:hover{ background: var(--gruen-hover); }
.kontakt-container .message{ margin-bottom:1em; font-weight:700; text-align:left; }
.kontakt-container .success{ color: green; }
.kontakt-container .error{ color: red; }

/* ======================================================================= */
/* === PAGE: INTERVIEW =================================================== */
/* ======================================================================= */

.float-image{ float:left; width:300px; margin:0 20px 20px 0; border-radius:4px; }
.interview-container{
  display:flex; flex-wrap:wrap; gap:30px; align-items:flex-start;
  max-width:1000px; margin:40px auto; padding:20px;
}
.interview-image{ flex:1 1 300px; max-width:400px; }
.interview-text{  flex:2 1 400px; }
.interview-text p{ margin-bottom:1em; }

/* ======================================================================= */
/* ===== PAGE: CREW ====================================================== */
/* ======================================================================= */

/* Hero mit Mauer-Hintergrund */
.crew-hero {
  background-image: url('../images/background-mauer-panorama-200.jpg');
  background-size: cover;
  background-position: center;
  min-height: 200px;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  color: var(--dunkelgrau2);
  text-shadow: none;
}

.crew-hero__inner {
  max-width: 900px;
  padding: 20px;
}

.crew-hero__title {
  font-size: clamp(28px, 5vw, 46px);
  margin: 0 0 16px 0;
  font-weight: 700;
}

/* Buttons im Hero */
.crew-hero .crew-filters {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Dünner grüner Streifen */
.crew-separator {
  height: 2px;
  background: var(--background_text);
}

body.crew{
  margin:0;
  padding:0;
  background: var(--background_text);
  color: var(--dunkelgrau2);
  line-height:1.6;
}

/* Grüner Rahmen um den Inhalt – oben dicker */
.crew-frame{
  margin: clamp(2px, 3vw, 24px) auto;
  border: 10px solid var(--background_text);
  position: relative;
  /* Kork nur im Rahmen: */
  background-image: url('../images/kork-background.jpg');
  background-repeat: repeat;
  background-size: 100% auto;
  background-position: top center;
}

/* Header sitzt optisch im oberen Rahmen */
.crew-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--background_text);
  padding: 10px 12px;
  margin: -28px -10px 0 -10px;            /* in den Rahmen „eingerückt“ */
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.crew-title{
  margin: 0;
  font-size: clamp(20px, 3.6vw, 28px);
  font-weight: 700;
}

/* Filter-Buttons */
.crew-filters{ display: flex; gap: 8px; }
.filter-btn{
  appearance: none;
  border: 1px solid var(--umrandung);
  background: var(--weiss);
  color: var(--dunkelgrau2);
  padding: 12px 26px;
  font-size: clamp(18px, 2.4vw, 22px);
  border-radius: 12px;
  border-width: 2px;
  line-height: 1.1;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .1s ease, border-color .2s ease;
}
.filter-btn:hover{ transform: translateY(-1px); }
.filter-btn.is-active,
.filter-btn[aria-pressed="true"]{
  background: var(--gruen);
  color: var(--weiss);
  border-color: var(--gruen);
}

/* Board minimal enger innerhalb des Rahmens */
body.crew .board{
  padding: clamp(14px, 2.6vw, 24px);
}

/* Dezente Links unten im Rahmen – ersetzt Footer */
.crew-frame-bottom{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: .9rem;
  color: var(--grau);
  background: var(--background_text);
  padding: 6px 8px;
  margin: 8px -10px -10px -10px;          /* bündig bis an den Rahmen */
  border-top: 1px solid rgba(0,0,0,.06);
}
.crew-frame{
  margin-top: 2px; 
}

.crew-frame-bottom a{
  color: inherit;                 /* unauffällig */
  text-decoration: none;
}
.crew-frame-bottom a:hover{
  text-decoration: underline;
}

/* Home-Link oben rechts gut lesbar */
body.crew .home-link{
  color: var(--dunkelgrau2);
  text-shadow: none;
}
body.crew .home-link:hover{ color: #000; }

/* Board-Layout + Basisvariablen */
/* Board-Layout: automatisch viele Spalten je nach Breite */
.board{
  --gap: clamp(12px, 2vw, 22px);
  --card-w: clamp(180px, 22vw, 260px);     /* Basis */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-w), 1fr));
  gap: var(--gap);
  justify-items: center;
  padding: clamp(18px, 3vw, 32px);
}

/* ===== Karten (mit leichter Schieflage) ===== */
.card{
  position:relative;
  width:var(--card-w);
  aspect-ratio: 3 / 4.2;
  filter:
    drop-shadow(0 2px 3px rgba(0,0,0,.25))
    drop-shadow(0 12px 18px rgba(0,0,0,.18));
}
.rot--3 { transform: rotate(-3deg); }
.rot--2 { transform: rotate(-2deg); }
.rot--1 { transform: rotate(-1deg); }
.rot-1  { transform: rotate(1deg);  }
.rot-2  { transform: rotate(2deg);  }
.rot-3  { transform: rotate(3deg);  }

/* Pin */
.pin{
  position:absolute; top:-10px; left:50%;
  transform:translateX(-50%);
  width:20px; height:20px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #c00, #800);
  box-shadow: 0 2px 5px rgba(0,0,0,.45);
  z-index:2; pointer-events:none;
}

/* ===== Flip-Mechanik (robust & scharf) ===== */
.card__inner {
  position: relative; inset: 0;
  width: 100%; height: 100%;
  border: 0; padding: 0; background: transparent;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform .6s ease;
  will-change: transform;

  /* iOS Safari Fixes */
  appearance: none;
  -webkit-appearance: none;
  color: var(--dunkelgrau2) !important;
  -webkit-text-fill-color: var(--dunkelgrau2);
  -webkit-tap-highlight-color: transparent;
  font: inherit;
  text-align: inherit;
}

.card__face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  border-radius: 0px;
  overflow: hidden;
  outline: none;
  background: var(--weiss);
  color: var(--dunkelgrau2);
  -webkit-text-fill-color: var(--dunkelgrau2);
}

/* Vorderseite: NUR Bild → kein Text-Blur */
.card__front{
  transform:rotateY(0deg);
  background: var(--weiss);
}
.card__front img{
  display:block; width:100%; height:100%; object-fit:cover;
}

/* Kleiner Flip-Pfeil unten rechts auf der Vorderseite */
.card__front::after{
  content:"";
  position:absolute;
  right:8px;
  bottom:8px;
  width: clamp(18px, 2.8vw, 24px);
  height: clamp(18px, 2.8vw, 24px);

  /* weiße runde Plakette + SVG-Pfeil */
  background:
    url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
      <path d='M8 8l4 4 4-4' fill='none' stroke='%23222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/>\
    </svg>") center/60% no-repeat,
    radial-gradient(circle at 50% 50%, #ffffff 60%, rgba(0,0,0,0.06) 61%);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,.18);
  opacity:.8;
  pointer-events:none;             /* blockiert keine Klicks */
  transition: opacity .2s ease, transform .2s ease;
}

/* deutlicher bei Hover/Focus */
.card__inner:hover  .card__front::after,
.card__inner:focus-visible .card__front::after{
  opacity:1;
  transform: translateY(-1px);
}

/* Pfeil ausblenden, wenn Karte gedreht ist */
.card__inner[aria-expanded="true"] .card__front::after{
  display:none;
}

/* Motion-Respekt (falls du magst) */
@media (prefers-reduced-motion: reduce){
  .card__front::after{ transition:none; }
}

/* Rückseite */
.card__back {
  transform: rotateY(180deg);
  background: var(--background_text);
  padding: 12px;
  overflow: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  color: var(--dunkelgrau2) !important;
  -webkit-text-fill-color: var(--dunkelgrau2);
}
.card__back,
.card__back *,
.card__back *::before,
.card__back *::after {
  color: var(--dunkelgrau2) !important;
  -webkit-text-fill-color: var(--dunkelgrau2) !important;
}
.card__back a,
.card__back a:link,
.card__back a:visited,
.card__back a:hover,
.card__back a:active,
.card__back a:focus {
  color: var(--dunkelgrau2) !important;
  -webkit-text-fill-color: var(--dunkelgrau2) !important;
  text-decoration: underline;
}
/* Tel-/Mail-/SMS-Auto-Erkennung iOS */
.card__back a[href^="tel"],
.card__back a[href^="mailto"],
.card__back a[href^="sms"] {
  color: var(--dunkelgrau2) !important;
  -webkit-text-fill-color: var(--dunkelgrau2) !important;
  text-decoration: underline;
}
.steckbrief h3 {
  font-size: 1.1rem;     /* etwas größer */
  margin: 0 0 0.8em 0;
}

.steckbrief p {
  margin: 0 0 0.7em 0;      /* Abstand zwischen Absätzen */
  font-size: 0.95rem;
  /* text-indent: -0.8em;      erste Zeile ohne Einzug */
  /* padding-left: 0.8em;      zweite Zeile leicht eingerückt */
  line-height: 1.5;
  text-align: left;
}

.steckbrief strong {
  font-weight: 600;
}

/* Flip an/aus */
.card__inner[aria-expanded="true"]{ transform:rotateY(180deg); }
    


/* ======================================================================= */
/* === MEDIA QUERIES ===================================================== */
/* ======================================================================= */

/* ======================================================================= */
/* === Large Tablet (1024px < x ≤ 1200px) ================================ */
/* ======================================================================= */
@media (max-width:1200px){
  body.home{ --side-scale: .9; }
  body.home .stage{
    grid-template-columns:
      clamp(110px, 14.5vw, 200px)   /* links schmaler */
      minmax(520px, 1fr)            /* intro */
      clamp(110px, 14.5vw, 200px);  /* rechts schmaler */
    column-gap: clamp(14px, 2.4vw, 28px); /* engerer Abstand */
  }

  /* leichte vertikale Korrekturen für die Stapel */
  body.home .left  .p1 { top:  6px;  }
  body.home .left  .p2 { top: 175px; }
  body.home .left  .p3 { top: 340px; }

  body.home .right .p4 { top: 10px;  }
  body.home .right .p5 { top: 220px; }
  body.home .right .p6 { top: 405px; }
}

/* ======================================================================= */
/* === Tablet (980px < x ≤ 1024px) ======================================= */
/* ======================================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
  /* ====================== */
  /* HOME / INDEX (Tablet)  */
  /* ====================== */
  /* weniger Außenabstand, etwas kleinere Seitenspalten + Fotos */
  body.home {
    background-image: url("../images/homepage-background-medium.jpg");
    --pad: clamp(10px, 2.2vw, 18px); /* Seitenrand kleiner */
    --side-scale: 0.60;              /* Fotos schrumpfen, damit sie nicht in den Text ragen */
  }

  /* schmalere Seitenspalten, mehr Platz für die Mitte */
  body.home .stage{
    grid-template-columns:
      clamp(80px, 11vw, 130px)    /* links */
      1fr                         /* intro */
      clamp(80px, 11vw, 130px);   /* rechts */
    column-gap: clamp(18px, 3vw, 32px);
  }

  /* Headline in diesem Bereich leicht kleiner, damit sie nicht kollidiert */
  body.home .intro h1{
    font-size: clamp(28px, 4.2vw, 48px);
  }

  body.home .intro p{
    max-width: 40ch;   /* enger, damit kein Überlappen */
  }
  
  /* Fotos enger vertikal stapeln (wie auf Desktop), aber dichter zusammen */
  body.home .left  .p1 { top: 0px;   }
  body.home .left  .p2 { top: 120px; }
  body.home .left  .p3 { top: 245px; }

  body.home .right .p4 { top: 0px;   }
  body.home .right .p5 { top: 118px; }
  body.home .right .p6 { top: 236px; }

  /* Textblock etwas schmaler, damit die Zeilenlänge schön bleibt */
  body.home .intro p{
    max-width: 42ch;
  }
  
  /* ====================== */
  /* Album (Tablet) ======= */
  /* ====================== */
  .container.album-layout{
    flex-direction: column;
    gap: 24px;
    padding: 24px 16px;
    max-width: 100%;
  }
  .left, .right{ flex: 1 0 100%; }

  .album-header{
    height: auto;
    overflow: hidden;
  }
  .album-header img{
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  /* ====================== */
  /* Bücher (Tablet) ====== */
  /* ====================== */
  .book-hero{
    min-height: 240px;
    background-position: center;
    background-size: cover;
  }
  .book-hero-content{ padding: 0 16px; }

  /* ====================== */
  /* Interview (Tablet) === */
  /* ====================== */
  .float-image{
    float: left;
    width: 280px;
    margin: 0 16px 16px 0;
  }

  /* ====================== */
  /* Kontakt (Tablet) ===== */
  /* ====================== */
  .kontakt-hero{
    min-height: 320px;
    background-position: center;
  }
}

/* ======================================================================= */
/* === Small Tablet (768px < x ≤ 980px) ================================== */
/* ======================================================================= */
@media (max-width:980px){
  body.home{ --side-scale: .75; }
  body.home .stage{
    grid-template-columns:
      clamp(100px, 14vw, 180px)
      1fr
      clamp(100px, 14vw, 180px);
  }
}

/* ======================================================================= */
/* === Mobil (420 < x <= 768px) ========================================== */
/* ======================================================================= */
@media (max-width:768px){

  body.home{
    background-image: url("../images/homepage-background-small.jpg");
  }
  /* allgemeine Container etwas kompakter */
  .container{
    margin: 1em auto;
    padding: 0.75em;
  }

  /* ===================== */
  /* HOME / INDEX (mobil)  */
  /* ===================== */

  /* Stage auf 1 Spalte stapeln */
  body.home .stage{
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro"
      "left"
      "right";
    row-gap: clamp(10px, 2.8vw, 18px);
  }

  /* Foto-Stapel wieder relativ + überlappend */
  body.home .stack{
    position: relative;          /* erlaubt absolute Kind-Positionen */
    min-height: 420px;           /* kompakte, aber überlappende Höhe */
  }
  body.home .photo{
    position: absolute;          /* statt static → Überlagerung */
    width: clamp(140px, 65vw, 220px);
    transition: transform .25s ease;
  }
  body.home .left .p1{ top:   0px; left: 12%; transform: rotate(-4deg); z-index:1; }
  body.home .left .p2{ top: 130px; left:  8%; transform: rotate( 3deg); z-index:2; }
  body.home .left .p3{ top: 245px; left:  4%; transform: rotate(-6deg); z-index:3; }

  body.home .right .p4{ top:   0px; right: 12%; transform: rotate( 5deg); z-index:1; }
  body.home .right .p5{ top: 135px; right: 10%; transform: rotate(-3deg); z-index:2; }
  body.home .right .p6{ top: 255px; right:  6%; transform: rotate( 6deg); z-index:3; }

  /* ===================== */
  /* ALBUM (mobil)         */
  /* ===================== */
  .container.album-layout{
    flex-direction: column;
    gap: 16px;
    padding: 18px 12px;
  }
  .left, .right{
    flex: 1 0 100%;           /* volle Breite */
    min-width: auto;          /* fix für schmale Screens */
  }  
  .track{ padding: 6px 0; }
  .lyrics{ margin: 8px 0 14px 0; }

  /* Header-Bild auf Mobil nicht croppen, komplett zeigen */
  .album-header img{
    object-fit: contain;
  }

  /* ===================== */
  /* BÜCHER (mobil)        */
  /* ===================== */
  .book{
    padding: .9em;
  }
  .book img{
    float: none;
    display: block;
    margin: 0 auto 12px auto;
    width: clamp(120px, 55vw, 220px);
    max-width: 220px;
  }
  .book-hero{
    min-height: 200px;
    text-align: center;
    background-position: center;
  }
  .book-hero-content h1{
    font-size: clamp(20px, 6.4vw, 28px);
  }
  .book-hero-content h2{
    font-size: clamp(14px, 3.8vw, 18px);
  }

  /* ===================== */
  /* INTERVIEW (mobil)     */
  /* ===================== */
  .float-image{
    float: none;
    width: min(100%, 320px);
    display: block;
    margin: 0 auto 16px auto;
  }

  /* ===================== */
  /* KONTAKT (mobil)       */
  /* ===================== */
  .kontakt-hero-content h1 { font-size: clamp(20px, 8vw, 34px); }
  .kontakt-hero-content h2 { font-size: clamp(15px, 5vw, 20px); }

  /* Footer niemals überdecken */
  footer{
    position: relative;
    z-index: 1;
  }

  /* ===================== */
  /* Meet the cast (mobil) */
  /* ===================== */

  /* Karten breiter, keine Überlappung */
  .board{
    /* --card-w: clamp(300px, 92vw, 440px); */
    --card-w: 100%;
    /* padding: clamp(10px, 4vw, 20px); */
    padding: clamp(4px, 1.8vw, 10px);
    /* row-gap: clamp(16px, 3.6vw, 26px); */
    grid-template-columns: 1fr;
    justify-items: center;
    /* justify-items: stretch; */
  }
  .card{
    /* width: min(94vw, 460px); */
    width: 90%;
    max-width: none;
    margin-block: 0;
    aspect-ratio: 3 / 4.2;
  }
  .rot--3 { transform: rotate(-0.8deg); }
  .rot--2 { transform: rotate(-0.6deg); }
  .rot--1 { transform: rotate(-0.4deg); }
  .rot-1  { transform: rotate( 0.4deg); }
  .rot-2  { transform: rotate( 0.6deg); }
  .rot-3  { transform: rotate( 0.8deg); }
  .pin{ top: -8px; }
  .card__front::after{ width: 22px; height: 22px; }
  
}

/* ======================================================================= */
/* === Old phones (<=420px) ============================================== */
/* ======================================================================= */
@media (max-width: 420px){
  .crew-header{ flex-wrap: wrap; }
  .crew-filters{ width: 100%; justify-content: flex-start; }
}

/* ======================================================================= */
/* === Bewegungspräferenz ================================================ */
/* ======================================================================= */
@media (prefers-reduced-motion: reduce){
  body.home .photo{ transition:none }
  body.home .photo:hover{ transform:none }
}