/* Über mich: eine Karte in Terminbreite, Foto links, Text mit „mehr lesen“ */
@property --fh{syntax:'<length>';initial-value:0px;inherits:false}
.about{margin-top:0;max-width:940px}
.about h2{margin-top:16px}
.about-card{position:relative;overflow:clip;display:flex;align-items:stretch;gap:clamp(12px,2.4vw,24px);min-height:150px;padding:18px 22px 14px 0;margin:22px 0 8px;--pw:clamp(104px,13vw,124px);background:radial-gradient(ellipse 55% 110% at 10% 100%,rgba(80,130,255,.38),transparent 70%),var(--card);border:1px solid var(--line);border-radius:var(--r)}
.about-card.nophoto{padding-left:22px}
.about-photo{flex:none;width:var(--pw);margin:-18px 0 -14px 20px;display:flex;flex-direction:column;justify-content:flex-end;pointer-events:none}
.about-photo img{display:block;width:100%;height:auto;filter:drop-shadow(0 0 18px rgba(90,150,255,.35))}
.about-main{flex:1;min-width:0}
.about-lead{margin:0 0 .8em;font-size:1.125rem;line-height:1.6}
.about-more p{margin:0 0 .9em;font-size:1.125rem;line-height:1.6}
.about-more h4{margin:1.2em 0 .5em;font-size:.95rem;letter-spacing:.04em;text-transform:uppercase;opacity:.8}
.about-list{margin:0 0 1em;padding-left:1.2em;line-height:1.7}
.about .about-book{opacity:.85;font-style:italic}
.about-more .acts{margin-top:.6em}
.about-toggle{display:inline-block;margin:.5em 0 0;padding:6px 0;background:none;border:0;color:#9fd2ff;font:inherit;font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.about-toggle:focus-visible{outline:3px solid #fff;outline-offset:2px;border-radius:4px}
/* nur mit JavaScript eingeklappt, sonst steht der ganze Text da */
.about-body.js{overflow:hidden;transition:max-height .55s cubic-bezier(.4,0,.2,1),--fh .55s ease;--fh:2.6em;
  -webkit-mask-image:linear-gradient(#000 calc(100% - var(--fh)),transparent);mask-image:linear-gradient(#000 calc(100% - var(--fh)),transparent)}
.about-body.js.open{--fh:0px}
.about-body.js.free{overflow:visible;max-height:none!important;-webkit-mask-image:none;mask-image:none}
@media(prefers-reduced-motion:reduce){.about-body.js{transition:none}}
@media(max-width:600px){.about h2{margin-top:0}.about-card{--pw:92px;padding:14px 14px 12px 0;min-height:150px;gap:14px}.about-card.nophoto{padding-left:14px}.about-photo{margin:-14px 0 -12px 10px}}

/* Foto zieht weich nach (JS), sonst bleibt es per sticky stehen */
/* Foto fährt beim Erscheinen sanft von links ein */
.js .about-card .about-photo{opacity:0;translate:-28px 0;transition:opacity .9s ease .25s,translate .9s cubic-bezier(.2,.7,.2,1) .25s}
.js .about-card.in .about-photo{opacity:1;translate:none;transition:opacity .9s ease .25s,translate .9s cubic-bezier(.2,.7,.2,1) .25s,width .55s cubic-bezier(.4,0,.2,1),margin .55s cubic-bezier(.4,0,.2,1)}
/* Aufgeklappt: Foto fährt weg, der Text bekommt die ganze Box */
.about-photo{overflow:hidden}
.about-photo img{max-width:none;width:var(--pw)}
.js .about-card.reveal{transition:opacity .5s ease,transform .5s ease,padding-left .55s cubic-bezier(.4,0,.2,1),gap .55s cubic-bezier(.4,0,.2,1)}
.about-card.expanded{padding-left:22px;gap:0}
.about-card.expanded .about-photo{width:0!important;margin-left:0!important;margin-right:0!important;opacity:0!important}
.js .about-card.in.expanded .about-photo{transition:opacity .3s ease,width .55s cubic-bezier(.4,0,.2,1),margin .55s cubic-bezier(.4,0,.2,1)}
.about-card.notrans,.about-card.notrans *{transition:none!important}
@media(max-width:600px){.about-card.expanded{padding-left:14px}}
/* Chat-Blasen erscheinen nacheinander */
.js .wa-card .wa-bubble{opacity:0;translate:0 12px;transition:opacity .5s ease,translate .5s ease}
.js .wa-card.in .wa-bubble{opacity:1;translate:none}
.js .wa-card.in .wa-bubble:nth-of-type(1){transition-delay:.35s}
.js .wa-card.in .wa-bubble:nth-of-type(2){transition-delay:.95s}
/* Überschriften etwas weicher */
.js main h2.reveal{transform:translateY(18px);transition-duration:.7s}
.js main h2.reveal.in{transform:none}

/* Dezente Überschrift (H1) über "Next Dates" */
/* H1-Zeile neben der Überschrift "Über mich" */
.about-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0 20px}
.about-head h2{margin-right:auto}
.tagline{margin:0;text-align:right;font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);line-height:1.5}
@media(max-width:600px){.about-head{display:block}.about-head h2{margin-bottom:.2em}.tagline{text-align:left;font-size:.72rem;letter-spacing:.08em;white-space:nowrap;margin:0 0 .5em}.tagline .loc{display:none}}

/* Kontaktseite am Desktop: das ganze Bild steht hinten, Formular und Infos liegen links darauf */
@media(min-width:900px){
  .cstage{position:relative;display:flex;align-items:center;min-height:min(56.25vw,900px)}
  .cstage .hero.compact{position:absolute;inset:0;height:100%;min-height:0;z-index:0}
  .cstage .hero.compact .hwords,.cstage .hero.compact .bubbles{display:none}
  .cstage>main.contact{position:relative;z-index:1;max-width:none;width:100%;margin:0;padding:48px 6vw 64px}
  .cstage .contact-grid{grid-template-columns:minmax(380px,450px) minmax(280px,340px);justify-content:start;gap:clamp(24px,3vw,44px)}
  .cstage .cform{background:linear-gradient(160deg,rgba(20,35,63,.9),rgba(15,26,48,.94));-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
}
@media(min-width:900px) and (max-width:1279px){.cstage .contact-grid{grid-template-columns:minmax(380px,460px)}}
/* Schmaler Laptop: Bild bleibt vollständig sichtbar (oben rechts), statt stark herangezoomt */
@media(min-width:900px) and (max-width:1279px){.cstage .hero.compact picture{inset:0 0 auto 0;height:auto;aspect-ratio:16/9;-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);mask-image:linear-gradient(180deg,#000 72%,transparent)}.cstage .hero.compact img.bg{object-fit:cover;object-position:100% 0}}

/* Kontaktseite: kurzer Hinweis zu belegten Terminen */
.cnote{margin:14px 0 0;max-width:38ch;font-size:.82rem;font-weight:300;line-height:1.5;color:#a9b5d3}

/* Musikwunsch: Formular erst nach Klick laden (Datenschutz) */
.airframe:not(.loaded){background:linear-gradient(160deg,#14233f,#0f1a30);border:1px solid var(--line)}
.airgate{padding:28px 22px;text-align:center}
.airgate p{margin:0 0 18px;line-height:1.55}
.airgate .btn{display:inline-flex;width:auto;min-width:260px;justify-content:center}