:root {
    --green:#72836d;
    --light:#c7cec2;
    --cream:#f8f7f3;
    --ink:#2b342c
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth
}

/* Grundstil der ganzen Seite: Hintergrund, Textfarbe, Schriftart und Zeilenhöhe. */
body {
    margin:0;
    background:var(--cream);
    color:var(--ink);
    font:16px/1.65 Arial,Helvetica,sans-serif
}

h1,h2,h3 {
    line-height:1.08;
    letter-spacing:-.04em;
    font-weight:500
}

h1 {
    font-size:clamp(3.4rem,7vw,7rem);
    margin:14px 0 30px
}

h1 em {
    color:var(--green);
    font-weight:400
}

h2 {
    font-size:clamp(2.4rem,4.6vw,4.4rem);
    margin:10px 0 28px
}

h3 {
   font-size:clamp(2.4rem,4.6vw,4.4rem);
    margin:10px 0 28px
}


.wrap {
    max-width:1200px;
    margin:auto;
    padding-left:26px;
    padding-right:26px
}

/* Obere Leiste: Höhe, Ausrichtung und sticky-Position beim Scrollen. */
header {
    height:100px;
    display:flex;
    align-items:center;
    gap:38px;
    padding:15px max(26px,calc((100% - 1148px)/2));
    position:sticky;
    top:0;
    z-index:10;
    background:rgba(248,247,243,.97);
    border-bottom:1px solid #e4e7df
}

header .logo {
    display:flex;
    align-items:center;
    flex-shrink:0
}

header .logo img {
    width:148px;
    height:auto;
    display:block
}

nav {
    display:flex;
    gap:29px;
    margin-left:auto
}

nav a,.more {
    color:var(--ink);
    text-decoration:none;
    font-weight:600
}

.btn {
    background:var(--green);
    border-radius:50px;
    color:white;
    text-decoration:none;
    padding:13px 22px;
    font-weight:700;
    display:inline-block;
    white-space:nowrap
}

.menu {
    display:none
}

/* Startbereich mit zwei Spalten für Text und C-Grafik. */
.hero {
    display:grid;
    grid-template-columns:1.1fr .9fr;
    align-items:center;
    gap:65px;
    min-height:680px;
    padding-top:55px;
    padding-bottom:80px
}

.eyebrow {
    font-size:1.5rem;
    letter-spacing:.15em;
    font-weight:800;
    color:var(--green)
}

.lead {
    font-size:1.2rem;
    color:#526053;
    max-width:570px
}

.notice {
    border-left:4px solid var(--green);
    padding:8px 0 8px 18px;
    margin:26px 0;
    background:#edf0e9
}

.notice strong,.notice span {
    display:block
}

.actions {
    display:flex;
    gap:24px;
    align-items:center;
    flex-wrap:wrap;
    margin:28px 0
}

.badges {
    display:flex;
    flex-wrap:wrap;
    gap:8px
}

.badges span {
    border:1px solid #c9d1c7;
    border-radius:50px;
    padding:5px 12px;
    font-size:.83rem
}

/* Helles Feld für das große stilisierte C. */
.hero-art {
    height:560px;
    position:relative;
    overflow:hidden;
    background:#edf1e9;
    border-radius:28px;
    display:flex;
    justify-content:center;
    align-items:center
}

/* Skalierung und Transparenz des C; opacity: 0 bis 1. */
.hero-art>img {
    width:112%;
    height:112%;
    object-fit:contain;
    opacity:.7
}

.hero-stat {
    position:absolute;
    bottom:25px;
    left:25px;
    color:var(--ink);
    display:flex;
    align-items:baseline;
    gap:12px;
    background:rgba(248,247,243,.85);
    padding:12px 22px;
    border-radius:18px
}

.hero-stat strong {
    font-size:3.5rem;
    font-weight:400
}

.hero-stat span {
    max-width:150px;
    line-height:1.3
}

/* Zweispaltiges Layout für Praxis, Team und Kontakt. */
.two {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:85px;
    align-items:center
}

.intro {
    padding:105px 0;
    position:relative;
    overflow:hidden
}

.intro:before {
    content:"";
    position:absolute;
    right:-130px;
    bottom:-200px;
    width:550px;
    height:550px;
    background:url('assets/c-light.png') center/contain no-repeat;
    opacity:.1;
    pointer-events:none
}

.intro .wrap {
    position:relative
}

.intro .two p {
    font-size:1.13rem
}

.services {
    background:#eaf0e8;
    padding:100px 0 110px
}

/* Raster der Leistungskacheln. */
.cards {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    margin-top:45px
}

.cards article {
    background:white;
    border-radius:18px;
    padding:34px;
    min-height:290px
}

.cards article:nth-child(2) {
    background:#d9e2d5
}

.cards article span {
    opacity:.55
}

.cards h3 {
    font-size:1.7rem;
    margin-top:60px
}

.team {
    padding-top:110px;
    padding-bottom:110px
}

.team-art {
    height:470px;
    border-radius:22px;
    background:#e6ece2;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center
}

.team-art img {
    width:92%;
    height:92%;
    object-fit:contain;
    opacity:.5
}

.names {
    border-top:1px solid #cbd2c8;
    margin-top:30px
}

.names div {
    border-bottom:1px solid #cbd2c8;
    padding:14px 0;
    font-weight:700
}

/* Optionaler Fotobereich, derzeit im HTML auskommentiert. */
.gallery {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    margin-bottom:90px
}

.gallery img {
    width:100%;
    height:350px;
    object-fit:cover;
    border-radius:20px
}

/* Kontaktbereich mit eigenem Hintergrund. */
.contact {
    background:#dbe5d7;
    padding:100px 0
}

.contact-card {
    background:white;
    border-radius:20px;
    padding:40px
}

.contact-card h3 {
    font-size:1.8rem
}

.contact-card a:not(.btn) {
    color:var(--green)
}

/* Fußzeile mit Impressum und Datenschutz. */
footer {
    padding:35px 0;
    background:#edf1ea
}

.foot {
    display:flex;
    justify-content:space-between;
    align-items:center
}

.foot img {
    width:150px
}

.foot a {
    color:var(--ink)
}

/* Responsive Anpassung für schmale Bildschirme (maximal 850 Pixel). */
@media(max-width:850px) {
/* Obere Leiste: Höhe, Ausrichtung und sticky-Position beim Scrollen. */
header {
    height:80px;
    gap:12px
}

header .logo img {
    width:120px
}

.menu {
    display:block;
    margin-left:auto;
    border:0;
    background:none;
    font-size:1.7rem
}

header nav {
    display:none;
    position:absolute;
    top:80px;
    left:0;
    right:0;
    background:var(--cream);
    padding:25px;
    flex-direction:column
}

header nav.open {
    display:flex
}

.headbtn {
    display:none
}

.hero,.two {
    grid-template-columns:1fr;
    gap:30px
}

/* Startbereich mit zwei Spalten für Text und C-Grafik. */
.hero {
    padding-top:35px
}

/* Helles Feld für das große stilisierte C. */
.hero-art {
    height:420px
}

/* Raster der Leistungskacheln. */
.cards {
    grid-template-columns:1fr
}

.intro,.services,.contact {
    padding:70px 0
}

.team {
    padding-top:70px;
    padding-bottom:70px
}

.team-art {
    height:330px
}

/* Optionaler Fotobereich, derzeit im HTML auskommentiert. */
.gallery {
    grid-template-columns:1fr
}

.foot {
    gap:30px;
    flex-wrap:wrap
}


}

.notice a {
    color:var(--green);
    font-weight:800
}

/* Raster der Leistungskacheln. */
.cards {
    grid-template-columns:repeat(2,1fr)
}

.cards .direct-access {
    background:#d9e2d5
}

.small-note {
    font-size:.88rem;
    color:#556157
}

.phone-link {
    display:block;
    margin-top:15px;
    color:var(--green)!important;
    font-weight:700
}

.contact-card .btn {
    margin-top:8px
}

/* Responsive Anpassung für schmale Bildschirme (maximal 850 Pixel). */
@media(max-width:850px) {
/* Raster der Leistungskacheln. */
.cards {
    grid-template-columns:1fr
}


}