/* ============================================================================
   walser_theme — modern responsive layer (loaded last).
   Mobile-first. Owns layout + typography; legacy CSS kept for content details.
   Brand palette preserved. Breakpoint: 900px (desktop nav + multi-column).
   ============================================================================ */

:root{
  --blue-900:#003a61;
  --blue-700:#004b7b;   /* headings */
  --blue-600:#005b8b;   /* links / accents */
  --blue-500:#0a6ea8;
  --steel:#6d90b1;      /* sidebar / nav bar */
  --steel-dark:#4f7396;
  --ink:#3d4c48;
  --muted:#6d6d6d;
  --line:#dfe6ec;
  --bg-top:#e3edf3;
  --bg:#ffffff;
  --card:#ffffff;
  --radius:10px;
  --shadow:0 2px 10px rgba(0,50,90,.08);
  --shadow-lg:0 8px 30px rgba(0,50,90,.14);
  --wrap:1180px;
  --font-head:"Titillium Web",Arial,sans-serif;
  --font-body:"Source Sans 3","Segoe UI",Arial,sans-serif;

  /* Startseite Option C — Blau aus dem Teaser-Kasten "Ein Griff. Klick. Sitzt."
     (Farbwerte direkt aus files/6917/6909/5983/walser-teaser-left.jpg gelesen) */
  --oc-blue-900:#294d6e;
  --oc-blue-700:#3f6282;
  --oc-blue-500:#6a87a5;
  --oc-blue-300:#93aac4;
  --oc-blue-200:#abbdd5;
  --oc-orange:#e8781a;
  --oc-orange-dark:#cf6512;
  /* derselbe diagonale Verlauf wie im Kasten, für Bannerbreite gestreckt */
  --oc-verlauf:linear-gradient(120deg,#294d6e 0%,#33587a 30%,#46688a 46%,#6a87a5 62%,#93aac4 80%,#abbdd5 92%,#8fa3bb 100%);
}

*,*::before,*::after{box-sizing:border-box;}
html{overflow-anchor:none;}

body{
  margin:0;
  background:var(--bg) !important;      /* drop body.png strip */
  background-image:linear-gradient(180deg,var(--bg-top) 0,#eef4f8 120px,var(--bg) 420px) !important;
  background-repeat:no-repeat !important;
  font-family:var(--font-body);
  color:var(--ink);
  font-size:16px;
  line-height:1.6;
  -webkit-text-size-adjust:100%;
}

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

h1,h2,h3,h4{font-family:var(--font-head);line-height:1.25;color:var(--blue-700);}
a{color:var(--blue-600);}

/* ------- Fluid page container (was #site{width:984px}) ------- */
#site{width:auto !important;max-width:var(--wrap);margin:0 auto;padding:0 clamp(14px,4vw,28px);}

/* ============================ HEADER ============================ */
#header{
  background:none !important;             /* drop header.png glow bitmap */
  height:auto !important;
  padding:14px 0 0 !important;
  position:relative !important;
  overflow:visible;
  z-index:1000 !important;                /* keep nav + dropdowns above sliders */
}
/* soft radial glow behind the brand, CSS instead of a bitmap */
#header::before{
  content:"";position:absolute;left:50%;top:24px;transform:translateX(-50%);
  width:min(560px,90%);height:190px;border-radius:50%;z-index:0;
  background:radial-gradient(ellipse at center,#fff 0,rgba(255,255,255,.75) 45%,rgba(255,255,255,0) 72%);
  pointer-events:none;
}
.header-inner{position:relative;z-index:1;}

/* ---- utility row: language (left) + quick links & search (right) ---- */
.header-utility{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;
  justify-content:space-between;font-size:13px;
}
#lang_menu,#top_menu,#search{position:static !important;overflow:visible !important;}
#lang_menu ul.nav,#top_menu ul.nav{list-style:none;margin:0 !important;padding:0;display:flex;flex-wrap:wrap;}
#lang_menu ul.nav li,#top_menu ul.nav li{float:none !important;}
#lang_menu ul.nav li a{
  border-left:1px solid var(--steel);padding:0 10px;font-size:13px;letter-spacing:1px;
  color:var(--blue-600);text-transform:uppercase;text-decoration:none;
}
#lang_menu ul.nav li:first-child a{border-left:0;}
#top_menu{margin-left:auto;}
#top_menu form{float:none !important;}
#top_menu ul.nav li a{border-right:1px solid var(--steel);padding:0 10px;font-size:13px;color:var(--blue-600);text-decoration:none;}
#top_menu ul.nav li:last-child a{border-right:0;}
#search{position:relative;display:block;}
#search form{position:relative;margin:0;}
#search .ccm-search-block-text{
  position:static !important;width:200px;max-width:100%;height:34px;
  border:1px solid #c4d0da;border-radius:8px;padding:4px 34px 4px 12px;font-size:14px;
}
#search .ccm-search-block-submit{
  position:absolute !important;right:0;top:0;width:34px;height:34px;margin:0;border:0;background:transparent;
  background-image:url(../images/magnifier.png);background-repeat:no-repeat;background-position:center;
  text-indent:-9999px;cursor:pointer;padding:0;z-index:2;
}

/* ---- brand row: logo + info + hamburger ---- */
.header-brand{display:flex;align-items:center;gap:16px;padding:10px 0 14px;position:relative;}
.header-brand .logo{display:inline-block;line-height:0;flex:0 0 auto;max-width:70%;}
.header-brand .logo-img{height:auto;max-height:64px;width:auto;margin:0 !important;}
#logo-info{position:static !important;left:auto !important;top:auto !important;width:auto !important;
  margin-left:auto;text-align:right;font-size:13px;color:var(--muted);}

/* hamburger — hidden on desktop */
.nav-toggle{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  margin-left:auto;width:46px;height:40px;padding:9px 10px;border:1px solid #c4d0da;border-radius:8px;
  background:#fff;cursor:pointer;
}
.nav-toggle span{display:block;height:3px;border-radius:3px;background:var(--blue-700);transition:.25s;}
.nav-toggle.is-active span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.nav-toggle.is-active span:nth-child(2){opacity:0;}
.nav-toggle.is-active span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

/* ============================ NAVIGATION ============================ */
#main_menu{background:none !important;height:auto !important;}
#main_menu ul.nav{list-style:none;margin:0;padding:0;}
#main_menu ul.nav a{
  display:block;color:#fff;text-decoration:none;font-family:var(--font-head);
  font-weight:600;letter-spacing:.4px;width:auto !important;
}
#main_menu ul ul{list-style:none;margin:0;padding:0;}
#main_menu a:hover{text-decoration:none;}

/* mobile nav (default) */
#main_menu{display:none;margin:0 -4px;}
#main_menu.is-open{display:block;}
#main_menu ul.nav{background:var(--steel);border-radius:10px;overflow:hidden;}
#main_menu ul.nav > li{border-top:1px solid rgba(255,255,255,.18);}
#main_menu ul.nav > li:first-child{border-top:0;}
#main_menu ul.nav a{padding:13px 16px;text-transform:uppercase;font-size:14px;}
#main_menu ul.nav li.nav-selected > a,
#main_menu ul.nav li.nav-path-selected > a{background:rgba(0,0,0,.12);}
#main_menu ul ul{background:rgba(0,0,0,.14);display:none;}
#main_menu ul li.open > ul{display:block;}
#main_menu ul ul a{padding-left:30px;text-transform:none;font-weight:400;font-size:14px;}

/* ============================ BREADCRUMB ============================ */
#header .breadcrumb,.breadcrumb{
  position:static !important;top:auto !important;left:auto !important;
  font-size:12px;color:var(--muted);padding:10px 0;clear:both;
}
.breadcrumb a{color:var(--muted);}
.breadcrumb a:hover{color:var(--blue-600);}

/* ============================ CONTENT LAYOUT ============================ */
body #content{margin-top:6px;overflow:visible;position:relative;z-index:0;}
/* default: single column on mobile */
body #content .main{margin-left:0 !important;width:auto !important;float:none !important;color:var(--ink);font-size:16px;line-height:1.6;min-height:0;}
body #content .sidebar{float:none !important;width:auto !important;overflow:visible !important;margin-bottom:22px;}

body #content .main h1{color:var(--blue-700);font-size:26px;line-height:1.2;margin:14px 0 8px;}
body #content .main h2,body #content .main h3{color:var(--blue-700);}
body #content .main h2{font-size:21px;margin:24px 0 10px;}
body #content .main h3{font-size:18px;margin:18px 0 8px;}

/* sidebar navigation pills */
body #content .sidebar ul{list-style:none;margin:0;padding:6px;font-size:15px;background:#f5f9fc;border:1px solid var(--line);border-radius:10px;}
body #content .sidebar ul li a{
  display:block;width:auto !important;padding:8px 12px;margin:1px 0;border-bottom:0;border-radius:7px;
  background:transparent;color:var(--blue-700);font-weight:500;text-decoration:none;
  border-left:3px solid transparent;transition:background .15s,border-color .15s,color .15s;
}
body #content .sidebar ul li a:hover{background:#e7eff6;color:var(--blue-600);text-decoration:none;}
body #content .sidebar ul li a.nav-selected,
body #content .sidebar ul li a.nav-path-selected{background:#e4eef6;color:var(--blue-700);font-weight:600;border-left-color:var(--steel);}

/* ==================== redaktionelle Tabellen (Alt-Inhalte) ====================
   Die Inhaltstabellen tragen feste Pixelmasse aus der TinyMCE-Zeit
   (z.B. style="width: 776px; height: 1258px") und dienen meist als Layout fuer
   Bild + Text. max-width deckelt sie, wenn die Spalte schmaler ist. */
body #content .main table{max-width:100% !important;}

/* Bilder mit width-Attribut behalten in der Tabelle ihre Groesse: die globale
   Regel img{max-width:100%} laesst sie in der Auto-Table-Berechnung auf wenige
   Pixel zusammenfallen (aus 300px wurden 84px). Bilder ohne width-Attribut
   bleiben gedeckelt, ihre Naturgroesse ist unbekannt. */
body #content .main table img[width]{max-width:none;}

@media (max-width:899px){
  /* eingebrannte Zeilenhoehen loesen, sonst bleiben leere Hoehenbloecke stehen */
  body #content .main table{height:auto !important;}
  body #content .main table td,
  body #content .main table th{height:auto !important;width:auto;}

  /* Layouttabellen (erkennbar am Bild in einer Zelle) stapeln: nebeneinander
     reicht die Breite nicht, die Bildspalte wuerde zusammenschrumpfen. */
  body #content .main table:has(img),
  body #content .main table:has(img) > tbody,
  body #content .main table:has(img) > tbody > tr,
  body #content .main table:has(img) > tbody > tr > td{
    display:block;width:auto !important;max-width:100% !important;
  }
  body #content .main table:has(img) > tbody > tr > td{padding-left:0;padding-right:0;}
  body #content .main table:has(img) img[width]{max-width:100%;}
}

/* Echte Datentabellen (Preis- und Groessenlisten, ohne Bild) lassen sich nicht
   unter ihre Mindestbreite druecken, ohne die Spalten zu zerreissen. Sie
   bekommen einen eigenen horizontalen Scrollbereich, statt die Seite breiter
   zu machen. Gilt auch fuer 900-1023px, wo die Inhaltsspalte neben der
   Sidebar am schmalsten ist. */
@media (max-width:1023px){
  body #content .main table:not(:has(img)){
    display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;
  }
}

/* ============================ FOOTER ============================ */
#footer{
  margin-top:40px;padding:20px 0 28px;
  color:var(--muted);font-size:14px;line-height:1.6;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 28px;align-items:center;min-width:0;
}
#footer a{text-decoration:none;color:var(--blue-600);}
#footer a:hover{text-decoration:underline;}
#footer h2{font-size:13px;color:#7d7d7d;margin:0 0 6px;}
#footer ul{margin:0;padding:0;list-style:none;}
#footer .item:empty,#footer .right_item:empty{display:none;}
/* top row: quick links (left) + shop CTA & social & badge (right) */
#footer .logos{
  grid-column:1/-1;min-width:0;display:flex;flex-direction:column;align-items:center;
  gap:12px;padding-bottom:16px;margin-bottom:2px;border-bottom:1px solid #d7e1ea;text-align:center;
}
#footer .logos > p:first-child{order:2;margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;font-size:12.5px;color:var(--muted);}
#footer .logos > p:not(:first-child){display:none;}         /* hide stray empty paragraph */
/* shop CTA + social icons + badge -> compact centered bar.
   Render the legacy <table> as flex so cells pack tightly to their content
   (kills the auto-table stretch + text-align:justify inflation). */
#footer .logos table,#footer .logos tbody,#footer .logos tr,#footer .logos td{min-width:0;max-width:100%;}
#footer .logos table{order:1;display:block !important;width:100% !important;max-width:600px;
  height:auto !important;margin:0 auto !important;}
#footer .logos tbody{display:block !important;}
#footer .logos tr{display:flex !important;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 20px;}
#footer .logos td{display:flex !important;align-items:center;justify-content:center;
  width:auto !important;height:auto !important;padding:0 !important;}
#footer .logos td:first-child{display:none !important;}       /* empty leading spacer cell */
#footer .logos td[style*="justify"]{text-align:center !important;}
#footer .logos img{vertical-align:middle;display:inline-block;}
#footer .logos span[style*="large"],#footer .logos span[style*="x-large"]{font-size:15px !important;}
/* bottom row: copyright (left) + contact (right) */
#footer .item{margin:0;}
#footer .item p{float:none !important;width:auto !important;margin:0 !important;font-size:13px;}
#footer .right_item{grid-column:2;justify-self:end;text-align:right;}
#footer .right_item table{width:auto !important;margin-left:auto;}
#footer .right_item td{padding:0 0 0 18px !important;}
#footer .right_item p{margin:0 !important;}
#footer .right_item td{white-space:nowrap;}

/* ============================ page_list items ============================ */
body .page_list_item{overflow:hidden;margin-top:16px;display:flex;gap:14px;align-items:flex-start;}
body .page_list_item .left{float:none !important;width:120px !important;flex:0 0 120px;overflow:hidden;}
body .page_list_item .left img{width:100% !important;margin:0 !important;}
body .page_list_item .right{float:none !important;width:auto !important;overflow:visible;}
body #content .main .page_list_item .right>h2:first-child{margin-top:0;}

/* ============================ next / previous ============================ */
.ccm-next-previous-wrapper{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;}
.ccm-next-previous-wrapper .ccm-next-previous-previouslink,
.ccm-next-previous-wrapper .ccm-next-previous-parentlink,
.ccm-next-previous-wrapper .ccm-next-previous-nextlink{float:none !important;width:auto !important;flex:1 1 auto;text-align:center;}

/* ============================ cookie disclosure bar ============================ */
.free_cookies_disclosure,#cookiesdirective,.cookiesdirective{
  position:fixed !important;left:0;right:0;bottom:0;z-index:1200;
  background:rgba(0,59,97,.96);color:#fff;padding:12px 16px;font-size:14px;box-shadow:0 -2px 12px rgba(0,0,0,.2);
}
.free_cookies_disclosure a{color:#cfe6f5;}

/* ============================ DESKTOP ( >= 900px ) ============================ */
@media (min-width:900px){
  body{font-size:16px;}
  .nav-toggle{display:none;}

  /* --- sticky header: shrinks to a slim logo + nav bar once scrolled --- */
  #header{position:sticky !important;top:0;z-index:1000;}
  /* transitions for the slim-header change */
  .breadcrumb{overflow:hidden;max-height:70px;transition:max-height .22s ease,opacity .2s ease,padding .2s ease,margin .2s ease;}
  .header-brand .logo-img{transition:max-height .2s ease;}
  #header{transition:background .2s ease, box-shadow .2s ease, padding .2s ease;}

  body.is-scrolled #header{background:#fff !important;box-shadow:0 3px 16px rgba(0,50,90,.12);padding-top:6px !important;}
  body.is-scrolled #header::before{opacity:0;}
  body.is-scrolled .breadcrumb{display:none !important;}
  body.is-scrolled #logo-info{display:none !important;}
  body.is-scrolled #lang_menu{display:none !important;}   /* hide language switch in the slim bar */
  body.is-scrolled #search{display:none !important;}
  /* row 1: logo (left) + top-links (right, centred with the logo); row 2: full-width nav bar */
  body.is-scrolled .header-inner{display:flex;flex-wrap:wrap;align-items:center;column-gap:20px;}
  body.is-scrolled .header-brand{order:1;padding:0 !important;margin:0 !important;flex:0 0 auto;}
  body.is-scrolled .header-brand .logo-img{max-height:30px;}
  body.is-scrolled .header-utility{order:2;margin:0 0 0 auto !important;flex:0 1 auto;width:auto;justify-content:flex-end;align-items:center;gap:14px;}
  body.is-scrolled .header-utility #top_menu{margin-left:0;}
  body.is-scrolled #main_menu{order:3;flex:1 1 100%;margin:4px 0 0 !important;}
  body.is-scrolled #main_menu ul.nav > li > a{padding:8px 13px;}

  /* nav: horizontal bar with hover dropdowns */
  #main_menu{display:block !important;margin:6px 0 0;}
  #main_menu ul.nav{
    display:flex;flex-wrap:wrap;background:linear-gradient(180deg,#7f9dbd,#5c80a7);
    border-radius:8px;overflow:visible;box-shadow:var(--shadow);
  }
  #main_menu ul.nav > li{position:relative;border-top:0;}
  #main_menu ul.nav > li > a{
    padding:11px 15px;text-transform:uppercase;font-size:13.5px;white-space:nowrap;
    border-left:1px solid rgba(255,255,255,.22);
  }
  #main_menu ul.nav > li:first-child > a{border-left:0;border-top-left-radius:8px;border-bottom-left-radius:8px;}
  #main_menu ul.nav > li:hover > a,
  #main_menu ul.nav > li:focus-within > a,
  #main_menu ul.nav > li.nav-selected > a,
  #main_menu ul.nav > li.nav-path-selected > a{background:rgba(0,0,0,.16);}

  /* submenus */
  #main_menu ul.nav ul{
    position:absolute;top:100%;left:0;min-width:230px;background:#fff;border-radius:0 0 8px 8px;
    box-shadow:var(--shadow-lg);padding:6px 0;display:none;z-index:50;
  }
  #main_menu ul.nav > li:hover > ul,
  #main_menu ul.nav > li:focus-within > ul{display:block;}
  #main_menu ul.nav ul a{color:var(--blue-700);text-transform:none;font-weight:400;padding:9px 16px;font-size:14px;}
  #main_menu ul.nav ul a:hover{background:#eef4f8;}
  #main_menu ul.nav ul li.nav-selected > a,
  #main_menu ul.nav ul li.nav-path-selected > a{color:var(--blue-600);font-weight:600;}

  /* content: sidebar + main two-column grid */
  body #content{display:grid;grid-template-columns:210px minmax(0,1fr);gap:34px;align-items:start;}
  body #content .main{margin-left:0 !important;}
  body #content .sidebar{margin-bottom:0;position:sticky;top:222px;align-self:start;max-height:calc(100vh - 240px);overflow:auto;}
  body.is-scrolled #content .sidebar{top:90px;max-height:calc(100vh - 106px);}
  /* full-width templates span both columns */
  /* .no-sidebar setzen die Vorlagen, wenn die linke Spalte leer bliebe */
  body.vollebreite #content,body.startpage #content,body #content.no-sidebar{display:block;}
  body #content .main-full{width:auto;}

  /* footer columns */

  body #content .main h1{font-size:30px;}
}

/* larger phones / small tablets: 2-up footer */


/* ---- mobile: stack legacy footer layout-tables so they never overflow ---- */
@media (max-width:899px){
  /* dealer-list dropdowns: full width, tappable (16px avoids iOS zoom) */
  body.haendlerliste .distributor_listing_select{float:none !important;width:100% !important;max-width:360px;margin:0 0 4px;}
  body.haendlerliste .distributor_listing_select select,.haendler-liste{width:100%;max-width:360px;padding:8px 10px;font-size:16px;}
  #footer .right_item table{width:auto !important;max-width:100% !important;height:auto !important;}
  #footer td,#footer th{padding:0 6px 2px 0 !important;}
  #footer img{max-width:100%;height:auto;}
  /* utility row: lang (row1), quicklinks (row2), search full width (row3) */
  .header-utility{flex-direction:column;align-items:flex-start;gap:8px;}
  #top_menu{margin-left:0;}
  #search{width:100%;}
  #search .ccm-search-block-text{width:100%;}
}

@media (max-width:600px){
  #footer{grid-template-columns:minmax(0,1fr);text-align:left;}
  #footer .logos{justify-content:flex-start;}
  #footer .right_item{grid-column:1;justify-self:start;text-align:left;}
  #footer .right_item table{margin-left:0;}
  #footer .right_item td{padding:0 12px 0 0 !important;}
}

@media print{
  /* hide all chrome: utility bar, nav, search, breadcrumb, sidebar, cookie bar, footer, prev/next */
  .header-utility,#lang_menu,#top_menu,#search,#main_menu,.nav-toggle,
  .breadcrumb,#content .sidebar,#ccm-cookiesDisclosure,#footer,
  .ccm-next-previous-wrapper,#logo-info{display:none !important;}
  html,body{background:#fff !important;color:#000 !important;font-size:12pt;}
  #header::before{display:none !important;}
  #site{max-width:none !important;width:auto !important;padding:0 !important;}
  #header{padding:0 !important;z-index:auto !important;}
  .header-brand{padding:0 0 10px !important;}
  .logo-img{max-height:52px !important;}
  /* content: single full-width column */
  body #content,body.startpage #content{display:block !important;grid-template-columns:none !important;}
  body #content .main,body.startpage #content .main{margin:0 !important;width:auto !important;}
  /* Startseite Option C: Bänder ohne Farbfläche/Schatten drucken, Video-Overlay weg */
  .oc-band-hero,.oc-band-cta{background:none !important;box-shadow:none !important;color:#000 !important;padding:0 !important;}
  .oc-band-stats{background:none !important;border:0 !important;padding:0 !important;}
  .oc-hero-headline,.oc-hero-intro,.oc-cta-headline,.oc-cta-sub{color:#000 !important;}
  .oc-hero-frame,.oc-video-frame,.oc-hero-caption{box-shadow:none !important;}
  .oc-video-play,.oc-video-scrim,.oc-play-dot,.oc-hero-badge{display:none !important;}
  .oc-proof{display:block !important;}
  .oc-award{break-inside:avoid;page-break-inside:avoid;}
  a[href]{color:#000 !important;text-decoration:none;}
  h1,h2,h3{color:#000 !important;}
  img{max-width:100% !important;page-break-inside:avoid;}
  p,li{orphans:3;widows:3;}
}


/* ============================================================================
   STARTPAGE — Option C
   Bänder in Container-Breite (wie die Navileiste), Blau und Verlauf aus dem
   Teaser-Kasten "Ein Griff. Klick. Sitzt." der bisherigen Startseite.
   ============================================================================ */
body.startpage #content{display:block !important;grid-template-columns:none !important;}
/* der weiche Schein hinter dem Logo endet über dem Hero-Band, sonst legt er
   sich als heller Schleier über dessen Oberkante */
body.startpage #header::before{height:150px;}

.oc-page{--oc-gap:26px;}
.oc-page > section{margin:0 0 var(--oc-gap);}
.oc-page > section:last-child{margin-bottom:6px;}

/* --- Bänder: farbige Blöcke mit dem Verlauf aus dem Teaser-Kasten --- */
.oc-band{border-radius:var(--radius);overflow:hidden;}
.oc-band-hero,.oc-band-cta{
  background:var(--oc-verlauf);
  box-shadow:var(--shadow-lg);
  color:#fff;
  padding:clamp(24px,4vw,46px);
}
.oc-band-stats{
  background:#f4f8fb;border:1px solid var(--line);
  padding:clamp(16px,2.4vw,24px) clamp(18px,3vw,30px);
}
.oc-section{padding:0;}

/* --------------------------------- Buttons ---------------------------------
   #site-Präfix, weil main.css die Linkfarbe über "#site a" setzt und eine
   ID-Regel sonst jede Klassenregel hier überstimmt. */
#site .oc-btn{
  display:inline-block;border-radius:8px;font-family:var(--font-head);font-weight:700;
  text-decoration:none;line-height:1.2;
}
#site .oc-btn-primary{
  background:var(--oc-orange);color:#fff;padding:14px 26px;font-size:17px;
  box-shadow:0 6px 18px rgba(0,0,0,.22);
}
#site .oc-btn-primary:hover{background:var(--oc-orange-dark);color:#fff;text-decoration:none;}
#site .oc-btn-play{
  display:inline-flex;align-items:center;gap:10px;color:#fff;font-weight:700;font-size:16px;
  text-decoration:none;
}
#site .oc-btn-play:hover{color:#fff;text-decoration:underline;}
.oc-play-dot{
  width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.18);
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 42px;
}
.oc-play-dot svg{width:16px;height:16px;fill:#fff;}

/* ---------------------------------- Hero ---------------------------------- */
.oc-hero{display:flex;flex-direction:column;gap:30px;}
.oc-hero-badge{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  background:rgba(255,255,255,.16);color:#e3eef6;font-weight:600;font-size:13px;
  padding:6px 13px;border-radius:20px;margin:0;
}
.oc-hero-badge svg{width:15px;height:15px;fill:#f0b429;flex:0 0 15px;}
.oc-hero-headline{
  font-family:var(--font-head);font-weight:700;color:#fff !important;
  font-size:clamp(27px,3.4vw,42px);line-height:1.12;margin:14px 0 16px;text-wrap:balance;
}
.oc-hero-intro{
  font-size:clamp(16px,1.35vw,18px);line-height:1.55;color:#dde9f2;margin:0 0 28px;max-width:52ch;
}
.oc-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;margin:0;}
.oc-hero-col{min-width:0;}
.oc-hero-media{position:relative;}

/* -------------------------------- Kennzahlen ------------------------------- */
.oc-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px;text-align:center;}
/* ungerade Anzahl im Zweispalter: die letzte Kennzahl stuende sonst allein
   in der linken Spalte statt mittig unter den anderen */
.oc-stats-3 > .oc-stat:last-child,
.oc-stats-5 > .oc-stat:last-child{grid-column:1/-1;}
.oc-stat{display:flex;flex-direction:column;gap:2px;}
.oc-stat-value{
  font-family:var(--font-head);font-weight:700;color:var(--oc-blue-900);
  font-size:clamp(24px,2.6vw,32px);line-height:1.1;
}
.oc-stat-label{font-size:14px;color:#5a6b78;}

/* --------------------------- Zitat + Bild (Proof) -------------------------- */
.oc-proof{display:grid;grid-template-columns:minmax(0,1fr);gap:30px;align-items:center;}
.oc-quote-stars{display:flex;gap:3px;margin:0 0 14px;}
.oc-quote-stars svg{width:21px;height:21px;fill:#f0b429;}
.oc-quote-text{
  font-size:clamp(19px,1.9vw,24px);line-height:1.45;font-weight:600;
  color:var(--oc-blue-900);margin:0 0 18px;border:0;padding:0;quotes:none;
}
.oc-quote-author{font-size:15px;color:#5a6b78;margin:0;}
.oc-quote-author strong{color:var(--ink);}
.oc-quote-note{font-size:13px;color:#9aa7b0;margin:4px 0 0;}
.oc-quote-link{margin:14px 0 0;font-weight:600;}
#site .oc-quote-link a{color:var(--oc-blue-700);text-decoration:none;}
#site .oc-quote-link a:hover{text-decoration:underline;}

/* --- Videoclips: ein oder zwei Clips untereinander, jeder verlinkt YouTube --- */
.oc-video{display:flex;flex-direction:column;gap:14px;}
#site .oc-video-frame,#site .oc-video-frame:hover{text-decoration:none;}
.oc-video-frame{
  position:relative;display:block;border-radius:14px;overflow:hidden;line-height:0;
  box-shadow:0 14px 34px rgba(41,77,110,.22);
}
.oc-band-hero .oc-video-frame{box-shadow:0 18px 44px rgba(20,42,64,.40);}
.oc-video-frame img{width:100%;height:auto;display:block;}
.oc-video-scrim{
  position:absolute;inset:0;display:block;
  background:linear-gradient(180deg,rgba(41,77,110,.10) 0,rgba(41,77,110,0) 45%,rgba(41,77,110,.28) 100%);
}
.oc-video-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:76px;height:53px;border-radius:13px;background:#f00;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 24px rgba(0,0,0,.38);transition:background .18s ease,transform .18s ease;
}
.oc-video-play svg{width:26px;height:26px;fill:#fff;}
.oc-video-frame:hover .oc-video-play{background:#c00;transform:translate(-50%,-50%) scale(1.06);}
/* zwei Clips untereinander sind kleiner – Play-Knopf mitverkleinern */
.oc-video-2 .oc-video-play{width:62px;height:43px;border-radius:11px;}
.oc-video-2 .oc-video-play svg{width:22px;height:22px;}
/* Beschriftung als weißes Kästchen im Bild, damit der Clip nicht zusätzlich
   eine Textzeile braucht – zwei Clips würden das Hero-Band sonst sprengen.
   Oben links, weil unten links im Vorschaubild das Walser-Logo steht. */
.oc-video-label{
  position:absolute;left:12px;top:12px;z-index:1;
  display:inline-flex;align-items:center;gap:7px;
  background:#fff;color:var(--ink);border-radius:8px;padding:6px 11px;
  font-size:13px;font-weight:700;line-height:1.2;
  box-shadow:0 6px 16px rgba(0,0,0,.22);transition:transform .18s ease;
}
.oc-video-frame:hover .oc-video-label{transform:translateY(2px);}
.oc-yt-mark{width:20px;height:15px;flex:0 0 20px;}
.oc-yt-mark .oc-yt-body{fill:#f00;}
.oc-yt-mark .oc-yt-arrow{fill:#fff;}
.oc-video-caption{font-size:13px;color:#6b7a86;margin:2px 0 0;line-height:1.45;}
.oc-band-hero .oc-video-caption{color:#cfdeeb;}

/* ------------------------- Bild mit Bildunterschrift ----------------------- */
.oc-shot{position:relative;}
.oc-shot-frame{
  border-radius:14px;overflow:hidden;box-shadow:0 14px 34px rgba(41,77,110,.22);line-height:0;
}
.oc-shot-frame img{width:100%;height:auto;display:block;}
.oc-shot-caption{
  margin:12px 0 0;background:#fff;color:var(--ink);border:1px solid var(--line);
  border-radius:9px;padding:9px 14px;font-size:13px;font-weight:600;
  box-shadow:0 8px 20px rgba(41,77,110,.12);display:inline-block;
}

/* ------------------------------ Auszeichnungen ----------------------------- */
.oc-awards-heading{
  text-align:center;font-size:13px;font-weight:700;letter-spacing:.08em;
  color:#9aa7b0;text-transform:uppercase;margin:0 0 18px;
}
.oc-awards-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
.oc-award{
  display:flex;flex-direction:column;gap:3px;text-align:center;text-decoration:none;
  border:1px solid var(--line);border-radius:12px;padding:18px 14px;background:#fff;
  transition:border-color .18s ease,box-shadow .18s ease;
}
#site a.oc-award{text-decoration:none;}
#site a.oc-award:hover{border-color:var(--oc-blue-300);box-shadow:var(--shadow);text-decoration:none;}
.oc-award-title{font-family:var(--font-head);font-weight:700;color:var(--oc-blue-900);font-size:16px;}
.oc-award-sub{font-size:13px;color:#6b7a86;}

/* ------------------------------- Aktionsband ------------------------------- */
.oc-cta{display:flex;flex-direction:column;gap:20px;}
.oc-cta-headline{font-family:var(--font-head);font-size:clamp(20px,2.1vw,24px);font-weight:700;margin:0 0 5px;color:#fff;}
.oc-cta-sub{font-size:16px;color:#e6eff6;margin:0;}
.oc-cta-action{margin:0;}

/* ============================ DESKTOP ( >= 760px ) ============================ */
@media (min-width:760px){
  .oc-stats{grid-template-columns:repeat(4,minmax(0,1fr));}
  .oc-stats-5{grid-template-columns:repeat(5,minmax(0,1fr));}
  .oc-stats-3 > .oc-stat:last-child,
  .oc-stats-5 > .oc-stat:last-child{grid-column:auto;}
  .oc-stats-3{grid-template-columns:repeat(3,minmax(0,1fr));}
  .oc-stats-2{grid-template-columns:repeat(2,minmax(0,1fr));}
  .oc-stats-1{grid-template-columns:minmax(0,1fr);}
  .oc-awards-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
  .oc-awards-3{grid-template-columns:repeat(3,minmax(0,1fr));}
  .oc-awards-2{grid-template-columns:repeat(2,minmax(0,1fr));}
  .oc-awards-1{grid-template-columns:minmax(0,1fr);}
  .oc-proof{grid-template-columns:1.3fr 1fr;gap:40px;}
  .oc-cta{flex-direction:row;align-items:center;justify-content:space-between;gap:30px;}
  .oc-cta-action .oc-btn{white-space:nowrap;}
}

@media (min-width:900px){
  .oc-hero{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center;}
}

/* ============================ cookie bar (correct selector) ============================ */
#ccm-cookiesDisclosure{
  position:fixed !important;left:0;right:0;bottom:0;top:auto !important;z-index:1200;
  background:rgba(0,59,97,.96) !important;color:#fff !important;box-shadow:0 -2px 12px rgba(0,0,0,.25);
}
#ccm-cookiesDisclosure .disclosure-container{max-width:var(--wrap);margin:0 auto;padding:12px 20px;}
#ccm-cookiesDisclosure,#ccm-cookiesDisclosure *{color:#fff;}
#ccm-cookiesDisclosure a{color:#bfe0f4;}


/* ==================== concrete5-Bearbeiten-Balken ====================
   Der Balken (#ccm-toolbar) und sein Klappmenue (#ccm-edit-overlay) liegen im
   Kern auf z-index 999, die Kopfzeile hier auf 1000. Beim Bearbeiten legten
   sich Logo, Navileiste und Sprachwahl darum ueber das Menue. Solange der
   Balken im Dokument steht -- er wird nur fuer angemeldete Redakteure
   ausgegeben -- bleibt die Kopfzeile darunter und faengt erst unter seinen
   49px an, damit sie beim Scrollen nicht dahinter verschwindet. */
body:has(#ccm-page-controls-wrapper) #header{z-index:998 !important;}
@media (min-width:900px){
  body:has(#ccm-page-controls-wrapper) #header{top:49px;}
}