/* Page-local styles — Über mich. */

/* === PAGE HERO === */
.phero{min-height:92vh;position:relative;display:flex;align-items:center;padding:7rem 3rem 4rem;overflow:hidden}
.phero-grid{display:grid;grid-template-columns:1.08fr 0.92fr;gap:5rem;width:100%;max-width:1320px;margin:0 auto;align-items:center}
.phero-text{position:relative;z-index:2}
.phero-eyebrow{display:inline-flex;align-items:center;gap:0.8rem;font-size:0.78rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--terracotta);margin-bottom:1.8rem;opacity:0;animation:fadeUp 0.9s 0.2s forwards}
.phero-eyebrow::before{content:'';width:40px;height:1px;background:var(--terracotta)}
.phero h1{font-family:'Cormorant Garamond',serif;font-size:clamp(2.8rem,6vw,5.2rem);font-weight:300;line-height:1.0;letter-spacing:-0.02em;color:var(--ink);margin-bottom:1.8rem;opacity:0;animation:fadeUp 1s 0.4s forwards}
.phero h1 em{font-style:italic;color:var(--terracotta);font-weight:400}
.phero-sub{font-size:1.12rem;font-weight:300;color:var(--ink-soft);max-width:540px;margin-bottom:2.5rem;line-height:1.75;opacity:0;animation:fadeUp 1s 0.6s forwards}
.phero-ctas{display:flex;gap:1.2rem;flex-wrap:wrap;opacity:0;animation:fadeUp 1s 0.8s forwards}

/* Hero portrait visual */
.phero-visual{position:relative;display:flex;align-items:center;justify-content:center;opacity:0;animation:fadeIn 1.4s 0.5s forwards}
.portrait{
  width:100%;max-width:440px;aspect-ratio:4/5;border-radius:300px 300px 26px 26px;position:relative;overflow:hidden;box-shadow:var(--shadow-warm);
  background:
    radial-gradient(circle at 32% 26%, rgba(255,246,228,0.92) 0%, transparent 42%),
    radial-gradient(circle at 72% 60%, rgba(224,128,94,0.85) 0%, transparent 52%),
    radial-gradient(circle at 50% 84%, rgba(201,162,79,0.7) 0%, transparent 56%),
    radial-gradient(circle at 26% 74%, rgba(227,165,63,0.55) 0%, transparent 52%),
    linear-gradient(140deg, #F2C4A4 0%, #E0805E 46%, #C9A24F 100%);
  animation:float 9s ease-in-out infinite;
}
.portrait::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(circle at 50% 26%, rgba(255,250,235,0.3) 0%, transparent 62%)}
.portrait-photo{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;object-position:center 22%;border-radius:inherit}
.portrait-glow{position:absolute;inset:-12% -12% -6% -12%;border-radius:50%;background:radial-gradient(circle, rgba(224,128,94,0.28) 0%, transparent 68%);filter:blur(8px);z-index:-1;animation:pulse 6s ease-in-out infinite}
.portrait-ring{position:absolute;inset:-34px;border-radius:300px 300px 60px 60px;border:1px dashed rgba(190,110,71,0.3);animation:slowSpin 80s linear infinite;pointer-events:none}
.portrait-badge{position:absolute;left:-1.6rem;bottom:2.4rem;background:var(--ivory);padding:1rem 1.4rem;border-radius:16px;box-shadow:var(--shadow-soft);z-index:3;max-width:230px}
.portrait-badge .pb-quote{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.15rem;line-height:1.25;color:var(--ink)}
.portrait-badge .pb-name{font-size:0.68rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--terracotta);margin-top:0.5rem}
.phero-decor{position:absolute;font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--ink-soft);font-size:0.85rem;letter-spacing:0.1em}
.phero-decor.dec1{top:6%;right:3%;writing-mode:vertical-rl}

/* === TENSION / POLES === */
.tension{background:var(--ivory);overflow:hidden}
.poles{display:grid;grid-template-columns:1fr 88px 1fr;max-width:1080px;margin:0 auto 4rem;align-items:stretch}
.pole{padding:3rem 2.6rem;border-radius:24px}
.pole.soft{background:var(--cream);border:1px solid var(--line)}
.pole.warm{background:linear-gradient(145deg, var(--coral) 0%, var(--copper) 100%);color:var(--cream);box-shadow:var(--shadow-warm)}
.pole-tag{font-size:0.72rem;letter-spacing:0.24em;text-transform:uppercase;margin-bottom:0.8rem;color:var(--terracotta)}
.pole.warm .pole-tag{color:var(--gold-soft)}
.pole h3{font-family:'Cormorant Garamond',serif;font-size:2rem;font-weight:400;line-height:1.05;margin-bottom:1.6rem}
.pole ul{list-style:none}
.pole li{padding:0.7rem 0;font-size:0.98rem;border-bottom:1px solid rgba(217,198,169,0.5);color:var(--ink-soft)}
.pole.warm li{border-color:rgba(245,237,224,0.22);color:rgba(245,237,224,0.92)}
.pole li:last-child{border-bottom:none}
.pole-center{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}
.pole-spine{width:1px;flex:1;background:linear-gradient(var(--coral),var(--amber),var(--gold))}
.pole-emblem{width:62px;height:62px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:var(--cream);flex-shrink:0;background:radial-gradient(circle at 35% 30%, var(--amber), var(--coral) 70%, var(--copper));box-shadow:0 12px 30px -8px rgba(190,110,71,0.6);margin:0.6rem 0}
.kante-quote{max-width:900px;margin:0 auto;text-align:center;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(1.4rem,2.7vw,2.15rem);line-height:1.32;color:var(--ink);position:relative;padding:0 1.5rem}
.kante-quote em{font-style:italic;color:var(--terracotta)}
.kante-quote::before{content:'';display:block;width:46px;height:1px;background:var(--terracotta);margin:0 auto 1.8rem}

/* === MEIN WEG === */
.weg{background:var(--cream)}
.weg-grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:5rem;align-items:center}
.weg-text .section-eyebrow{justify-content:flex-start}
.weg-text .section-eyebrow::after{display:none}
.weg-text h2{text-align:left;margin-bottom:1.8rem}
.weg-text p{color:var(--ink-soft);margin-bottom:1.2rem;font-size:1.05rem;line-height:1.75}
.weg-text p .lead{color:var(--ink);font-style:italic;font-family:'Cormorant Garamond',serif;font-size:1.25rem}
.weg-sign{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:2rem;color:var(--terracotta);margin-top:2rem;transform:rotate(-3deg);display:inline-block}
.weg-cred{font-size:0.8rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--ink-soft);margin-top:0.4rem}
.stations{list-style:none;position:relative}
.station{display:flex;align-items:baseline;gap:1.4rem;padding:1.5rem 0;border-bottom:1px solid var(--line)}
.station:last-child{border-bottom:none}
.station-num{font-family:'Cormorant Garamond',serif;font-size:2rem;font-weight:500;color:var(--terracotta);line-height:1;flex-shrink:0;min-width:3.4rem}
.station-body .station-title{font-family:'Cormorant Garamond',serif;font-size:1.35rem;line-height:1.2;margin-bottom:0.15rem}
.station-body .station-label{font-size:0.85rem;color:var(--ink-soft)}

/* === SÄULEN === */
.pillars{background:var(--ivory)}
.pillars-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.pillar-card{background:var(--cream);padding:2.8rem;border-radius:24px;border:1px solid transparent;transition:transform 0.5s ease, box-shadow 0.5s ease, border-color 0.5s ease;position:relative;overflow:hidden}
.pillar-card::after{content:'';position:absolute;top:-60px;right:-60px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle, var(--rose-soft) 0%, transparent 70%);opacity:0.5;transition:opacity 0.5s ease}
.pillar-card:hover{transform:translateY(-4px);border-color:var(--line);box-shadow:var(--shadow)}
.pillar-card:hover::after{opacity:0.85}
.pillar-icon{width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem;background:rgba(190,110,71,0.1);color:var(--terracotta);font-size:1.5rem;transition:transform 0.4s ease;position:relative;z-index:1}
.pillar-card:hover .pillar-icon{transform:rotate(-8deg) scale(1.08)}
.pillar-num{font-size:0.72rem;letter-spacing:0.24em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:0.5rem;position:relative;z-index:1}
.pillar-card h3{font-family:'Cormorant Garamond',serif;font-size:1.85rem;font-weight:400;margin-bottom:0.7rem;position:relative;z-index:1}
.pillar-card p{color:var(--ink-soft);font-size:0.98rem;line-height:1.6;margin-bottom:1.3rem;position:relative;z-index:1}
.pillar-tags{display:flex;flex-wrap:wrap;gap:0.5rem;position:relative;z-index:1}
.pillar-tags span{font-size:0.72rem;letter-spacing:0.05em;padding:0.35rem 0.8rem;border-radius:100px;background:rgba(190,110,71,0.08);color:var(--terracotta)}

/* === ANTI-POSITIONIERUNG === */
.anti{background:var(--cream)}
.anti-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;max-width:1080px;margin:0 auto 3.5rem}
.anti-col{padding:2.8rem;border-radius:24px}
.anti-col.not{background:var(--ivory);border:1px solid var(--line)}
.anti-col.yes{background:linear-gradient(150deg, var(--terracotta) 0%, var(--terracotta-dark) 100%);color:var(--cream);box-shadow:var(--shadow-warm)}
.anti-col h3{font-family:'Cormorant Garamond',serif;font-size:1.7rem;font-weight:400;margin-bottom:1.6rem;display:flex;align-items:center;gap:0.7rem}
.anti-col.not h3{color:var(--ink-soft)}
.anti-col ul{list-style:none}
.anti-col li{display:flex;align-items:flex-start;gap:0.8rem;padding:0.75rem 0;font-size:1rem;line-height:1.45}
.anti-col.not li{color:var(--ink-soft)}
.anti-mark{flex-shrink:0;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.8rem;margin-top:0.1rem}
.anti-col.not .anti-mark{background:rgba(107,85,77,0.12);color:var(--ink-soft)}
.anti-col.not li span.txt{text-decoration:line-through;text-decoration-color:rgba(107,85,77,0.4)}
.anti-col.yes .anti-mark{background:rgba(245,237,224,0.18);color:var(--gold-soft)}

/* === STIMMEN / SLIDER === */
.voices{background:var(--ivory);overflow:hidden}
.theme-strip{display:flex;flex-wrap:wrap;gap:0.6rem;justify-content:center;max-width:820px;margin:0 auto 3.5rem}
.theme-strip span{font-size:0.74rem;letter-spacing:0.12em;text-transform:uppercase;padding:0.45rem 1rem;border-radius:100px;border:1px solid var(--line);color:var(--ink-soft)}
.voice-slider{max-width:920px;margin:0 auto;position:relative}
.voice-stage{position:relative;min-height:300px;background:var(--cream);border-radius:30px;padding:4rem 4.5rem;box-shadow:var(--shadow);overflow:hidden}
.voice-stage::before{content:'\201C';position:absolute;top:1.2rem;left:2.2rem;font-family:'Cormorant Garamond',serif;font-size:7rem;line-height:1;color:var(--rose-soft);opacity:0.7}
.voice-slide{position:absolute;inset:4rem 4.5rem;display:flex;flex-direction:column;justify-content:center;opacity:0;transform:translateY(16px);transition:opacity 0.6s ease, transform 0.6s ease;pointer-events:none}
.voice-slide.active{opacity:1;transform:none;pointer-events:auto}
.voice-theme{font-size:0.72rem;letter-spacing:0.24em;text-transform:uppercase;color:var(--terracotta);margin-bottom:1.2rem}
.voice-quote{font-family:'Cormorant Garamond',serif;font-weight:300;font-style:italic;font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.3;color:var(--ink);margin-bottom:1.6rem}
.voice-author{font-size:0.78rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--ink-soft)}
.voice-author strong{color:var(--terracotta);font-weight:500}
.voice-controls{display:flex;align-items:center;justify-content:center;gap:1.5rem;margin-top:2.2rem}
.voice-arrow{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:transparent;cursor:pointer;color:var(--ink);font-size:1.1rem;display:inline-flex;align-items:center;justify-content:center;transition:all 0.3s}
.voice-arrow:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.voice-dots{display:flex;gap:0.55rem}
.voice-dot{width:8px;height:8px;border-radius:50%;border:none;cursor:pointer;padding:0;background:var(--line);transition:all 0.3s}
.voice-dot.active{background:var(--terracotta);transform:scale(1.35)}

/* === KOMPETENZFELDER === */
.fields{background:var(--cream)}
.fields-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.field-card{background:var(--ivory);border:1px solid var(--line);border-radius:22px;padding:2.2rem;transition:transform 0.4s ease, box-shadow 0.4s ease}
.field-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-soft)}
.field-card h4{font-family:'Cormorant Garamond',serif;font-size:1.45rem;font-weight:500;margin-bottom:1.2rem;display:flex;align-items:center;gap:0.7rem}
.field-card h4 .fdot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.chips{display:flex;flex-wrap:wrap;gap:0.5rem}
.chips span{font-size:0.82rem;padding:0.4rem 0.85rem;border-radius:100px;background:var(--cream);border:1px solid var(--line);color:var(--ink-soft);transition:all 0.25s}
.field-card:hover .chips span{border-color:rgba(190,110,71,0.35);color:var(--ink)}

/* === FAQ ACCORDION === */
.faq{background:var(--ivory)}
.acc{max-width:820px;margin:0 auto}
.acc-item{border-bottom:1px solid var(--line)}
.acc-q{width:100%;background:none;border:none;cursor:pointer;text-align:left;font-family:'Cormorant Garamond',serif;font-size:1.4rem;font-weight:400;color:var(--ink);padding:1.6rem 3rem 1.6rem 0;position:relative;transition:color 0.3s;line-height:1.25}
.acc-q:hover{color:var(--terracotta)}
.acc-icon{position:absolute;right:0;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:var(--terracotta);transition:all 0.35s ease;font-family:'Outfit',sans-serif}
.acc-item.open .acc-icon{transform:translateY(-50%) rotate(45deg);background:var(--terracotta);color:var(--cream);border-color:var(--terracotta)}
.acc-a{max-height:0;overflow:hidden;transition:max-height 0.45s ease}
.acc-a p{color:var(--ink-soft);font-size:1.02rem;line-height:1.7;padding:0 3rem 1.8rem 0}
.acc-a p em{color:var(--terracotta);font-style:italic}

/* === CLOSING CTA === */
.closing{background:linear-gradient(150deg, var(--copper) 0%, var(--coral) 55%, var(--amber) 130%);color:var(--cream);text-align:center;position:relative;overflow:hidden}
.closing::before{content:'';position:absolute;top:-220px;left:-160px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle, rgba(255,246,228,0.22) 0%, transparent 70%)}
.closing::after{content:'';position:absolute;bottom:-260px;right:-160px;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle, rgba(154,79,46,0.3) 0%, transparent 70%)}
.closing-inner{position:relative;z-index:2;max-width:760px;margin:0 auto}
.closing .section-eyebrow{color:var(--gold-soft);justify-content:center}
.closing .section-eyebrow::before,.closing .section-eyebrow::after{background:var(--gold-soft)}
.closing h2{font-family:'Cormorant Garamond',serif;font-size:clamp(2.2rem,4.5vw,3.6rem);font-weight:300;line-height:1.08;margin-bottom:1.4rem}
.closing h2 em{font-style:italic;color:var(--gold-soft)}
.closing p{color:rgba(245,237,224,0.9);font-size:1.1rem;line-height:1.7;margin-bottom:2.6rem;max-width:560px;margin-left:auto;margin-right:auto}
.closing-ctas{display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap}
.closing-line{margin-top:3rem;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.3rem;color:rgba(245,237,224,0.75)}

/* === RESPONSIVE === */
@media (max-width:900px){
  .phero{padding:6rem 1.5rem 4rem;min-height:auto}
  .phero-grid{grid-template-columns:1fr;gap:3.5rem}
  .phero-visual{order:-1;max-width:360px;margin:0 auto}
  .phero-decor{display:none}
  .portrait-badge{left:0;bottom:1rem}

  .poles{grid-template-columns:1fr;gap:1.2rem;margin-bottom:3rem}
  .pole-center{flex-direction:row;height:54px;width:100%}
  .pole-spine{width:auto;height:1px;flex:1;background:linear-gradient(90deg,var(--coral),var(--amber),var(--gold))}
  .pole-emblem{margin:0 0.6rem}

  .weg-grid{grid-template-columns:1fr;gap:3rem}
  .pillars-grid{grid-template-columns:1fr}
  .anti-grid{grid-template-columns:1fr}
  .fields-grid{grid-template-columns:1fr}

  .voice-stage{padding:3rem 1.8rem;min-height:340px}
  .voice-stage::before{font-size:5rem;top:0.6rem;left:1.2rem}
  .voice-slide{inset:3rem 1.8rem}
  .acc-q{font-size:1.2rem;padding-right:2.5rem}
  .acc-a p{padding-right:0}
}
@media (max-width:520px){
  .phero h1{font-size:clamp(2.4rem,9vw,3rem)}
  .pole,.anti-col,.pillar-card{padding:2rem 1.6rem}
  .station-num{font-size:1.6rem;min-width:2.8rem}
}