/* ═══════════════════════════════════════════════════════════════
   Kosmetikstudio SchönZeit — Bausteine
   Hero mit Portrait, Philosophie, Leistungen, Video-Kategorien,
   Detailblatt, Öffnungszeiten. Ergänzt style.css.
   ═══════════════════════════════════════════════════════════════ */

.skip{
  position:absolute;left:-9999px;top:0;z-index:9999;
  background:var(--ink);color:var(--paper);padding:.9em 1.4em;border-radius:0 0 12px 0;
}
.skip:focus{left:0}

/* ══════════ Hero mit Portrait ══════════ */
.hero{
  min-height:auto;display:block;text-align:left;
  padding:clamp(120px,15vw,170px) 0 clamp(60px,8vw,90px);
}
.hero__grid{
  display:grid;grid-template-columns:1.08fr .92fr;
  gap:clamp(32px,5vw,72px);align-items:center;
}
.hero__h1{font-size:clamp(2.6rem,6.4vw,5rem);line-height:1.04;margin-bottom:1.4rem}
.hero__lede{font-size:clamp(1.05rem,1.4vw,1.18rem);color:var(--ink-2);max-width:56ch;margin:0}
.hero__lede b{font-weight:600;color:var(--ink)}
.hero__cta{justify-content:flex-start}
.hero__trust{justify-content:flex-start;text-align:left}
.hero__kick{font-size:.78rem;font-weight:500;letter-spacing:.16em}

.hero__me{
  position:relative;margin:0;border-radius:24px;overflow:hidden;
  box-shadow:var(--sh);background:var(--linen);
}
.hero__me img{width:100%;height:100%;object-fit:cover;object-position:50% 28%;aspect-ratio:4/5;display:block}
.hero__me figcaption{
  position:absolute;left:14px;right:14px;bottom:14px;
  background:rgba(253,250,246,.93);backdrop-filter:blur(10px);
  border:1px solid var(--gline);border-radius:16px;padding:.9rem 1.1rem;
}
.hero__me b{display:block;font-family:var(--serif);font-size:1.35rem;font-weight:600;color:var(--ink);line-height:1.2}
.hero__me span{display:block;font-size:.84rem;color:var(--ink-3);margin-top:.15rem}

/* ══════════ Mobile Fußpflege — Band ══════════ */
.mobil{padding-block:clamp(22px,3vw,32px);background:var(--sand);border-block:1px solid var(--gline)}
.mobil__in{display:flex;align-items:center;gap:clamp(16px,2.6vw,30px);flex-wrap:wrap}
.mobil__icon{
  width:56px;height:56px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--paper);border:1px solid var(--gline);color:var(--g3);
}
.mobil__icon svg{width:26px;height:26px}
.mobil__txt{flex:1;min-width:min(100%,260px)}
.mobil__txt h2{font-size:clamp(1.2rem,2.2vw,1.6rem);margin-bottom:.25rem}
.mobil__txt p{font-size:.96rem;color:var(--ink-2);margin:0}
.mobil__txt b{font-weight:600;color:var(--ink)}

/* ══════════ Video-Kategorien ══════════ */
.cat{width:100%;background:var(--paper)}
.cat__grid{
  display:grid;grid-template-columns:1fr;gap:0;
  opacity:0;transform:translateY(2.5rem);
  transition:opacity 1s var(--e-out),transform 1s var(--e-out);
}
.cat__grid.is-in{opacity:1;transform:none}
@media (min-width:640px){ .cat__grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1024px){ .cat__grid{grid-template-columns:repeat(4,1fr)} }

.cat-card{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;
  padding:1.5rem;min-height:340px;
}
@media (min-width:640px){ .cat-card{padding:2rem;min-height:440px} }
@media (min-width:1024px){ .cat-card{padding:2.2rem;min-height:620px} }
.cat-card__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--e-out);
}
.cat-card:hover .cat-card__video{transform:scale(1.05)}
.cat-card__veil{
  position:absolute;inset:0;
  background:
    linear-gradient(to right, rgba(253,250,246,.82) 0%, rgba(253,250,246,.46) 20%, rgba(253,250,246,.12) 38%, rgba(253,250,246,0) 52%),
    linear-gradient(to top, rgba(253,250,246,.74) 0%, rgba(253,250,246,.26) 18%, rgba(253,250,246,0) 36%);
  transition:opacity .5s ease;
}
.cat-card:hover .cat-card__veil{opacity:.9}
.cat-card__name{
  position:relative;z-index:10;margin:0;
  writing-mode:vertical-lr;transform:rotate(180deg);
  font-family:var(--serif);font-weight:600;line-height:1;
  font-size:2.2rem;color:var(--ink);
  text-shadow:0 1px 16px rgba(253,250,246,.95);
  transition:transform .5s var(--e-out);
}
@media (min-width:640px){ .cat-card__name{font-size:2.8rem} }
@media (min-width:1024px){ .cat-card__name{font-size:3.6rem} }
.cat-card:hover .cat-card__name{transform:rotate(180deg) translateY(-.4rem)}
.cat-card__btn{
  position:relative;z-index:10;margin-top:auto;
  background:var(--paper);color:var(--ink);border:1px solid var(--gline);
}
.cat-card__btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
@media (min-width:640px){
  .cat-card{border-right:1px solid rgba(255,255,255,.55)}
  .cat-card:nth-child(2n){border-right:0}
}
@media (min-width:1024px){
  .cat-card:nth-child(2n){border-right:1px solid rgba(255,255,255,.55)}
  .cat-card:last-child{border-right:0}
}

/* ══════════ Über mich + Philosophie ══════════ */
.ueber{padding-block:clamp(70px,9vw,130px) 0}
.ueber__in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,5vw,76px);align-items:center}
.ueber__txt p{color:var(--ink-2);margin-bottom:1rem}
.ueber__role{
  font-family:var(--sans);font-size:.86rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--g3);margin-bottom:.55rem;
}
/* Schwerpunkte, direkt unter der Rolle */
.ueber__spez{
  font-size:1.02rem;color:var(--ink-2);margin-bottom:1.6rem;max-width:40ch;
}
.ueber__motto{
  margin:1.6rem 0;padding-left:clamp(16px,2.5vw,26px);border-left:3px solid var(--g2);
  font-family:var(--serif);font-size:clamp(1.25rem,2.4vw,1.72rem);line-height:1.35;
}
.ueber__act{margin-top:1.8rem}
.ueber__pics{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.4vw,16px)}
.ueber__pics figure{margin:0;overflow:hidden;border-radius:20px;background:var(--linen)}
.ueber__pics img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4}
/* Portrait: Ausschnitt weiter nach oben, damit die Frisur komplett zu sehen ist */
.rev--portrait img{object-position:50% 8%}
.ueber__pics figure:first-child{border-radius:999px 999px 20px 20px}

.philo{
  margin-top:clamp(60px,8vw,110px);padding-block:clamp(60px,8vw,110px);
  background:var(--milk);border-top:1px solid var(--gline);
}
.philo__in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,5vw,76px);align-items:center}
.philo__txt p{color:var(--ink-2);margin-bottom:1.1rem}
.philo__txt b{font-weight:600;color:var(--ink)}
.philo__pts{display:grid;gap:.8rem;margin:1.4rem 0}
.philo__pts li{display:flex;align-items:flex-start;gap:.8rem;font-size:.98rem;color:var(--ink-2)}
.philo__claim{font-size:1.06rem}
.philo__pics{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.4vw,16px)}
.philo__pics figure{margin:0;overflow:hidden;border-radius:20px;background:var(--linen)}
.philo__pics img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4}

/* ══════════ Leistungen ══════════ */
.serv{padding-block:clamp(70px,9vw,130px)}
.serv__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px)}
.scard{
  display:flex;flex-direction:column;text-align:left;
  border:1px solid var(--gline);border-radius:20px;overflow:hidden;background:var(--milk);
  transition:transform .5s var(--e-out),box-shadow .5s var(--e),border-color .4s var(--e);
}
.scard:hover,.scard:focus-visible{transform:translateY(-5px);box-shadow:var(--sh);border-color:var(--g2)}
.scard:focus-visible{outline:2px solid var(--g2);outline-offset:3px}
.scard__img{display:block;overflow:hidden;aspect-ratio:4/3;background:var(--linen)}
.scard__img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--e-out)}
.scard:hover .scard__img img{transform:scale(1.06)}
.scard__b{display:block;padding:clamp(18px,2.2vw,26px)}
.scard__b b{
  display:block;font-family:var(--serif);font-size:clamp(1.3rem,2.2vw,1.65rem);
  font-weight:600;color:var(--ink);line-height:1.2;
}
.scard__b i{display:block;font-style:normal;font-size:.94rem;color:var(--ink-3);margin-top:.4rem}
.scard__b em{
  display:inline-flex;align-items:center;gap:.5em;margin-top:.9rem;font-style:normal;
  font-size:.8rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--g3);
}
.scard__b em::after{content:"\203A";font-size:1.3em;line-height:1;transition:transform .35s var(--e)}
.scard:hover .scard__b em::after{transform:translateX(4px)}

/* ══════════ Detailblatt ══════════ */
.sheet{position:fixed;inset:0;z-index:300;display:flex;align-items:flex-end;justify-content:center}
.sheet__bg{
  position:absolute;inset:0;background:rgba(47,38,28,.44);
  opacity:0;transition:opacity .35s var(--e);backdrop-filter:blur(3px);
}
.sheet.open .sheet__bg{opacity:1}
.sheet__box{
  position:relative;width:min(100%,780px);max-height:92svh;overflow-y:auto;
  background:var(--paper);border-radius:26px 26px 0 0;
  padding:clamp(26px,4vw,44px) clamp(20px,3.4vw,44px) clamp(20px,3vw,32px);
  transform:translateY(100%);transition:transform .45s var(--e-out);
  box-shadow:0 -20px 60px -30px rgba(47,38,28,.5);
}
.sheet.open .sheet__box{transform:none}
.sheet__x{
  position:sticky;top:0;float:right;margin:-8px -8px 0 0;
  width:46px;height:46px;border-radius:50%;border:1px solid var(--gline);
  background:var(--paper);color:var(--ink);display:grid;place-items:center;z-index:3;
}
.sheet__x svg{width:20px;height:20px}
.sheet__x:hover{background:var(--ink);color:var(--paper)}
.sheet__head{margin-bottom:1.8rem}
.sheet__head h2{font-size:clamp(1.7rem,3.4vw,2.4rem);margin-bottom:.7rem}
.sheet__head p{color:var(--ink-3)}
.sheet__list{display:grid;gap:14px}
.sitem{border:1px solid var(--gline);border-radius:16px;padding:clamp(16px,2.2vw,22px);background:var(--milk)}
.sitem__h{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.sitem__h h3{font-size:clamp(1.12rem,1.9vw,1.32rem);margin:0}
.sitem__p{font-family:var(--serif);font-size:1.25rem;font-weight:600;color:var(--g3);white-space:nowrap}
.sitem__d{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);margin:.3rem 0 .7rem}
.sitem__t{font-size:.97rem;color:var(--ink-2);margin-bottom:1rem}
.sheet__foot{margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--gline)}

/* ══════════ Schnellkontakt ══════════ */
.quick{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.quick__or{
  display:flex;align-items:center;gap:1rem;max-width:420px;margin:2rem auto 1.6rem;
  color:var(--ink-4);font-size:.86rem;
}
.quick__or::before,.quick__or::after{content:"";flex:1;height:1px;background:var(--gline)}

/* ══════════ Öffnungszeiten ══════════ */
.hours{
  max-width:520px;margin:clamp(40px,5vw,60px) auto 0;
  border:1px solid var(--gline);border-radius:20px;overflow:hidden;background:var(--paper);
}
.hours h3{
  font-family:var(--sans);font-size:.8rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);padding:1.1rem 1.4rem;border-bottom:1px solid var(--gline);background:var(--milk);
}
.hours dl{display:grid;grid-template-columns:1fr auto;padding:.4rem 1.4rem 1.1rem}
.hours dt,.hours dd{padding:.62rem 0;font-size:1rem;border-bottom:1px solid rgba(160,123,78,.12)}
.hours dt{color:var(--ink-2)}
.hours dd{text-align:right;color:var(--ink);font-weight:500}
.hours dd.soft{color:var(--g3)}
.hours dd.off{color:var(--ink-4);font-weight:400}
.hours dl > :nth-last-child(-n+2){border-bottom:0}

/* offene Punkte im Entwurf */
[data-todo]{background:rgba(180,85,63,.1);color:#A4472F;padding:.12em .45em;border-radius:4px;font-size:.92em}

/* ══════════ Responsive ══════════ */
@media (max-width:1080px){
  /* Auf schmalen Schirmen braucht das Logo den Platz — das Dock unten
     bietet den WhatsApp-Kontakt ohnehin dauerhaft an. */
  .hd__act .pill--wa{display:none}
  .serv__grid{grid-template-columns:1fr 1fr}
  .ueber__in,.philo__in{grid-template-columns:1fr;gap:38px}
  .hero__grid{grid-template-columns:1fr;gap:36px}
  .hero__me{max-width:440px;margin-inline:auto;width:100%}
}
@media (max-width:760px){
  .serv__grid{grid-template-columns:1fr}
  .mobil__in{flex-direction:column;text-align:center}
  .mobil__in .pill{width:100%}
  .ueber__pics figure:first-child{border-radius:20px}
  .sheet__box{border-radius:22px 22px 0 0;max-height:94svh}
  .hero{padding-top:clamp(104px,24vw,140px)}
}