/* ==========================================================================
   STUDIOCARBON – studiocarbon.eu
   Statische Seite (ohne CMS). Alle Werte wurden aus dem ursprünglichen
   OceanWP/Elementor-Design per Computed Styles übernommen (1:1).

   Aufbau dieser Datei (gemeinsame Teile aller Seiten):
     1. Design-Tokens (Farben, Schriften, Breiten)
     2. Basis / Reset (OceanWP-Defaults)
     3. Header (Desktop) – transparent (dunkel) und hell (Print & Web)
     4. Mobiles Menü (≤ 959px)
     5. Layout-Helfer (Container, Spalten, Elementor-Äquivalente)
     6. Footer (Kontakt, Google Maps, Anfahrt, Copyright)
     7. Cookie-Hinweis (Complianz-Nachbau)
     8. Eingebettete Inhalte mit Zustimmung (Google Maps)
     9. Gemeinsame Komponenten (Accordion, Buttons, Icons)
   Seitenspezifisches: assets/css/pages/<seite>.css
   ========================================================================== */

/* 1. Design-Tokens ------------------------------------------------------- */
:root{
  --c-text:#4a4a4a;             /* Fließtext (OceanWP)                      */
  --c-heading:#333;             /* Überschriften                            */
  --c-link:#886dba;             /* Links (Lila, OceanWP-Customizer)         */
  --c-link-hover:#333;
  --c-purple:#683f9e;           /* Icons im Footer                          */
  --c-purple-dark:#531088;      /* Untermenü-Rahmen (Original: ausgeblendet)*/
  --c-menu:#a3a3a3;             /* Hauptmenü                                */
  --c-menu-active:#655587;      /* aktiver Menüpunkt (rgb 101,85,135)       */
  --c-menu-bracket:#afafaf;     /* „[ ]“ beim Hover                         */
  --c-menu-hover:#594f87;       /* Hover Hauptmenü + Mobil-Icon (OceanWP-Customizer)      */
  --c-header-bg:rgba(10,0,0,.77);
  --c-mobile-menu:#151412;      /* rgb 21,20,18                             */
  --c-dark:#333;                /* Footer-Spalten                           */
  --c-footer-bottom:#1b1b1b;    /* Copyright-Leiste                         */
  --c-footer-text:#e5e5e5;
  --c-footer-muted:#a4a4a4;

  --font-body:"Open Sans",sans-serif;   /* wie Original: Open Sans wird nicht geladen → System-Sans */
  --font-display:Varela,sans-serif;

  --container:1200px;           /* OceanWP .container (max 90 %)            */
  --container-el:1220px;        /* Elementor-Boxed-Breite                   */
  --header-h:85px;
}

/* 2. Basis / Reset ------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:#fff;
  color:var(--c-text);
  font-family:var(--font-body);
  font-size:14px;
  line-height:1.6;
  overflow-wrap:break-word;
  word-wrap:break-word;
  -webkit-font-smoothing:antialiased;
}
img,svg,picture,video,iframe{max-width:100%;height:auto;border:0}
img{vertical-align:middle}
a{color:var(--c-link);text-decoration:none;transition:color .3s ease}
a:hover{color:var(--c-link-hover)}
p{margin:0 0 20px}
ul,ol{margin:15px 0 15px 20px;padding:0}
h1,h2,h3,h4,h5,h6{font-weight:600;margin:0 0 20px;color:var(--c-heading);line-height:1.4}
h1{font-family:var(--font-display);font-size:23px}
h2{font-size:20px}
h3{font-size:18px;line-height:1.2}
h4{font-size:17px}
h5,h6{font-size:14px}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.clr::after{content:"";display:table;clear:both}
.screen-reader-text,.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;background:#000;color:#fff;padding:8px 16px;z-index:100000}
.skip-link:focus{left:8px;top:8px}
.container{width:var(--container);max-width:90%;margin:0 auto;position:relative}

/* Font-Awesome-Symbole (Subset, siehe fonts.css) */
.fa,.fas,.far,.fab{display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1;-webkit-font-smoothing:antialiased}
.fa,.fas{font-family:'Font Awesome 5 Free';font-weight:900}
.far{font-family:'Font Awesome 5 Free';font-weight:400}
.fab{font-family:'Font Awesome 5 Brands';font-weight:400}
.fa-bars::before{content:"\f0c9"}
.fa-calendar-alt::before{content:"\f073"}
.fa-map-marker-alt::before{content:"\f3c5"}
.fa-whatsapp::before{content:"\f232"}
.fa-envelope::before{content:"\f0e0"}
.fa-phone::before{content:"\f095"}
.fa-plus::before{content:"\f067"}
.fa-minus::before{content:"\f068"}
.fa-check::before{content:"\f00c"}
.fa-eye::before{content:"\f06e"}
.fa-cubes::before{content:"\f1b3"}
.fa-paper-plane::before{content:"\f1d8"}
.fa-apple::before{content:"\f179"}
.fa-play::before{content:"\f04b"}
.fa-pause::before{content:"\f04c"}
.fa-step-backward::before{content:"\f048"}
.fa-step-forward::before{content:"\f051"}
.fa-redo::before{content:"\f01e"}
.fa-random::before{content:"\f074"}
.fa-music::before{content:"\f001"}
.fa-print::before{content:"\f02f"}
.fa-image::before,.fa-photo::before{content:"\f03e"}
.fa-file::before{content:"\f15b"}
.fa-quote-left::before{content:"\f10d"}
.fa-facebook::before{content:"\f39e"}
.fa-instagram::before{content:"\f16d"}
.fa-twitter::before{content:"\f099"}
.fa-internet-explorer::before{content:"\f26b"}
.fa-times::before{content:"\f00d"}
.fa-search-plus::before{content:"\f00e"}
.fa-chevron-left::before{content:"\f053"}
.fa-chevron-right::before{content:"\f054"}
.fa-angle-left::before{content:"\f104"}
.fa-angle-right::before{content:"\f105"}

/* 3. Header (Desktop) ---------------------------------------------------- */
.site-header{
  position:absolute;top:0;left:0;width:100%;height:var(--header-h);
  background-color:var(--c-header-bg);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  z-index:9999;
  transition:opacity .3s,background-color .3s;
}
.site-header__inner{position:relative;height:100%;width:var(--container);max-width:90%;margin:0 auto}
.site-logo{float:left;height:100%;display:table}
.site-logo__inner{display:table-cell;vertical-align:middle;height:var(--header-h)}
.site-logo a{display:inline}
.site-logo img{width:252px;height:var(--header-h);max-width:100%;vertical-align:middle;transition:.3s ease-in-out}
.site-logo a:hover img{opacity:.6}
.site-nav-wrap{float:right;position:relative;right:-15px}
.site-nav ul{list-style:none;margin:0;padding:0}
.site-nav>ul>li{float:left;position:relative;white-space:normal}
.site-nav>ul>li>a{
  display:block;position:relative;
  font-family:var(--font-display);font-size:16px;font-weight:500;letter-spacing:1.3px;text-transform:uppercase;
  line-height:var(--header-h);padding:0 15px;color:var(--c-menu);
}
.site-nav>ul>li>a:hover{color:var(--c-menu-hover)}
.site-nav>ul>li.current>a,.site-nav>ul>li.current>a:hover{color:var(--c-menu-active)}
/* OceanWP „Effect four“: eckige Klammern gleiten beim Hover an den Text */
.site-nav>ul>li>a>span{position:relative}
.site-nav>ul>li>a>span::before,.site-nav>ul>li>a>span::after{display:inline-block;color:var(--c-menu-bracket);opacity:0;transition:all .25s ease-out}
.site-nav>ul>li>a>span::before{content:"[";margin-right:6px;transform:translateX(20px)}
.site-nav>ul>li>a>span::after{content:"]";margin-left:6px;transform:translateX(-20px)}
.site-nav>ul>li>a:hover>span::before,.site-nav>ul>li>a:hover>span::after{opacity:1;transform:translateX(0)}
/* Untermenü (Studio → Studio und Hörbeispiele / Tonstudio Preise) */
.site-nav .sub-menu{
  display:none;position:absolute;top:100%;left:0;min-width:219px;
  background:#fff;line-height:1;text-align:left;z-index:999;
  box-shadow:0 2px 6px rgba(0,0,0,.1);
}
.site-nav li:hover>.sub-menu,.site-nav li:focus-within>.sub-menu{display:block}
.site-nav .sub-menu li{display:block;border-bottom:1px solid #f1f1f1}
.site-nav .sub-menu li:last-child{border-bottom:0}
.site-nav .sub-menu a{
  display:block;position:relative;float:none;
  font-family:var(--font-body);font-size:12px;font-weight:400;line-height:1.2;letter-spacing:.6px;
  padding:12px 15px;text-transform:capitalize;color:var(--c-link);
}
.site-nav .sub-menu a:hover{background:#f8f8f8;color:#555}

/* Helle Variante (Print & Web): weißer Balken im Fluss, dunkles Logo */
.site-header--light{position:relative;background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;z-index:100}
/* Logo im hellen Header: Elementor-Bildwidget (Spalte 33 %, Wrap padding-top 10px, Container margin 10px, Bild 265px) */
.site-header--light .site-logo{display:block;height:auto;width:33.333%}
.site-header--light .site-logo__inner{display:block;height:auto;padding:10px 0 0}
.site-header--light .site-logo a{display:inline-block;margin:10px;line-height:0}
.site-header--light .site-logo img{width:265px;height:auto}
@media only screen and (max-width:767px){
  /* mobil: Spalte 65 %, Widget vertikal zentriert (Logo bei y=33), Bild volle Breite (208px bei 390px) */
  .site-header--light .site-logo{width:65%}
  .site-header--light .site-logo__inner{padding:23px 0 0}
  .site-header--light .site-logo a{display:block}
  .site-header--light .site-logo img{width:100%;max-width:none}
}
.site-header--light .site-nav-wrap{right:0}
.site-header--light .site-nav>ul>li>a{color:rgba(0,0,0,.62)}
.site-header--light .site-nav>ul>li>a:hover{color:var(--c-menu-hover)}
.site-header--light .site-nav>ul>li.current>a{color:var(--c-menu-active)}
.site-header--light .mobile-menu-toggle{color:rgba(0,0,0,.62)}

/* 4. Mobiles Menü -------------------------------------------------------- */
.mobile-menu-icon{display:none;position:relative;float:right}
.mobile-menu-toggle{
  display:inline;cursor:pointer;
  font-family:var(--font-display);font-size:16px;font-weight:500;letter-spacing:1.3px;text-transform:uppercase;
  line-height:var(--header-h);color:var(--c-menu);
}
.mobile-menu-toggle:hover{color:var(--c-menu-hover)}
.mobile-menu-toggle .fa-bars{font-size:16px;line-height:16px;letter-spacing:1.3px}
.mobile-menu-toggle .menu-text,.mobile-menu-toggle .close-text{padding-left:6px}
.mobile-menu-toggle .close-text,.mobile-menu-toggle.opened .menu-text{display:none}
.mobile-menu-toggle.opened .close-text{display:inline-block}
#mobile-dropdown{
  display:none;position:absolute;top:100%;left:0;width:100%;
  background:var(--c-mobile-menu);max-height:400px;overflow-y:auto;
  box-shadow:0 2px 6px rgba(0,0,0,.1);
}
#mobile-dropdown ul{margin:0;padding:0;list-style:none}
#mobile-dropdown li{border-bottom:1px solid rgba(255,255,255,.04)}
#mobile-dropdown a{display:block;position:relative;padding:12px 40px;text-align:left;color:#fff;font-size:15px;line-height:1.8}
#mobile-dropdown .dropdown-toggle{position:absolute;right:0;top:0;height:100%;width:60px;cursor:pointer;padding-right:40px;text-align:center;transition:.3s}
#mobile-dropdown .dropdown-toggle::before{content:"+";font-size:20px;position:absolute;top:50%;left:50%;line-height:30px;margin:-15px 0 0 -15px}
#mobile-dropdown li.active>a>.dropdown-toggle::before{content:"-"}
#mobile-dropdown .sub-menu{display:none;border-top:1px solid rgba(255,255,255,.04);background:rgba(0,0,0,.02)}
@media only screen and (max-width:959px){
  .site-nav-wrap{display:none}
  .mobile-menu-icon{display:block}
}
@media only screen and (max-width:480px){
  .site-logo img{width:164.7px;max-width:183px}
}

/* 5. Layout-Helfer (Elementor-Äquivalente) -------------------------------- */
.section{position:relative}
.section__inner{position:relative;max-width:var(--container-el);margin:0 auto;display:flex}
.section__inner--block{display:block}
.col{position:relative;display:flex;min-height:1px}
.col__wrap{position:relative;width:100%;padding:10px;display:flex;flex-wrap:wrap;align-content:flex-start}
.col__wrap>*{width:100%}
.col--50{width:50%}
.col--33{width:33.3333%}
.col--100{width:100%}
.widget{position:relative;margin-bottom:20px}
.widget:last-child{margin-bottom:0}
@media only screen and (max-width:767px){
  .col--50,.col--33{width:100%}
}

/* 6. Footer -------------------------------------------------------------- */
.site-footer{position:relative}
.footer-grid{display:flex;width:100%;position:relative}
.footer-col{position:relative;display:flex;flex-direction:column;justify-content:center;width:33.3333%;min-height:1px}
.footer-col--contact,.footer-col--info{background:var(--c-dark);padding:30px}
.footer-col--maps{overflow:hidden;line-height:0}
.footer-contact__inner{padding:10px}
.footer-title{
  font-family:var(--font-display);font-size:18px;font-weight:600;line-height:18px;text-transform:uppercase;
  color:#fff;margin:0 0 20px;
}
/* Bild-Box (Portrait + Firmenname) */
.footer-person{display:flex;align-items:center;margin:0 0 20px}
.footer-person__img{flex:0 0 88.84px;width:88.84px;margin:0 15px 0 0;line-height:0}
.footer-person__img img{display:block;width:100%;height:auto;transition-duration:.3s}
.footer-person__content{flex:1 1 auto;min-width:0}
.footer-person__title{font-family:var(--font-display);font-size:18px;font-weight:600;line-height:1.2;color:#fff;margin:0}
.footer-person__desc{font-size:14px;line-height:1.6;color:#fff;margin:0}
/* Icon-Boxen (Termine, Adresse, WhatsApp, E-Mail, Telefon) */
.icon-box{display:flex;align-items:flex-start;gap:15px;margin:0 0 20px}
.icon-box:last-child{margin-bottom:0}
.icon-box__icon{flex:0 0 auto;line-height:0}
.icon-box__icon .fa,.icon-box__icon .fas,.icon-box__icon .far,.icon-box__icon .fab{display:block;font-size:35px;line-height:35px;width:35px;height:35px;text-align:center;color:var(--c-purple)}
.icon-box__icon a{display:inline-block;color:var(--c-purple)}
.icon-box__content{flex:1 1 auto;min-width:0}
.icon-box__title{font-family:var(--font-display);font-size:18px;font-weight:600;line-height:1.2;color:#fff;margin:0 0 4px}
.icon-box__title a{color:#fff}
.icon-box--booking .icon-box__title{margin-bottom:-10px}
.icon-box--booking .icon-box__title a{display:inline;text-decoration:underline}
.icon-box--booking .icon-box__title p{margin:0 0 20px;text-decoration:underline}
.icon-box__desc{font-size:14px;line-height:1.6;color:var(--c-footer-text);margin:0}
.icon-box__desc a{color:var(--c-link)}
.icon-box__desc a:hover{color:#fff}
/* Anfahrt */
.footer-col--info .footer-title{margin-bottom:20px}
.footer-info{color:var(--c-footer-muted);font-size:14px;line-height:1.6}
.footer-info p{margin:0 0 20px}
.footer-info p:last-child{margin-bottom:0}
.footer-info h4{font-family:var(--font-display);font-size:17px;font-weight:600;line-height:1.4;color:#fff;margin:20px 0 0}
/* Copyright-Leiste */
.footer-bottom{background:var(--c-footer-bottom);padding:15px 0;font-size:12px;line-height:1;color:#fff}
.footer-bottom__inner{width:var(--container);max-width:90%;margin:0 auto;text-align:center}
.footer-bottom a{color:#fff}
.footer-bottom a:hover{color:#531088}
@media only screen and (max-width:1024px){
  .footer-grid{flex-wrap:wrap}
  .footer-col--contact,.footer-col--maps{width:50%}
  .footer-col--info{width:100%}
}
@media only screen and (max-width:767px){
  .footer-col--contact,.footer-col--maps,.footer-col--info{width:100%}
  .footer-person{display:block;text-align:center}
  .footer-person__img{display:inline-block;width:30%;margin:0;line-height:0}
  .footer-person__title,.footer-person__desc{text-align:center}
  .icon-box{flex-direction:column;text-align:center;align-items:stretch}
  .icon-box__icon{text-align:center}
  .icon-box__icon .fa,.icon-box__icon .fas,.icon-box__icon .far,.icon-box__icon .fab{display:inline-block}
  .icon-box__title,.icon-box__desc{text-align:center}
}

/* 7. Cookie-Hinweis (Complianz-Nachbau, „bottom-right / optin“) ---------- */
.sc-cookie{
  position:fixed;right:10px;bottom:10px;z-index:99999;
  width:526px;max-width:100%;max-height:calc(100vh - 20px);overflow-y:auto;
  display:grid;gap:10px;grid-template-columns:100%;
  padding:15px 20px;background:#fff;color:#222;
  font-family:var(--font-body);font-size:14px;line-height:1.6;
  border:0 solid #f2f2f2;border-radius:12px;
  box-shadow:0 10px 20px rgba(0,0,0,.19),0 6px 6px rgba(0,0,0,.23);
  transition:box-shadow 1s;
}
.sc-cookie:hover{box-shadow:0 19px 38px rgba(0,0,0,.3),0 15px 12px rgba(0,0,0,.22)}
.sc-cookie--hidden{display:none!important}
.sc-cookie__header{display:grid;grid-template-columns:100px 1fr 100px;align-items:center}
.sc-cookie__title{grid-column-start:2;justify-self:center;font-size:15px;font-weight:500;line-height:24px;color:#222;margin:0}
.sc-cookie__close{grid-column-start:3;justify-self:end;width:20px;height:20px;font-size:20px;line-height:20px;color:#222;cursor:pointer}
.sc-cookie__close svg{width:20px;height:20px;display:block}
.sc-cookie__divider{margin:0 -20px}
.sc-cookie__body{width:100%;max-height:55vh;overflow:hidden auto}
.sc-cookie__message{font-size:12px;line-height:18px;color:#222;margin:0 0 5px;overflow-wrap:break-word}
.sc-cookie__categories{display:none}
.sc-cookie--prefs .sc-cookie__categories{display:block;animation:sc-fade-in 1s}
.sc-cookie__category{background:rgba(239,239,239,.5)}
.sc-cookie__category:not(:last-child){margin-bottom:10px}
.sc-cookie__category-header{display:grid;grid-template-columns:1fr auto 15px;align-items:center;gap:10px;padding:10px}
.sc-cookie__category-title{font-weight:500;font-size:14px;color:#222;margin:0;justify-self:start}
.sc-cookie__always{font-size:12px;font-weight:500;color:#222}
.sc-cookie__always .sc-cookie__switch{display:none}
.sc-cookie__switch{position:relative;display:flex;align-items:center;margin:0}
.sc-cookie__switch input{position:absolute;z-index:1;top:0;left:0;width:40px;height:20px;margin:-10px 0 0;opacity:0;cursor:pointer}
.sc-cookie__switch label{position:relative;padding-left:30px;margin:0}
.sc-cookie__switch label::before,.sc-cookie__switch label::after{content:"";position:absolute;box-sizing:border-box;border-radius:10px;transition:background-color .3s,left .3s}
.sc-cookie__switch label::before{display:block;left:0;top:-7px;width:28px;height:15px;background:#f56e28}
.sc-cookie__switch label::after{display:block;left:4px;top:-5px;width:11px;height:11px;background:#fff}
.sc-cookie__switch input:checked+label::before{background:#1e73be}
.sc-cookie__switch input:checked+label::after{left:14px}
.sc-cookie__switch input:focus+label::before{box-shadow:0 0 0 2px #245fcc}
.sc-cookie__category-toggle{grid-column-start:3;display:flex;align-items:center;justify-content:center;color:inherit}
.sc-cookie__category-toggle svg{width:18px;height:18px;transition:.5s;transform:rotate(0)}
.sc-cookie__category.is-open .sc-cookie__category-toggle svg{transform:rotate(180deg)}
.sc-cookie__description{font-size:12px;color:#222;padding:10px;margin:0}
.sc-cookie__buttons{display:flex;gap:10px}
.sc-cookie__btn{
  width:100%;min-height:45px;padding:10px;border-radius:6px;cursor:pointer;
  font-size:15px;font-weight:500;line-height:20px;text-align:center;white-space:nowrap;
  background:#f9f9f9;border:1px solid #f2f2f2;color:#222;
}
.sc-cookie__btn--accept{background:#1e73be;border-color:#1e73be;color:#fff}
.sc-cookie__btn--prefs,.sc-cookie__btn--save{color:#333}
.sc-cookie__links{display:flex;justify-content:center;gap:10px}
.sc-cookie__links ul{display:flex;gap:10px;list-style:none;margin:0;padding:0;justify-content:center}
.sc-cookie__links a{font-size:12px;color:#1e73be;text-decoration:underline;line-height:1.6}
@keyframes sc-fade-in{from{opacity:0}to{opacity:1}}
@media (max-width:768px){
  .sc-cookie{left:0;right:0;bottom:0;width:100%;border-radius:12px 12px 0 0}
  .sc-cookie__buttons{flex-direction:column}
}
@media (max-width:425px){
  .sc-cookie__title{display:none}
  .sc-cookie__category-header{grid-template-columns:1fr}
  .sc-cookie__message{margin-right:5px}
}
@media (max-width:399px){
  .sc-cookie__header{grid-template-columns:auto 1fr auto}
}

/* 8. Eingebettete Inhalte (Google Maps erst nach Zustimmung) ------------- */
.sc-embed{
  position:relative;display:flex;justify-content:center;align-items:center;
  width:100%;height:100%;min-height:100%;
  background:#fff center/cover no-repeat;border-radius:3px;
  box-shadow:0 0 1px rgba(0,0,0,.5),0 1px 10px rgba(0,0,0,.15);
  animation:sc-fade-in .6s;
}
.sc-embed__notice{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100%;max-width:300px;padding:10px;
  background:rgba(0,0,0,.5);color:#fff;font-size:14px;line-height:23px;text-align:center;
  font-family:var(--font-body);text-transform:none;white-space:normal;cursor:pointer;z-index:98;border:1px solid transparent;
}
.sc-embed__notice:focus{border:1px dotted #cecece;outline:0}
.sc-embed--loaded{background:none;box-shadow:none;border-radius:0;animation:none}
.sc-embed--loaded iframe{display:block;width:100%;border:0}
/* Google-Maps-Spalte: Platzhalter hat das Seitenverhältnis des Vorschaubilds (1280×920) und sitzt oben in der Spalte –
   darunter bleibt die Spalte weiß (so sieht es auch das Original vor der Zustimmung). Nach Zustimmung: iframe 607/603/237px. */
.footer-col--maps{justify-content:flex-start}
.footer-col--maps .sc-embed{height:auto;min-height:0;aspect-ratio:1280/920}
.footer-col--maps .sc-embed--loaded{aspect-ratio:auto}
.footer-col--maps .sc-embed--loaded iframe{height:607px;filter:saturate(54%);transition:filter 1.1s}
.footer-col--maps .sc-embed--loaded:hover iframe{filter:saturate(100%)}
@media only screen and (max-width:1024px){
  .footer-col--maps .sc-embed--loaded iframe{height:603px}
}
@media only screen and (max-width:767px){
  .footer-col--maps .sc-embed--loaded iframe{height:237px}
}

/* 9. Gemeinsame Komponenten --------------------------------------------- */
/* Accordion (Elementor): Aufbau <div class="accordion"><div class="accordion__item">
   <button class="accordion__title">…</button><div class="accordion__content">…</div></div></div>
   Optik (Farben, Rahmen) je Seite in pages/*.css                          */
.accordion__item{position:relative}
.accordion__title{display:block;width:100%;text-align:left;cursor:pointer;outline:0}
.accordion__title:focus-visible{outline:2px solid var(--c-menu-hover);outline-offset:-2px}
.accordion__content{display:none;overflow:hidden}
.accordion__item.is-open>.accordion__content{display:block}

/* 10. Seitenkopf (Titelzeile) und einfache Textseiten ------------------- */
/* OceanWP-Standardseiten: Impressum, Privacy Policy, Cookie Policy, 404      */
.page-header{background:var(--c-mobile-menu);padding:120px 0 36px;position:relative}
.page-header__inner{position:relative}
.page-header__title{font-family:var(--font-display);font-size:32px;font-weight:400;line-height:1.4;color:#fff;margin:0}
.breadcrumbs{position:absolute;right:0;top:50%;margin-top:-16px;max-width:50%;font-size:13px;line-height:1.4;color:#fff}
.breadcrumbs ol{list-style:none;margin:0;padding:0}
.breadcrumbs li{display:inline-block}
.breadcrumbs a{color:#fff}
.breadcrumbs a:hover{color:var(--c-menu-hover)}
.breadcrumbs__sep{margin:0 6px}
.breadcrumbs__home{display:inline-block;width:13px;height:13px;vertical-align:-1px;fill:currentColor}
.content-wrap{padding:50px 0}
.entry h2,.entry h3,.entry h4,.entry h5{margin:0 0 20px}
.entry ul,.entry ol{margin:15px 0 15px 20px}
@media only screen and (max-width:959px){
  .breadcrumbs{position:relative;top:auto;right:auto;margin:0;max-width:100%;overflow:hidden;height:32px}
  .page-header__title{max-width:100%}
  .content-area{margin-bottom:40px}
  .entry>:last-child{margin-bottom:0}   /* mobil kollabiert der letzte Absatz-Abstand im Original mit den 40px */
}

/* 11. Hintergrundbilder von Sections als <img>/<picture> (srcset + lazy) --- */
.has-bg{position:relative;overflow:hidden}
.has-bg>.section__inner,.has-bg>.container{position:relative;z-index:1}
.bg-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;pointer-events:none}
picture.bg-media{display:block}
picture.bg-media>img{width:100%;height:100%;object-fit:cover;object-position:inherit}
.bg-overlay{position:absolute;inset:0;z-index:0;pointer-events:none}