/* ORDNEN – gemeinsame Styles für alle Seiten */
/* Basis und Startseite: unverändert aus der zuletzt mobil optimierten Version */

:root{
      --bg:#fbf2e7;
      --paper:#fffaf4;
      --ink:#3b3029;
      --muted:#74645a;
      --accent:#d97832;
      --line:#e4c9b0;
      --soft:#f3dfcc;
      --complement:#24545a;
      --max:1120px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--ink);
      background:var(--bg);
      font-family:Georgia, "Times New Roman", serif;
      line-height:1.65;
    }
    h1,h2,h3,p{margin-top:0}
    h1,h2,h3{font-weight:400;line-height:1.15}
    h1{font-size:clamp(1.75rem,3vw,2.7rem);max-width:900px;margin-bottom:1.5rem}
    h2{font-size:clamp(1.42rem,2vw,1.95rem);margin-bottom:1.2rem}
    h3{font-size:1.32rem;margin-bottom:.55rem}
    p{font-size:1.08rem}
    a{color:inherit}
    .wrap{width:100%;max-width:var(--max);margin:auto;padding-inline:clamp(20px,4vw,40px)}
    header{
      position:sticky;top:0;z-index:10;
      background:rgba(251,242,231,.94);
      backdrop-filter:blur(8px);
      border-bottom:1px solid var(--line);
    }
    nav{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:20px}
    .brand{font-size:1.2rem;text-decoration:none}
    nav ul{display:flex;gap:24px;list-style:none;padding:0;margin:0}
    nav a{text-decoration:none;font-size:.95rem}
    .hero{min-height:auto;display:flex;align-items:center;padding:22px 0 44px}
    .hero-inner{max-width:950px}
    main section > .wrap{max-width:950px}
    .eyebrow{
      text-transform:uppercase;letter-spacing:.16em;font-size:.78rem;
      color:var(--accent);margin-bottom:11px
    }
    .lead{font-size:clamp(1.16rem,1.7vw,1.36rem);max-width:760px}
    .hero-note{margin-top:28px;color:var(--muted);max-width:620px}
    section{padding:38px 0}
    .intro{max-width:720px}
    .gabe-einheit{
      display:grid;
      grid-template-columns:minmax(0,1fr) 430px;
      gap:48px;
      align-items:center;
      margin-bottom:4px;
    }
    .dreiklang-grafik{
      width:100%;
      max-width:430px;
      margin:0 auto;
      text-align:center;
    }
    .dreiklang-grafik img{
      display:block;
      width:100%;
      height:auto;
      margin:auto;
    }
    .three{
      display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:14px
    }
    .card{
      background:var(--paper);border:1px solid var(--line);
      padding:34px;min-height:280px
    }
    .label{font-size:.78rem;letter-spacing:.15em;color:var(--accent);margin-bottom:16px}
    .sub{font-size:1rem;color:var(--muted);margin-bottom:24px}
    .order-core{
      margin:55px auto 0;
      max-width:900px;
      display:grid;
      grid-template-columns:minmax(240px,360px) minmax(0,1fr);
      gap:44px;
      align-items:center;
      text-align:left;
      padding:38px 30px;
      border-top:1px solid var(--line);
      border-bottom:1px solid var(--line)
    }
    .order-core-logo{
      display:block;
      width:100%;
      max-width:340px;
      height:auto;
    }
    .order-core-text{min-width:0}
    .order-core strong{display:block;font-size:2.2rem;font-weight:400;margin-bottom:14px}
    .steps{font-size:1.1rem;letter-spacing:.03em}
    .offer{
      display:block;
      padding:22px 0
    }
        .offer p{max-width:760px}
    #angebote{background:#f7e9da}
    #ueber-mich,#gabe{background:#f7efe7}
    #ueber-mich{padding-bottom:2px}
    #gabe{padding-top:4px}
    .method{background:var(--soft)}
    .method-grid{
      display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:26px
    }
    .method-item{background:rgba(255,253,248,.7);padding:28px}
    .about{display:grid;grid-template-columns:1fr 1.3fr;gap:70px}
    .quote{
      font-size:clamp(1.42rem,2vw,1.95rem);line-height:1.3;
      padding-top:10px
    }
    .contact{
      background:var(--complement);color:var(--paper);padding:44px 0
    }
    .contact p{max-width:650px}
    .button{
      display:inline-block;margin-top:20px;padding:14px 24px;
      border:1px solid rgba(255,253,248,.7);text-decoration:none
    }
    footer{padding:22px 0;color:var(--muted);font-size:.9rem}

    .hero-logo{
      display:block;
      width:min(780px,90vw);
      height:auto;
      margin:0 0 16px -8px;
    }
    @media(max-width:800px){
      nav ul{display:none}
      .three,.method-grid,.about,.gabe-einheit{grid-template-columns:1fr}
      .gabe-einheit{gap:24px}
      .dreiklang-grafik{max-width:400px}
      .order-core{grid-template-columns:1fr;gap:22px;text-align:center}
      .order-core-logo{max-width:320px;margin:auto}
      .hero{min-height:auto;padding-top:20px}
    }
  
    /* Mobile-/Tablet-Feinschliff – nur Darstellung, keine Inhalte */
    img{max-width:100%;}

    @media(max-width:800px){
      .wrap{padding-inline:20px}

      header{position:static}
      nav{
        min-height:auto;
        padding:14px 0;
        align-items:flex-start;
        flex-direction:column;
        gap:10px;
      }
      nav ul{
        display:flex;
        flex-wrap:wrap;
        gap:8px 16px;
        width:100%;
      }
      nav a{font-size:.92rem}

      section{padding:30px 0}

      .hero{padding:20px 0 32px}
      .hero-logo{
        width:min(620px,100%);
        margin-left:0;
      }

      .three,
      .method-grid,
      .about,
      .gabe-einheit,
      .page-hero-row,
      .price-grid,
      .order-core{
        grid-template-columns:1fr;
      }

      .three,
      .method-grid{gap:14px}

      .card,
      .method-item,
      .price-card{
        min-height:auto;
        padding:24px;
      }

      .about{gap:26px}
      .gabe-einheit{gap:22px}

      .dreiklang-grafik{max-width:380px}

      .order-core{
        gap:20px;
        padding:28px 18px;
        text-align:center;
      }
      .order-core-logo{
        max-width:300px;
        margin:auto;
      }

      .page-hero{
        padding:20px 0;
      }
      .page-hero-row{
        gap:16px;
      }
      .page-hero-logo{
        max-width:300px;
        justify-self:start;
      }

      .page-content{
        padding:28px 0 34px;
      }

      .contact{
        padding:36px 0;
      }

      footer .wrap{
        line-height:1.9;
        overflow-wrap:anywhere;
      }
    }

    @media(max-width:520px){
      .wrap{padding-inline:16px}

      h1{font-size:clamp(1.65rem,8vw,2.1rem)}
      h2{font-size:clamp(1.32rem,6vw,1.7rem)}
      h3{font-size:1.18rem}
      p{font-size:1rem}

      .lead{font-size:1.08rem}

      nav ul{
        gap:6px 12px;
      }
      nav a{
        font-size:.88rem;
      }

      .eyebrow{
        letter-spacing:.12em;
        font-size:.72rem;
      }

      .card,
      .method-item,
      .price-card{
        padding:20px;
      }

      .order-core strong{
        font-size:1.75rem;
      }
      .steps{
        font-size:1rem;
      }

      .button{
        display:block;
        width:100%;
        text-align:center;
        padding:13px 18px;
      }

      .page-hero-logo{
        max-width:250px;
      }

      .dreiklang-grafik{
        max-width:320px;
      }
    }

/* Unterseiten: Preise, Kontakt, Impressum und Datenschutz */
/* Bewusst auf .subpage begrenzt, damit die Startseite optisch unverändert bleibt. */

body.subpage h1,
body.subpage h2,
body.subpage h3,
body.subpage p{margin-top:0}

body.subpage h1,
body.subpage h2,
body.subpage h3{font-weight:400;line-height:1.15}

body.subpage h1{font-size:clamp(1.75rem,3vw,2.7rem);max-width:900px;margin-bottom:1.15rem}

body.subpage h2{font-size:clamp(1.42rem,2vw,1.95rem);margin-bottom:.75rem}

body.subpage h3{font-size:1.32rem;margin-bottom:.55rem}

body.subpage p{font-size:1.08rem}

body.subpage a{color:inherit}

body.subpage .wrap{width:100%;max-width:var(--max);margin:auto;padding-inline:clamp(20px,4vw,40px)}

body.subpage header{position:sticky;top:0;z-index:10;background:rgba(251,242,231,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}

body.subpage nav{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:20px}

body.subpage .brand{font-size:1.2rem;text-decoration:none}

body.subpage nav ul{display:flex;gap:24px;list-style:none;padding:0;margin:0}

body.subpage nav a{text-decoration:none;font-size:.95rem}

body.subpage main section > .wrap{max-width:950px}

body.subpage .eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:.78rem;
  color:var(--accent);margin-bottom:11px}

body.subpage .lead{font-size:clamp(1.16rem,1.7vw,1.36rem);max-width:760px}

body.subpage .hero-logo{display:block;width:min(780px,90vw);height:auto;margin:0 0 18px -8px}

body.subpage .page-hero{padding:24px 0 24px}

body.subpage .page-hero-row{display:grid;
  grid-template-columns:minmax(0,1fr) minmax(260px,390px);
  gap:40px;
  align-items:center;}

body.subpage .page-hero-copy h1{margin-bottom:0}

body.subpage .page-hero-logo{display:block;
  width:100%;
  max-width:390px;
  height:auto;
  justify-self:end;}

body.subpage .page-content{padding:28px 0 44px}

body.subpage .page-content .wrap{max-width:950px}

body.subpage .page-content p{max-width:760px}

body.subpage .page-content h2{margin-top:34px}

body.subpage .note{color:var(--muted);font-size:.95rem}

body.subpage .price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px}

body.subpage .price-card{background:var(--paper);border:1px solid var(--line);padding:30px}

body.subpage .label{font-size:.78rem;letter-spacing:.15em;color:var(--accent);margin-bottom:16px}

body.subpage .price{font-size:1.32rem;color:var(--accent);margin:12px 0}

body.subpage .order-section{padding:4px 0 38px}

body.subpage .order-core{margin:26px auto 0;max-width:900px;display:grid;
  grid-template-columns:minmax(240px,360px) minmax(0,1fr);
  gap:44px;align-items:center;text-align:left;padding:38px 30px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

body.subpage .order-core-logo{display:block;width:100%;max-width:340px;height:auto}

body.subpage .order-core-text{min-width:0}

body.subpage .order-core strong{display:block;font-size:2.2rem;font-weight:400;margin-bottom:14px}

body.subpage .steps{font-size:1.1rem;letter-spacing:.03em}

body.subpage .contact{background:var(--complement);color:var(--paper);padding:44px 0}

body.subpage .contact p{max-width:650px}

body.subpage .button{display:inline-block;margin-top:20px;padding:14px 24px;
  border:1px solid rgba(255,253,248,.7);text-decoration:none}

body.subpage footer{padding:22px 0;color:var(--muted);font-size:.9rem}

@media (max-width:800px){
body.subpage nav ul{display:none}
body.subpage .price-grid{grid-template-columns:1fr}
body.subpage .page-hero-row{grid-template-columns:1fr;gap:18px}
body.subpage .page-hero-logo{max-width:330px;justify-self:start}
body.subpage .page-hero{padding-top:20px}
}

body.subpage .page-content{padding:32px 0 36px}

body.subpage .page-content h2{margin-top:1.55rem}

body.subpage .page-content h2:first-child{margin-top:0}

body.subpage .page-content p{margin-bottom:.9rem}

body.subpage img{max-width:100%;}

@media (max-width:800px){
body.subpage .wrap{padding-inline:20px}
body.subpage header{position:static}
body.subpage nav{min-height:auto;
        padding:14px 0;
        align-items:flex-start;
        flex-direction:column;
        gap:10px;}
body.subpage nav ul{display:flex;
        flex-wrap:wrap;
        gap:8px 16px;
        width:100%;}
body.subpage nav a{font-size:.92rem}
body.subpage section{padding:30px 0}
body.subpage .hero{padding:20px 0 32px}
body.subpage .hero-logo{width:min(620px,100%);
        margin-left:0;}
body.subpage .three,
body.subpage .method-grid,
body.subpage .about,
body.subpage .gabe-einheit,
body.subpage .page-hero-row,
body.subpage .price-grid,
body.subpage .order-core{grid-template-columns:1fr;}
body.subpage .three,
body.subpage .method-grid{gap:14px}
body.subpage .card,
body.subpage .method-item,
body.subpage .price-card{min-height:auto;
        padding:24px;}
body.subpage .about{gap:26px}
body.subpage .gabe-einheit{gap:22px}
body.subpage .dreiklang-grafik{max-width:380px}
body.subpage .order-core{gap:20px;
        padding:28px 18px;
        text-align:center;}
body.subpage .order-core-logo{max-width:300px;
        margin:auto;}
body.subpage .page-hero{padding:20px 0;}
body.subpage .page-hero-row{gap:16px;}
body.subpage .page-hero-logo{max-width:300px;
        justify-self:start;}
body.subpage .page-content{padding:28px 0 34px;}
body.subpage .contact{padding:36px 0;}
body.subpage footer .wrap{line-height:1.9;
        overflow-wrap:anywhere;}
}

@media (max-width:520px){
body.subpage .wrap{padding-inline:16px}
body.subpage h1{font-size:clamp(1.65rem,8vw,2.1rem)}
body.subpage h2{font-size:clamp(1.32rem,6vw,1.7rem)}
body.subpage h3{font-size:1.18rem}
body.subpage p{font-size:1rem}
body.subpage .lead{font-size:1.08rem}
body.subpage nav ul{gap:6px 12px;}
body.subpage nav a{font-size:.88rem;}
body.subpage .eyebrow{letter-spacing:.12em;
        font-size:.72rem;}
body.subpage .card,
body.subpage .method-item,
body.subpage .price-card{padding:20px;}
body.subpage .order-core strong{font-size:1.75rem;}
body.subpage .steps{font-size:1rem;}
body.subpage .button{display:block;
        width:100%;
        text-align:center;
        padding:13px 18px;}
body.subpage .page-hero-logo{max-width:250px;}
body.subpage .dreiklang-grafik{max-width:320px;}
}


/* Sprungziel „Über mich“: Überschrift bleibt nach Klick in der Navigation sichtbar */
#ueber-mich{
  scroll-margin-top:100px;
}

@media(max-width:800px){
  #ueber-mich{
    scroll-margin-top:20px;
  }
}


/* Einheitliche Sprungziele der Startnavigation:
   ein kleiner Streifen der vorherigen Hintergrundfarbe bleibt oben sichtbar. */
#gabe,
#angebote,
#vorgehen,
#kontakt{
  scroll-margin-top:100px;
}

@media(max-width:800px){
  #gabe,
  #angebote,
  #vorgehen,
  #kontakt{
    scroll-margin-top:20px;
  }
}


/* Foto im Bereich „Über mich“ */
.about-photo{
  display:block;
  width:100%;
  max-width:360px;
  height:auto;
  margin-top:22px;
}


/* Kundenstimmen */
.testimonial{
  margin:2rem 0 0;
  padding:0 2rem;
  border-left:3px solid var(--accent);
}
#testimonials .testimonial p{margin-bottom:5px;}
#testimonials .testimonial footer{margin:0;padding:0;}
#testimonials .button{border:1px solid var(--accent);}
#testimonials{scroll-margin-top:100px;}
@media(max-width:800px){
  #testimonials{scroll-margin-top:20px;}
}