/* ============================================================
   ENHANCE — seitenweite Design-Verfeinerungen (Okt. 2026)
   Wird auf allen Seiten NACH styles.css und Inline-Styles geladen.
   ============================================================ */

/* ---------- Moderne Grundlagen ---------- */
@view-transition{ navigation:auto; }
::view-transition-old(root), ::view-transition-new(root){ animation-duration:.35s; }
html{ scroll-padding-top:96px; }
h1, h2, h3, .title, .band h2{ text-wrap:balance; }
p, .lead, li{ text-wrap:pretty; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* ---------- Navigation: nichts bricht mehr um ---------- */
.nav__links a{ white-space:nowrap; }
@media (max-width:1560px) and (min-width:1041px){
  .nav__links{ gap:clamp(14px,1.4vw,26px); }
  .nav__links a{ font-size:12.5px; }
  .brand__wm small{ display:none; }
}
@media (max-width:1360px) and (min-width:1041px){
  .nav__cta a.btn--ghost[href^="tel"]{ display:none; }
}

/* ---------- Buttons: Lichtkante + Pfeil-Impuls ---------- */
.btn--accent{ position:relative; overflow:hidden; isolation:isolate; }
.btn--accent::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(110deg, transparent 30%, oklch(1 0 0 / 0.38) 50%, transparent 70%); transform:translateX(-120%); transition:transform .8s var(--ease); }
.btn--accent:hover::after{ transform:translateX(120%); }
.btn svg{ transition:transform .3s var(--ease); }
.btn:hover svg{ transform:translateX(4px); }

/* ---------- Kicker-Linie zeichnet sich ein ---------- */
.kicker .rule{ transform-origin:left; }
.kicker.reveal .rule{ transform:scaleX(0); transition:transform 1.1s var(--ease) .25s; }
.kicker.reveal.in .rule{ transform:scaleX(1); }

/* ============================================================
   NAHTLOSE BILDER — keine harten Rahmen mehr
   ============================================================ */
.about__media img,
.about__proof,
.gallery figure,
.gcl-photo,
.trans figure,
.blogfig,
.social__tile,
.presscard__photo{ border:0 !important; border-radius:12px; }
.presscard__photo{ overflow:hidden; }
.about__proof{ overflow:hidden; background:var(--ink-2); }
.about__proof span{ border-top:0 !important; background:linear-gradient(0deg, var(--ink-2), transparent); }
.trans figure{ overflow:hidden; border-radius:12px; background:linear-gradient(180deg, var(--ink-2), var(--ink)); box-shadow:0 1px 0 oklch(1 0 0 / 0.05) inset; }
.trans__img{ border-radius:12px 16px 0 0; }
.gallery figure, .gcl-photo, .social__tile{ overflow:hidden; box-shadow:0 30px 60px -40px oklch(0 0 0 / 0.9); }

/* Weicher Übergang am Bildrand (statt harter Kante) */
.about__media, .gcl-photo, .gallery figure, .social__tile, .trans__img{ position:relative; }
.about__media::after{ content:""; position:absolute; left:0; right:0; top:0; aspect-ratio:4/5; border-radius:12px; pointer-events:none;
  box-shadow:inset 0 0 0 1px oklch(1 0 0 / 0.06), inset 0 -90px 80px -60px oklch(0.10 0.003 60 / 0.75); }
.gcl-photo::after, .gallery figure::after, .social__tile::after, .trans__img::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 0 0 1px oklch(1 0 0 / 0.06), inset 0 -70px 70px -50px oklch(0.10 0.003 60 / 0.7); }

/* Vollflächige Bildbänder verschmelzen oben und unten mit der Seite */
.band::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, var(--ink) 0%, transparent 18%, transparent 80%, var(--ink) 100%); }
.band__inner{ z-index:3; }

/* Hero-Foto: weicher Übergang auch nach unten */
.hero__photo{ -webkit-mask-image:linear-gradient(180deg, #000 82%, transparent 100%); mask-image:linear-gradient(180deg, #000 82%, transparent 100%); }

/* Blog-Bilder: größer, rund, ohne Rahmen */
.blogfig{ max-width:620px; overflow:hidden; background:transparent !important; box-shadow:0 30px 70px -45px oklch(0 0 0 / 0.95); }
.blogfig img{ border-radius:12px; }
.blogfig figcaption{ border-top:0 !important; background:transparent; padding:12px 4px 0 !important; text-align:left !important; }

/* ---------- Bild-Einblendung beim Scrollen ---------- */
.fx-img{ clip-path:inset(6% 6% 6% 6% round 12px); opacity:0; transform:scale(1.04); transition:clip-path 1.1s var(--ease), opacity .9s var(--ease), transform 1.4s var(--ease); }
.fx-img.is-in{ clip-path:inset(0 0 0 0 round 12px); opacity:1; transform:none; }

/* ============================================================
   FÜLLENDE BALKEN
   ============================================================ */
.fx-bar{ display:block; height:4px; border-radius:100px; background:oklch(1 0 0 / 0.08); overflow:hidden; margin-top:14px; max-width:180px; }
.fx-bar i{ display:block; height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg, var(--accent-deep), var(--accent)); transition:width 1.6s var(--ease); }
.fx-bar.is-in i{ width:var(--w, 100%); }
.section--bone .fx-bar{ background:oklch(0.2 0.01 70 / 0.12); }
.rev__score .fx-bar{ margin-left:auto; }

/* Schritte (Methode / So läuft's): Fortschrittslinie füllt sich beim Scrollen */
.steps{ position:relative; }
.steps .fx-line{ position:absolute; left:-1px; top:0; bottom:0; width:2px; background:oklch(1 0 0 / 0.06); }
.steps .fx-line i{ display:block; width:100%; height:var(--p, 0%); background:linear-gradient(180deg, var(--accent), var(--accent-deep)); box-shadow:0 0 12px var(--accent-line); transition:height .15s linear; }
.step .step__n{ transition:color .4s, text-shadow .4s; }
.step.is-past .step__n{ text-shadow:0 0 22px var(--accent-line); }
@media (min-width:900px){ .steps{ padding-left:22px; } }
@media (max-width:899px){ .steps .fx-line{ display:none; } }

/* ============================================================
   GALERIE & INSTAGRAM
   ============================================================ */
.gallery{ columns:auto !important; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.gallery figure{ margin:0 !important; aspect-ratio:2/3; }
.gallery figure img{ height:100%; object-fit:cover; }
@media (max-width:900px){ .gallery{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){
  .gallery{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; margin-inline:calc(var(--gutter) * -1); padding:0 var(--gutter) 6px; scrollbar-width:none; }
  .gallery::-webkit-scrollbar{ display:none; }
  .gallery figure{ flex:0 0 72%; scroll-snap-align:center; }
}
.fx-swipe{ display:none; font-family:var(--ff-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--faint); margin-top:12px; }
@media (max-width:560px){ .fx-swipe{ display:block; } }

.social__wrap{ display:grid; grid-template-columns:1fr 1.25fr; gap:clamp(28px,5vw,80px); align-items:center; }
@media (max-width:900px){ .social__wrap{ grid-template-columns:1fr; } }
.social__grid{ grid-template-columns:repeat(2,1fr) !important; margin-top:0 !important; }
.social__tile{ display:block; aspect-ratio:1; }
.social__tile img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.social__tile:hover img{ transform:scale(1.06); }
.social__tile .ig{ position:absolute; right:12px; bottom:12px; z-index:2; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:oklch(0.10 0.003 60 / 0.6); backdrop-filter:blur(6px); color:#fff; opacity:0; transform:translateY(6px); transition:all .35s var(--ease); }
.social__tile:hover .ig{ opacity:1; transform:none; }
.social__tile .ig svg{ width:17px; height:17px; }

/* ============================================================
   STARTPLAN-HINWEISE (dezent)
   ============================================================ */
.more__grid{ grid-template-columns:repeat(auto-fit, minmax(min(100%,300px), 1fr)) !important; }
.morecard--startplan{ background:linear-gradient(160deg, var(--accent-soft), transparent 60%), var(--ink-2) !important; border-color:var(--accent-line) !important; }
.sp-hint{ display:flex; align-items:center; gap:16px; margin:40px 0; padding:18px 20px; border-radius:14px; background:linear-gradient(120deg, var(--accent-soft), transparent 70%); border:1px solid var(--accent-line); text-decoration:none !important; color:var(--text) !important; transition:transform .35s var(--ease), border-color .35s; }
.sp-hint:hover{ transform:translateY(-2px); border-color:var(--accent); }
.sp-hint__ic{ flex:none; width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:var(--accent); color:var(--ink); font-family:var(--ff-display); font-size:20px; }
.sp-hint__t{ display:block; font-family:var(--ff-alt); font-weight:800; font-size:15.5px; line-height:1.3; }
.sp-hint__s{ display:block; font-size:13.5px; line-height:1.5; color:var(--muted); margin-top:3px; }
.sp-hint__arrow{ margin-left:auto; flex:none; color:var(--accent); font-size:20px; transition:transform .3s var(--ease); }
.sp-hint:hover .sp-hint__arrow{ transform:translateX(4px); }
.sp-textlink{ display:inline-block; margin-top:18px; font-size:14px; color:var(--muted); }
.sp-textlink a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }

/* ---------- Bewegung reduzieren, wenn gewünscht ---------- */
@media (prefers-reduced-motion: reduce){
  .fx-img{ clip-path:none; opacity:1; transform:none; transition:none; }
  .fx-bar i{ transition:none; width:var(--w, 100%); }
  .kicker.reveal .rule{ transform:none; transition:none; }
  .btn--accent::after{ display:none; }
  ::view-transition-old(root), ::view-transition-new(root){ animation:none; }
}

/* ---------- Feinschliff nach Sichtprüfung ---------- */
@media (max-width:1500px) and (min-width:1041px){
  .nav__cta a.btn--ghost[href^="tel"]{ display:none; }
}
/* Hochformat-Blogbilder nicht höher als ein Bildschirm */
.blogfig img{ max-height:min(72vh, 680px); object-fit:cover; object-position:center 55%; }
/* Wettkampf-Zahlen auf dem Handy in einer Reihe */
@media (max-width:860px){
  .gcl__inner{ grid-template-columns:repeat(3,1fr) !important; }
  .gcl__lead{ grid-column:1 / -1; }
  .gcl__cell{ padding:22px 14px !important; border-right:1px solid var(--line) !important; }
  .gcl__cell:last-child{ border-right:0 !important; }
  .gcl__cell:nth-child(2), .gcl__cell:nth-child(3){ border-right:1px solid var(--line) !important; }
  .gcl__cell .n{ font-size:clamp(38px,11vw,52px) !important; }
  .gcl__cell .l{ font-size:10px !important; }
  .gcl__cell .fx-bar{ max-width:none; }
}
/* Foto-Credit dezent */
.gallery__credit{ font-family:var(--ff-mono); font-size:11px !important; letter-spacing:0.04em; color:var(--faint) !important; margin-top:14px; }

/* ---------- „Mehr von Benedikt“: 2×2, Buch-Karte, Kurs-Teilnehmer ---------- */
@media (min-width:900px){ .more__grid{ grid-template-columns:repeat(2,1fr) !important; } }
.morecard{ display:flex; flex-direction:column; }
.morecard__links{ margin-top:auto; padding-top:22px; }
.morecard__stat{ display:inline-flex; align-items:baseline; gap:8px; margin-top:16px !important; padding:9px 14px; border-radius:100px; border:1px solid var(--accent-line); background:var(--accent-soft); font-size:13.5px !important; color:var(--text) !important; }
.morecard__stat b{ font-family:var(--ff-display); font-weight:400; font-size:20px; color:var(--accent); line-height:1; }
.morecard__book{ display:grid; grid-template-columns:108px 1fr; gap:20px; align-items:start; }
.morecard__book img{ width:100%; height:auto; border-radius:6px; box-shadow:0 18px 40px -18px oklch(0 0 0 / 0.9), 0 0 0 1px oklch(1 0 0 / 0.06); transform:rotate(-2deg); transition:transform .5s var(--ease); }
.morecard--book:hover .morecard__book img{ transform:rotate(0) scale(1.03); }
.morecard__book h3{ margin-top:0 !important; }
@media (max-width:480px){ .morecard__book{ grid-template-columns:84px 1fr; gap:14px; } }
.morecard__stat{ align-self:flex-start; border-radius:10px !important; }
.morecard__book{ margin-top:20px; }