/* baloo-2-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/baloo-2-v23-latin-regular.woff2') format('woff2');
}
/* baloo-2-500 - latin */
@font-face {
  font-display: swap;
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/baloo-2-v23-latin-500.woff2') format('woff2');
}
/* baloo-2-600 - latin */
@font-face {
  font-display: swap;
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/baloo-2-v23-latin-600.woff2') format('woff2');
}
/* baloo-2-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/baloo-2-v23-latin-700.woff2') format('woff2');
}
/* baloo-2-800 - latin */
@font-face {
  font-display: swap;
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 800;
  src: url('fonts/baloo-2-v23-latin-800.woff2') format('woff2');
}

/* karla-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/karla-v33-latin-regular.woff2') format('woff2');
}
/* karla-italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Karla';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/karla-v33-latin-italic.woff2') format('woff2');
}
/* karla-500 - latin */
@font-face {
  font-display: swap;
  font-family: 'Karla';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/karla-v33-latin-500.woff2') format('woff2');
}
/* karla-600 - latin */
@font-face {
  font-display: swap;
  font-family: 'Karla';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/karla-v33-latin-600.woff2') format('woff2');
}
/* karla-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Karla';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/karla-v33-latin-700.woff2') format('woff2');
  }
  :root{
    --cream: #FDFBF8;
    --cream-alt: #F6F0E6;
    --navy: #1E2C4C;
    --navy-soft: #46537A;
    --rust: #BC6B3F;
    --rust-deep: #A65A32;
    --caption: #8C8477;
    --line: #E1D6C4;
    --max: 920px;
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    background:var(--cream);
    color:var(--navy);
    font-family:'Karla', sans-serif;
    font-size:17px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.display{
    font-family:'Baloo 2', sans-serif;
    color:var(--navy);
    margin:0;
    letter-spacing:-0.01em;
  }
  a{ color:inherit; }
  img,svg{ display:block; max-width:100%; }
  .wrap{ max-width:var(--max); margin:0 auto; padding:0 24px; }

  /* focus visibility */
  a:focus-visible, button:focus-visible{
    outline:3px solid var(--rust);
    outline-offset:3px;
    border-radius:4px;
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation:none !important; transition:none !important; }
  }

  /* ---------- SCHWEBENDER KONTAKT-BUTTON (statt Nav) ---------- */
  .floating-contact{
    position:fixed;
    bottom:22px; right:22px;
    z-index:30;
    background:var(--navy);
    color:var(--cream);
    text-decoration:none;
    padding:16px 24px;
    border-radius:100px;
    font-weight:700;
    font-size:0.9rem;
    box-shadow:0 8px 20px -8px rgba(30,44,76,0.45);
    display:inline-flex;
    align-items:center;
    gap:8px;
    transition:opacity .3s ease, visibility .3s ease;
  }
  .floating-contact.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
  .floating-contact:hover{ background:var(--rust); }
  @media (max-width:600px){
    .floating-contact{ bottom:16px; right:16px; padding:8px 16px; }
  }

  /* ---------- PHOTO PLACEHOLDER ---------- */
  .photo-circle{
    border-radius:50%;
    background:var(--cream-alt);
    display:flex; align-items:center; justify-content:center;
    color:var(--caption);
    font-weight:700;
    text-align:center;
    flex:0 0 auto;
    overflow:hidden;
  }
  .photo-circle.large{ width:220px; height:220px; font-size:0.9rem; margin-top:24px; }
  @media (max-width:600px){
    .photo-circle.large{ width:170px; height:170px; }
  }

  /* ---------- INTRO-BANNER ---------- */
  .intro-banner{ padding:16px 0 8px; }
  #intro-stage{ width:100%; position:relative; }
  #intro-svg{ width:100%; height:auto; display:block; overflow:visible; }

  #intro-svg circle{ transition: fill 1400ms ease, opacity 2100ms ease, r 600ms ease; }
  #intro-svg line{ transition: stroke 1400ms ease, opacity 2100ms ease, stroke-width 1400ms ease; }

  #intro-svg text.intro-name{
    font-family:'Baloo 2',sans-serif; font-weight:700; font-size:20px; fill:var(--navy);
  }
  #intro-svg text.intro-tagline{
    font-family:'Karla',sans-serif; font-weight:600; font-size:11px; fill:var(--navy-soft);
  }

  .intro-controls{
    position:absolute; right:0; top:0;
    margin:0;
  }
  .intro-replay{
    width:38px; height:38px; border-radius:50%;
    background:transparent; border:1.5px solid var(--caption); color:var(--caption);
    display:flex; align-items:center; justify-content:center;
    padding:0; cursor:pointer;
  }
  .intro-replay svg{ width:18px; height:18px; }
  .intro-replay:hover{ color:var(--navy); border-color:var(--navy); }

  
@media (max-width:600px){
    .intro-banner{ padding:8px 0 8px; }
    #intro-svg text.intro-name{ font-size:24px; }
    #intro-svg text.intro-tagline{ font-size:14px; }
   
  }
  
  /* ---------- HERO ---------- */
  .hero{
    padding:48px 0 64px;
    background:radial-gradient(ellipse 640px 360px at 20% 0%, rgba(188,107,63,0.07), transparent 70%);
  }
.hero-bridge{
  font-family:'Karla', sans-serif;
  font-size:1rem;
  color:var(--navy-soft);
  line-height:1.6;
  max-width:56ch;
  border-left:4px solid var(--rust);
  padding-left:20px;
  margin:24px 0 64px;
}
  .oton-line{
  margin-bottom:32px;
  font-family:'Baloo 2', sans-serif;
  font-weight:500;
  font-size:clamp(1.15rem, 2.5vw, 1.5rem);
  color:var(--navy-soft);
  line-height:1.4;
}
 
  .oton-line .old::before{ content:"„"; }
  .oton-line .old::after{ content:"“"; }
  .oton-line .new{ color:var(--rust-deep); font-weight:700; }
  .oton-line .new::before{ content:"„"; }
  .oton-line .new::after{ content:"“"; }

 .claim{
    font-size:clamp(2rem, 5.5vw, 3rem);
    font-weight:700;
    line-height:1.15;
    letter-spacing:-0.02em;
  }

  /* ---------- SITUATIONSLISTE ---------- */
  .situations{ padding:8px 0 80px; }
.situations .kicker{
    font-family:'Karla', sans-serif;
    font-size:1rem;
    font-weight:700;
    color:var(--navy);
    margin-bottom:32px;
    padding-left:4px;
  }
  
  
  .situations .kicker span{ color:var(--rust); }

  .cardgrid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:24px 24px;
  }
  @media (max-width:700px){
    .cardgrid{ grid-template-columns:1fr; }
  }

  .aside-block{
    margin-top:80px;
    max-width:64ch;
  }
  .aside-block p{ font-size:1rem; color:var(--navy-soft); line-height:1.55; margin:0 0 16px; }
  .aside-block p:last-child{ margin-bottom:0; }

  .scard{
    background:var(--cream-alt);
    border:1.5px solid var(--line);
    border-radius:14px;
    padding:24px 24px 24px;
    display:flex; gap:16px; align-items:flex-start;
   
  }
 

  .sicon{ flex:0 0 auto; }
  .stext{ font-size:1rem; font-weight:600; color:var(--navy); line-height:1.4; }

  /* ---------- BIO / PERSON ---------- */
  .bio{ padding:16px 0 80px; }
  .bio-grid{
    display:grid; grid-template-columns:220px 1fr; gap:48px; align-items:start;
   
  }
  @media (max-width:600px){
    .bio-grid{ grid-template-columns:1fr; text-align:left; }
    .bio-grid .photo-circle{ margin:0 auto; }
  }
  .bio h2{ font-size:clamp(1.4rem, 3vw, 1.9rem); font-weight:700; margin-bottom:16px; }
  .bio p{ color:var(--navy-soft); font-size:1rem; margin:0 0 16px; }
  .bio p.bio-quote{ font-style:italic; color:var(--navy); }
  .now{ font-weight:700; color:var(--rust-deep); }
  .bio p:last-child{ margin-bottom:0; }

  /* ---------- ABOUT / ARBEITSWEISE ---------- */
  .about{ padding:16px 0 80px; }
  .about .section-head{ margin-bottom:32px; }
  .about p{ margin:0 0 16px; color:var(--navy-soft); font-size:1rem; }
  .about p:last-child{ margin-bottom:0; }

  .pullquote{
    position:relative;
    text-align:left;
    font-family:'Baloo 2', sans-serif;
    font-size:clamp(1.4rem, 3vw, 1.9rem);
    font-weight:700;
    color:var(--navy);
    border-left:4px solid var(--rust);
    padding:8px 0 8px 24px;
    margin:80px 0 32px;
    line-height:1.35;
  }
  .pullquote::before{
    content:"“";
    position:absolute;
    top:-38px; left:14px;
    font-size:5.5rem;
    font-family:'Baloo 2', sans-serif;
    color:var(--rust);
    opacity:0.16;
    line-height:1;
    z-index:-1;
  }

  .steps-list{ display:flex; flex-direction:column; gap:32px; }
  .step-item{ display:flex; gap:24px; align-items:flex-start; }
  .step-num{
    font-family:'Baloo 2', sans-serif;
    font-weight:700;
    font-size:clamp(2rem, 5.5vw, 3rem);
    color:var(--rust);
    opacity:0.35;
    line-height:1;
    flex:0 0 auto;
    min-width:64px;
  }
  .step-content h3{
    font-size:clamp(1.15rem, 2.5vw, 1.5rem);
    font-weight:600;
    color:var(--navy);
    margin-bottom:8px;
  }
  .step-content p{ margin:0 0 16px; color:var(--navy-soft); font-size:1rem; }
  .step-meta{ font-size:1rem; color:var(--caption); font-weight:600; }
  .step-intro{ font-weight:700; color:var(--navy); }
  .step-facts{
    display:flex; flex-direction:column; gap:4px;
    margin:0 0 16px; font-size:1rem; color:var(--caption);
  }
  .step-price{
    font-family:'Baloo 2', sans-serif; font-weight:700;
    font-size:1rem; color:var(--rust-deep);
    margin:0 0 8px;
  }
  .step-price .price-note{
    font-family:'Karla', sans-serif; font-weight:400;
    font-size:1rem; color:var(--caption);
  }
  .step-footnote{ font-size:1rem; color:var(--caption); font-style:italic; margin:0; }
  .step-content p:last-child{ margin-bottom:0; }
  @media (max-width:600px){
    .step-item{ gap:16px; }
    .step-num{ min-width:52px; }
  }

  /* ---------- SECTION HEADINGS (gemeinsam genutzt) ---------- */
  .section-head{
    display:flex; align-items:baseline; justify-content:space-between;
    margin-bottom:32px; gap:16px; flex-wrap:wrap;
  }
  .section-head h2{
    font-size:clamp(1.4rem, 3vw, 1.9rem); font-weight:700;
  }

  /* ---------- CTA / FOOTER ---------- */
  footer{
    background:var(--navy);
    color:var(--cream);
    padding:64px 0 48px;
  }
  footer .question{
    font-family:'Baloo 2', sans-serif;
    font-weight:700;
    font-size:clamp(1.4rem, 3vw, 1.9rem);
    line-height:1.3;
    max-width:40ch;
    margin-bottom:32px;
  }
  .ctabtn{
    display:inline-block;
    background:var(--rust);
    color:var(--cream);
    text-decoration:none;
    padding:16px 32px;
    border-radius:100px;
    font-weight:700;
    font-size:1rem;
  }
  .ctabtn:hover{ background:var(--rust-deep); }
  .footbottom{
    margin-top:64px; padding-top:24px;
    border-top:1px solid rgba(255,255,255,0.12);
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
    font-size:0.9rem; color:var(--cream); opacity:0.65;
  }
  .footbottom a{ color:inherit; text-decoration:none; }
.footbottom a:hover{ text-decoration:underline; }

  .foot-dot{ opacity:0.6; }
  .foot-dot {
  opacity: 0.6;
  margin: 0 0.4em;
}
@media (max-width: 700px) {
  .foot-dot {
    margin: 0 0.25em;
  }
}
  .footlinks{ display:flex; gap:16px; }
  .footlinks a{ color:inherit; text-decoration:none; }
  .footlinks a:hover{ text-decoration:underline; }
  
.legal-section a{ text-decoration:none; }
.legal-section a:hover{ text-decoration:underline; }
  /* subtle grain texture — adds tactile warmth without visual noise */
  body::before{
    content:"";
    position:fixed; inset:0; z-index:0; pointer-events:none;
    opacity:0.045; mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  nav, .hero, .situations, .bio, .about, .section-tools, .section-blog, footer{
    position:relative; z-index:1;
  }

  /* scroll reveal */
  .reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
  .reveal.in{ opacity:1; transform:translateY(0); }
  @media (prefers-reduced-motion: reduce){
    .reveal{ opacity:1; transform:none; }
  }