/* =========================================================
   ÄSTHETIK, Schönheitssalon Hannover
   Alles flach, alles Haarlinie, ein Papierton, keine Schatten.
   ========================================================= */

:root{
  --paper:#FBF0EE;
  --ink:#191817;
  --muted:#6B6360;
  --line:rgba(25,24,23,.38);
  --line-soft:rgba(25,24,23,.16);
  --wrap:1180px;
  --gut:clamp(18px,4vw,40px);
  --disp:'Bodoni Moda',Georgia,'Times New Roman',serif;
  --sans:'Commissioner',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}

html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  font-weight:300;
  line-height:1.62;
  letter-spacing:.005em;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,dl,dd,figure,blockquote{margin:0}
ul{margin:0;padding:0;list-style:none}

:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:var(--paper);padding:12px 18px;
}
.skip:focus{left:12px;top:12px}

/* ---------- Display-Typo ---------- */
.display{
  font-family:var(--disp);
  font-weight:400;
  font-size:clamp(2rem,4.6vw,4rem);
  line-height:.95;
  letter-spacing:.055em;
  text-transform:uppercase;
  margin-bottom:clamp(28px,4vw,52px);
}
.display--wide{letter-spacing:.03em;font-size:clamp(1.75rem,4.9vw,4.1rem)}

.kicker{
  font-size:clamp(.95rem,1.5vw,1.28rem);
  letter-spacing:.005em;
  color:var(--ink);
}

/* ---------- Buttons ---------- */
.btn{
  -webkit-appearance:none;appearance:none;
  background:transparent;
  border:1px solid var(--line);
  color:var(--ink);
  font-size:1rem;
  font-weight:300;
  padding:15px 26px;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  text-align:center;
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--ink);
  transform:translateY(101%);
  transition:transform .38s var(--ease);
}
.btn--wide{display:block;width:100%}
.btn--video{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  width:100%;text-align:left;
}
.btn--video svg{width:12px;height:14px;flex:none;transition:transform .3s var(--ease)}

@media (hover:hover) and (pointer:fine){
  .btn:hover{color:var(--paper);border-color:var(--ink)}
  .btn:hover::before{transform:translateY(0)}
  .btn--video:hover svg{transform:translateX(5px)}
}
.btn:active{transform:translateY(1px)}

/* ---------- Kopfzeile ---------- */
.topbar{position:fixed;inset:0 0 auto;z-index:80;pointer-events:none}
.topbar__in{
  max-width:var(--wrap);margin-inline:auto;
  padding:22px var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.topbar__mark{
  font-family:var(--disp);font-size:1.25rem;letter-spacing:.16em;
  text-decoration:none;pointer-events:auto;
  opacity:0;transform:translateY(-6px);
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.topbar.is-stuck .topbar__mark{opacity:1;transform:none}
.topbar.is-stuck{background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(6px)}

.burger{
  pointer-events:auto;
  width:44px;height:44px;margin-right:-8px;
  border:0;background:transparent;cursor:pointer;
  display:grid;align-content:center;gap:6px;padding:0 6px;
}
.burger span{display:block;height:2px;background:var(--ink);transition:transform .3s var(--ease),opacity .2s linear}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ---------- Overlay-Navigation ---------- */
.nav{position:fixed;inset:0;z-index:70;background:var(--paper)}
.nav__in{
  height:100%;max-width:var(--wrap);margin-inline:auto;
  padding:clamp(90px,14vh,150px) var(--gut) 40px;
  display:flex;flex-direction:column;justify-content:space-between;gap:40px;
  overflow-y:auto;
}
.nav__list li+li{margin-top:6px}
.nav__list a{
  font-family:var(--disp);
  font-size:clamp(1.7rem,6vw,3.2rem);
  letter-spacing:.05em;text-transform:uppercase;text-decoration:none;
  display:inline-block;position:relative;
}
.nav__list a::after{
  content:"";position:absolute;left:0;right:0;bottom:.1em;height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);
}
@media (hover:hover){.nav__list a:hover::after{transform:scaleX(1)}}
.nav__meta{color:var(--muted);font-size:.95rem}
.nav__tel{
  display:inline-block;font-size:1.15rem;color:var(--ink);text-decoration:none;margin-bottom:8px;
}

/* =========================================================
   HERO
   ========================================================= */
.hero{padding-top:clamp(74px,9vw,96px);padding-bottom:clamp(56px,7vw,96px)}
.hero__grid{
  display:grid;
  grid-template-columns:minmax(120px,1fr) minmax(0,2.55fr) minmax(150px,1.62fr);
  grid-template-rows:auto auto 1fr auto;
  grid-template-areas:
    "shot1 head  shot3"
    "shot1 shot2 shot3"
    "tag   shot2 shot3"
    "cta   cta   shot3";
  column-gap:clamp(16px,3vw,44px);
  row-gap:clamp(14px,2vw,26px);
  align-items:start;
}
.hero__shot{margin:0;overflow:hidden}
.hero__shot img{width:100%;transition:transform .8s var(--ease)}
@media (hover:hover){.hero__shot:hover img{transform:scale(1.035)}}
.hero__shot--1{grid-area:shot1;aspect-ratio:800/1240}
.hero__shot--2{grid-area:shot2;aspect-ratio:780/980;width:min(100%,215px);margin-inline:auto}
.hero__shot--3{grid-area:shot3;align-self:stretch;min-height:0;position:relative;margin-top:clamp(16px,4vw,58px)}
.hero__shot--3 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__shot--1 img{height:100%;object-fit:cover}

.hero__head{grid-area:head;text-align:center;padding-top:clamp(4px,1.4vw,18px);container-type:inline-size}
.wordmark{
  font-family:var(--disp);
  font-weight:400;
  /* Rueckfall fuer Browser ohne Containerabfrage */
  font-size:clamp(2.6rem,6vw,5.4rem);
  /* Die Wortmarke ist EIN Wort und kann nicht umbrechen. Sie muss sich deshalb an der
     BREITE IHRER SPALTE messen, nicht am Viewport, sonst laeuft sie unter das rechte Bild. */
  font-size:min(7rem,17.5cqw);
  line-height:1;
  letter-spacing:.045em;
  margin-top:.12em;
  font-variation-settings:"opsz" 96;
  white-space:nowrap;
}
.hero__tag{grid-area:tag;color:var(--ink);font-size:clamp(.95rem,1.2vw,1.05rem);line-height:1.5;align-self:end;padding-bottom:6px}
.hero .btn--wide{grid-area:cta;align-self:end}

@media (max-width:860px){
  .hero__grid{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto auto auto;
    grid-template-areas:
      "head  head"
      "shot1 shot3"
      "shot2 tag"
      "cta   cta";
  }
  .hero__shot--3{position:static;aspect-ratio:800/1240;margin-top:0}
  .hero__shot--3 img{position:static;height:100%;object-fit:cover}
  .hero__shot--2{width:100%;aspect-ratio:780/980}
  .hero__tag{align-self:center}
}

/* =========================================================
   ÜBER UNS
   ========================================================= */
.about{padding-block:clamp(46px,6vw,84px)}
.about__top{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.28fr);
  gap:clamp(20px,4vw,56px);align-items:start;
  margin-bottom:clamp(30px,4vw,54px);
}
.about__lead{font-size:clamp(1rem,1.25vw,1.08rem);line-height:1.55}

.about__body{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.28fr);
  gap:clamp(20px,4vw,56px);
  align-items:start;
}
.about__pic{margin:0;overflow:hidden}
.about__pic img{width:100%;aspect-ratio:1040/845;object-fit:cover;transition:transform .8s var(--ease)}
@media (hover:hover){.about__pic:hover img{transform:scale(1.035)}}
.about__text{display:grid;gap:1.15em;padding-top:4px}
.about__text b{font-weight:500}
.about__quote{
  grid-column:1 / -1;
  border:1px solid var(--line);
  padding:clamp(22px,3vw,40px) clamp(20px,3vw,44px);
  margin-left:clamp(0px,24vw,340px);
  margin-top:clamp(-96px,-6vw,-24px);
  background:var(--paper);
  position:relative;z-index:2;
}
.about__quote p{font-size:clamp(1rem,1.5vw,1.28rem);line-height:1.5}

@media (max-width:860px){
  .about__top,.about__body{grid-template-columns:1fr}
  .about__quote{margin-left:0;margin-top:0}
}

/* =========================================================
   WARUM ZU UNS
   ========================================================= */
.why{padding-block:clamp(46px,6vw,84px)}
.grid8{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.cell{background:var(--paper);padding:clamp(18px,2.2vw,30px);margin:0;min-height:clamp(150px,17vw,215px)}
.cell h3{font-size:clamp(1rem,1.25vw,1.12rem);font-weight:400;margin-bottom:.85em;line-height:1.3}
.cell p{color:var(--muted);font-size:.94rem;line-height:1.55}
.cell--img{padding:0;overflow:hidden}
.cell--img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
@media (hover:hover){.cell--img:hover img{transform:scale(1.05)}}

@media (max-width:900px){
  .grid8{grid-template-columns:repeat(2,1fr)}
  .cell--img{min-height:180px}
}
@media (max-width:520px){
  .grid8{grid-template-columns:1fr}
}

/* =========================================================
   LEISTUNGEN
   ========================================================= */
.services{padding-block:clamp(46px,6vw,84px)}
.cat{border-top:1px solid var(--line)}
.cat:first-of-type{border-top:0}
.cat__title{margin:0}
.cat__btn{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:clamp(14px,1.8vw,22px) 2px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  cursor:pointer;text-align:left;
  font-size:clamp(1.02rem,1.5vw,1.32rem);font-weight:300;
}
.cat__btn span{position:relative;display:inline-block}
.cat__btn span::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);
}
.arrow{width:22px;height:22px;flex:none;transition:transform .4s var(--ease)}
.cat__btn[aria-expanded="false"] .arrow{transform:rotate(90deg)}
@media (hover:hover){
  .cat__btn:hover span::after{transform:scaleX(1)}
  .cat__btn:hover .arrow{transform:translate(3px,-3px)}
  .cat__btn[aria-expanded="false"]:hover .arrow{transform:rotate(90deg) translate(-3px,-3px)}
}

.cat__panel{padding-block:clamp(22px,3vw,38px)}
.cat__in{
  display:grid;grid-template-columns:minmax(150px,.72fr) minmax(0,2.6fr);
  gap:clamp(18px,3vw,44px);align-items:start;
}

/* Unterpunkte links */
.sublist{padding-top:6px}
.sub{
  width:100%;background:transparent;border:0;cursor:pointer;
  display:flex;align-items:center;gap:14px;
  padding:9px 0;text-align:left;
  font-size:clamp(.98rem,1.15vw,1.08rem);font-weight:300;
  color:var(--muted);
  transition:color .3s var(--ease);
}
.sub i{
  position:relative;width:13px;height:13px;flex:none;
}
.sub i::before,.sub i::after{
  content:"";position:absolute;background:currentColor;
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.sub i::before{left:0;right:0;top:6px;height:1px}
.sub i::after{top:0;bottom:0;left:6px;width:1px}
.sub[aria-expanded="true"]{color:var(--ink)}
.sub[aria-expanded="true"] i::after{opacity:0;transform:scaleY(0)}
@media (hover:hover){.sub:hover{color:var(--ink)}}

/* Karte rechts */
.card{
  border:1px solid var(--line);
  padding:clamp(20px,2.6vw,34px);
  display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,.9fr);
  gap:clamp(20px,3vw,40px);
  align-items:start;
}
.card--plain{grid-template-columns:minmax(0,1fr);max-width:none}
.card__body h4{font-family:var(--sans);font-size:clamp(1rem,1.2vw,1.1rem);font-weight:400;margin-bottom:.8em}
.card__body>.pane>p{color:var(--muted);font-size:.94rem;line-height:1.6;margin-bottom:1.6em}

.price{margin-bottom:clamp(20px,2.6vw,30px)}
.price>div{
  display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding:11px 2px;border-bottom:1px solid var(--line-soft);
  transition:padding-left .3s var(--ease);
}
.price>div:first-child{border-top:1px solid var(--line-soft)}
.price dt{font-size:.95rem}
.price dd{margin:0;font-size:.95rem;white-space:nowrap;font-variant-numeric:tabular-nums}
@media (hover:hover){.price>div:hover{padding-left:8px}}

.card--plain .price{max-width:640px}
.card--plain .btn--wide{max-width:640px}

/* Arbeiten-Karussell */
.works{position:relative;text-align:center}
.works__label{font-size:.92rem;color:var(--muted);margin-bottom:14px}
.works__view{position:relative;overflow:hidden;margin-inline:auto;max-width:230px}
.works__view img{width:100%;aspect-ratio:700/880;object-fit:cover}
.works__nav{
  position:absolute;top:calc(50% + 8px);transform:translateY(-50%);
  width:34px;height:34px;border:0;background:transparent;cursor:pointer;
  display:grid;place-items:center;color:var(--ink);
  transition:transform .3s var(--ease),opacity .3s var(--ease);
}
.works__nav svg{width:11px;height:15px}
.works__nav--prev{left:-6px}
.works__nav--next{right:-6px}
@media (hover:hover){
  .works__nav--prev:hover{transform:translate(-4px,-50%)}
  .works__nav--next:hover{transform:translate(4px,-50%)}
}

.dots{display:flex;justify-content:center;gap:7px;margin-top:16px}
.dots button{
  width:7px;height:7px;padding:0;border:1px solid var(--line);border-radius:50%;
  background:transparent;cursor:pointer;transition:background .3s var(--ease),transform .3s var(--ease);
}
.dots button[aria-current="true"]{background:var(--ink);border-color:var(--ink)}
@media (hover:hover){.dots button:hover{transform:scale(1.35)}}

.services__note{margin-top:clamp(22px,3vw,34px);color:var(--muted);font-size:.85rem;max-width:70ch}

@media (max-width:880px){
  .cat__in{grid-template-columns:1fr}
  .card{grid-template-columns:1fr}
  .works__view{max-width:200px}
}

/* =========================================================
   BEWERTUNGEN
   ========================================================= */
.reviews{padding-block:clamp(46px,6vw,84px)}
.rev{display:flex;align-items:center;gap:clamp(6px,2vw,24px)}
.rev__box{flex:1;border:1px solid var(--line);padding:clamp(20px,3vw,40px)}
.rev__item{
  display:grid;grid-template-columns:minmax(120px,180px) minmax(0,1fr);
  gap:clamp(20px,3vw,44px);align-items:start;margin:0;
}
.rev__item img{width:100%;aspect-ratio:480/600;object-fit:cover}
.rev__item h3{font-size:clamp(1.05rem,1.4vw,1.25rem);font-weight:500;margin-bottom:2px}
.rev__date{color:var(--muted);font-size:.85rem;margin-bottom:1.2em !important}
.rev__item figcaption p{font-size:.96rem;line-height:1.62}
.rev__nav{
  width:40px;height:40px;flex:none;border:0;background:transparent;cursor:pointer;
  display:grid;place-items:center;transition:transform .3s var(--ease);
}
.rev__nav svg{width:12px;height:16px}
@media (hover:hover){
  .rev__nav--prev:hover{transform:translateX(-4px)}
  .rev__nav--next:hover{transform:translateX(4px)}
}
.dots--rev{margin-top:22px}

@media (max-width:640px){
  .rev__item{grid-template-columns:1fr}
  .rev__item img{max-width:200px}
}

/* =========================================================
   TEAM
   ========================================================= */
.team{padding-block:clamp(46px,6vw,84px)}
.team__grid{
  display:grid;grid-template-columns:minmax(150px,.66fr) minmax(0,2.6fr);
  gap:clamp(20px,3vw,52px);align-items:start;
}
.team__stage{position:relative}
.rail{
  display:grid;grid-auto-flow:column;
  grid-auto-columns:calc(50% - clamp(8px,1.25vw,17px));
  gap:clamp(16px,2.5vw,34px);
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
}
.rail::-webkit-scrollbar{display:none}
.rail li{scroll-snap-align:start}
.rail figure{margin:0}
.rail img{width:100%;aspect-ratio:640/860;object-fit:cover;transition:transform .8s var(--ease)}
.rail li{overflow:hidden}
@media (hover:hover){.rail li:hover img{transform:scale(1.04)}}
.rail figcaption{text-align:center;padding-top:16px}
.rail figcaption h3{font-size:1.02rem;font-weight:400;margin-bottom:10px}
.rail figcaption p{font-size:.95rem;margin-bottom:8px}
.team__exp{color:var(--muted);font-size:.86rem}
.rail__nav{
  position:absolute;right:-34px;top:38%;
  width:36px;height:36px;border:0;background:transparent;cursor:pointer;
  display:grid;place-items:center;transition:transform .3s var(--ease);
}
.rail__nav svg{width:12px;height:16px}
@media (hover:hover){.rail__nav:hover{transform:translateX(4px)}}

@media (max-width:1080px){.rail__nav{right:-8px;top:auto;bottom:-4px}}
@media (max-width:820px){
  .team__grid{grid-template-columns:1fr}
  .sublist--team{display:flex;flex-wrap:wrap;gap:0 22px}
  .sublist--team li{flex:0 0 auto}
  .rail{grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .rail__nav{display:none}
}

/* =========================================================
   KONTAKT
   ========================================================= */
.contact{padding-block:clamp(46px,6vw,84px)}
.contact__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
  gap:clamp(24px,4vw,60px);align-items:start;
}
.contact__info{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,3vw,38px) clamp(18px,3vw,40px);
  align-items:start;
}
.contact__block h3{font-size:1rem;font-weight:500;margin-bottom:.7em}
.contact__block p{font-size:.98rem;color:var(--muted)}
.contact__block a{text-decoration:none;position:relative}
.contact__block a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);
}
@media (hover:hover){.contact__block a:hover::after{transform:scaleX(1)}}
.contact__msg{display:flex;gap:12px}
.contact__info .btn{grid-column:1 / -1;justify-self:start;width:min(100%,300px)}

.circle{
  width:38px;height:38px;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;color:var(--ink);
  transition:transform .3s var(--ease),background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.circle svg{width:19px;height:19px}
.circle::after{display:none}
@media (hover:hover){
  .circle:hover{transform:translateY(-3px);background:var(--ink);color:var(--paper);border-color:var(--ink)}
}

.contact__map{margin:0;border:1px solid var(--line);padding:1px}
.contact__map img{width:100%;aspect-ratio:1120/900;object-fit:cover}
.contact__map figcaption{font-size:.78rem;color:var(--muted);padding:7px 8px 4px}

@media (max-width:900px){
  .contact__grid{grid-template-columns:1fr}
}
@media (max-width:520px){
  .contact__info{grid-template-columns:1fr}
}

/* =========================================================
   FUSSZEILE
   ========================================================= */
.foot{padding-block:clamp(30px,4vw,44px) clamp(34px,4vw,54px);border-top:1px solid var(--line);margin-top:clamp(30px,5vw,60px)}
.foot__top{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;margin-bottom:clamp(24px,3vw,40px)}
.foot__mark{font-family:var(--disp);font-size:clamp(1.2rem,2vw,1.6rem);letter-spacing:.14em;text-decoration:none}
.foot__nav{display:flex;flex-wrap:wrap;gap:clamp(18px,3.4vw,52px)}
.foot__nav a{text-decoration:none;font-size:.98rem;position:relative}
.foot__nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);
}
@media (hover:hover){.foot__nav a:hover::after{transform:scaleX(1)}}
.foot__bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:26px;flex-wrap:wrap}
.foot__legal p{font-size:.86rem;color:var(--muted);margin-bottom:6px}
.foot__legal a{text-decoration:none}
@media (hover:hover){.foot__legal a:hover{text-decoration:underline}}
.foot__social{display:flex;gap:12px}

/* =========================================================
   MODAL
   ========================================================= */
.modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:18px}
.modal__scrim{position:absolute;inset:0;background:rgba(25,24,23,.5)}
.modal__box{
  position:relative;background:var(--paper);border:1px solid var(--line);
  width:min(560px,100%);max-height:min(88vh,900px);overflow-y:auto;
  padding:clamp(24px,4vw,44px);
}
.modal__box--video{width:min(880px,100%)}
.modal__x{
  position:absolute;top:12px;right:12px;width:40px;height:40px;
  border:0;background:transparent;cursor:pointer;display:grid;place-items:center;
  transition:transform .3s var(--ease);
}
.modal__x svg{width:20px;height:20px}
@media (hover:hover){.modal__x:hover{transform:rotate(90deg)}}
.modal__title{font-size:clamp(1.5rem,3vw,2.2rem);margin-bottom:.5em}
.modal__lead{color:var(--muted);font-size:.92rem;margin-bottom:1.6em}

.form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:grid;gap:6px;grid-column:1 / -1}
.field--half{grid-column:auto}
.field label{font-size:.86rem;color:var(--muted)}
.field input,.field select,.field textarea{
  -webkit-appearance:none;appearance:none;
  background:transparent;border:1px solid var(--line);border-radius:0;
  padding:11px 12px;width:100%;font-size:1rem;font-weight:300;
  transition:border-color .3s var(--ease);
}
.field textarea{resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink)}
.field [aria-invalid="true"]{border-color:#A4341F}
.err{color:#A4341F;font-size:.82rem}
.field--check label{display:flex;gap:10px;align-items:flex-start;font-size:.84rem;line-height:1.5;color:var(--muted)}
.field--check input{width:16px;height:16px;flex:none;margin-top:2px;border:1px solid var(--line)}
.field--check input:checked{background:var(--ink)}

.channel{grid-column:1 / -1;border:1px solid var(--line);padding:12px 14px;display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;margin:0}
.channel legend{font-size:.8rem;color:var(--muted);padding-inline:6px}
.channel label{display:flex;align-items:center;gap:8px;font-size:.94rem;cursor:pointer}
.channel input{width:15px;height:15px;accent-color:#191817}

.form .btn{grid-column:1 / -1}
.form__hint{grid-column:1 / -1;font-size:.8rem;color:var(--muted)}

.video{margin:0}
.video img{width:100%;aspect-ratio:16/9;object-fit:cover}
.video figcaption{font-size:.86rem;color:var(--muted);padding-top:12px}

/* =========================================================
   Einblenden beim Scrollen
   ========================================================= */
.js .reveal{opacity:0;transform:translateY(18px)}
.js .reveal.is-in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}

@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .js .reveal{opacity:1;transform:none}
}