/* ═══════════════════════════════════════════════════════════════
   SELBSTREFLEXION — Die 7-Fragen-Standortbestimmung
   Page-specific styles. Same colors as the original design;
   only the typefaces are swapped to the site's fonts
   (Cormorant Garamond + Jost instead of EB Garamond + Inter).
═══════════════════════════════════════════════════════════════ */

:root{
  --r-navy:        #16304C;
  --r-navy-deep:   #0E2137;
  --r-sand:        #F2EDE3;
  --r-sand-2:      #E9E2D4;
  --r-ink:         #1F2D3D;
  --r-ink-2:       #4A5B6E;
  --r-gold:        #B8873B;
  --r-gold-light:  #D9AE5F;
  --r-rule:        #CFC5B0;
  --r-on-navy:     #EFE8DA;
  --r-on-navy-dim: #A9B8C7;

  --r-serif: var(--fd);
  --r-sans:  var(--fs);
}

body.reflexion-page{
  background:var(--r-sand);
  color:var(--r-ink);
  font-family:var(--r-serif);
  font-size:19px;
  line-height:1.62;
}

#reflexion img{max-width:100%;display:block}
#reflexion .wrap{max-width:1000px;margin:0 auto;padding-inline:22px}
#reflexion .narrow{max-width:640px}

#reflexion .eyebrow{
  font-family:var(--r-sans);font-size:11px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;
}

/* ─────────── Hero ─────────── */
#reflexion .r-hero{background:var(--r-navy);color:var(--r-on-navy);padding-block:64px 72px;margin-top:68px}
#reflexion .r-hero .eyebrow{color:var(--r-gold-light)}
#reflexion .r-hero-grid{
  display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:center;
  margin-top:26px;
}
#reflexion .r-hero h1{
  font-family:var(--r-serif);font-weight:400;
  font-size:clamp(2.5rem,6vw,4rem);line-height:1.03;
  margin:0 0 20px;color:var(--r-gold-light);text-wrap:balance;
}
#reflexion .r-hero h1 em{font-style:italic;color:var(--r-on-navy);display:block}
#reflexion .r-hero p.lede{
  font-size:1.16rem;line-height:1.55;color:var(--r-on-navy-dim);
  margin:0 0 26px;max-width:30em;
}
#reflexion ul.gets{list-style:none;margin:0 0 32px;padding:0;display:grid;gap:13px}
#reflexion ul.gets li{
  position:relative;padding-left:26px;font-size:1.02rem;line-height:1.5;
  color:var(--r-on-navy);
}
#reflexion ul.gets li::before{
  content:"✦";position:absolute;left:0;top:1px;
  color:var(--r-gold-light);font-size:.86em;
}

/* PDF-Vorschau, komplett in CSS gebaut, kein Bild nötig */
#reflexion .mock{
  position:relative;overflow:hidden;
  container-type:inline-size;
  background:var(--r-navy-deep);
  border:1px solid rgba(217,174,95,.32);
  aspect-ratio:210/297;
  padding:11% 10%;
  display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:0 18px 44px rgba(0,0,0,.34);
  transform:rotate(-1.4deg);
  max-width:330px;margin-inline:auto;
}
#reflexion .mock .m-ribbon{
  position:absolute;left:-16%;right:-16%;top:65%;
  transform:rotate(-7deg);
  background:var(--r-gold);color:#12212F;
  text-align:center;padding:10px 8px;
  font-family:var(--r-sans);font-weight:700;
  font-size:10.5px;
  font-size:3.2cqw;
  letter-spacing:.1em;text-transform:uppercase;line-height:1.2;
  white-space:nowrap;
  box-shadow:0 5px 16px rgba(0,0,0,.34);
}
#reflexion .mock .m-top{font-family:var(--r-sans);font-size:9px;font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;color:var(--r-gold-light)}
#reflexion .mock .m-title{font-family:var(--r-serif);font-size:clamp(1.5rem,3.4vw,2rem);line-height:1.08;color:var(--r-gold-light)}
#reflexion .mock .m-title em{display:block;font-style:italic;color:var(--r-on-navy);font-size:.86em}
#reflexion .mock .m-rule{height:1px;background:rgba(217,174,95,.4);margin:14px 0 12px}
#reflexion .mock .m-meta{font-family:var(--r-sans);font-size:8.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--r-on-navy-dim);line-height:1.9}
#reflexion .mock .m-author{font-style:italic;font-size:.95rem;color:var(--r-on-navy)}

/* ─────────── Formular ─────────── */
#reflexion .form-card{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);padding:24px}
#reflexion .form-card.on-sand{background:var(--r-sand-2);border-color:var(--r-rule)}
#reflexion form.signup{display:flex;flex-direction:column;gap:12px}
#reflexion .row{display:flex;gap:10px;flex-wrap:wrap}
#reflexion label.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#reflexion input[type=email]{
  flex:1 1 240px;min-width:0;
  font-family:var(--r-sans);font-size:16px;
  padding:15px 16px;border:1px solid var(--r-rule);
  background:#FFFDF8;color:var(--r-ink);border-radius:0;
}
#reflexion input[type=email]:focus-visible{outline:2px solid var(--r-gold);outline-offset:1px;border-color:var(--r-gold)}
#reflexion button.cta{
  flex:1 1 auto;
  font-family:var(--r-sans);font-size:15px;font-weight:600;letter-spacing:.02em;
  padding:15px 26px;border:none;cursor:pointer;
  background:var(--r-gold);color:#12212F;
}
#reflexion button.cta:hover{background:var(--r-gold-light)}
#reflexion button.cta:focus-visible{outline:2px solid var(--r-on-navy);outline-offset:2px}
#reflexion .consent{
  font-family:var(--r-sans);font-size:12.5px;line-height:1.6;
  color:var(--r-on-navy-dim);margin:0;
}
#reflexion .form-card.on-sand .consent{color:var(--r-ink-2)}
#reflexion .consent a{color:inherit;text-decoration:underline;text-underline-offset:2px}
#reflexion .nospam{
  font-family:var(--r-sans);font-size:12.5px;letter-spacing:.02em;
  color:var(--r-on-navy-dim);margin:14px 0 0;opacity:.85;
}
#reflexion .form-card.on-sand .nospam{color:#8A8069}

/* ─────────── Fließtext-Abschnitte ─────────── */
#reflexion section.band{padding-block:66px;border-bottom:1px solid var(--r-rule)}
#reflexion section.band:last-of-type{border-bottom:none}
#reflexion h2{
  font-family:var(--r-serif);font-weight:400;
  font-size:clamp(1.75rem,3.6vw,2.4rem);line-height:1.14;
  margin:14px 0 22px;color:var(--r-navy);text-wrap:balance;
}
#reflexion h2 em{font-style:italic;color:var(--r-gold)}
#reflexion section.band .eyebrow{color:var(--r-gold)}
#reflexion p{margin:0 0 20px;max-width:34em}
#reflexion .pull{
  border-top:1px solid var(--r-rule);border-bottom:1px solid var(--r-rule);
  padding:24px 0;margin:34px 0;max-width:34em;
}
#reflexion .pull p{
  font-style:italic;font-size:1.28rem;line-height:1.45;
  margin:0;color:var(--r-navy);
}
#reflexion .pull .mark{
  display:block;font-family:var(--r-sans);font-size:10.5px;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:var(--r-gold);margin-bottom:12px;
}

#reflexion ol.method{list-style:none;counter-reset:m;margin:0;padding:0;display:grid;gap:22px;max-width:40em}
#reflexion ol.method li{
  counter-increment:m;
  position:relative;padding-left:38px;
}
#reflexion ol.method li::before{
  content:counter(m,upper-roman) ".";
  position:absolute;left:0;top:2px;
  font-family:var(--r-sans);font-size:12px;font-weight:700;letter-spacing:.06em;
  color:var(--r-gold);
}
#reflexion ol.method b{
  display:block;font-family:var(--r-sans);font-size:15.5px;font-weight:600;
  color:var(--r-navy);margin-bottom:4px;line-height:1.35;
}
#reflexion ol.method span{display:block;font-size:1rem;line-height:1.55;color:var(--r-ink-2)}

/* Verweis auf den Guide */
#reflexion .guide-box{
  border-top:1px solid var(--r-rule);border-bottom:1px solid var(--r-rule);
  padding:26px 0;margin:38px 0 0;max-width:40em;
}
#reflexion .guide-box p{margin:0 0 18px}
#reflexion .guide-box .btn{
  display:inline-block;font-family:var(--r-sans);font-size:15px;font-weight:600;
  letter-spacing:.02em;padding:13px 26px;text-decoration:none;
  background:var(--r-navy);color:var(--r-on-navy);
}
#reflexion .guide-box .btn:hover{background:var(--r-gold);color:#12212F}
#reflexion .guide-box .btn:focus-visible{outline:2px solid var(--r-gold);outline-offset:2px}

/* ─────────── Über Nicola ─────────── */
#reflexion .about{display:grid;grid-template-columns:220px 1fr;gap:38px;align-items:start;max-width:800px}
#reflexion .portrait{
  width:100%;height:auto;aspect-ratio:1281/1920;
  object-fit:cover;object-position:50% 50%;
  display:block;background:var(--r-sand-2);
}
#reflexion .about h3{font-family:var(--r-serif);font-weight:500;font-size:1.3rem;margin:0 0 12px;color:var(--r-navy)}

/* ─────────── Abschluss-Formular ─────────── */
#reflexion .r-closing{background:var(--r-navy);color:var(--r-on-navy);padding-block:64px;border-bottom:none}
#reflexion .r-closing h2{color:var(--r-gold-light)}
#reflexion .r-closing h2 em{color:var(--r-on-navy)}
#reflexion .r-closing p{color:var(--r-on-navy-dim)}
#reflexion .r-closing .eyebrow{color:var(--r-gold-light)}

@media (max-width:820px){
  #reflexion .r-hero-grid{grid-template-columns:1fr;gap:38px}
  #reflexion .mock .m-ribbon{top:70%}
  #reflexion .mock{max-width:260px;margin-inline:0}
  #reflexion .about{grid-template-columns:1fr;gap:22px}
  #reflexion .portrait{max-width:200px}
  body.reflexion-page{font-size:18px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}