/* =========================================================================
   Welver Optik – Stylesheet
   1:1-Nachbau der bisherigen WordPress/Elementor-Seite (ohne Framework).
   Breakpoints wie im Original: Tablet <= 1024px, Smartphone <= 767px.
   ========================================================================= */

/* --- Schriften (lokal) -------------------------------------------------- */
@font-face {
    font-family: "Renogare";
    src: url("/assets/fonts/Renogare-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "FA Solid";
    src: url("/assets/fonts/fa-solid-subset.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: "eicons";
    src: url("/assets/fonts/eicons-subset.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

/* --- Variablen ---------------------------------------------------------- */
:root {
    --green: #a6d116;
    --blue: #219ce0;
    --navy: #15445f;
    --text: #54595f;
    --grey: #666666;
    --light: #f5f7f8;
    --font-head: "Renogare", sans-serif;
    --font-body: Verdana, sans-serif;
    --font-btn: Muli, sans-serif;
    --h-header: 85px;
}

/* --- Reset / Basis ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
    overflow-x: hidden;
    overscroll-behavior: none;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text);
    background-color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

h1, h2, h3, h4, h5, h6 {
    margin-block: .5rem 1rem;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.2;
    color: inherit;
}

p { margin: 0 0 .9rem; }

a { background-color: transparent; text-decoration: none; color: var(--green); }
a:hover { color: var(--blue); }

img { border-style: none; height: auto; max-width: 100%; }


button, input, textarea { font-family: inherit; font-size: 1rem; line-height: 1.5; margin: 0; }

.skip-link {
    position: absolute;
    top: -140000px;
    left: -1px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.skip-link:focus {
    top: 5px;
    left: 5px;
    width: auto;
    height: auto;
    z-index: 100000;
    padding: 15px 23px 14px;
    background: #f1f1f1;
    color: #21759b;
    font-size: 14px;
    font-weight: 700;
    line-height: normal;
}

.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --- Sichtbarkeit je Gerät (wie im Original) ---------------------------- */
@media (min-width: 1025px) { .hide-desktop { display: none !important; } }
@media (min-width: 768px) and (max-width: 1024px) { .hide-tablet { display: none !important; } }
@media (max-width: 767px) { .hide-phone { display: none !important; } }

/* =========================================================================
   Layout-Bausteine
   .sec  = Sektion (Vollbreite, Hintergrund)
   .row  = Inhaltsbreite, flex
   .col  = Spalte, .col__in = Spalteninhalt (Innenabstand = Spaltenabstand)
   ========================================================================= */
.sec { position: relative; }
.ov {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.row {
    position: relative;
    display: flex;
    width: 100%;
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
}

.col {
    position: relative;
    display: flex;
    min-height: 1px;
    width: 100%;
}

.col__in {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    width: 100%;
    padding: 10px;
}
.gap-no > .col > .col__in { padding: 0; }
.gap-wide > .col > .col__in { padding: 20px; }
.gap-wider > .col > .col__in { padding: 30px; }

.col__in > * { width: 100%; }
.col__in > *:not(:last-child) { margin-bottom: 20px; }
.col__in > .w-auto { width: auto; max-width: 100%; }

.mid > .row > .col > .col__in { align-content: center; align-items: center; }

@media (min-width: 768px) {
    .col-50 { width: 50%; }
}
@media (max-width: 767px) {
    .row { flex-wrap: wrap; }
}

/* --- Widgets ------------------------------------------------------------ */
.h {
    margin: 0;
    padding: 0;
    font-family: var(--font-head);
    font-weight: 400;
    line-height: 1;
}
.h--28 { font-size: 28px; color: var(--green); }
.h--18 { font-size: 18px; color: #444; }
.clamp { display: flow-root; }
.h--sub { margin-top: -17px; }

.divider { display: flex; margin-top: -8px; padding: 6px 0; }
.divider::before {
    content: "";
    display: block;
    width: 48px;
    border-top: 4px solid var(--blue);
}
.divider--64 { margin-top: 0; padding: 8px 0; }
.divider--64::before { width: 64px; }
.divider--green::before { border-top-color: var(--green); }
.divider--center { justify-content: center; }

.text { color: var(--grey); padding-bottom: 24px; }
.text > p:last-child { margin-bottom: 0; }

.btn {
    display: inline-block;
    line-height: 1em;
    font-family: var(--font-btn);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .15px;
    text-align: center;
    color: #f9f9f9;
    background-color: var(--green);
    padding: 15px 30px 15px 35px;
    border-radius: 0;
    transition: all .3s;
}
.btn:hover, .btn:focus { color: #fff; background-color: var(--blue); }

/* =========================================================================
   Kopfzeile
   ========================================================================= */
.site-header {
    position: sticky;
    top: 0;
    z-index: 99;
    height: var(--h-header);
    padding: 0 150px;
    background-color: #fff;
    transition: all .3s ease;
}
.site-header__row {
    display: flex;
    align-items: flex-start;
    max-width: 1140px;
    margin: 0 auto;
}
.site-header__col { width: 50%; padding: 0 10px; }
.site-header__col--right { display: flex; justify-content: flex-end; }
.site-logo { display: inline-block; max-width: 100%; margin-top: 10px; line-height: 0; }
.site-logo img { display: block; width: 52%; height: auto; }

.burger {
    display: block;
    width: 35px;
    height: 35px;
    margin-top: 28px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    color: var(--navy);
    line-height: 0;
}
.burger svg { display: block; width: 35px; height: 35px; fill: currentColor; }
.burger:hover, .burger:focus-visible { color: var(--blue); }

@media (max-width: 1024px) {
    .site-header { --h-header: 95px; padding: 0 85px; }
}
@media (max-width: 767px) {
    .site-header { --h-header: 63px; padding: 0 20px; }
    .site-logo { margin-top: 5px; }
    .site-logo img { width: 55%; }
    .burger { width: 25px; height: 25px; margin-top: 17px; }
    .burger svg { width: 25px; height: 25px; }
}

/* =========================================================================
   Menü (Schublade von rechts)
   ========================================================================= */
.drawer {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    visibility: hidden;
    pointer-events: none;
}
.drawer.is-open { visibility: visible; pointer-events: all; }

.drawer__panel {
    position: relative;
    width: 360px;
    max-width: 100vw;
    height: 100vh;
    padding: 15px;
    overflow: auto;
    background: #fff;
    box-shadow: 2px 8px 23px 3px rgba(0, 0, 0, .2);
    transform: translateX(100%);
    opacity: 0;
    transition: transform .6s, opacity .6s, visibility 0s .6s;
}
.drawer.is-open .drawer__panel {
    transform: none;
    opacity: 1;
    transition: transform .6s, opacity .6s;
}

.drawer__close {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 2;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    color: var(--green);
    font-family: "eicons";
    font-size: 24px;
    line-height: 1;
}
.drawer__close::before { content: "\e87f"; }
.drawer__close:hover, .drawer__close:focus-visible { color: var(--blue); }

.drawer__body { margin-top: 50px; }
.drawer__logo { display: inline-block; line-height: 0; }
.drawer__logo img { width: 140px; height: auto; }

.drawer__nav a {
    display: block;
    padding: 13px 0;
    font-family: Verdana, sans-serif;
    font-size: 15px;
    line-height: 20px;
    color: var(--text);
}
.drawer__nav a:hover, .drawer__nav a:focus, .drawer__nav a[aria-current="page"] { color: var(--navy); }

.drawer__addr {
    padding-top: 50px;
    font-family: Verdana, sans-serif;
    line-height: .1em;
    color: var(--text);
}

@media (max-width: 767px) {
    .drawer__panel { width: 207px; }
    .drawer__nav { padding: 10px 0 20px; }
    .drawer__nav a { font-size: 18px; }
    .drawer__addr { padding-top: 150px; }
}

/* =========================================================================
   Hero
   ========================================================================= */
.hero {
    position: relative;
    background-color: rgba(0, 0, 0, 0);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.hero > .ov { background-color: #fff; opacity: .5; }
.hero > .row { max-width: 1040px; min-height: 66vh; align-items: center; }
.hero--home > .row { min-height: 90vh; }
.hero__inner { display: flex; flex-wrap: wrap; width: 100%; }
.hero__inner > * { width: 100%; }
.hero__title { color: var(--navy); font-size: 66px; }
.hero__sub { padding: 10px 0; font-size: 20px; color: var(--navy); }

.hero__video {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.hero__video video {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 1025px) {
    .hero, .fixed-bg { background-attachment: fixed; }
}

/* =========================================================================
   Sektionen (Inhaltsbereiche)
   ========================================================================= */
.sec--white { background-color: #fff; }
.sec--light { background-color: #f7f9fa; }

/* Hintergrundbild mit fast deckender Überlagerung (feine Textur) */
.sec--tex { background-color: #f7f9fa; background-size: cover; background-position: center center; background-repeat: no-repeat; }
.sec--tex::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #f7f9fa;
    opacity: .98;
    pointer-events: none;
}
.sec--tex-grad::before {
    background-color: transparent;
    background-image: linear-gradient(45deg, #f7f9fa 0%, #f5f7f9 100%);
    opacity: .96;
}

/* Text-Bild-Sektion (Standard: 1040px, Innenabstand 80px) */
.sec--pad-80 { padding: 80px 0; }
.sec--w-1040 > .row { max-width: 1040px; }
.sec--w-1020 > .row { max-width: 1020px; }
.sec--w-1000 > .row { max-width: 1000px; }
.sec--center > .row { text-align: center; }

.pic { text-align: center; line-height: 0; }
.pic img { display: inline-block; vertical-align: middle; }

/* Weißer Rahmen um Bilder: Hintergrundbild scheint durch (Startseite) */

/* --- Icon-Box (Leistungen auf der Startseite) --------------------------- */
.iconbox { display: flex; align-items: flex-start; gap: 20px; text-align: left; }
.iconbox__icon { flex: 0 0 auto; display: inline-block; line-height: 0; color: var(--navy); }
.iconbox__icon svg { display: block; width: 55px; height: 55px; fill: currentColor; }
.iconbox:hover .iconbox__icon, .iconbox:focus-within .iconbox__icon { color: var(--blue); }
.iconbox__body { flex-grow: 1; width: 100%; }
.iconbox__title { margin: 8px 0; font-family: var(--font-head); font-size: 18px; font-weight: 400; line-height: 1.2; color: #333; }
.iconbox__title a { color: inherit; }
.iconbox__text { margin: 0; color: #999; }

/* --- Icon-Liste (Detail-Listen) ----------------------------------------- */
.drawer__nav ul { list-style: none; margin: 0; padding: 0; }
.ilist { list-style: none; margin: 0; padding: 0; text-align: left; }
.ilist li { display: flex; align-items: center; margin: 0; padding: 0; }
.ilist li + li { margin-top: 4px; }
.ilist li:not(:last-child) { padding-bottom: 4px; }
.ilist__ic { display: flex; width: 1.25em; font-family: "FA Solid"; font-weight: 900; font-style: normal; font-size: 14px; line-height: 1; color: var(--blue); }
.ilist__ic::before { content: "\f054"; }
.ilist__ic + span { align-self: center; padding-left: 5px; }
.ilist a { display: flex; align-items: center; color: inherit; }

/* --- Farbige Sektion (Schon gewusst? / Der Mensch im Mittelpunkt) -------- */
.cta { background-size: cover; background-repeat: no-repeat; background-position: bottom center; }
.cta > .ov { background-color: var(--navy); opacity: .89; }
.cta > .row { max-width: 1000px; text-align: center; }

@media (min-width: 1025px) {
    .sec--tex, .cta, .hero { background-attachment: fixed; }
}

/* =========================================================================
   Kontaktformular (vor dem Footer)
   ========================================================================= */
.cform { padding: 50px 0; background-color: var(--light); }
.cform .h--28, .cform .h--18 { text-align: center; }
.cform__text { padding: 0 150px; text-align: center; color: var(--text); }
.cform__form { padding: 0 150px; }

.form__grid { display: flex; flex-wrap: wrap; margin: 0 -5px -10px; }
.field { width: 100%; padding: 0 5px; margin-bottom: 10px; }
.field--half { width: 50%; }
.field input,
.field textarea {
    display: block;
    width: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
    background-color: #fff;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    transition: all .3s;
}
.field input { min-height: 40px; padding: 8px 16px; }
.field textarea { padding: 5px 14px; resize: vertical; }
.field--message { margin-bottom: 11px; }
.field input:focus,
.field textarea:focus { outline: 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.field--submit button {
    display: block;
    width: 100%;
    height: 40px;
    margin: 0;
    padding: 0 24px 0 29px;
    border: 0;
    border-radius: 0;
    background-color: var(--green);
    color: #fff;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    transition: all .3s;
}
.field--submit button:hover, .field--submit button:focus { background-color: var(--blue); color: #fff; }
.field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__msg { margin-top: 20px; font-size: 14px; line-height: 1.4; }
.form__msg[hidden] { display: none; }
.form__msg--ok { color: #5cb85c; }
.form__msg--err { color: #d9534f; }

@media (max-width: 767px) {
    .cform { padding-bottom: 0; }
    .cform__text { margin-top: -15px; padding: 0 10px; }
    .cform__form { padding: 0 10px; }
    .field--half { width: 100%; }
}

/* =========================================================================
   Footer
   ========================================================================= */
.footer { position: relative; background-color: var(--light); padding: 50px 0 100px; }
.footer .col > .col__in { padding: 0 0 0 50px; }
.footer__logo { margin: 0 0 0 -11px; line-height: 0; }
.footer__logo a { display: inline-block; }
.footer__logo img { width: 160px; height: auto; }
.footer__text { color: var(--text); }
.footer__text a { color: var(--text); }
.footer__text a:hover { color: var(--navy); }
.footer__line { margin-top: -35px; padding: 15px 0; }
.footer__line::before { width: 35%; }
.footer__line--31::before { width: 31%; }

@media (max-width: 767px) {
    .footer { padding-bottom: 100px; }
    .footer .col > .col__in { padding: 0 2em; }
    .footer .col + .col > .col__in { margin-top: 20px; }
}

/* Nach-oben-Button */
.to-top {
    position: fixed;
    right: 0;
    bottom: 50px;
    z-index: 90;
    width: auto;
    font-family: "FA Solid";
    font-weight: 900;
    font-style: normal;
    font-size: 40px;
    line-height: 1;
    color: var(--blue);
    transition: color .3s;
}
.to-top::before { content: "\f102"; display: block; width: 1em; text-align: center; }
.to-top:hover, .to-top:focus { color: var(--navy); }
@media (max-width: 767px) { .to-top { right: 5px; } }

/* =========================================================================
   Einblend-Animationen (Elementor: fadeIn, fadeInUp, pulse)
   ========================================================================= */
[data-anim] { visibility: hidden; }
.no-js [data-anim] { visibility: visible; }
[data-anim].is-in {
    visibility: visible;
    animation-duration: 1.25s;
    animation-fill-mode: both;
}
[data-anim="fadeIn"].is-in { animation-name: fadeIn; }
[data-anim="fadeInUp"].is-in { animation-name: fadeInUp; }
[data-anim="pulse"].is-in { animation-name: pulse; }
[data-anim-speed="fast"].is-in { animation-duration: .75s; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: none; } }
@keyframes pulse {
    from { transform: scale3d(1, 1, 1); }
    50% { transform: scale3d(1.05, 1.05, 1.05); }
    to { transform: scale3d(1, 1, 1); }
}

@media (prefers-reduced-motion: reduce) {
    [data-anim] { visibility: visible; }
    [data-anim].is-in { animation: none; }
    html { scroll-behavior: auto; }
}

/* =========================================================================
   Seitenspezifische Bausteine
   ========================================================================= */
@media (min-width: 768px) {
    .col-25 { width: 25%; }
    .col-40 { width: 40%; }
    .col-60 { width: 60%; }
}

.col > .col__in.col__in--flush { padding: 0; }
.col__in--tight > * { margin-bottom: 0 !important; }

/* Hero-Feinheiten */
.hero__divider { margin-bottom: 20px; }
.hero__title { margin-bottom: 20px; }
.col__in > .hero__inner { margin-bottom: 0; }
.hero .col__in > .btn { margin-bottom: 0; }
.btn--next { margin-left: 5px; }
.btn--m { margin-left: 5px; }

/* Startseite: Der Mensch im Mittelpunkt */
.intro { padding: 70px 0 80px; }
.intro > .row, .feature > .row { max-width: 1040px; }
.collage > .col > .col__in { padding: 0; }
.collage__frame { background-size: cover; background-position: center center; background-repeat: no-repeat; }
.pic__wc { display: block; }
.collage .pic > .pic__wc { margin: 2px; }
.collage .pic--a > .pic__wc { margin: 2px 2px 4px; }
.collage .pic--b > .pic__wc { margin: 0 2px 2px; }
.intro__text { width: 100%; }

.services-head { padding: 100px 0 30px; }
.services-head > .row { max-width: 1040px; }
.services > .row { max-width: 1020px; }
.feature { padding: 80px 0; }

.sec[id] { scroll-margin-top: -8px; }

/* Sektion "Schon gewusst?" */
.cta { padding: 40px 0 80px; }
.cta .h--45 { margin-bottom: 20px; }
.cta .h--cta { padding-bottom: 32px; }
.cta--24 .col__in > *:not(:last-child) { margin-bottom: 24px; }
.cta--btn { padding: 80px 0 60px; }
.cta .col__in { justify-content: center; }

.h--45 { font-size: 45px; color: #fff; }
.h--cta { font-size: 18px; color: #fff; }
.notice { padding: 20px; }

/* --- Service-Seiten (Augenoptik, Optometrie, Iridologie, Sehtraining) ---- */
.hero--bottom > .row { align-items: flex-end; }
.hero__inner > .hero__title { margin-bottom: 20px; }
.hero__inner .hero__sub { margin: 0; }

.h--19 { font-size: 19px; color: #444; }

@media (min-width: 768px) {
    .col-33 { width: 33.3333%; }
    .col-41 { width: 41.153%; }
    .col-52 { width: 52.019%; }
}

.sec--grad { background-color: #fff; }
.sec--grad::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(45deg, #f7f9fa 0%, #f5f7f9 100%);
    opacity: .96;
    pointer-events: none;
}
.sec--pad-80 { padding: 80px 0; }
.sec--pad-80 > .row { max-width: 1040px; }
.sec--white { background-color: #fff; }

.pic--up { margin-top: -8px; }
.pic--drop { margin-top: 8%; box-shadow: -5px 0 6px 0 rgba(0, 0, 0, .2); }
.pic--frame { padding: 2px; }

.detail-head { padding: 100px 0 30px; }
.detail-head > .row { max-width: 1040px; }
.detail-list { padding: 0 0 100px; }
.detail-list > .row { max-width: 1020px; }

.cta--home > .row { max-width: 1000px; }
.cta--page { padding: 80px 0 60px; }
.cta--page > .row { max-width: 1040px; }
.cta--page .col__in { padding: 30px; }
.cta--home { padding: 40px 0 80px; }
.col__in > .text.text--last { margin-bottom: 0; }

/* --- Über uns: Bilder-Collage -------------------------------------------- */
.pic-wc { line-height: 0; }
.pic-wc__in { display: block; }
.pic-wc img { display: inline-block; vertical-align: middle; width: 40%; height: auto; }
.pic-wc--center { text-align: center; }
.pic-wc--right { text-align: right; }
.pic-wc--left { text-align: left; }
.uc-1 .pic-wc__in { margin: 0 0 -68px -210px; }
.uc-2 .pic-wc__in { margin: -200px -15px 0 -210px; }
.uc-3 .pic-wc__in { margin: 0 0 -55px -80px; }
.uc-4 .pic-wc__in { margin: -100px 5px 0 -60px; }
.about-1 { padding: 80px 0 90px; }
.about-1 > .row { max-width: 1020px; }
.about-2 > .row, .about-3 > .row { max-width: 1040px; }
.about-3 { padding: 100px 0; }
.about-3 .col__in { text-align: center; }

/* --- Kontakt ------------------------------------------------------------- */
.sec--tint { background-color: #fff; }
.sec--tint::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #f7f9fa;
    opacity: .97;
    pointer-events: none;
}
.k-form { padding: 90px 0; }
.k-form > .row { max-width: 1040px; }
.k-form .form__grid .field { width: 100%; }

.k-info { padding: 4em 0; }
.k-info > .row { max-width: 1020px; }
.k-info .pic img { width: 100%; }
.k-map iframe { display: block; width: 100%; height: 450px; border: 0; }
.k-map__ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1em; min-height: 450px; padding: 2em; text-align: center; background: #eef1f4; font-size: 14px; line-height: 1.5; }
.k-map__ph p { margin: 0; max-width: 28em; }
.k-map__ph .btn { cursor: pointer; }
.k-team-head { padding: 7em 0 0; }
.k-team-head > .row, .k-team > .row { max-width: 1020px; }
.k-team { padding: 2em 0 8em; }

.clist { list-style: none; margin: 0; padding: 0; text-align: left; }
.clist li { display: flex; align-items: center; margin: 0; padding: 0; }
.clist li:not(:last-child) { padding-bottom: 6px; }
.clist li:not(:first-child) { margin-top: 6px; }
.clist a { display: flex; align-items: center; color: inherit; }
.clist__ic {
    display: flex;
    padding-right: 16px;
    font-family: "FA Solid";
    font-weight: 900;
    font-style: normal;
    font-size: 18px;
    line-height: 1;
    color: var(--green);
}
.clist__ic::before { display: block; width: 1.25em; }
.clist__ic--pin::before { content: "\f3c5"; }
.clist__ic--phone::before { content: "\f095"; }
.clist__ic--mail::before { content: "\f2b6"; }
.clist__txt { padding-left: 5px; font-size: 14px; line-height: 1.617em; color: var(--grey); }

.card {
    flex: 1 1 0;
    width: auto !important;
    margin: 20px;
    padding: 0 !important;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);
    text-align: left;
    transition: box-shadow .3s;
}
.card:hover { box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .2); }
.card > * { margin-bottom: 0 !important; }
.card__pic { padding: 40px 0 0; margin-bottom: 20px !important; text-align: center; line-height: 0; }
.card__pic img { width: 80%; border-radius: 2px 2px 0 0; }
.card__name { padding: 0 24px; margin-bottom: 4px !important; font-size: 18px; color: var(--text); }
.card__role { padding: 0 24px; margin-bottom: 16px !important; color: #aaa; line-height: 1.5; }
.card__mail { padding: 0 24px 24px; }
.card .clist a { font-family: Muli, sans-serif; font-size: 13px; color: var(--green); }
.card .clist__ic { font-size: 16px; color: #999; }
.card .clist__txt { font-size: 13px; color: var(--green); }
.card .clist a:hover .clist__txt { color: var(--blue); }

/* --- Impressum / Datenschutz / Platzhalterseiten -------------------------- */
.divider--flat { padding: 0; margin-top: 0; }
.text h4 { margin-block: .5rem 1rem; font-size: 1.5rem; font-weight: 500; line-height: 1.2; }

.page-plain { max-width: 1140px; margin: 0 auto; }
.page-plain__title { margin: 8px 0 16px; font-size: 2.5rem; font-weight: 500; line-height: 1.2; color: var(--text); }
.page-plain__content { padding-bottom: 0; }
.field--gap { height: 0; }

/* =========================================================================
   Akkordeon (Leistungen auf dem Smartphone)
   ========================================================================= */
.acc-sec { background-color: #f7f9fa; }
.acc { margin: 0; }
.acc__head { margin: 0; font-size: 20px; font-weight: 700; line-height: 20px; }
.acc__title {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 15px 15px 15px 59px;
    border: 0;
    border-radius: 0;
    background-color: var(--green);
    color: #fff;
    font-family: var(--font-head);
    font-size: 18px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
    cursor: pointer;
}
.acc__icon { position: absolute; top: 15px; left: 15px; width: 30px; height: 30px; }
.acc__icon svg { display: block; width: 30px; height: 30px; fill: #fff; }
.acc__label { display: block; margin: 2px 0 -1px; line-height: 20px; }
.acc__content { padding: 7px 15px; font-family: var(--font-head); font-size: 12px; line-height: 1.5em; }
.acc__content[hidden] { display: none; }

/* =========================================================================
   Tablet (bis 1024px)
   ========================================================================= */
@media (max-width: 1024px) {
    .hero { padding: 3em 2em 0; }
    .hero > .row { min-height: 50vh; }
    .hero--home { padding: 0; }
    .hero--home > .row { min-height: 90vh; }
    .sec--pad-80 { padding: 3em 2em; }
    .detail-head { padding: 3em 1em 0; }
    .detail-list { padding: 0 2em 3em; }
    .cta--page { padding: 3em 2em; }
    .about-1 { padding: 3em 2em; }
    .about-3 { padding: 3em 1em 0; }
    .k-form { padding: 3em 2em; }
    .k-info { padding: 3em 2em; }
    .k-team-head { padding: 3em 2em 0; }
    .k-team { padding: 0 2em 3em; }
    .card { margin: 4%; }
    .uc-1 .pic-wc__in { margin: 0 -33px -20px -160px; }
}

/* =========================================================================
   Smartphone (bis 767px) – Schriftgrößen wie im Original
   ========================================================================= */
@media (max-width: 767px) {
    body { font-size: 12px; }
    .hero { padding: 3em 1em; }
    .hero--home { padding: 3em 1em; }
    .hero--home > .row { min-height: 400px; }
    .hero--home .col__in { padding: 3em 1em 2em; }
    .hero__title { font-size: 35px; }
    .hero__sub { font-size: 15px; }
    .hero--home .hero__sub { padding: 0; margin: -20px 0 0; }
    .h--28 { font-size: 20px; }
    .h--18 { font-size: 15px; }
    .h--45 { font-size: 25px; }
    .cta--home .h--45 { font-size: 35px; }
    .h--cta { font-size: 15px; }
    .hero--home .btn, .intro .btn, .feature .btn { padding: 10px 20px 10px 25px; }

    .sec--pad-80.sec--white { padding: 5em 2em 3em; }
    .sec--grad.sec--pad-80 { padding: 3em 1em; }
    .detail-head { padding: 3em 2em 1em; }
    .cta--page, .cta--home { padding: 3em 1em; }
    .about-1 { padding: 3em 1em; }
    .about-3 { padding: 3em 2em 1em; }
    .k-form { padding: 5em 2em 3em; }
    .k-info { padding: 3em 2em; }
    .k-team-head { padding: 3em 2em 0; }
    .k-team { padding: 0 2em 2em; }
    .card { margin: 4%; }
}

/* --- Smartphone: Startseite, Formular, Footer ----------------------------- */
@media (max-width: 767px) {
    .hero--home > .row > .col > .col__in { padding: 3em 1em 2em; }
    .hero--home .hero__sub-w { height: 0; }
    .hero--home .hero__sub { padding: 0; margin: -20px 0 0; }

    .intro { padding: 2em 1em 3em; }
    .intro .collage > .col + .col > .col__in { padding: 0 2em; }
    .collage .pic--a > .pic__wc { margin: 0; text-align: left; }
    .collage .pic--a img { width: 70%; }
    .collage .pic--b > .pic__wc { margin: -55px -75px 0 25px; text-align: center; }
    .collage .pic--b img { width: 62%; }
    .intro > .row > .col:last-child > .col__in { padding: 2em 2em 0; }
    .intro .text { padding-bottom: .9rem; }
    .intro .btn, .feature .btn { margin-left: 0; }

    .services-head { padding: 3em 1em 0; }
    .acc-sec { padding: 0 0 50px; }

    .feature { padding: 3em 2em; }
    .feature .col-40 > .col__in { padding: 1em 1em 0; }
    .feature .col-60 > .col__in { padding: 2em 1em; }
    .feature .pic img { width: 100%; }

    .field input, .field textarea { font-size: 12px; }
    .footer .col > .col__in { padding: 0 2em; }
    .footer .col + .col > .col__in { margin-top: 20px; }
    .footer .col + .col .footer__text { margin-top: -15px; }
    .footer__line { margin-top: -15px; padding: 0; }
}
.footer .col:last-child .footer__text { margin-bottom: 20px; }

/* Bilder nur auf dem Smartphone (Augenoptik) */
@media (max-width: 767px) {
    .gap-wider > .col.col-mobile-pics > .col__in { padding: 0 30px; }
    .gap-wider > .col.col--p25 > .col__in { padding: 0 25px; }
    .gap-wider > .col.col--p25-10 > .col__in { padding: 25px 25px 10px; }
    .gap-wider > .col.col--p15 > .col__in { padding: 15px 25px 0; }
    .rev-phone { flex-direction: column-reverse; }
    .mp-1 .pic-wc__in { margin: 0 -80px 0 0; }
    .mp-1 img { width: 64%; }
    .mp-2 .pic-wc__in { margin: -50px 0 0 -75px; }
    .mp-2 img { width: 66%; }
}

/* --- Über uns: Smartphone-Collage + Karussell ------------------------------ */
.carousel { position: relative; height: 140px; margin-top: -50px; }
.carousel__viewport { height: 100%; overflow: hidden; }
.carousel__track { display: flex; height: 100%; transition: transform .5s ease; }
.carousel__slide { flex: 0 0 100%; height: 100%; padding-right: 10px; }
.carousel__slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.carousel__btn { position: absolute; top: calc(50% - 20px); z-index: 2; width: 0; height: 0; padding: 0; border: 0; background: none; font-size: 0; }
.carousel__dots { position: absolute; left: 0; right: 0; bottom: 8px; z-index: 3; display: flex; justify-content: center; gap: 8px; }
.carousel__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: #fff; opacity: .5; cursor: pointer; }
.carousel__dot.is-active { opacity: 1; }

@media (max-width: 767px) {
    .gap-wide > .col.col--p30 > .col__in, .gap-wider > .col.col--p30 > .col__in { padding: 0 30px; }
    .pic-wc--center.uc-1, .pic-wc--center.uc-3 { text-align: left; }
    .uc-1 .pic-wc__in, .uc-3 .pic-wc__in { margin: 0 -75px 0 0; }
    .uc-2 .pic-wc__in, .uc-4 .pic-wc__in { margin: -110px 0 0 -60px; }
    .uc-1 img, .uc-2 img, .uc-3 img, .uc-4 img { width: 45%; }
}

@media (max-width: 767px) {
    .k-form .form { padding: 0 10px; }
    .gap-wide > .col.col--p15w > .col__in { padding: 0 15px; }
}

@media (max-width: 767px) {
    .k-info .clist { padding-bottom: 2em; }
}

@media (max-width: 767px) {
    .card__pic { padding-top: 25px; }
}

.hero__gap { height: 20px; }
@media (max-width: 767px) {
    .gap-wider > .col.col--p0 > .col__in { padding: 0; }
}

/* Platzhalterseiten: Inhaltsbreite wie im Hello-Theme */
.page-plain { width: 100%; padding: 0 10px; }
@media (min-width: 576px) { .page-plain { max-width: 500px; padding: 0; } }
@media (min-width: 768px) { .page-plain { max-width: 600px; } }
@media (min-width: 992px) { .page-plain { max-width: 800px; } }
@media (min-width: 1200px) { .page-plain { max-width: 1140px; } }
/* Im Original fehlt auf diesen Seiten die blaue Linie im Kontaktformular */
.page-naturheilkunde .cform .divider, .page-cookie-richtlinie-eu .cform .divider { padding: 0; margin-top: 0; }
.page-naturheilkunde .cform .divider::before, .page-cookie-richtlinie-eu .cform .divider::before { width: 0; }

/* --- Ausgeblendete Bereiche (Hinweis, Downloads) ---------------------------- */
.downloads[hidden] { display: none; }
.downloads { padding: 100px 0; }
.downloads > .row { max-width: 1000px; }
.downloads__cols { display: flex; flex-wrap: wrap; gap: 20px; text-align: left; }
.downloads__col { flex: 1 1 260px; }
.downloads__title { margin: 0 0 12px; font-size: 14px; font-weight: 700; color: var(--text); }
.downloads__list { list-style: none; margin: 0; padding: 0; }
.downloads__list a { color: var(--text); }
.downloads__list a:hover { color: var(--green); }
.btn-row { display: flex; flex-wrap: wrap; gap: 5px; }

/* --- Leiste unter dem Footer: Copyright + Agenturhinweis -------------------- */
.footer-legal { background-color: var(--light); border-top: 1px solid rgba(0, 0, 0, .08); }
.footer-legal__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px 30px;
    max-width: 1140px;
    margin: 0 auto;
    padding: 20px 50px;
}
.footer-legal p { margin: 0; color: var(--text); }
.footer-legal a { font-weight: 700; }
.footer-legal a:hover { color: var(--blue); }
@media (max-width: 767px) {
    .footer-legal__row { flex-direction: column; padding: 20px 24px; text-align: center; }
}

/* --- Aktuelles / Hinweisbox unter der Hero-Sektion (Admin: /admin/) ---------- */
.notice { padding: 50px 20px 0; background-color: #fff; }
.notice[hidden] { display: none; }
.notice--in { animation: fadeIn .8s both; }
.notice__box {
    max-width: 640px;
    margin: 0 auto;
    padding: 30px;
    border: 5px solid #9dc51b;
    background-color: #fff;
    text-align: center;
}
.notice__logo { display: block; width: 160px; height: auto; margin: 0 auto 20px; }
.notice__title { margin: 0 0 20px; font-size: 28px; color: var(--green); }
.notice__text p { margin: 0 0 14.4px; color: var(--grey); }
.notice__text p:last-child { margin-bottom: 0; }
@media (max-width: 767px) {
    .notice { padding: 2em 1em 0; }
    .notice__box { padding: 20px 15px; }
    .notice__title { font-size: 20px; }
}