/* =========================================================
   CALL ME BARISTA · gemeinsames Stylesheet
   Schriften werden lokal ausgeliefert (keine Verbindung zu Google).
   ========================================================= */

/* ---------- Schriften ---------- */
@font-face{
  font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/bebas-neue-latin-400-normal.woff2) format('woff2');
}
@font-face{
  font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/lato-latin-400-normal.woff2) format('woff2');
}
@font-face{
  font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/lato-latin-700-normal.woff2) format('woff2');
}
@font-face{
  font-family:'Lato';font-style:italic;font-weight:400;font-display:swap;
  src:url(../fonts/lato-latin-400-italic.woff2) format('woff2');
}
@font-face{
  font-family:'Lato';font-style:italic;font-weight:700;font-display:swap;
  src:url(../fonts/lato-latin-700-italic.woff2) format('woff2');
}

/* ---------- Farben ---------- */
:root{
  --bean:#1e1917;
  --crema:#e9d7bf;
  --foam:#f6efe4;
  --paper:#fbf7f0;
  --burnt:#c9622d;
  --burnt-text:#a9501f; /* für kleinen Text, erreicht WCAG AA auf Foam und Papier */
  --gold:#d9a441;
  --ink:#1e1917;
  --line:rgba(58,36,26,.16);
}

/* ---------- Grundlagen ---------- */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:70px;}
body{
  font-family:'Lato',sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.65;
  letter-spacing:.05em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;}
a{color:inherit;}
h1,h2,h3,.lead{text-wrap:balance;}
p{text-wrap:pretty;}

/* Tastaturbedienung */
a:focus-visible,button:focus-visible{outline:3px solid var(--burnt);outline-offset:3px;border-radius:2px;}
.hero a:focus-visible{outline-color:var(--gold);}
.skip-link{
  position:absolute;left:1rem;top:-4rem;z-index:100;
  background:var(--ink);color:var(--foam);padding:.7rem 1.1rem;border-radius:0 0 10px 10px;
  font-size:.85rem;font-weight:700;letter-spacing:.08em;text-decoration:none;
  transition:top .15s;
}
.skip-link:focus{top:0;}

/* Papierkorn */
body::before{
  content:"";
  position:fixed;inset:0;z-index:1;pointer-events:none;
  opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Navigation ---------- */
header.nav{
  position:sticky;top:0;z-index:50;
  background:var(--foam);
  border-bottom:1px solid rgba(42,28,20,.15);
}
.nav-inner{
  position:relative;
  max-width:1180px;margin:0 auto;padding:0 1.5rem;
  display:flex;align-items:stretch;justify-content:space-between;gap:1rem;
}
.brand{
  font-family:'Bebas Neue',sans-serif;
  color:var(--ink);text-decoration:none;
  font-size:1.55rem;letter-spacing:.18em;
  display:flex;align-items:center;
  padding:.85rem .9rem .85rem calc(1.5rem + .9rem);margin-left:calc(-1.5rem - .9rem);
  transition:color .2s,background-color .2s;
}
.brand:hover{color:var(--foam);background-color:var(--ink);}
.nav-links{display:flex;gap:1.6rem;list-style:none;align-items:stretch;}
.nav-links li{display:flex;}
.nav-links a{
  display:flex;align-items:center;
  text-decoration:none;color:var(--ink);
  font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  padding:1.4rem .9rem;
  transition:color .2s,background-color .2s;
}
.nav-links a:hover{color:var(--foam);background-color:var(--ink);}

.nav-toggle{
  display:none;
  background:none;border:none;cursor:pointer;
  flex-direction:column;justify-content:center;gap:5px;
  padding:.6rem .3rem;margin-left:auto;
}
.nav-toggle span{
  display:block;width:26px;height:2px;background:var(--ink);
  transition:transform .25s,opacity .25s;
}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---------- Hero (Tafel) ---------- */
.hero{
  position:relative;z-index:2;
  background-color:#1e1917;
  background-image:url('../img/hero-artwork.jpg'),url('../img/chalkboard-tile.jpg');
  background-repeat:no-repeat,repeat;
  background-position:center center,top left;
  background-size:cover,240px 240px;
  color:var(--foam);
  padding:6.5rem 1.5rem 5.5rem;
  text-align:center;overflow:hidden;
  min-height:540px;display:flex;flex-direction:column;justify-content:center;
}
.hero-eyebrow{
  letter-spacing:.4em;text-transform:uppercase;
  font-size:.72rem;color:var(--gold);
  margin-bottom:1.4rem;font-weight:700;
}
.hero h1{
  font-family:'Bebas Neue',sans-serif;font-weight:400;
  font-size:clamp(3.4rem,12vw,8.5rem);
  line-height:.92;letter-spacing:.04em;
  color:var(--foam);
  text-shadow:0 4px 30px rgba(0,0,0,.4);
}
.hero h1 .line2{display:block;color:var(--burnt);}
.hero-sub{
  font-style:italic;
  font-size:clamp(1.05rem,2.6vw,1.5rem);
  color:var(--crema);
  margin-top:1.4rem;
}
.hero-divider{
  width:64px;height:3px;background:var(--gold);
  margin:2.2rem auto 0;border-radius:2px;
}

/* ---------- Sektionen ---------- */
.section{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:5rem 1.5rem;}
.band-foam,.band-paper{position:relative;z-index:2;}
.band-foam{background:var(--foam);}
.band-paper{background:var(--paper);}
.section-label{
  font-family:'Bebas Neue',sans-serif;font-weight:400;
  font-size:clamp(2rem,6vw,3.4rem);
  letter-spacing:.06em;color:var(--bean);
  text-align:center;margin-bottom:.4rem;
  display:flex;align-items:center;justify-content:center;gap:1rem;
}
.section-label::before,.section-label::after{
  content:"";height:2px;width:46px;background:var(--burnt);opacity:.5;flex:none;
}
.section-intro{
  max-width:680px;margin:1.4rem auto 0;text-align:center;
  font-size:1.08rem;color:var(--bean);
}

/* ---------- Bald mehr (temporäre Startseite) ---------- */
.section.compact{padding:3.6rem 1.5rem 3.8rem;}
.soon{
  max-width:640px;margin:1.5rem auto 0;text-align:center;
  font-style:italic;font-size:clamp(1.15rem,3.2vw,1.5rem);color:var(--bean);
}

/* ---------- Projekt ---------- */
.projekt-body{max-width:760px;margin:2.4rem auto 0;}
.projekt-body p{margin-bottom:1.3rem;font-size:1.04rem;}
.projekt-body .lead{font-size:1.22rem;font-weight:700;color:var(--bean);}
.name{font-weight:700;color:var(--burnt-text);letter-spacing:.02em;}
.facts{list-style:none;max-width:760px;margin:2.2rem auto 0;border-top:1px solid var(--line);}
.facts li{
  display:flex;gap:1.2rem;align-items:baseline;
  padding:.85rem .2rem;border-bottom:1px solid var(--line);
}
.facts .k{
  flex:0 0 140px;font-size:.74rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--burnt-text);
}
.facts .v{flex:1;font-size:.98rem;}

/* So erzählen wir es (drei Karten unter den Eckdaten) */
.ton-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;
  max-width:1000px;margin:3rem auto 0;
}
.ton{
  background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 12px 30px -18px rgba(58,36,26,.45);
  padding:1.5rem 1.6rem 1.7rem;
}
.ton h3{
  font-family:'Bebas Neue',sans-serif;font-weight:400;
  font-size:1.5rem;letter-spacing:.06em;color:var(--bean);
}
.ton .tag{
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--burnt-text);margin-bottom:.15rem;
}
.ton p:last-child{font-size:.95rem;line-height:1.65;margin-top:.55rem;}

/* ---------- Karten (Figuren und Writers Room) ---------- */
.card-row{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:1.6rem;margin-top:3rem;
}
.figur,.member{
  background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 12px 30px -18px rgba(58,36,26,.45);
  transition:transform .3s ease,box-shadow .3s ease;
}
.figur:hover,.member:hover{transform:translateY(-6px);box-shadow:0 22px 40px -20px rgba(58,36,26,.55);}

.figur{flex:0 1 262px;padding:1.5rem 1.6rem 1.7rem;}
.figur h3{
  font-family:'Bebas Neue',sans-serif;font-weight:400;
  font-size:1.6rem;letter-spacing:.06em;color:var(--bean);
}
.figur .fn{font-style:italic;color:var(--burnt-text);font-size:.92rem;margin:.1rem 0 .7rem;}
.figur p{font-size:.93rem;line-height:1.65;}

.member{flex:0 1 262px;overflow:hidden;display:flex;flex-direction:column;}
.member .photo{
  aspect-ratio:1/1;width:100%;height:auto;object-fit:cover;object-position:center top;
  background:var(--crema);
}
.member .info{padding:1.4rem 1.5rem 1.6rem;}
.member h3{
  font-family:'Bebas Neue',sans-serif;font-weight:400;
  font-size:1.5rem;letter-spacing:.04em;color:var(--bean);
}
.member .role{font-style:italic;color:var(--burnt-text);font-size:.98rem;margin:.15rem 0 .9rem;}
.member .bio{font-size:.92rem;line-height:1.6;}
.member .bio.pending{color:rgba(30,25,23,.72);font-style:italic;}

/* ---------- Kontakt ---------- */
.kontakt-box{
  max-width:640px;margin:2.4rem auto 0;text-align:center;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:2.2rem;box-shadow:0 12px 30px -18px rgba(58,36,26,.45);
}
.kontakt-box p{font-size:1.04rem;margin-bottom:.6rem;}
.kontakt-box .mail{font-style:italic;font-size:clamp(1.1rem,4vw,1.55rem);margin:0;}
.kontakt-box a{color:var(--burnt-text);font-weight:700;text-decoration:none;word-break:break-word;}
.kontakt-box a:hover{color:var(--ink);text-decoration:underline;}

/* ---------- Unterseiten ---------- */
.page-head{
  position:relative;z-index:2;background:var(--ink);color:var(--foam);
  padding:4rem 1.5rem 3.4rem;text-align:center;overflow:hidden;
}
.page-head .eyebrow{
  letter-spacing:.4em;text-transform:uppercase;font-size:.72rem;
  color:var(--gold);margin-bottom:1rem;font-weight:700;
}
.page-head h1{
  font-family:'Bebas Neue',sans-serif;font-weight:400;
  font-size:clamp(2.6rem,9vw,5rem);line-height:.95;letter-spacing:.04em;
  color:var(--foam);text-shadow:0 4px 30px rgba(0,0,0,.4);
}
main.content{position:relative;z-index:2;max-width:720px;margin:0 auto;padding:4rem 1.5rem 5rem;}
main.content h2{
  font-family:'Bebas Neue',sans-serif;font-weight:400;
  font-size:1.6rem;letter-spacing:.04em;color:var(--bean);margin:2.2rem 0 .5rem;
}
main.content h2:first-child{margin-top:0;}
main.content p{margin-bottom:1.1rem;font-size:1.04rem;}
main.content a{color:var(--burnt-text);font-weight:700;word-break:break-word;}
main.content a:hover{color:var(--ink);}
main.content .stand{font-size:.88rem;color:rgba(42,28,20,.72);margin-top:2.4rem;}
.btn-home{
  display:inline-block;margin-top:1rem;padding:.8rem 1.6rem;border-radius:999px;
  background:var(--ink);color:var(--foam) !important;text-decoration:none;
  font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
}
.btn-home:hover{background:var(--burnt-text);}

/* Unterseiten: Footer bleibt unten */
body.sub{min-height:100vh;display:flex;flex-direction:column;}
body.sub main.content{flex:1 0 auto;width:100%;}

/* ---------- Footer ---------- */
footer{
  position:relative;z-index:2;
  background:var(--foam);color:var(--ink);
  padding:3rem 1.5rem 2.4rem;text-align:center;
  border-top:1px solid var(--line);
}
footer .f-brand{
  font-family:'Bebas Neue',sans-serif;
  font-size:1.7rem;letter-spacing:.2em;margin-bottom:1.2rem;
}
.f-links{
  display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;justify-content:center;
  list-style:none;margin-bottom:1.4rem;
}
.f-links a{text-decoration:none;font-size:.85rem;letter-spacing:.08em;transition:color .2s;}
.f-links a:hover{color:var(--burnt-text);}
.copyright{font-size:.78rem;color:rgba(42,28,20,.72);}

/* ---------- Tablet ---------- */
@media(max-width:900px){
  .ton-row{grid-template-columns:1fr;max-width:560px;gap:1.2rem;}
}
@media(max-width:900px) and (min-width:641px){
  .nav-links{gap:.5rem;}
  .nav-links a{padding:1.4rem .6rem;font-size:.74rem;letter-spacing:.1em;}
}

/* ---------- Mobil ---------- */
@media(max-width:640px){
  .nav-inner{padding:0 1.1rem;align-items:center;}
  .brand{
    font-size:1.1rem;letter-spacing:.08em;white-space:nowrap;
    padding:.85rem .9rem .85rem calc(1.1rem + .9rem);margin-left:calc(-1.1rem - .9rem);
  }
  .nav-toggle{display:flex;}
  .nav-links{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--foam);
    border-bottom:1px solid rgba(42,28,20,.15);
    max-height:0;overflow:hidden;
    transition:max-height .3s ease;
  }
  .nav-links.open{max-height:360px;}
  .nav-links li{display:block;}
  .nav-links a{
    padding:1rem 1.4rem;font-size:.9rem;letter-spacing:.12em;
    border-top:1px solid rgba(42,28,20,.08);
  }
  .hero{
    padding:4.5rem 1.2rem 4rem;
    background-size:200% auto,240px 240px;
  }
  .section{padding:3.5rem 1.2rem;}
  .section.compact{padding:3rem 1.2rem 3.2rem;}
  .section-label::before,.section-label::after{width:28px;}
  .card-row{gap:1.2rem;margin-top:2.2rem;}
  .figur,.member{flex:1 1 100%;}
  .facts li{flex-direction:column;gap:.15rem;}
  .facts .k{flex:none;}
  .kontakt-box{padding:1.6rem 1.2rem;}
  .page-head{padding:3rem 1.2rem 2.6rem;}
  main.content{padding:2.8rem 1.2rem 3.5rem;}
}
@media(max-width:360px){
  .nav-inner{padding:0 .9rem;}
  .brand{font-size:1rem;letter-spacing:.05em;padding-left:calc(.9rem + .9rem);margin-left:calc(-.9rem - .9rem);}
}

/* ---------- Reduzierte Bewegung ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition-duration:.01ms !important;}
  .figur:hover,.member:hover{transform:none;}
}