/*
 * AIRPARKER – STYLE.CSS
 * INHALTSVERZEICHNIS
 * 1. Grundlagen, Navigation, Banner, Inhalte und responsive Basis
 * 2. Seitenaufbau und Servicebereiche
 * 3. Markenfarben, Buchungsformular und jQuery UI Datepicker
 * 4. Typografie, Logo, Footer und mobile Anpassungen
 * Fremdbibliotheken liegen unverändert unter vendor/.
 */
/* 1. Grundlagen und responsive Basis */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root {
    --navy:#102f3e;
    --teal:#b8f16c;
    --muted:#5b6c73;
    --paper:#f3f6f4
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth;
    scroll-padding-top:110px
}

body {
    margin:0;
    color:var(--navy);
    font-family:'DM Sans',sans-serif;
    background:white
}

a {
    color:inherit;
    text-decoration:none
}

button,input {
    font:inherit
}

button,a,input,summary {
    outline-offset:5px
}

.wrap {
    width:min(1220px,90%);
    margin:auto
}

.top {
    background:var(--navy);
    color:#d9e6e9;
    font-size:16px;
    padding:10px 0
}

.top .wrap {
    display:flex;
    gap:28px
}

.top span {
    margin-right:auto
}

header {
    position:sticky;
    top:0;
    z-index:20;
    background:#fff;
    border-bottom:1px solid #e5eaeb
}

.navigation {
    height:92px;
    display:flex;
    align-items:center;
    gap:38px
}

.brand {
    font-family:Manrope,sans-serif;
    font-size:32px;
    font-weight:800;
    letter-spacing:-1.6px;
    white-space:nowrap
}

.brand-icon {
    display:inline-grid;
    place-items:center;
    background:var(--navy);
    color:var(--teal);
    width:41px;
    height:41px;
    border-radius:50%;
    margin-right:9px
}

.brand-dot {
    color:#689b28
}

nav {
    display:flex;
    align-items:center;
    gap:28px;
    margin-left:auto;
    font-size:16px;
    font-weight:600
}

nav>a:hover,summary:hover {
    color:#668a36
}

summary {
    cursor:pointer;
    list-style:none
}

summary:after {
    content:'⌄';
    margin-left:8px
}

details {
    position:relative
}

details>div {
    position:absolute;
    right:0;
    top:32px;
    width:310px;
    background:white;
    box-shadow:0 15px 40px #102f3e20;
    border:1px solid #e3e9e5;
    border-radius:12px;
    padding:12px
}

details a {
    display:block;
    padding:10px;
    border-radius:6px
}

details a:hover {
    background:var(--paper)
}

.button {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    background:var(--teal);
    color:var(--navy);
    border:0;
    border-radius:7px;
    padding:18px 22px;
    font-weight:700;
    cursor:pointer;
    transition:transform .2s,background .2s
}

.button:hover {
    background:#a3df53;
    transform:translateY(-2px)
}

.small {
    padding:14px 20px;
    font-size:16px
}

.menu {
    display:none
}

.hero {
    position:relative;
    color:white;
    background:linear-gradient(90deg,#102f3ef5 0%,#102f3ed9 45%,#102f3e57),url('../img/photo-0.jpg') center/cover;
    padding:64px 0 0
}

.hero-grid {
    display:grid;
    grid-template-columns:1.35fr .85fr;
    gap:90px;
    align-items:center
}

.eyebrow {
    font-size:16px;
    font-weight:700;
    letter-spacing:2.3px;
    display:block;
    margin-bottom:22px
}

.hero .eyebrow {
    color:var(--teal)
}

h1,h2,h3 {
    font-family:Manrope,sans-serif;
    letter-spacing:-1.5px;
    line-height:1.15
}

h1 {
    font-size:68px;
    font-weight:700;
    margin:0 0 28px
}

h1 em {
    font-weight:500;
    color:var(--teal);
    font-style:normal
}

.hero-copy p {
    font-size:16px;
    line-height:1.9;
    color:#d5e1e4;
    max-width:600px;
    margin-bottom:25px
}

.text-link {
    font-size:16px;
    font-weight:700;
    border-bottom:1px solid #ffffff60;
    padding-bottom:6px
}

.booking {
    background:white;
    color:var(--navy);
    padding:32px;
    border-radius:14px;
    box-shadow:0 20px 70px #0a263027;
    scroll-margin-top:125px
}

.booking .eyebrow {
    color:#6d7e84;
    font-size:16px;
    margin-bottom:12px
}

.booking h2 {
    font-size:32px;
    margin:0 0 24px
}

.booking label {
    display:block;
    font-size:16px;
    font-weight:700;
    margin-top:18px
}

.booking input {
    display:block;
    width:100%;
    padding:15px;
    border:1px solid #dce3e3;
    border-radius:6px;
    color:var(--navy);
    background:#f7f9f8;
    margin-top:8px;
    min-height:51px
}

.duration {
    display:flex;
    justify-content:space-between;
    font-size:16px;
    margin:22px 0
}

.booking button {
    width:100%;
    font-size:16px
}

.booking-note {
    font-size:16px!important;
    text-align:center;
    color:#6d7e84!important;
    margin:15px 0 0!important;
    line-height:1.5!important
}

.benefits {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border-top:1px solid #ffffff35;
    margin-top:55px;
    padding:25px 0 30px
}

.benefits>div {
    display:flex;
    align-items:center;
    gap:20px;
    padding-left:30px;
    border-right:1px solid #ffffff35
}

.benefits>div:first-child {
    padding-left:0
}

.benefits>div:last-child {
    border:0
}

.benefits strong {
    font-family:Manrope;
    font-size:34px;
    letter-spacing:-1px
}

.benefits strong span {
    font-size:16px;
    letter-spacing:0
}

.benefits>div>span {
    font-size:16px;
    color:#d4e0e3;
    max-width:95px;
    line-height:1.5
}

.introduction {
    padding:85px 0
}

.introduction>.eyebrow {
    color:#6b8b40
}

.introduction h2 {
    font-size:43px;
    max-width:650px;
    margin:0 0 25px
}

.introduction h3 {
    font-size:27px;
    margin:38px 0 18px
}

.introduction p {
    line-height:1.95;
    color:var(--muted);
    font-size:16px;
    max-width:960px
}

.guides {
    background:var(--paper);
    padding:80px 0
}

.guides h2 {
    font-size:40px;
    max-width:680px;
    margin:0 0 40px
}

.cards {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:26px
}

.card {
    background:white;
    border-radius:12px;
    overflow:hidden;
    border:1px solid #e2e8e3;
    transition:transform .2s,box-shadow .2s;
    display:flex;
    flex-direction:column
}

.card:hover {
    transform:translateY(-5px);
    box-shadow:0 15px 40px #102f3e12
}

.card img {
    width:100%;
    height:205px;
    object-fit:cover
}

.card>div {
    padding:25px;
    display:flex;
    flex-direction:column;
    flex:1
}

.card h3 {
    font-size:21px;
    letter-spacing:-.7px;
    margin:0 0 15px
}

.card p {
    font-size:16px;
    line-height:1.8;
    color:var(--muted);
    margin:0 0 20px
}

.more {
    margin-top:auto;
    padding-top:18px;
    border-top:1px solid #e3e9e5;
    font-size:16px;
    font-weight:700;
    display:flex;
    justify-content:space-between
}

.more b {
    font-size:18px
}

.subhero {
    padding:36px 0 60px;
    background:var(--navy);
    color:white
}

.crumb {
    font-size:16px;
    color:#bccdd4;
    margin-bottom:45px
}

.subhero .eyebrow {
    color:var(--teal)
}

.subhero h1 {
    font-size:49px;
    max-width:920px;
    margin:0
}

.article-grid {
    display:grid;
    grid-template-columns:minmax(0,1fr) 350px;
    gap:70px;
    padding:65px 0 90px
}

article h1 {
    font-size:34px
}

article h2 {
    font-size:29px
}

article h3 {
    font-size:24px;
    margin-top:32px
}

article p,article li {
    color:var(--muted);
    font-size:16px;
    line-height:1.95
}

article li {
    padding-left:8px;
    margin-bottom:12px
}

article a {
    text-decoration:underline;
    color:#477324
}

article img {
    max-width:100%;
    height:auto
}

.related {
    padding:25px 10px
}

.related h3 {
    font-size:20px
}

.related a {
    display:block;
    padding:12px 0;
    border-bottom:1px solid #e1e7e3;
    font-size:16px
}

footer {
    background:var(--navy);
    color:#c5d3d8;
    padding:60px 0 25px;
    font-size:16px
}

.footer-grid {
    display:grid;
    grid-template-columns:1fr 1.2fr;
    gap:80px;
    margin-bottom:50px
}

footer .brand {
    color:white
}

footer p {
    margin:20px 0
}

footer a {
    line-height:2
}

.footer-links {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px 25px
}

.legal {
    display:flex;
    justify-content:space-between;
    border-top:1px solid #ffffff20;
    padding-top:22px;
    font-size:16px
}

.legal div {
    display:flex;
    gap:25px
}

@media(min-width:1100px) {
    .introduction .fc_text p {
        columns:2;
        column-gap:50px;
        max-width:none
    }

}

@media(max-width:1000px) {
    .navigation {
        gap:20px
    }

    nav {
        gap:16px
    }

    .hero-grid {
        gap:35px
    }

    h1 {
        font-size:54px
    }

    .benefits>div {
        gap:10px;
        padding-left:15px
    }

    .cards {
        grid-template-columns:repeat(2,1fr)
    }

    .article-grid {
        gap:30px;
        grid-template-columns:minmax(0,1fr) 310px
    }

}

@media(max-width:760px) {
    .top .wrap>span,.top .wrap>a:last-child {
        display:none
    }

    .top .wrap {
        justify-content:center
    }

    .navigation {
        height:76px;
        gap:15px
    }

    .brand {
        font-size:26px
    }

    .brand-icon {
        width:32px;
        height:32px
    }

    .navigation>.small {
        margin-left:auto;
        padding:11px 14px;
        font-size:16px
    }

    .menu {
        display:block;
        order:3;
        border:0;
        background:none;
        font-size:24px;
        color:var(--navy)
    }

    nav {
        display:none;
        position:absolute;
        top:76px;
        left:0;
        width:100%;
        background:white;
        padding:24px 5%;
        border-bottom:1px solid #ddd;
        align-items:stretch
    }

    nav.open {
        display:flex;
        flex-direction:column
    }

    details>div {
        position:static;
        box-shadow:none;
        width:100%;
        margin-top:15px
    }

    .hero {
        padding-top:40px
    }

    .hero-grid {
        grid-template-columns:1fr;
        gap:32px
    }

    h1 {
        font-size:49px
    }

    .hero-copy p {
        font-size:16px
    }

    .booking {
        padding:25px
    }

    .benefits {
        margin-top:35px;
        gap:15px
    }

    .benefits>div {
        display:block;
        padding-left:12px
    }

    .benefits strong {
        font-size:24px;
        display:block;
        margin-bottom:7px
    }

    .benefits strong span {
        font-size:16px
    }

    .benefits>div>span {
        font-size:16px
    }

    .introduction,.guides {
        padding:55px 0
    }

    .introduction h2,.guides h2 {
        font-size:33px
    }

    .introduction h3 {
        font-size:24px
    }

    .cards {
        grid-template-columns:1fr
    }

    .card img {
        height:230px
    }

    .subhero h1 {
        font-size:35px;
        overflow-wrap:anywhere
    }

    .article-grid {
        grid-template-columns:1fr;
        padding:40px 0;
        gap:30px
    }

    article h1 {
        font-size:29px
    }

    .footer-grid {
        grid-template-columns:1fr;
        gap:25px
    }

    .footer-links {
        grid-template-columns:1fr
    }

    .legal {
        display:block
    }

    .legal div {
        margin-top:15px;
        flex-wrap:wrap
    }

}

/* 2. Seitenaufbau und Servicebereiche */
:root {
    --navy:#263640;
    --teal:#19b5d6;
    --muted:#606c73;
    --paper:#f5f7f8;
    --red:#d90813
}

h1,h2,h3 {
    letter-spacing:-1px
}

body {
    color:#303b42
}

.top {
    background:var(--red);
    color:white;
    padding:12px 0
}

.top .wrap {
    justify-content:center
}

.top span {
    margin:0
}

.top a {
    display:none
}

.navigation {
    height:100px
}

.brand {
    color:#2c3b43
}

.brand-icon {
    background:var(--teal);
    color:white;
    border-radius:7px;
    font-size:31px
}

.brand-dot {
    color:var(--red)
}

nav {
    font-size:16px;
    font-weight:500
}

nav>a:hover,summary:hover {
    color:var(--teal)
}

.button {
    color:white;
    background:var(--teal);
    border-radius:5px
}

.button:hover {
    background:#089dbd
}

.navigation>.button {
    background:var(--red)
}

.hero {
    padding:70px 0 0;
    background:linear-gradient(#172c3a95,#172c3aaf),url('../img/photo-0.jpg') center/cover
}

.hero-grid {
    display:flex;
    flex-direction:column;
    gap:27px;
    align-items:center
}

.hero-copy {
    text-align:center
}

.hero-copy .eyebrow {
    color:white;
    font-size:16px;
    font-weight:500;
    letter-spacing:1.2px;
    margin-bottom:13px
}

.hero h1 {
    font-size:52px;
    line-height:1.15;
    font-weight:800;
    margin-bottom:15px
}

.hero-services {
    font-size:24px;
    font-weight:400;
    color:white
}

.hero-services a:hover {
    text-decoration:underline
}

.hero .text-link {
    display:none
}

.hero .booking {
    width:760px;
    max-width:100%;
    background:transparent;
    color:white;
    box-shadow:none;
    border-radius:0;
    padding:0 0 38px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px 24px
}

.hero .booking .eyebrow,.hero .booking h2 {
    display:none
}

.hero .booking label {
    margin:0;
    font-size:16px;
    font-weight:500
}

.hero .booking input {
    margin-top:10px;
    background:white;
    border:0;
    border-radius:5px;
    padding:17px;
    font-size:16px;
    min-height:57px
}

.hero .duration {
    grid-column:1/-1;
    justify-content:center;
    gap:8px;
    margin:2px 0;
    color:white
}

.hero .booking .button {
    grid-column:1/-1;
    width:auto;
    justify-self:center;
    min-width:275px;
    justify-content:center;
    padding:18px 28px;
    font-size:16px
}

.hero .booking-note {
    grid-column:1/-1;
    color:#f5f8fa!important;
    margin:0!important
}

.benefits {
    width:100%;
    background:white;
    color:var(--navy);
    margin-top:0;
    padding:35px max(5%,calc((100vw - 1220px)/2));
    border:0;
    gap:28px;
    box-shadow:0 6px 20px #2036420a
}

.benefits>div {
    justify-content:center;
    border-color:#dee5e8;
    padding:0!important
}

.benefits strong {
    color:var(--teal);
    font-size:36px
}

.benefits strong span {
    color:var(--navy);
    font-weight:700
}

.benefits>div>span {
    color:var(--muted);
    font-size:16px;
    max-width:130px
}

.introduction {
    padding:70px 0
}

.introduction>.eyebrow {
    color:var(--red);
    text-align:center
}

.original-intro {
    max-width:1000px;
    margin:0 auto 38px;
    text-align:center
}

.original-intro p {
    max-width:none;
    font-size:16px
}

.service-panels {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
    margin:45px 0 75px
}

.service-panels>a {
    display:grid;
    grid-template-columns:42% 1fr;
    align-items:stretch;
    background:var(--paper);
    overflow:hidden;
    border-radius:8px
}

.service-panels img {
    width:100%;
    height:100%;
    min-height:240px;
    object-fit:cover
}

.service-panels>a>div {
    padding:30px
}

.service-panels span {
    font-size:16px;
    letter-spacing:1.6px;
    font-weight:700;
    color:var(--red)
}

.service-panels h3 {
    font-size:29px;
    margin:16px 0 10px
}

.service-panels p {
    font-size:16px;
    margin:0 0 22px
}

.service-panels b {
    font-size:16px;
    color:#059cbd
}

.introduction h2 {
    font-size:38px;
    max-width:none;
    text-align:center;
    margin-bottom:30px
}

.introduction .fc_text {
    border-top:1px solid #e3e9ec;
    padding-top:55px
}

.introduction h3 {
    font-size:26px
}

.guides {
    background:#f3f7f9
}

.guides>.wrap>.eyebrow {
    color:var(--red);
    text-align:center
}

.guides h2 {
    text-align:center;
    margin:0 auto 42px;
    font-size:37px;
    max-width:760px
}

.card {
    border:0;
    box-shadow:0 3px 16px #2636400a;
    border-radius:7px
}

.card h3 {
    font-size:22px
}

.more {
    color:#029ebf
}

.subhero {
    background:linear-gradient(90deg,#193747e8,#19374792),url('../img/photo-0.jpg') center 48%/cover;
    padding-bottom:65px
}

.subhero .eyebrow {
    color:#65dff3
}

.subhero h1 {
    font-weight:700
}

.article-grid .booking {
    border-top:5px solid var(--teal);
    border-radius:7px;
    background:var(--paper);
    box-shadow:none
}

.article-grid .booking .eyebrow {
    color:#049fbd
}

.related a:hover {
    color:#079cbb
}

article a {
    color:#049bb9
}

footer {
    background:#253640
}

.footer-links a:hover {
    color:#5dd4ed
}

footer .brand {
    color:white
}

.legal {
    border-color:#ffffff25
}

@media(max-width:1000px) {
    .navigation {
        gap:20px
    }

    nav {
        gap:16px;
        font-size:16px
    }

    .service-panels>a {
        grid-template-columns:1fr
    }

    .service-panels img {
        height:210px;
        min-height:0
    }

    .service-panels>a>div {
        padding:25px
    }

}

@media(max-width:760px) {
    .top .wrap>span {
        display:block;
        font-size:16px;
        text-align:center;
        line-height:1.6
    }

    .navigation {
        height:78px
    }

    .navigation>.small {
        background:var(--red)
    }

    nav {
        top:78px;
        font-size:16px
    }

    .hero {
        padding-top:42px
    }

    .hero h1 {
        font-size:38px;
        margin:10px 0 18px
    }

    .hero-copy .eyebrow {
        font-size:16px
    }

    .hero-services {
        font-size:18px
    }

    .hero .booking {
        grid-template-columns:1fr;
        gap:18px;
        padding-bottom:35px
    }

    .hero .booking label {
        font-size:16px
    }

    .hero .booking .button {
        width:100%
    }

    .benefits {
        gap:12px;
        padding:25px 5%
    }

    .benefits>div {
        display:block;
        text-align:center
    }

    .benefits strong {
        font-size:26px
    }

    .benefits strong span {
        font-size:16px
    }

    .benefits>div>span {
        font-size:16px
    }

    .introduction {
        padding:45px 0
    }

    .original-intro {
        text-align:left
    }

    .service-panels {
        grid-template-columns:1fr;
        margin:30px 0 45px;
        gap:22px
    }

    .service-panels>a {
        grid-template-columns:40% 1fr
    }

    .service-panels img {
        height:100%;
        min-height:200px
    }

    .service-panels>a>div {
        padding:23px 18px
    }

    .service-panels h3 {
        font-size:24px
    }

    .introduction h2,.guides h2 {
        font-size:30px
    }

    .subhero h1 {
        font-size:33px
    }

}

/* 3. Markenfarben, Buchungsformular und Datepicker */
:root {
    --navy:#101010;
    --teal:#70c5df;
    --red:#ffe500;
    --muted:#515b60;
    --paper:#eef8fc;
    --cgn-blue:#70c5df;
    --cgn-yellow:#ffe500
}

body {
    color:#171717
}

.top {
    background:var(--cgn-blue);
    color:black;
    font-weight:600
}

.brand {
    color:black
}

.brand-icon {
    background:var(--cgn-blue);
    color:black
}

.brand-dot {
    color:#e3c900
}

.button,.navigation>.button,.navigation>.small {
    background:var(--cgn-yellow);
    color:black
}

.button:hover {
    background:#f5d900;
    color:black
}

.hero {
    background:linear-gradient(#101e284d,#101e286b),url('../img/photo-0.jpg') center/cover
}

.hero .booking {
    background:var(--cgn-blue);
    color:#080808;
    padding:28px 34px;
    border-radius:5px;
    margin-bottom:38px;
    gap:20px 24px
}

.hero .booking label {
    font-weight:600
}

.hero .booking input {
    border:1px solid #333;
    border-radius:4px;
    font-size:16px
}

.hero .booking .button {
    color:#080808;
    position:relative;
    border-radius:4px
}

.hero .duration {
    color:black;
    gap:35px;
    margin:3px 0
}

.hero .duration span {
    display:flex;
    gap:7px
}

.hero .booking-note {
    color:#152c34!important
}

.hero .booking .button span {
    font-size:20px
}

.hero h1 {
    color:white
}

.benefits strong {
    color:#2087a5
}

.benefits strong span {
    color:black
}

.introduction>.eyebrow,.guides>.wrap>.eyebrow,.service-panels span {
    color:#237b95
}

.service-panels b,.more,article a {
    color:#167c9b
}

.guides,.service-panels>a {
    background:#eff8fb
}

.subhero {
    background:linear-gradient(90deg,#183b47d9,#183b4780),url('../img/photo-0.jpg') center/cover
}

.subhero .eyebrow {
    color:#ffea36
}

.article-grid .booking {
    background:var(--cgn-blue);
    border-top:5px solid var(--cgn-yellow);
    color:black
}

.article-grid .booking .eyebrow {
    color:#143b48
}

.booking .duration {
    display:flex;
    gap:15px;
    justify-content:space-between;
    flex-wrap:wrap
}

.booking .booking-note {
    color:#254854!important
}

footer {
    background:#1f2c32;
    color:#edf3f5
}

nav>a:hover,summary:hover,.related a:hover {
    color:#197d99
}

.ui-datepicker {
    z-index:100!important;
    border:1px solid #385969!important;
    padding:12px;
    width:19em;
    background:white;
    box-shadow:0 12px 40px #0003;
    font-family:'DM Sans',sans-serif
}

.ui-datepicker .ui-datepicker-header {
    background:var(--cgn-blue);
    border:0;
    color:black;
    border-radius:3px
}

.ui-datepicker .ui-state-default {
    background:#f1f8fb;
    border:0;
    text-align:center;
    padding:7px;
    color:#111
}

.ui-datepicker .ui-state-active,.ui-datepicker .ui-state-hover {
    background:var(--cgn-yellow)!important;
    color:black!important
}

.ui-datepicker .ui-datepicker-prev,.ui-datepicker .ui-datepicker-next {
    cursor:pointer
}

.ui-datepicker-prev span,.ui-datepicker-next span {
    background-image:none!important;
    display:none!important
}

.ui-datepicker-prev:after {
    content:'‹';
    display:block;
    text-align:center;
    font-size:23px;
    line-height:28px;
    color:black
}

.ui-datepicker-next:after {
    content:'›';
    display:block;
    text-align:center;
    font-size:23px;
    line-height:28px;
    color:black
}

.datepicker {
    cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23111' stroke-width='1.5'%3E%3Crect x='3' y='5' width='14' height='12' rx='1'/%3E%3Cpath d='M3 9h14M6 3v4m8-4v4'/%3E%3C/svg%3E");
    background-repeat:no-repeat!important;
    background-position:right 14px center!important;
    padding-right:42px!important
}

.hero-services a {
    color:white
}

.brand:hover {
    color:black
}

.navigation nav a,.navigation nav summary {
    color:#202d32
}

.card p {
    margin-bottom:20px
}

.fc_text .container {
    padding:0;
    max-width:none
}

.booking input:focus {
    border-color:#143947;
    box-shadow:0 0 0 3px #ffe50070
}

.hero .booking input {
    width:100%
}

@media(max-width:760px) {
    .hero .booking {
        padding:24px 20px;
        margin-bottom:28px
    }

    .hero .duration {
        gap:15px;
        justify-content:space-between
    }

    .hero .booking-note {
        font-size:16px!important
    }

    .hero-grid {
        width:90%;
        padding:0
    }

    .navigation>.small {
        color:black
    }

}

/* 4. Typografie, Logo und Footer */
body {
    font-size:16px
}

body :where(p,a,span,label,button,input,summary,li,small,b,strong) {
    font-size:inherit
}

.top {
    color:#fff;
    font-size:16px;
    padding:13px 0
}

.top .wrap>span {
    color:#fff;
    font-size:16px!important;
    font-weight:600
}

.brand {
    display:flex;
    align-items:center;
    letter-spacing:normal;
    flex-shrink:0
}

.brand-logo {
    width:238px;
    height:74px;
    object-fit:contain;
    object-position:left center
}

.navigation {
    gap:26px;
    height:104px
}

.navigation nav {
    font-size:16px;
    gap:24px
}

.navigation>.small {
    font-size:16px
}

.hero-copy .eyebrow {
    font-size:16px
}

.hero .booking label,.hero .booking-note,.booking .eyebrow,.booking-note {
    font-size:16px!important
}

.hero .booking-note {
    line-height:1.6!important
}

.benefits {
    padding-top:33px;
    padding-bottom:33px;
    gap:24px
}

.benefits strong {
    font-size:38px;
    white-space:nowrap
}

.benefits strong span {
    font-size:16px
}

.benefits>div>span {
    font-size:16px;
    max-width:170px
}

.benefits>div {
    gap:20px
}

.section-headline {
    font-family:Manrope,sans-serif;
    font-size:36px!important;
    line-height:1.25!important;
    font-weight:800;
    letter-spacing:-1px;
    text-align:center;
    color:#172f3a!important;
    margin:0 auto 30px!important;
    max-width:none!important
}

.original-intro p {
    font-size:16px;
    line-height:1.9
}

.introduction p,.card p,article p,article li {
    font-size:16px
}

.eyebrow,.service-panels span,.more,.service-panels b,.crumb,.related a {
    font-size:16px
}

.card h3 {
    font-size:23px
}

.hero .booking .button {
    font-size:17px
}

.footer-cta {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    padding:46px 0;
    border-bottom:1px solid #c8e1e8
}

.footer-cta p {
    margin:0 0 12px;
    color:#3d6878;
    font-size:16px;
    font-weight:600
}

.footer-cta h2 {
    font-size:34px;
    max-width:650px;
    margin:0;
    color:#172f3a
}

.footer-cta .button {
    flex-shrink:0;
    font-size:16px
}

footer {
    background:#eef8fc;
    color:#213f4c;
    padding:0 0 25px;
    font-size:16px;
    border-top:5px solid #70c5df
}

.footer-grid {
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr;
    gap:60px;
    padding:48px 0;
    margin-bottom:0
}

.footer-grid h3 {
    font-size:20px;
    color:#172f3a;
    margin:0 0 20px;
    letter-spacing:-.3px
}

.footer-grid>div>a:not(.footer-logo) {
    display:block;
    font-size:16px;
    line-height:1.6;
    margin-bottom:13px
}

.footer-grid p {
    font-size:16px;
    margin:16px 0 22px
}

.footer-logo {
    display:inline-flex;
    align-items:center;
    background:white;
    padding:10px 18px;
    border-radius:8px
}

.footer-logo img {
    width:230px;
    height:72px;
    object-fit:contain
}

.footer-grid .footer-phone {
    font-size:20px!important;
    font-weight:700;
    color:#172f3a
}

.legal {
    border-top:1px solid #c8e1e8;
    font-size:16px;
    color:#46616c;
    padding-top:25px;
    gap:30px
}

.legal div {
    gap:24px
}

.footer-grid a:hover,.legal a:hover {
    color:#127b9c
}

footer .brand {
    color:#172f3a
}

.ui-datepicker {
    font-size:16px
}

.ui-datepicker th,.ui-datepicker td {
    font-size:16px!important
}

.ui-datepicker .ui-state-default {
    font-size:16px!important
}

@media(max-width:1100px) {
    .navigation nav {
        gap:15px
    }

    .brand-logo {
        width:205px
    }

    .navigation {
        gap:20px
    }

    .benefits>div {
        gap:12px
    }

    .footer-grid {
        gap:30px
    }

}

@media(max-width:760px) {
    .top .wrap>span {
        font-size:16px!important;
        line-height:1.5
    }

    .navigation {
        height:88px;
        gap:10px
    }

    .brand-logo {
        width:165px;
        height:63px
    }

    .navigation>.small {
        font-size:16px;
        padding:11px 13px
    }

    .menu {
        font-size:26px
    }

    nav {
        top:88px!important
    }

    .hero h1 {
        font-size:37px
    }

    .hero-services {
        font-size:19px
    }

    .hero .booking label,.hero .booking-note {
        font-size:16px!important
    }

    .benefits {
        grid-template-columns:1fr;
        padding:22px 5%;
        gap:0
    }

    .benefits>div {
        display:flex;
        align-items:center;
        justify-content:space-between;
        padding:17px 0!important;
        border-right:0;
        border-bottom:1px solid #d9e4e8;
        text-align:left;
        gap:20px
    }

    .benefits>div:last-child {
        border:0
    }

    .benefits strong {
        font-size:32px;
        margin:0
    }

    .benefits strong span,.benefits>div>span {
        font-size:16px;
        max-width:none
    }

    .section-headline {
        font-size:29px!important;
        text-align:left
    }

    .footer-cta {
        display:block;
        padding:32px 0
    }

    .footer-cta h2 {
        font-size:29px
    }

    .footer-cta .button {
        margin-top:24px;
        width:max-content;
        max-width:100%
    }

    .footer-grid {
        grid-template-columns:1fr;
        gap:30px;
        padding:35px 0
    }

    .footer-grid h3 {
        margin-bottom:18px
    }

    .legal {
        display:block
    }

    .legal div {
        gap:15px;
        margin-top:16px
    }

    .footer-logo img {
        width:220px
    }

    .service-panels>a {
        grid-template-columns:1fr
    }

    .service-panels img {
        height:220px
    }

    .service-panels span,.service-panels b,.service-panels p,.card p {
        font-size:16px
    }

}

/* 5. Parksicher: Wortmarke, Originalbilder und Ratgeber */
.parksicher-wordmark {display:flex; flex-direction:column; line-height:1; color:#173c4c; letter-spacing:-1px;}
.parksicher-wordmark b {font-size:16px; letter-spacing:3px;}
.parksicher-wordmark b span {color:#16819f; margin-left:8px;}
.parksicher-wordmark strong {font-size:34px; font-weight:800;}
.parksicher-wordmark strong span {font-size:16px; color:#16819f;}
.footer-grid {grid-template-columns:1fr 2fr;}
.parksicher-links {display:grid; grid-template-columns:1fr 1fr; gap:0 24px;}
.parksicher-links h3 {grid-column:1/-1;}
.hero-copy .static-banner-two__content h1 {font-size:48px;}
.hero-copy .static-banner-two__content p {font-size:16px; line-height:1.9; max-width:900px;}
.card .blog-one__title a {pointer-events:none;}
@media(max-width:760px){.footer-grid,.parksicher-links{grid-template-columns:1fr;} .hero-copy .static-banner-two__content h1{font-size:36px;}}

/* 6. Parksicher: klare Buchungsoberfläche in Dunkelblau und Grün */
:root { --navy: #082e59; --teal: #16833e; --red: #16833e; --paper: #f3f6f9; }
body { color: #273b50; background: #fff; }
.top { background: #082e59; color: #fff; font-size: 16px; }
header { border-bottom: 1px solid #dce4ed; box-shadow: 0 2px 10px #082e590a; }
.navigation { height: 100px; }
.navigation nav { gap: 28px; }
nav a:hover, summary:hover { color: #16833e !important; }
.button, .navigation > .button, .navigation > .small { background: #16833e; color: #fff; border-radius: 5px; box-shadow: 0 2px 0 #0f592b; }
.button:hover { background: #106b31; color: #fff; }
.parksicher-logo { width: 255px; height: 78px; object-fit: contain; object-position: left center; }
.hero { background: #082e59; color: #fff; padding: 64px 0; border-bottom: 6px solid #16833e; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr); gap: 65px; align-items: center; }
.hero-copy { text-align: left; }
.hero-copy .static-banner-two__content h1 { font-size: 48px; font-weight: 800; line-height: 1.15; color: #fff; margin: 0 0 26px; text-shadow: none; }
.hero-copy .static-banner-two__content p, .hero-copy p { font-size: 18px !important; line-height: 1.85; color: #fff !important; opacity: 1; margin: 0; max-width: 650px; }
.hero .booking { display: block; width: 100%; max-width: none; background: #fff; color: #082e59; padding: 32px; margin: 0; border-radius: 9px; box-shadow: 0 12px 45px #0002; border-top: 5px solid #16833e; }
.hero .booking .eyebrow { display: block; color: #53687e; letter-spacing: .8px; margin-bottom: 10px; }
.hero .booking h2 { display: block; font-size: 30px; color: #082e59; margin: 0 0 25px; }
.hero .booking label { margin: 18px 0 0; color: #263b50; font-weight: 700; }
.hero .booking input { margin-top: 8px; border: 1px solid #aebccc; background-color: #fff; min-height: 56px; color: #172f47; }
.hero .booking .duration { display: flex; color: #082e59; justify-content: space-between; gap: 18px; margin: 24px 0; }
.hero .booking .button { width: 100%; color: #fff; font-size: 17px; margin: 0; justify-content: space-between; }
.hero .booking-note { color: #54687d !important; margin-top: 20px !important; }
.introduction { padding: 65px 0; }
.introduction h2 { color: #082e59; font-size: 36px; }
.introduction p { color: #394f65; line-height: 1.9; font-size: 17px; }
.guides { background: #f3f6f9; border-top: 1px solid #e0e7ef; }
.guides h2 { color: #082e59; font-size: 36px; }
.cards { gap: 24px; }
.card { border: 1px solid #dce4ed; box-shadow: 0 3px 10px #082e5909; border-radius: 8px; }
.card h3 { color: #082e59; font-size: 23px; }
.card p { color: #455b70; }
.more { color: #137636; font-size: 16px; }
.card:hover { box-shadow: 0 9px 24px #082e5915; border-color: #16833e; }
.subhero { background: #082e59; color: #fff; }
.subhero h1 { color: #fff; }
.article-grid .booking { background: #f3f6f9; border-color: #16833e; }
article h2, article h3, article h1 { color: #082e59; }
article a { color: #137636; }
article img { max-width: 100%; height: auto; border-radius: 6px; }
article .alignright { float: right; margin: 8px 0 24px 28px; }
footer { background: #edf2f7; border-top: 5px solid #082e59; color: #314c65; }
.footer-cta h2, .footer-grid h3 { color: #082e59; }
.footer-logo { background: #fff; padding: 12px 20px; }
.footer-logo img { width: 245px; height: 78px; object-fit: contain; }
.footer-grid a:hover, .legal a:hover { color: #137636; }
.ui-datepicker .ui-datepicker-header { background: #082e59; color: #fff; }
.ui-datepicker .ui-state-active, .ui-datepicker .ui-state-hover { background: #16833e !important; color: #fff !important; }
.ui-datepicker-next:after, .ui-datepicker-prev:after { color: #fff; }
@media(max-width:1000px) { .hero-grid { gap: 30px; grid-template-columns: 1fr 1fr; } .hero-copy .static-banner-two__content h1 {font-size: 40px;} .navigation nav {gap: 18px;} .parksicher-logo {width: 215px;} }
@media(max-width:760px) { .navigation {height: 88px;} .parksicher-logo {width: 175px; height: 65px;} .hero {padding: 38px 0;} .hero-grid {display: grid; grid-template-columns: 1fr; gap: 30px;} .hero-copy .static-banner-two__content h1 {font-size: 36px;} .hero-copy .static-banner-two__content p {font-size: 17px !important;} .hero .booking {padding: 25px;} .hero .booking .duration {gap: 12px;} .introduction h2, .guides h2 {font-size: 29px;} article .alignright {float: none; display: block; margin: 20px 0;} }