/* ===========================================================================
   frisuren.css – Übersichtsseite aller Frisuren (/ratgeber/frisuren)
   ---------------------------------------------------------------------------
   Ergänzt frisur.css (wird zusätzlich geladen). Enthält nur das, was die
   Übersicht braucht: animiertes Start-Logo, Hero, Frisuren-Grid, Inline-CTA.
   Farben, Fonts und Design-Tokens kommen aus frisur.css.
   =========================================================================== */

/* --- Hero ---------------------------------------------------------------- */
.fl-hero{max-width:var(--maxw);margin:0 auto;padding:2.6rem 1.3rem 1.4rem;text-align:center}
/* Zwei Zeilen statt eines Gedankenstrichs: oben die Aussage, darunter der
   Zusatz mit der Anzahl. Bricht auf jedem Bildschirm an derselben Stelle um
   und wirkt dadurch ruhiger als ein durchlaufender langer Titel. */
.fl-hero h1{
  margin:0 auto .95rem;
  max-width:22ch;
  letter-spacing:-.005em;
  text-wrap:balance;
}
/* Zeilenabstand großzügig genug für Umlaute: Bei engem Satz stoßen die Punkte
   von Ü und Ä an die Unterlängen der Zeile darüber. */
.fl-h1-main{display:block;font-size:clamp(2.1rem,6.2vw,3.6rem);line-height:1.18}
.fl-h1-sub{display:block;margin-top:.34rem;font-size:clamp(1.02rem,2.6vw,1.45rem);
  color:var(--cream-soft);letter-spacing:.005em}
@media (max-width:560px){
  .fl-hero h1{max-width:18ch}
  .fl-h1-sub{margin-top:.42rem}
}
.fl-hero-lead{color:var(--cream-soft);max-width:62ch;margin:0 auto 1rem;font-size:1.02rem}
.fl-hero-lead + .fl-hero-lead{margin-top:-.2rem}
/* Der Abstand zwischen Einleitung und Frisurenbereich addierte sich aus vier
   Einzelwerten auf über 5rem. Die drei folgenden Regeln nehmen die
   überflüssigen heraus - sie greifen nur hier, weil der Hero-Block auf den
   Frisurenseiten nicht vorkommt. */
.fl-hero-lead:last-of-type{margin-bottom:0}
.fl-hero + .fp-body{padding-top:0}
.fl-hero + .fp-body > .fp-section:first-child{padding-top:1.4rem}
@media (min-width:940px){
  .fl-hero{padding-top:3rem}
  .fl-hero-lead{font-size:1.06rem}
}

/* --- Start-Logo (identisch zum Quiz-Start, formgenau maskiert) ------------ */
.brand-logo{
  position:relative;z-index:2;margin:0 auto 1.4rem;width:min(300px,64vw);
  animation:logo-drop 1s cubic-bezier(.2,.8,.2,1) both;
  transform-style:preserve-3d;perspective:800px;
}
.brand-logo .logo-img{
  position:relative;display:block;width:100%;
  animation:logo-float 5.5s ease-in-out infinite 1s;
  transition:transform .35s ease,filter .35s ease;will-change:transform;
}
.brand-logo .logo-img img{display:block;width:100%;height:auto;filter:drop-shadow(0 10px 30px rgba(0,0,0,.55))}
.brand-logo .logo-sheen{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(115deg,transparent 38%,rgba(255,240,200,.5) 47%,rgba(255,255,255,.85) 50%,rgba(255,240,200,.5) 53%,transparent 62%);
  background-size:250% 100%;background-position:200% 0;
  mix-blend-mode:screen;opacity:0;
  -webkit-mask:url(../img/hairbase-logo.png) center / 100% 100% no-repeat;
          mask:url(../img/hairbase-logo.png) center / 100% 100% no-repeat;
  animation:logo-sheen 6.5s ease-in-out 1.1s infinite;
}
.brand-logo::before{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:118%;height:130%;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(200,162,74,.26),transparent 70%);
  filter:blur(16px);animation:logo-glow 4s ease-in-out infinite;
}
.brand-logo:hover .logo-img{transform:rotateX(6deg) rotateY(-6deg) scale(1.03);filter:drop-shadow(0 14px 38px rgba(200,162,74,.4))}

@keyframes logo-drop{
  0%{opacity:0;transform:translateY(-34px) scale(.9)}
  60%{opacity:1}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes logo-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes logo-sheen{
  0%{background-position:200% 0;opacity:0}
  4%{opacity:1}
  22%{background-position:-120% 0;opacity:0}
  100%{background-position:-120% 0;opacity:0}
}
@keyframes logo-glow{
  0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(1)}
  50%{opacity:.85;transform:translate(-50%,-50%) scale(1.06)}
}


/* --- Filterleiste (Haarlänge) --------------------------------------------- */
.fl-filter{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin:0 0 1.6rem;
  padding:.85rem 1.1rem;background:var(--ink-800);border:1px solid var(--ink-600);border-radius:14px}
.fl-fgroup-t{font-family:Oswald,sans-serif;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.12em;color:var(--muted);flex:none}
.fl-fchips{display:flex;flex-wrap:wrap;gap:.4rem}
.fl-chip{display:inline-flex;align-items:center;gap:.45rem;font-family:Oswald,sans-serif;
  font-size:.85rem;letter-spacing:.02em;color:var(--cream-soft);background:transparent;
  border:1px solid var(--ink-600);border-radius:999px;padding:.42rem .9rem;cursor:pointer;
  transition:border-color .18s,color .18s,background .18s;white-space:nowrap}
/* Hover nur leicht aufhellen. Vorher war er goldumrandet - also optisch
   kaum vom aktiven Zustand zu unterscheiden. Dadurch wirkte ein gerade
   abgewählter Filter weiterhin ausgewählt, solange die Maus darauf stand. */
.fl-chip:hover{border-color:var(--ink-500);color:var(--cream)}
/* Aktive Knöpfe behalten beim Hover ihr Gold. */
.fl-chip.is-on:hover{border-color:var(--gold);background:rgba(200,162,74,.22)}
.fl-chip.is-on{background:rgba(200,162,74,.16);border-color:var(--gold);color:var(--gold-bright)}
/* Nach einem Mausklick bleibt sonst der weiße Standard-Fokusring des Browsers
   stehen. Bei Bedienung per Tastatur muss er sichtbar bleiben - dafür sorgt
   :focus-visible, das nur beim Durchtabben greift. */
.fl-chip:focus{outline:none}
.fl-chip:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px}
.fl-chip-n{font-size:.73rem;color:var(--muted);font-variant-numeric:tabular-nums}
.fl-chip.is-on .fl-chip-n{color:var(--gold-bright)}

/* Aus- und einblenden ohne Sprung im Layout */
.fl-item.is-hidden,.fl-inline.is-hidden{display:none}

@media (max-width:600px){
  .fl-filter{padding:.75rem .85rem;gap:.6rem}
  .fl-chip{font-size:.8rem;padding:.38rem .75rem}
}

/* --- Frisuren-Grid ------------------------------------------------------- */
.fl-grid{
  display:grid;gap:1.1rem;list-style:none;margin:0;padding:0;
  grid-template-columns:1fr;                     /* Mobil: 1 Spalte */
}
@media (min-width:600px){ .fl-grid{grid-template-columns:repeat(2,1fr);gap:1.2rem} }   /* Tablet */
@media (min-width:940px){ .fl-grid{grid-template-columns:repeat(3,1fr);gap:1.4rem} }   /* Desktop */

.fl-card{
  display:flex;flex-direction:column;height:100%;
  background:var(--ink-800);border:1px solid var(--ink-600);border-radius:16px;
  overflow:hidden;color:var(--cream);text-decoration:none;
  transition:border-color .22s ease,transform .22s ease,box-shadow .22s ease;
}
a.fl-card:hover,a.fl-card:focus-visible{
  border-color:var(--gold);transform:translateY(-3px);text-decoration:none;
  box-shadow:0 24px 44px -26px rgba(0,0,0,.9),0 0 0 1px rgba(228,198,106,.16);
}
a.fl-card:hover .fl-card-img img{transform:scale(1.04)}
a.fl-card:hover .fl-card-name svg{transform:translateX(3px)}

/* 3:4 wie die hinterlegten Bilder (600x800) - so wird nichts
   beschnitten. Gilt auf allen Bildschirmgrößen gleich. */
.fl-card-img{aspect-ratio:3/4;overflow:hidden;background:var(--ink-700);display:grid;place-items:center}
.fl-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.fl-card-noimg{font-family:'Bebas Neue',Oswald,sans-serif;font-size:2.4rem;color:var(--muted)}

.fl-card-body{display:flex;flex-direction:column;gap:.35rem;padding:.95rem 1rem 1.1rem;flex:1}
.fl-card-name{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  font-family:Oswald,sans-serif;font-weight:600;font-size:1.02rem;line-height:1.25;color:var(--cream);margin:0;
}
.fl-card-name svg{color:var(--gold);flex:none;transition:transform .22s ease}
.fl-card-sub{margin:0;color:var(--muted);font-size:.88rem;line-height:1.45}
.fl-card-more{
  margin-top:auto;padding-top:.7rem;font-family:Oswald,sans-serif;font-size:.74rem;
  text-transform:uppercase;letter-spacing:.1em;color:var(--gold-bright);
}

/* --- Inline-CTA zwischen den beiden Grid-Blöcken -------------------------- */
/* Der Style-Check-Hinweis sitzt im Raster und nimmt alle Spalten ein.
   Dadurch rücken die Kacheln beim Filtern über ihn hinweg nach. */
.fl-inline{
  grid-column:1/-1;position:relative;overflow:hidden;margin:.3rem 0;
  border-radius:18px;padding:1.9rem 1.4rem;text-align:center;
  background:linear-gradient(135deg,#241b10,#1a150e 62%);
  border:1px solid rgba(228,198,106,.3);
  box-shadow:0 0 0 1px rgba(200,162,74,.12),0 34px 70px -40px rgba(0,0,0,.9);
}
.fl-inline::before{
  content:"";position:absolute;inset:-2px;pointer-events:none;
  background:radial-gradient(560px 180px at 50% -30%,rgba(228,198,106,.2),transparent 70%);
}
.fl-inline-in{position:relative}
.fl-inline h2{font-size:clamp(1.3rem,3.2vw,1.75rem);margin:0 0 .5rem}
.fl-inline p{color:var(--cream-soft);max-width:52ch;margin:0 auto 1.3rem;font-size:.97rem}

/* --- Abschnittskopf über dem Grid ---------------------------------------- */
/* Überschrift, Beschreibung und Hinweis mittig - linksbündig wirkten sie
   über der breiten Filterleiste verloren. */
.fl-sec-head{max-width:var(--prose);margin:0 auto 1.5rem;text-align:center}
.fl-sec-head h2{font-size:clamp(1.5rem,3.5vw,2rem);margin:0 0 .4rem}
.fl-sec-head p{color:var(--muted);margin:0 auto;max-width:64ch}
.fl-sec-head .ai-note{
  margin:.95rem auto 0;align-items:flex-start;border-radius:12px;max-width:62ch;text-align:left;
}
.fl-sec-head .ai-note .ai-note-tag{margin-top:.14rem;flex:none}

/* --- Feinschliff kleine Screens ------------------------------------------ */
@media (max-width:480px){
  .fl-hero{padding-top:1.8rem}
  .fl-card-body{padding:.85rem .9rem 1rem}
  .fl-inline{padding:1.6rem 1.1rem}
}

@media (prefers-reduced-motion:reduce){
  .brand-logo,.brand-logo .logo-img,.brand-logo .logo-sheen,.brand-logo::before{animation:none!important}
  .fl-card,.fl-card-img img,.fl-card-name svg{transition:none!important}
  a.fl-card:hover{transform:none}
}