/* ==========================================================================
   Stile Magico – Friseursalon Frankfurt
   Stylesheet
   ========================================================================== */

/* --- 1. Design Tokens ---------------------------------------------------- */
:root{
  --ink:#17130F;
  --ink-soft:#2C251E;
  --cream:#FAF6F0;
  --sand:#EFE6DA;
  --sand-dark:#E2D5C4;
  --brass:#B08968;
  --brass-dark:#94704F;
  --muted:#6F6458;
  --white:#FFFFFF;

  --font-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --font-body:"Jost","Helvetica Neue",Arial,sans-serif;
  --font-script:"Parisienne","Snell Roundhand","Apple Chancery",cursive;

  --wrap:1180px;
  --gutter:clamp(1.25rem,5vw,3rem);
  --radius:2px;
  --shadow:0 18px 50px -24px rgba(23,19,15,.35);
  --shadow-soft:0 8px 30px -18px rgba(23,19,15,.4);
  --t:.35s cubic-bezier(.4,0,.2,1);
}

/* --- 2. Reset ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.75;
  font-weight:300;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:400;
  line-height:1.12;
  letter-spacing:-.01em;
  margin:0 0 .5em;
}
h1{font-size:clamp(2.6rem,7vw,5rem);line-height:.98;}
h2{font-size:clamp(2rem,4.6vw,3.35rem);}
h3{font-size:clamp(1.35rem,2.4vw,1.75rem);}
p{margin:0 0 1.15em;}
p:last-child{margin-bottom:0;}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;}

/* --- 3. Layout helpers --------------------------------------------------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);}
.section{padding-block:clamp(4rem,9vw,7.5rem);}
.section--tight{padding-block:clamp(3rem,6vw,5rem);}
.section--dark{background:var(--ink);color:var(--cream);}
.section--sand{background:var(--sand);}
.center{text-align:center;}
.grid{display:grid;gap:clamp(1.5rem,3.5vw,3rem);}

.eyebrow{
  display:inline-block;
  font-size:.72rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  font-weight:400;
  color:var(--brass);
  margin-bottom:1.1rem;
}
.section--dark .eyebrow{color:var(--brass);}
.lead{font-size:clamp(1.05rem,1.6vw,1.2rem);color:var(--muted);max-width:56ch;}
.section--dark .lead{color:rgba(250,246,240,.72);}
.center .lead{margin-inline:auto;}
.rule{width:56px;height:1px;background:var(--brass);border:0;margin:0 0 1.75rem;}
.center .rule{margin-inline:auto;}

/* --- 4. Buttons ---------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:1rem 2.1rem;
  font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;font-weight:400;
  border:1px solid var(--ink);
  background:var(--ink);color:var(--cream);
  border-radius:var(--radius);
  transition:background var(--t),color var(--t),border-color var(--t),transform var(--t);
  text-align:center;
}
.btn:hover{background:var(--brass);border-color:var(--brass);color:var(--white);transform:translateY(-2px);}
.btn--ghost{background:transparent;color:var(--ink);border-color:rgba(23,19,15,.3);}
.btn--ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--cream);}
.btn--light{background:var(--cream);border-color:var(--cream);color:var(--ink);}
.btn--light:hover{background:var(--brass);border-color:var(--brass);color:var(--white);}
.btn--outline-light{background:transparent;color:var(--cream);border-color:rgba(250,246,240,.4);}
.btn--outline-light:hover{background:var(--cream);border-color:var(--cream);color:var(--ink);}
.btn-row{display:flex;flex-wrap:wrap;gap:.9rem;}
.center .btn-row{justify-content:center;}
.btn svg{width:1em;height:1em;flex:none;}

.link-arrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brass);
  padding-bottom:.35rem;
  border-bottom:1px solid rgba(176,137,104,.4);
  transition:gap var(--t),border-color var(--t);
}
.link-arrow:hover{gap:.9rem;border-color:var(--brass);}

/* --- 5. Header ----------------------------------------------------------- */
.header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  transition:background var(--t),box-shadow var(--t),padding var(--t);
  padding-block:1.4rem;
}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;}
/* Wortmarke: serifenlose Versalien, darunter die Signatur „by Rosalba" */
.brand{display:flex;flex-direction:column;align-items:flex-end;line-height:1;}
.brand__name{
  font-family:var(--font-body);
  font-weight:400;
  font-size:1.34rem;
  letter-spacing:.235em;
  text-transform:uppercase;
  /* das Tracking haengt rechts nach – optisch ausgleichen */
  margin-right:-.235em;
}
.brand__sub{
  font-family:var(--font-script);
  font-size:1.28rem;
  line-height:1;
  letter-spacing:0;
  text-transform:none;
  color:var(--brass);
  margin-top:.26rem;
}
.nav{display:flex;align-items:center;gap:2.1rem;}
.nav__link{
  position:relative;
  font-size:.76rem;letter-spacing:.17em;text-transform:uppercase;
  padding-block:.4rem;
}
.nav__link::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--brass);transform:scaleX(0);transform-origin:right;
  transition:transform var(--t);
}
.nav__link:hover::after,.nav__link[aria-current="page"]::after{transform:scaleX(1);transform-origin:left;}
.nav__link[aria-current="page"]{color:var(--brass);}
.header__cta{display:none;}

/* Header states */
.header--transparent{color:var(--cream);}
.header--transparent .brand__sub{color:#CCA47F;}
.header--solid{
  background:rgba(250,246,240,.94);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 1px 0 rgba(23,19,15,.08);
  padding-block:1rem;
  color:var(--ink);
}
.header--solid .brand__sub{color:var(--brass);}

/* Burger */
.burger{display:flex;flex-direction:column;justify-content:center;gap:6px;width:44px;height:44px;align-items:flex-end;}
.burger span{display:block;width:26px;height:1px;background:currentColor;transition:transform var(--t),opacity var(--t),width var(--t);}
.burger span:nth-child(2){width:18px;}
body.menu-open .burger span:nth-child(1){transform:translateY(3.5px) rotate(45deg);}
body.menu-open .burger span:nth-child(2){opacity:0;}
body.menu-open .burger span:nth-child(3){width:26px;transform:translateY(-3.5px) rotate(-45deg);}

/* Mobile menu */
.mobile-menu{
  position:fixed;inset:0;z-index:99;
  background:var(--ink);color:var(--cream);
  display:flex;flex-direction:column;justify-content:center;
  padding:6rem var(--gutter) 3rem;
  opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:opacity var(--t),transform var(--t),visibility var(--t);
}
body.menu-open .mobile-menu{opacity:1;visibility:visible;transform:none;}
body.menu-open{overflow:hidden;}
.mobile-menu__list{display:flex;flex-direction:column;gap:.35rem;margin-bottom:2.5rem;}
.mobile-menu__list a{
  font-family:var(--font-display);font-size:2.4rem;
  padding-block:.35rem;display:block;
  transition:color var(--t),padding-left var(--t);
}
.mobile-menu__list a:hover,.mobile-menu__list a[aria-current="page"]{color:var(--brass);padding-left:.5rem;}
.mobile-menu__meta{border-top:1px solid rgba(250,246,240,.15);padding-top:1.75rem;font-size:.9rem;color:rgba(250,246,240,.72);}
.mobile-menu__meta strong{display:block;color:var(--cream);font-weight:400;letter-spacing:.05em;}

/* --- 6. Hero ------------------------------------------------------------- */
.hero{
  position:relative;
  min-height:min(100svh,880px);
  display:flex;align-items:flex-end;
  color:var(--cream);
  overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(to top,rgba(14,11,9,.92) 0%,rgba(14,11,9,.5) 45%,rgba(14,11,9,.45) 100%),
    url("../img/hero.jpg"),
    radial-gradient(120% 90% at 75% 15%,#4A3A2C 0%,#2A211A 42%,#17130F 100%);
  background-size:cover,cover,cover;
  background-position:center,center 30%,center;
  transform:scale(1.02);
}
.hero__inner{position:relative;width:100%;padding-block:clamp(5rem,14vh,8rem) clamp(3rem,8vh,5rem);}
.hero__content{max-width:40ch;}
.hero h1{margin-bottom:1.5rem;}
.hero h1 em{font-style:italic;color:var(--brass);}
.hero__text{font-size:clamp(1.02rem,1.6vw,1.18rem);color:rgba(250,246,240,.82);max-width:46ch;margin-bottom:2.2rem;}
.hero__bar{
  position:relative;
  margin-top:clamp(2.5rem,7vh,4.5rem);
  border-top:1px solid rgba(250,246,240,.18);
  padding-top:1.6rem;
  display:grid;gap:1.4rem;
  grid-template-columns:1fr;
}
.hero__fact{display:flex;flex-direction:column;gap:.3rem;}
.hero__fact span:first-child{
  font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--brass);
}
.hero__fact span:last-child{font-size:.97rem;color:rgba(250,246,240,.88);}
.hero__fact a:hover{color:var(--brass);}

/* --- 7. Page header (Unterseiten) --------------------------------------- */
.page-head{
  position:relative;color:var(--cream);
  padding:clamp(9rem,20vh,13rem) 0 clamp(3.5rem,8vh,5.5rem);
  overflow:hidden;
}
.page-head::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(to right,rgba(14,11,9,.94) 10%,rgba(14,11,9,.62) 100%),
    radial-gradient(110% 120% at 80% 10%,#4A3A2C 0%,#2A211A 45%,#17130F 100%);
}
.page-head__inner{position:relative;}
.page-head h1{margin-bottom:.6rem;}
.page-head p{max-width:52ch;color:rgba(250,246,240,.75);}
.breadcrumb{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(250,246,240,.55);margin-bottom:1.5rem;}
.breadcrumb a:hover{color:var(--brass);}

/* --- 8. Media / Photo blocks -------------------------------------------- */
.media{
  position:relative;
  aspect-ratio:4/5;
  background-color:#DCCDBB;
  /* Verlaufs-Ebenen als Platzhalter – ein <img> im Element legt sich darueber. */
  background-image:
    linear-gradient(145deg,rgba(23,19,15,.16) 0%,transparent 55%),
    radial-gradient(75% 60% at 30% 25%,rgba(255,255,255,.55) 0%,transparent 70%),
    repeating-linear-gradient(135deg,rgba(255,255,255,.22) 0 1px,transparent 1px 12px),
    linear-gradient(160deg,#E7D8C6 0%,#CBB49B 55%,#A98B6C 100%);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.media--wide{aspect-ratio:3/2;}
.media--tall{aspect-ratio:3/4;}
.media img{width:100%;height:100%;object-fit:cover;}

/* --- 9. Split section ---------------------------------------------------- */
.split{display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:center;}
.split__text{max-width:56ch;}
.split--reverse .split__media{order:-1;}

/* --- 10. Service cards --------------------------------------------------- */
.cards{display:grid;gap:clamp(1.25rem,2.5vw,2rem);}
.card{
  background:var(--white);
  padding:clamp(1.75rem,3vw,2.5rem);
  border:1px solid rgba(23,19,15,.07);
  border-radius:var(--radius);
  display:flex;flex-direction:column;
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft);border-color:rgba(176,137,104,.4);}
.card__num{
  font-family:var(--font-display);font-size:.95rem;letter-spacing:.2em;
  color:var(--brass);margin-bottom:1.5rem;display:block;
}
.card h3{margin-bottom:.6rem;}
.card p{color:var(--muted);font-size:.96rem;}
.card__price{
  margin-top:auto;padding-top:1.5rem;
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);
}

/* --- 11. Preisliste ------------------------------------------------------ */
.pricelist{display:grid;gap:clamp(2.5rem,5vw,4rem);}
.price-group{scroll-margin-top:120px;}
.price-group__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  border-bottom:1px solid rgba(23,19,15,.14);
  padding-bottom:1rem;margin-bottom:.5rem;
}
.price-group__head h3{margin:0;}
.price-group__note{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);white-space:nowrap;}
.price-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:.35rem 1.5rem;
  align-items:baseline;
  padding-block:1.05rem;
  border-bottom:1px solid rgba(23,19,15,.08);
}
.price-row__name{font-size:1.04rem;font-weight:400;}
.price-row__desc{grid-column:1/-1;font-size:.88rem;color:var(--muted);margin:0;}
.price-row__value{
  font-family:var(--font-display);font-size:1.3rem;white-space:nowrap;
  color:var(--ink);
}
.price-row__value small{font-family:var(--font-body);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:block;text-align:right;}

.price-nav{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:.5rem;}
.price-nav a{
  border:1px solid rgba(23,19,15,.18);
  padding:.55rem 1.1rem;border-radius:100px;
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  transition:background var(--t),color var(--t),border-color var(--t);
}
.price-nav a:hover{background:var(--ink);border-color:var(--ink);color:var(--cream);}

/* --- 12. Testimonials ---------------------------------------------------- */
.quotes{display:grid;gap:clamp(1.5rem,3vw,2.25rem);}
.quote{
  background:rgba(250,246,240,.04);
  border:1px solid rgba(250,246,240,.12);
  padding:clamp(1.75rem,3vw,2.4rem);
  border-radius:var(--radius);
  display:flex;flex-direction:column;
}
.stars{display:flex;gap:.25rem;margin-bottom:1.35rem;color:var(--brass);}
.stars svg{width:15px;height:15px;}
.quote p{
  font-family:var(--font-display);
  font-size:clamp(1.15rem,1.9vw,1.35rem);
  line-height:1.5;
  color:var(--cream);
}
.quote footer{
  /* auto schiebt die Fusszeile nach unten – die Trennlinien aller Karten fluchten */
  margin-top:auto;padding-top:1.25rem;
  border-top:1px solid rgba(250,246,240,.12);
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(250,246,240,.55);
}

/* --- 13. Team ------------------------------------------------------------ */
.team{display:grid;gap:clamp(1.75rem,3.5vw,2.75rem);}
.team__card figcaption{padding-top:1.35rem;}
.team__card h3{margin-bottom:.15rem;}
.team__role{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);}
.team__card p{margin-top:.9rem;color:var(--muted);font-size:.95rem;}

/* --- 14. Values / Icon list --------------------------------------------- */
.values{display:grid;gap:clamp(1.75rem,3.5vw,3rem);}
.value__icon{
  width:46px;height:46px;margin-bottom:1.25rem;
  color:var(--brass);
}
.value h3{font-size:1.28rem;margin-bottom:.5rem;}
.value p{color:var(--muted);font-size:.96rem;}
.section--dark .value p{color:rgba(250,246,240,.7);}

/* --- 15. Info / Kontakt -------------------------------------------------- */
.info-grid{display:grid;gap:clamp(1.5rem,3vw,2.5rem);}
.info-block{
  background:var(--white);
  border:1px solid rgba(23,19,15,.07);
  border-radius:var(--radius);
  padding:clamp(1.75rem,3vw,2.4rem);
  height:100%;
}
.section--dark .info-block{background:rgba(250,246,240,.04);border-color:rgba(250,246,240,.12);}
.info-block h3{font-size:1.3rem;margin-bottom:1rem;}
.info-block__icon{width:26px;height:26px;color:var(--brass);margin-bottom:1.1rem;}
.info-block a:hover{color:var(--brass);}

.hours{width:100%;border-collapse:collapse;}
.hours th,.hours td{
  text-align:left;padding-block:.7rem;font-weight:300;
  border-bottom:1px solid rgba(23,19,15,.08);
  font-size:.98rem;
}
.section--dark .hours th,.section--dark .hours td{border-color:rgba(250,246,240,.12);}
.hours td{text-align:right;white-space:nowrap;}
.hours tr:last-child th,.hours tr:last-child td{border-bottom:0;}
.hours .is-closed{color:var(--muted);}
.section--dark .hours .is-closed{color:rgba(250,246,240,.45);}

.map-frame{
  border:0;width:100%;height:clamp(320px,45vh,480px);
  border-radius:var(--radius);
  filter:grayscale(.35) contrast(1.02);
  display:block;
}

/* --- 16. CTA band -------------------------------------------------------- */
.cta-band{position:relative;overflow:hidden;background:var(--ink);color:var(--cream);}
.cta-band::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(90% 140% at 15% 0%,rgba(176,137,104,.32) 0%,transparent 60%);
}
.cta-band__inner{position:relative;display:grid;gap:2rem;align-items:center;}
.cta-band h2{margin-bottom:.5rem;}
.cta-band p{color:rgba(250,246,240,.75);max-width:48ch;}

/* --- 17. Footer ---------------------------------------------------------- */
.footer{background:#0F0C0A;color:rgba(250,246,240,.7);padding-block:clamp(3.5rem,7vw,5rem) 0;font-size:.94rem;}
.footer__grid{display:grid;gap:2.5rem;padding-bottom:3rem;}
.footer h4{
  font-family:var(--font-body);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--brass);margin-bottom:1.15rem;font-weight:400;
}
.footer .brand__name{color:var(--cream);}
.footer a:hover{color:var(--brass);}
.footer li{padding-block:.22rem;}
.footer__bottom{
  border-top:1px solid rgba(250,246,240,.1);
  padding-block:1.6rem;
  display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;justify-content:space-between;
  font-size:.8rem;color:rgba(250,246,240,.45);
}
.footer__bottom nav{display:flex;gap:1.5rem;flex-wrap:wrap;}

/* --- 18. Sticky Mobile CTA ---------------------------------------------- */
.mobile-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  display:grid;grid-template-columns:1fr 1fr;
  background:var(--ink);
  border-top:1px solid rgba(250,246,240,.12);
  transform:translateY(100%);
  transition:transform var(--t);
}
.mobile-cta.is-visible{transform:none;}
.mobile-cta a{
  display:flex;align-items:center;justify-content:center;gap:.55rem;
  padding:1.05rem .5rem;
  padding-bottom:calc(1.05rem + env(safe-area-inset-bottom,0px));
  color:var(--cream);
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
}
.mobile-cta a+a{border-left:1px solid rgba(250,246,240,.12);}
.mobile-cta a:first-child{background:var(--brass);color:var(--white);}
.mobile-cta svg{width:16px;height:16px;}
body.menu-open .mobile-cta{transform:translateY(100%);}

/* --- 19. Reveal animation ------------------------------------------------ */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s cubic-bezier(.16,1,.3,1);}
.reveal.is-in{opacity:1;transform:none;}

/* --- 20. Responsive ------------------------------------------------------ */
@media (max-width:899px){
  .nav{display:none;}
  /* Platz fuer die feste Anruf-Leiste, sonst verdeckt sie das Seitenende */
  body{padding-bottom:calc(55px + env(safe-area-inset-bottom,0px));}
  .hero__bar{grid-template-columns:repeat(2,1fr);}
}
@media (min-width:600px){
  .cards{grid-template-columns:repeat(2,1fr);}
  .team{grid-template-columns:repeat(2,1fr);}
  .values{grid-template-columns:repeat(2,1fr);}
  .info-grid{grid-template-columns:repeat(2,1fr);}
  .quotes{grid-template-columns:repeat(2,1fr);}
  .footer__grid{grid-template-columns:repeat(2,1fr);}
  .price-row{grid-template-columns:1fr auto;}
  .price-row__desc{grid-column:1/2;}
}
@media (min-width:900px){
  .burger{display:none;}
  .header__cta{display:inline-flex;}
  .mobile-cta{display:none;}
  .hero__bar{grid-template-columns:repeat(4,1fr);gap:2rem;}
  .split{grid-template-columns:1fr 1fr;}
  .split--wide-text{grid-template-columns:1.15fr .85fr;}
  .cards{grid-template-columns:repeat(3,1fr);}
  .team{grid-template-columns:repeat(3,1fr);}
  .values{grid-template-columns:repeat(3,1fr);}
  .quotes{grid-template-columns:repeat(3,1fr);}
  .footer__grid{grid-template-columns:1.4fr 1fr 1fr 1.1fr;}
  .cta-band__inner{grid-template-columns:1.4fr auto;gap:3rem;}
  .info-grid--3{grid-template-columns:repeat(3,1fr);}
}
@media (min-width:1100px){
  .pricelist--two{grid-template-columns:repeat(2,1fr);gap:4rem;}
}

/* --- 21. Print & Motion -------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
  .reveal{opacity:1;transform:none;}
}

/* --- 22. Nachträge: Skip-Link, Formulare, 4er-Raster ---------------------- */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:var(--cream);
  padding:.9rem 1.4rem;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
}
.skip-link:focus{left:0;}

input,select,textarea{
  transition:border-color var(--t),background var(--t);
}
input:hover,select:hover,textarea:hover{border-color:rgba(176,137,104,.6)!important;}
input:focus,select:focus,textarea:focus{
  border-color:var(--brass)!important;
  outline:none;
  background:rgba(250,246,240,.05);
}
input[type="checkbox"]{accent-color:var(--brass);width:1.05rem;height:1.05rem;}
::placeholder{color:rgba(250,246,240,.4);}

@media (min-width:1000px){
  .values--4{grid-template-columns:repeat(4,1fr);}
}

/* Rechtstexte */
.legal{max-width:70ch;}
.legal h2{font-size:clamp(1.5rem,3vw,2rem);margin-top:2.75rem;}
.legal h3{font-size:1.15rem;margin-top:1.75rem;}
.legal p,.legal li{color:var(--muted);}
.legal ul{list-style:disc;padding-left:1.25rem;margin-bottom:1.15em;}
.legal li{padding-block:.2rem;}
.legal .todo{
  background:rgba(176,137,104,.12);
  border-left:2px solid var(--brass);
  padding:1rem 1.25rem;margin-bottom:1.5rem;
  font-size:.9rem;color:var(--ink);
}

/* Header bleibt bei geöffnetem Menü transparent, damit kein heller Streifen entsteht */
body.menu-open .header{
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  color:var(--cream);
}
body.menu-open .header .brand__sub{color:#CCA47F;}
body.menu-open .header__cta{opacity:0;pointer-events:none;}

/* --- 23. Galerie „Unsere Arbeit" ---------------------------------------- */
.gallery{display:grid;gap:clamp(1.1rem,2.2vw,1.75rem);}
.gallery__item{margin:0;}
.gallery__item .media{
  aspect-ratio:4/5;
  box-shadow:var(--shadow-soft);
  transition:transform var(--t),box-shadow var(--t);
}
.gallery__item:hover .media{transform:translateY(-4px);box-shadow:var(--shadow);}
.gallery__item figcaption{padding-top:1.1rem;}
.gallery__item strong{
  display:block;font-weight:400;
  font-family:var(--font-display);font-size:1.25rem;line-height:1.2;
  margin-bottom:.3rem;
}
.gallery__item span{display:block;font-size:.88rem;color:var(--muted);line-height:1.5;}

/* --- 24. Bildband -------------------------------------------------------- */
.photo-band{
  position:relative;
  min-height:clamp(300px,42vh,460px);
  display:flex;align-items:center;
  background-color:var(--ink);
  overflow:hidden;
  color:var(--cream);
}
.photo-band__img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center 35%;
}
.photo-band::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to right,rgba(14,11,9,.88) 0%,rgba(14,11,9,.5) 60%,rgba(14,11,9,.72) 100%);
}
.photo-band__inner{position:relative;z-index:1;max-width:var(--wrap);}
.photo-band p{
  font-family:var(--font-display);
  font-size:clamp(1.5rem,3.4vw,2.5rem);
  line-height:1.35;
  max-width:22ch;
  margin:0;
}

/* --- 25. Team als Textkarten -------------------------------------------- */
.team__card{
  background:var(--white);
  border:1px solid rgba(23,19,15,.07);
  border-radius:var(--radius);
  padding:clamp(1.75rem,3vw,2.4rem);
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
.team__card:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft);border-color:rgba(176,137,104,.4);}
.team__no{
  display:block;
  font-family:var(--font-display);font-size:.95rem;letter-spacing:.2em;
  color:var(--brass);margin-bottom:1.5rem;
}

@media (min-width:600px){
  .gallery{grid-template-columns:repeat(2,1fr);}
}
@media (min-width:1000px){
  .gallery{grid-template-columns:repeat(4,1fr);}
}

/* Hero-Ausschnitt auf schmalen Displays: Motiv nach rechts, Text bleibt frei */
@media (max-width:600px){
  .hero::before{background-position:center,80% 24%,center;}
  .hero::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(to top,rgba(14,11,9,.88) 0%,rgba(14,11,9,.62) 45%,rgba(14,11,9,.42) 100%);
  }
  .hero__inner{position:relative;z-index:1;}
}

/* --- 26. Wortmarke im Footer -------------------------------------------- */
.brand--footer{display:inline-flex;}
.brand--footer .brand__name{color:var(--cream);}

/* Eyebrow ueber der Hero-Headline: laengerer Text, daher etwas enger */
.hero .eyebrow{letter-spacing:.2em;}
@media (max-width:560px){
  .hero .eyebrow{font-size:.66rem;letter-spacing:.13em;}
}

/* Agenturhinweis in der Fusszeile */
.footer__bottom .credit{
  color:rgba(250,246,240,.62);
  border-bottom:1px solid rgba(250,246,240,.22);
  padding-bottom:1px;
  transition:color var(--t),border-color var(--t);
}
.footer__bottom .credit:hover{color:var(--brass);border-color:var(--brass);}