/* ==========================================================================
   PediOase – Stylesheet
   Inhalt: 1. Custom Properties  2. Reset & Base  3. Typografie  4. Utilities
   5. Header/Navigation  6. Buttons  7. Hero  8. Sections/Cards  9. About
   10. Process  11. Testimonials  12. FAQ  13. Pricing  14. CTA
   15. Contact/Forms  16. Newsletter  17. Footer  18. Floating UI
   19. Page-Hero/Breadcrumbs  20. 404  21. Animations  22. Dark Mode
   23. Responsive  24. Reduced Motion
   ========================================================================== */

/* 1. Custom Properties ---------------------------------------------------- */
:root{
    --color-primary-100:#e4f2f7;
    --color-primary-200:#c3e2ec;
    --color-primary:#1f6d89;
    --color-primary-600:#185a71;
    --color-primary-700:#134a5c;
    --color-accent:#ff8a65;
    --color-dark:#12283a;
    --color-text:#2d3748;
    --color-text-muted:#5b6b7a;
    --color-bg:#ffffff;
    --color-bg-alt:#f6f9fb;
    --color-border:#e3e9ee;
    --color-light:#ffffff;
    --font-heading:'Playfair Display', Georgia, serif;
    --font-body:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --radius-sm:.6rem;
    --radius-md:1.2rem;
    --radius-lg:2rem;
    --radius-full:999px;
    --shadow-sm:0 2px 10px rgba(18,40,58,.06);
    --shadow-md:0 12px 30px rgba(18,40,58,.10);
    --shadow-lg:0 24px 60px rgba(18,40,58,.16);
    --transition-base:.35s cubic-bezier(.4,0,.2,1);
    --header-height:88px;
    --container-width:1200px;
}

/* 2. Reset & Base ---------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:var(--header-height); }
body{
    font-family:var(--font-body);
    color:var(--color-text);
    background:var(--color-bg);
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    transition:background-color var(--transition-base), color var(--transition-base);
    overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
button,input,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:none; }
:focus-visible{ outline:3px solid var(--color-accent); outline-offset:3px; border-radius:.3rem; }

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

.skip-link{
    position:absolute; top:-100%; left:1rem; background:var(--color-primary); color:#fff;
    padding:.75rem 1.25rem; border-radius:.5rem; z-index:10000; transition:top .2s ease;
}
.skip-link:focus{ top:1rem; }

/* 3. Typografie ------------------------------------------------------------ */
h1,h2,h3,h4{ font-family:var(--font-heading); color:var(--color-dark); font-weight:700; line-height:1.2; }
h1{ font-size:clamp(2.4rem, 5vw, 3.8rem); }
h2{ font-size:clamp(1.9rem, 3.6vw, 2.6rem); }
h3{ font-size:clamp(1.2rem, 2vw, 1.4rem); }
p{ color:var(--color-text-muted); }

.container{ width:100%; max-width:var(--container-width); margin-inline:auto; padding-inline:1.5rem; }

.section{ padding-block:clamp(4rem, 8vw, 7rem); }
.section-intro{ max-width:680px; margin-bottom:3rem; }
.section-eyebrow{
    display:inline-block; color:var(--color-primary); font-weight:600; letter-spacing:.08em;
    text-transform:uppercase; font-size:.8rem; margin-bottom:.75rem;
}
.section-title{ margin-bottom:1rem; }
.section-lead{ font-size:1.05rem; }

/* Preloader ----------------------------------------------------------------*/
.preloader{
    position:fixed; inset:0; background:var(--color-bg); display:flex; align-items:center; justify-content:center;
    z-index:9999; color:var(--color-primary); transition:opacity .5s ease, visibility .5s ease;
}
.preloader__mark svg{ animation:spin 1s linear infinite; }
.preloader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.scroll-progress{
    position:fixed; top:0; left:0; height:3px; width:0%; background:linear-gradient(90deg, var(--color-primary), var(--color-accent));
    z-index:1100; transition:width .1s linear;
}

/* 5. Header / Navigation ---------------------------------------------------*/
.site-header{
    position:sticky; top:0; z-index:1000; width:100%;
    background:color-mix(in srgb, var(--color-bg) 88%, transparent);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid transparent;
    transition:background-color var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.site-header[data-scrolled="true"]{
    box-shadow:var(--shadow-sm);
    border-color:var(--color-border);
}
.site-header__inner{
    display:flex; align-items:center; justify-content:space-between;
    height:var(--header-height); transition:height var(--transition-base);
}
.site-header[data-scrolled="true"] .site-header__inner{ height:calc(var(--header-height) - 20px); }

.brand{ display:flex; align-items:center; gap:.6rem; color:var(--color-dark); }
.brand__mark{ color:var(--color-primary); display:flex; }
.brand__name{ font-family:var(--font-heading); font-size:1.4rem; font-weight:700; }

.nav-desktop ul{ display:flex; gap:2.2rem; }
.nav-link{
    position:relative; font-weight:500; padding-block:.4rem; color:var(--color-text);
    transition:color var(--transition-base);
}
.nav-link::after{
    content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--color-primary);
    transition:width var(--transition-base);
}
.nav-link:hover,.nav-link.is-active{ color:var(--color-primary); }
.nav-link:hover::after,.nav-link.is-active::after{ width:100%; }

.site-header__actions{ display:flex; align-items:center; gap:1rem; }
.header-phone{ display:flex; align-items:center; gap:.4rem; font-weight:500; color:var(--color-text); }
.header-phone:hover{ color:var(--color-primary); }

.nav-toggle{
    display:none; flex-direction:column; justify-content:center; gap:5px; width:2.6rem; height:2.6rem;
}
.nav-toggle__bar{ width:100%; height:2px; background:var(--color-dark); border-radius:2px; transition:transform .3s ease, opacity .3s ease; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.nav-mobile{
    position:fixed; inset:0; top:0; background:var(--color-bg); z-index:999;
    display:flex; flex-direction:column; justify-content:center; align-items:center; gap:3rem;
    transform:translateY(-100%); opacity:0; visibility:hidden;
    transition:transform .45s cubic-bezier(.4,0,.2,1), opacity .35s ease, visibility .45s;
}
.nav-mobile.is-open{ transform:translateY(0); opacity:1; visibility:visible; }
.nav-mobile ul{ display:flex; flex-direction:column; gap:1.6rem; text-align:center; }
.nav-mobile a{ font-family:var(--font-heading); font-size:2rem; font-weight:600; color:var(--color-dark); }
.nav-mobile a.is-active,.nav-mobile a:hover{ color:var(--color-primary); }
.nav-mobile__contact{ display:flex; flex-direction:column; gap:.5rem; text-align:center; color:var(--color-text-muted); }

/* 6. Buttons ----------------------------------------------------------------*/
.btn{
    position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
    padding:.9rem 1.8rem; border-radius:var(--radius-full); font-weight:600; font-size:1rem;
    transition:transform var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base), color var(--transition-base);
    white-space:nowrap;
}
.btn svg{ transition:transform var(--transition-base); }
.btn:hover svg{ transform:translateX(3px); }
.btn--primary{ background:var(--color-primary); color:#fff; box-shadow:var(--shadow-sm); }
.btn--primary:hover{ background:var(--color-primary-600); transform:translateY(-3px); box-shadow:var(--shadow-md); }
.btn--ghost{ background:transparent; color:var(--color-dark); border:1.5px solid var(--color-border); }
.btn--ghost:hover{ border-color:var(--color-primary); color:var(--color-primary); transform:translateY(-3px); }
.btn--outline{ background:transparent; border:1.5px solid var(--color-primary); color:var(--color-primary); }
.btn--outline:hover{ background:var(--color-primary); color:#fff; }
.btn--light{ background:#fff; color:var(--color-primary-700); }
.btn--light:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.btn--sm{ padding:.6rem 1.2rem; font-size:.9rem; }
.btn--lg{ padding:1.05rem 2.2rem; font-size:1.05rem; }

.btn::before{
    content:""; position:absolute; inset:0; background:rgba(255,255,255,.35); border-radius:inherit;
    transform:scale(0); opacity:0; transition:transform .5s ease, opacity .5s ease;
}
.btn:active::before{ transform:scale(2.5); opacity:1; transition:0s; }

.btn__spinner{ display:none; width:16px; height:16px; border:2px solid rgba(255,255,255,.5); border-top-color:#fff; border-radius:50%; }
.btn.is-loading .btn__label{ opacity:.6; }
.btn.is-loading .btn__spinner{ display:inline-block; animation:spin .7s linear infinite; }

/* 7. Hero -------------------------------------------------------------------*/
.hero{
    position:relative; min-height:100vh; display:flex; align-items:center; overflow:hidden;
    background:linear-gradient(180deg, var(--color-primary-100) 0%, var(--color-bg) 75%);
    padding-top:var(--header-height);
}
.hero__bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero__shape{
    position:absolute; border-radius:50%; filter:blur(4px); opacity:.55;
    background:radial-gradient(circle at 30% 30%, var(--color-primary-200), transparent 70%);
}
.hero__shape--1{ width:420px; height:420px; top:-120px; right:-100px; }
.hero__shape--2{ width:280px; height:280px; bottom:-80px; left:-60px; background:radial-gradient(circle at 30% 30%, var(--color-accent), transparent 70%); opacity:.25; }
.hero__shape--3{ width:180px; height:180px; top:40%; right:12%; background:radial-gradient(circle, var(--color-primary), transparent 70%); opacity:.18; }

.hero__inner{ position:relative; z-index:1; max-width:820px; }
.hero__eyebrow{ color:var(--color-primary); font-weight:600; letter-spacing:.08em; text-transform:uppercase; font-size:.85rem; margin-bottom:1rem; display:block; }
.hero__title{ display:flex; flex-direction:column; margin-bottom:1.5rem; }
.hero__title-accent{ color:var(--color-primary); }
.hero__lead{ max-width:600px; font-size:1.15rem; margin-bottom:2.2rem; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:3.5rem; }

.hero__stats{ display:flex; flex-wrap:wrap; gap:2.5rem; }
.hero__stats dd{ font-family:var(--font-heading); font-size:2.1rem; color:var(--color-dark); font-weight:700; }
.hero__stats p{ font-size:.9rem; }

.hero__scroll-indicator{
    position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); width:26px; height:42px;
    border:2px solid var(--color-primary); border-radius:var(--radius-full); display:flex; justify-content:center; padding-top:8px;
}
.hero__scroll-indicator span{ width:4px; height:8px; background:var(--color-primary); border-radius:2px; animation:scrollDown 1.6s ease-in-out infinite; }
@keyframes scrollDown{ 0%{ transform:translateY(0); opacity:1; } 70%{ opacity:0; } 100%{ transform:translateY(14px); opacity:0; } }

/* 8. Cards / Grids ------------------------------------------------------------*/
.card-grid{ display:grid; gap:1.75rem; }
.card-grid--services{ grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); }
.card-grid--advantages{ grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); }

.service-card{
    background:var(--color-bg); border:1px solid var(--color-border); border-radius:var(--radius-md);
    padding:2.2rem 1.8rem; box-shadow:var(--shadow-sm); transition:transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.service-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:var(--color-primary-200); }
.service-card__icon{
    display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:var(--radius-sm);
    background:var(--color-primary-100); color:var(--color-primary); margin-bottom:1.2rem; transition:transform var(--transition-base);
}
.service-card:hover .service-card__icon{ transform:scale(1.12) rotate(-6deg); }
.service-card__title{ margin-bottom:.6rem; font-size:1.25rem; }
.service-card__text{ margin-bottom:1.2rem; font-size:.95rem; }
.service-card__link{ display:inline-flex; align-items:center; gap:.4rem; color:var(--color-primary); font-weight:600; }
.service-card__link svg{ transition:transform var(--transition-base); }
.service-card__link:hover svg{ transform:translateX(4px); }

.advantage-card{
    text-align:center; padding:2rem 1.4rem; border-radius:var(--radius-md); background:var(--color-bg-alt);
    transition:transform var(--transition-base), background-color var(--transition-base);
}
.advantage-card:hover{ transform:translateY(-6px); background:var(--color-primary-100); }
.advantage-card__icon{
    display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:50%;
    background:var(--color-bg); color:var(--color-primary); box-shadow:var(--shadow-sm); margin-bottom:1rem;
}
.advantage-card h3{ margin-bottom:.4rem; font-size:1.1rem; }
.advantage-card p{ font-size:.9rem; }

/* Stats band -------------------------------------------------------------- */
.stats-band{ background:var(--color-dark); padding-block:3.5rem; color:#fff; }
.stats-band__grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:2rem; text-align:center; }
.stats-band__value{ font-family:var(--font-heading); font-size:2.4rem; font-weight:700; color:#fff; }
.stats-band__label{ color:rgba(255,255,255,.7); font-size:.9rem; margin-top:.3rem; }

/* 9. About ------------------------------------------------------------------*/
.about__grid{ display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:center; }
.about__media-frame{ position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); }
.about__illustration{ width:100%; height:auto; }
.about__badge{
    position:absolute; bottom:1.2rem; left:1.2rem; background:var(--color-bg); padding:1rem 1.3rem; border-radius:var(--radius-md);
    box-shadow:var(--shadow-md); display:flex; flex-direction:column;
}
.about__badge strong{ color:var(--color-primary); font-family:var(--font-heading); font-size:1.3rem; }
.about__badge span{ font-size:.8rem; color:var(--color-text-muted); }
.about__content p{ margin-bottom:1.4rem; }
.about__list{ display:flex; flex-direction:column; gap:.7rem; margin-bottom:2rem; }
.about__list li{ position:relative; padding-left:1.8rem; color:var(--color-text); }
.about__list li::before{
    content:""; position:absolute; left:0; top:.4rem; width:14px; height:14px; border-radius:50%;
    background:var(--color-primary-100); border:2px solid var(--color-primary);
}

/* 10. Process -----------------------------------------------------------------*/
.process-steps{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:2rem; counter-reset:step; }
.process-step{ position:relative; padding:2rem 1.5rem 1.5rem; border-radius:var(--radius-md); background:var(--color-bg-alt); }
.process-step__num{
    display:inline-block; font-family:var(--font-heading); font-size:2.4rem; color:var(--color-primary-200); font-weight:700; margin-bottom:.6rem;
}
.process-step h3{ margin-bottom:.5rem; font-size:1.1rem; }
.process-step p{ font-size:.9rem; }

/* 11. Testimonials --------------------------------------------------------------*/
.testimonial-slider{ max-width:760px; margin-inline:auto; text-align:center; }
.testimonial-slider__track{ position:relative; min-height:220px; }
.testimonial-card{
    position:absolute; inset:0; opacity:0; visibility:hidden; transform:translateY(16px);
    transition:opacity .5s ease, transform .5s ease, visibility .5s;
}
.testimonial-card.is-active{ position:relative; opacity:1; visibility:visible; transform:translateY(0); }
.testimonial-card__quote{ color:var(--color-primary-200); margin-inline:auto; margin-bottom:1rem; }
.testimonial-card blockquote p{ font-size:1.2rem; color:var(--color-dark); font-family:var(--font-heading); font-style:italic; margin-bottom:1.2rem; }
.testimonial-card figcaption{ display:flex; flex-direction:column; }
.testimonial-card figcaption strong{ color:var(--color-primary); }
.testimonial-card figcaption span{ font-size:.85rem; color:var(--color-text-muted); }

.testimonial-slider__controls{ display:flex; align-items:center; justify-content:center; gap:1.4rem; margin-top:1.5rem; }
.testimonial-slider__btn{
    width:44px; height:44px; border-radius:50%; border:1px solid var(--color-border); display:flex; align-items:center; justify-content:center;
    color:var(--color-primary); transition:background-color var(--transition-base), transform var(--transition-base);
}
.testimonial-slider__btn:hover{ background:var(--color-primary-100); transform:scale(1.08); }
.testimonial-slider__dots{ display:flex; gap:.5rem; }
.testimonial-slider__dot{ width:9px; height:9px; border-radius:50%; background:var(--color-border); transition:background-color var(--transition-base), transform var(--transition-base); }
.testimonial-slider__dot.is-active{ background:var(--color-primary); transform:scale(1.3); }

/* 12. FAQ / Accordion -------------------------------------------------------------*/
.faq__inner{ max-width:820px; }
.accordion__item{ border-bottom:1px solid var(--color-border); }
.accordion__trigger{
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
    padding:1.4rem 0; text-align:left; font-weight:600; font-size:1.05rem; color:var(--color-dark);
}
.accordion__icon{ flex-shrink:0; color:var(--color-primary); transition:transform var(--transition-base); }
.accordion__trigger[aria-expanded="true"] .accordion__icon{ transform:rotate(135deg); }
.accordion__panel{ overflow:hidden; transition:height .35s ease; }
.accordion__panel p{ padding-bottom:1.4rem; font-size:.95rem; }

/* 13. Pricing ------------------------------------------------------------------*/
.pricing__tables{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
.pricing-table{ border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--color-border); }
.pricing-table__row{ display:grid; grid-template-columns:1fr auto; gap:1rem; padding:1rem 1.4rem; }
.pricing-table__row:nth-child(even){ background:var(--color-bg-alt); }
.pricing-table__row--head{ background:var(--color-primary) !important; color:#fff; font-weight:600; }
.pricing-table__price{ font-weight:700; color:var(--color-primary); }
.pricing-table--info .pricing-table__row--head{ background:var(--color-primary-700) !important; }

/* 14. CTA ------------------------------------------------------------------------*/
.cta-band{
    position:relative; overflow:hidden; margin-inline:1.5rem; border-radius:var(--radius-lg);
    background:linear-gradient(135deg, var(--color-primary), var(--color-primary-700));
    color:#fff; padding-block:clamp(3.5rem, 7vw, 5.5rem); text-align:center;
}
.cta-band__shape{
    position:absolute; width:340px; height:340px; border-radius:50%; background:rgba(255,255,255,.08);
    top:-140px; right:-80px;
}
.cta-band__inner{ position:relative; max-width:640px; margin-inline:auto; }
.cta-band h2{ color:#fff; margin-bottom:1rem; }
.cta-band p{ color:rgba(255,255,255,.85); margin-bottom:2rem; }

/* 15. Contact / Forms --------------------------------------------------------------*/
.contact__grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:3.5rem; }
.contact-form{ display:flex; flex-direction:column; gap:1.3rem; margin-top:2rem; }
.contact-form__honeypot{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-field{ display:flex; flex-direction:column; gap:.5rem; }
.form-field label{ font-weight:600; font-size:.9rem; color:var(--color-dark); }
.form-field input,.form-field textarea{
    padding:.9rem 1.1rem; border:1.5px solid var(--color-border); border-radius:var(--radius-sm);
    background:var(--color-bg); transition:border-color var(--transition-base), box-shadow var(--transition-base);
}
.form-field input:focus,.form-field textarea:focus{ border-color:var(--color-primary); box-shadow:0 0 0 4px var(--color-primary-100); }
.form-field textarea{ resize:vertical; min-height:120px; }
.form-field.has-error input,.form-field.has-error textarea{ border-color:#e0554a; }
.form-field__error{ font-size:.82rem; color:#e0554a; min-height:1.1em; }
.contact-form__status{ font-weight:600; min-height:1.4em; }
.contact-form__status.is-success{ color:#2f9e6f; }
.contact-form__status.is-error{ color:#e0554a; }

.contact__info-col{ background:var(--color-dark); color:#fff; border-radius:var(--radius-lg); padding:2.6rem; align-self:start; }
.contact__info-col h2{ color:#fff; margin-bottom:.8rem; }
.contact__info-col p{ color:rgba(255,255,255,.75); margin-bottom:1.8rem; }
.contact-info-list{ display:flex; flex-direction:column; gap:1rem; margin-bottom:2rem; }
.contact-info-list li{ display:flex; align-items:center; gap:.8rem; color:rgba(255,255,255,.9); }
.contact-info-list svg{ color:var(--color-primary-200); flex-shrink:0; }
.contact__info-col .btn--outline{ border-color:rgba(255,255,255,.4); color:#fff; }
.contact__info-col .btn--outline:hover{ background:#fff; color:var(--color-primary-700); }

/* 16. Newsletter -----------------------------------------------------------------*/
.newsletter{ background:var(--color-primary-100); padding-block:3rem; }
.newsletter__inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem; }
.newsletter__text h2{ font-size:1.4rem; margin-bottom:.3rem; }
.newsletter__text p{ font-size:.9rem; }
.newsletter__form{ display:flex; gap:.7rem; flex-wrap:wrap; }
.newsletter__form input{
    padding:.85rem 1.1rem; border-radius:var(--radius-full); border:1.5px solid var(--color-border); min-width:240px;
    background:var(--color-bg);
}
.newsletter__status{ width:100%; font-size:.85rem; font-weight:600; margin-top:.5rem; color:#2f9e6f; }
.newsletter__status.is-error{ color:#e0554a; }

/* 17. Footer ------------------------------------------------------------------------*/
.site-footer{ background:var(--color-dark); color:rgba(255,255,255,.8); padding-top:4.5rem; }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1.1fr; gap:2.5rem; padding-bottom:3rem; }
.footer-col__title{ color:#fff; font-size:1rem; margin-bottom:1.1rem; font-family:var(--font-heading); }
.footer-col ul{ display:flex; flex-direction:column; gap:.65rem; font-size:.92rem; }
.footer-col a:hover{ color:var(--color-primary-200); }
.footer-col--brand p{ color:rgba(255,255,255,.65); margin-block:1rem 1.2rem; font-size:.92rem; }
.brand--footer{ color:#fff; }
.footer-social{ display:flex; gap:.7rem; }
.footer-social a{
    width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center;
    font-size:.75rem; font-weight:700; transition:background-color var(--transition-base), transform var(--transition-base);
}
.footer-social a:hover{ background:var(--color-primary); transform:translateY(-3px); }
.footer-col--contact ul{ font-style:normal; }
.footer-link-button{
    font:inherit; color:inherit; text-align:left; padding:0; background:none; border:none; cursor:pointer;
    transition:color var(--transition-base);
}
.footer-link-button:hover{ color:var(--color-primary-200); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); padding-block:1.4rem; }
.footer-bottom__inner{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem; font-size:.82rem; color:rgba(255,255,255,.55); }

/* 18. Floating UI --------------------------------------------------------------------*/
.back-to-top{
    position:fixed; right:1.6rem; bottom:1.6rem; width:48px; height:48px; border-radius:50%;
    background:var(--color-primary); color:#fff; display:flex; align-items:center; justify-content:center;
    box-shadow:var(--shadow-md); opacity:0; visibility:hidden; transform:translateY(12px);
    transition:opacity .3s ease, transform .3s ease, visibility .3s, background-color var(--transition-base);
    z-index:900;
}
.back-to-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ background:var(--color-primary-600); }

.floating-contact{ position:fixed; left:1.6rem; bottom:1.6rem; z-index:900; }
.floating-contact__btn{
    width:54px; height:54px; border-radius:50%; background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
    box-shadow:var(--shadow-md); animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(37,211,102,.4); } 50%{ box-shadow:0 0 0 10px rgba(37,211,102,0); } }

.cookie-banner{
    position:fixed; left:1rem; right:1rem; bottom:1rem; max-width:680px; margin-inline:auto;
    background:var(--color-bg); border:1px solid var(--color-border); border-radius:var(--radius-md);
    box-shadow:var(--shadow-lg); padding:1.6rem; z-index:1200;
    transform:translateY(20px); opacity:0; transition:transform .4s ease, opacity .4s ease;
}
.cookie-banner.is-visible{ transform:translateY(0); opacity:1; }
.cookie-banner__inner{ display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap; }
.cookie-banner__text{ flex:1 1 320px; }
.cookie-banner__title{ font-family:var(--font-heading); font-weight:700; color:var(--color-dark); font-size:1.05rem; margin-bottom:.4rem; }
.cookie-banner p{ font-size:.88rem; margin-bottom:0; }
.cookie-banner__text p a{ color:var(--color-primary); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.cookie-banner__actions{ display:flex; gap:.8rem; flex-wrap:wrap; flex:0 0 auto; }

/* Consent-Einstellungen-Dialog ------------------------------------------------------- */
.consent-modal{ position:fixed; inset:0; z-index:1300; display:flex; align-items:center; justify-content:center; padding:1.5rem; }
.consent-modal[hidden]{ display:none; }
.consent-modal__backdrop{
    position:absolute; inset:0; background:rgba(18,40,58,.55); backdrop-filter:blur(3px);
    opacity:0; transition:opacity .35s ease;
}
.consent-modal.is-visible .consent-modal__backdrop{ opacity:1; }
.consent-modal__panel{
    position:relative; width:100%; max-width:560px; max-height:min(640px, 85vh); overflow-y:auto;
    background:var(--color-bg); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
    padding:2rem; transform:translateY(24px) scale(.97); opacity:0;
    transition:transform .35s cubic-bezier(.4,0,.2,1), opacity .35s ease;
}
.consent-modal.is-visible .consent-modal__panel{ transform:translateY(0) scale(1); opacity:1; }
.consent-modal__header{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.consent-modal__header h2{ font-size:1.3rem; }
.consent-modal__close{
    display:flex; align-items:center; justify-content:center; width:2.4rem; height:2.4rem; flex-shrink:0;
    border-radius:50%; color:var(--color-text-muted); transition:background-color var(--transition-base), color var(--transition-base);
}
.consent-modal__close:hover{ background:var(--color-bg-alt); color:var(--color-primary); }
.consent-modal__body p{ font-size:.92rem; margin-bottom:1.3rem; }
.consent-modal__body p a{ color:var(--color-primary); font-weight:600; }
.consent-category-list{ display:flex; flex-direction:column; gap:1rem; }
.consent-category{ border:1px solid var(--color-border); border-radius:var(--radius-sm); padding:1.1rem 1.2rem; }
.consent-category__header{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.4rem; }
.consent-category__name{ font-weight:700; color:var(--color-dark); }
.consent-category__desc{ font-size:.85rem; color:var(--color-text-muted); margin:0; }
.consent-toggle{ display:flex; align-items:center; gap:.5rem; }
.consent-toggle__track{ position:relative; width:36px; height:20px; border-radius:var(--radius-full); background:var(--color-primary); flex-shrink:0; }
.consent-toggle__thumb{ position:absolute; top:2px; right:2px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:var(--shadow-sm); }
.consent-toggle__label{ font-size:.78rem; font-weight:600; color:var(--color-text-muted); white-space:nowrap; }
.consent-modal__footer{ display:flex; justify-content:flex-end; gap:.8rem; flex-wrap:wrap; margin-top:1.6rem; padding-top:1.4rem; border-top:1px solid var(--color-border); }

.owner-popup{
    position:fixed; right:1.5rem; top:50%; z-index:940; width:min(300px, calc(100vw - 2rem));
    background:var(--color-bg); border:1px solid var(--color-border); border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg); padding:1.5rem 1.4rem 1.4rem;
    transform:translateY(-50%) translateX(24px); opacity:0; visibility:hidden;
    transition:transform .5s cubic-bezier(.4,0,.2,1), opacity .5s ease, visibility .5s;
}
.owner-popup.is-visible{ transform:translateY(-50%) translateX(0); opacity:1; visibility:visible; }
.owner-popup__close{
    position:absolute; top:.6rem; right:.6rem; width:2rem; height:2rem; border-radius:50%;
    display:flex; align-items:center; justify-content:center; color:var(--color-text-muted);
    transition:background-color var(--transition-base), color var(--transition-base);
}
.owner-popup__close:hover{ background:var(--color-bg-alt); color:var(--color-primary); }
.owner-popup__body{ display:flex; align-items:center; gap:.9rem; margin-bottom:.9rem; padding-right:1.3rem; }
.owner-popup__avatar{
    flex-shrink:0; width:56px; height:56px; border-radius:50%; overflow:hidden;
    background:var(--color-primary-100); color:var(--color-primary);
    display:flex; align-items:center; justify-content:center;
}
.owner-popup__avatar img{ width:100%; height:100%; object-fit:cover; }
.owner-popup__intro{ display:flex; flex-direction:column; }
.owner-popup__name{ color:var(--color-dark); font-size:.98rem; line-height:1.3; }
.owner-popup__role{ font-size:.78rem; color:var(--color-text-muted); }
.owner-popup__message{ font-size:.9rem; margin-bottom:1.1rem; }
.owner-popup__cta{ width:100%; justify-content:center; }

/* 19. Page hero / Breadcrumbs -------------------------------------------------------*/
.page-hero{ padding-block:clamp(6rem, 12vw, 9rem) 3rem; background:linear-gradient(180deg, var(--color-primary-100), var(--color-bg)); }
.breadcrumbs{ margin-bottom:1.2rem; }
.breadcrumbs ol{ display:flex; gap:.5rem; font-size:.85rem; color:var(--color-text-muted); }
.breadcrumbs li:not(:last-child)::after{ content:"/"; margin-left:.5rem; }
.breadcrumbs a:hover{ color:var(--color-primary); }

.booking-features{ padding-block:2.5rem; background:var(--color-bg-alt); }
.booking-features__grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:2rem; text-align:center; }
.booking-feature h2{ font-size:1.15rem; margin-bottom:.4rem; }
.booking-feature p{ font-size:.9rem; }

/* 19b. Rechtstexte (Impressum / Datenschutz) --------------------------------------------*/
.legal-content{ max-width:760px; }
.legal-content h2{ font-size:1.35rem; margin-top:2.6rem; margin-bottom:.9rem; }
.legal-content h2:first-child{ margin-top:0; }
.legal-content h3{ font-size:1.05rem; color:var(--color-primary-700); margin-top:1.6rem; margin-bottom:.6rem; }
.legal-content p{ margin-bottom:1rem; font-size:.96rem; }
.legal-content ul,.legal-content ol{ margin:0 0 1rem 1.3rem; display:flex; flex-direction:column; gap:.45rem; }
.legal-content ul{ list-style:disc; }
.legal-content ol{ list-style:decimal; }
.legal-content li{ font-size:.95rem; color:var(--color-text-muted); }
.legal-content a{ color:var(--color-primary); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.legal-content strong{ color:var(--color-dark); }
.legal-content table{ width:100%; border-collapse:collapse; margin-bottom:1.2rem; font-size:.92rem; }
.legal-content th,.legal-content td{ text-align:left; padding:.6rem .8rem; border-bottom:1px solid var(--color-border); vertical-align:top; }
.legal-content th{ color:var(--color-dark); width:34%; }
.legal-content .legal-note{
    background:var(--color-primary-100); border-left:4px solid var(--color-primary); border-radius:0 var(--radius-sm) var(--radius-sm) 0;
    padding:1rem 1.2rem; margin-bottom:1.4rem; font-size:.88rem;
}
.legal-content .legal-placeholder{ color:var(--color-accent); font-weight:600; }
.legal-toc{ background:var(--color-bg-alt); border-radius:var(--radius-md); padding:1.4rem 1.6rem; margin-bottom:2.4rem; }
.legal-toc p{ font-weight:700; color:var(--color-dark); margin-bottom:.7rem; font-size:.9rem; }
.legal-toc ol{ margin-left:1.2rem; }
.legal-toc a{ color:var(--color-text); text-decoration:none; }
.legal-toc a:hover{ color:var(--color-primary); text-decoration:underline; }

/* 20. 404 -----------------------------------------------------------------------------*/
.error-page{ min-height:80vh; display:flex; align-items:center; padding-block:5rem; }
.error-page__inner{ max-width:640px; margin-inline:auto; text-align:center; }
.error-page__code{ font-family:var(--font-heading); font-size:clamp(5rem, 16vw, 9rem); color:var(--color-primary-200); font-weight:700; line-height:1; margin-bottom:1rem; }
.error-page__actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:2rem; }

/* 21. Reveal / Scroll Animations --------------------------------------------------------*/
[data-reveal]{ opacity:0; transition:opacity .8s cubic-bezier(.4,0,.2,1), transform .8s cubic-bezier(.4,0,.2,1), filter .8s ease; will-change:transform, opacity; }
[data-reveal="fade-up"]{ transform:translateY(32px); }
[data-reveal="slide-left"]{ transform:translateX(-48px); }
[data-reveal="slide-right"]{ transform:translateX(48px); }
[data-reveal="zoom"]{ transform:scale(.88); }
[data-reveal="blur"]{ filter:blur(8px); }
[data-reveal].is-visible{ opacity:1; transform:none; filter:blur(0); }
[data-reveal][data-delay="1"]{ transition-delay:.08s; }
[data-reveal][data-delay="2"]{ transition-delay:.16s; }
[data-reveal][data-delay="3"]{ transition-delay:.24s; }
[data-reveal][data-delay="4"]{ transition-delay:.32s; }
[data-reveal][data-delay="5"]{ transition-delay:.4s; }
[data-reveal][data-delay="6"]{ transition-delay:.48s; }

/* 23. Responsive -------------------------------------------------------------------------*/
@media (max-width:1080px){
    .footer-grid{ grid-template-columns:repeat(3, 1fr); }
    .about__grid{ grid-template-columns:1fr; }
    .about__media{ order:-1; }
}

@media (max-width:900px){
    .nav-desktop{ display:none; }
    .nav-toggle{ display:flex; }
    .header-phone__label{ display:none; }
    .contact__grid{ grid-template-columns:1fr; }
    .pricing__tables{ grid-template-columns:1fr; }
}

@media (max-width:640px){
    :root{ --header-height:76px; }
    .card-grid--services,.card-grid--advantages{ grid-template-columns:1fr; }
    .footer-grid{ grid-template-columns:1fr; }
    .hero__stats{ gap:1.5rem; }
    .cta-band{ margin-inline:1rem; }
    .newsletter__inner{ flex-direction:column; align-items:flex-start; }
    .newsletter__form input{ min-width:0; flex:1; }
    .floating-contact{ left:1rem; bottom:1rem; }
    .back-to-top{ right:1rem; bottom:1rem; width:42px; height:42px; }
    .cookie-banner{ padding:1.3rem; }
    .cookie-banner__actions{ width:100%; }
    .cookie-banner__actions .btn{ flex:1 1 0; }
    .consent-modal__panel{ padding:1.5rem; }
    .consent-modal__footer{ flex-direction:column-reverse; }
    .consent-modal__footer .btn{ width:100%; }
    .owner-popup{ right:.75rem; width:min(272px, calc(100vw - 1.5rem)); padding:1.3rem 1.2rem 1.2rem; }
}

@media (min-width:1600px){
    :root{ --container-width:1360px; }
    h1{ font-size:4.4rem; }
}

/* 24. Reduced Motion ------------------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce){
    *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
    [data-reveal]{ opacity:1; transform:none; filter:none; }
}