/* COSMEDI: korrigierte Layout-Testversion; nur fuer drei Beispielseiten */
*,*::before,*::after{box-sizing:border-box}
body{color:#292929;background:#f7f5f4}
section.content{background:#f7f5f4;padding:24px 12px 36px}
section.content > .container{width:min(1180px,100%);margin:0 auto;display:grid;grid-template-columns:minmax(245px,280px) minmax(0,1fr);gap:18px 26px;align-items:start}
section.content nav.secondary{grid-column:1;grid-row:1 / span 60;float:none;width:100%;min-width:0;position:relative;z-index:1;border:1px solid #e6dddc;border-radius:11px;background:#fff;overflow:hidden}
section.content nav.secondary > ul.cosmedi-tree{width:100%;margin:0;padding:0;list-style:none}
section.content nav.secondary > ul.cosmedi-tree > li{width:100%;height:auto;margin:0;background:#fff;border-bottom:1px solid #f0ebea}
section.content nav.secondary > ul.cosmedi-tree > li.title{height:auto;padding:16px 12px;background:#8e2430;color:#fff;font:700 15px/1.4 'Open Sans',sans-serif;letter-spacing:.05em;border-right:0}
.cosmedi-line{display:flex;align-items:stretch;min-width:0}
section.content nav.secondary .cosmedi-line > a{display:block;flex:1;min-width:0;padding:11px 10px 11px 17px;text-decoration:none;font:500 13px/1.35 'Open Sans',sans-serif;color:#333;height:auto;white-space:normal}
section.content nav.secondary .cosmedi-line > a:before{content:none}
section.content nav.secondary li.current > .cosmedi-line > a{font-weight:700;color:#8e2430;background:#fff7f7}
section.content nav.secondary .cosmedi-line > a:hover,section.content nav.secondary .cosmedi-sub a:hover{background:#fbf1f2;color:#8e2430}
.cosmedi-expand{flex:none;width:40px;cursor:pointer;background:transparent;color:#8e2430;border:0;border-left:1px solid #f0ebea;font-size:21px;line-height:1}
.cosmedi-expand:focus-visible,.cosmedi-line a:focus-visible{outline:2px solid #8e2430;outline-offset:-2px}
section.content nav.secondary ul.cosmedi-sub{width:100%;padding:4px 0 7px;margin:0;background:#f8f6f5;list-style:none}
section.content nav.secondary ul.cosmedi-sub[hidden]{display:none!important}
section.content nav.secondary ul.cosmedi-sub li{width:100%;margin:0;background:transparent}
section.content nav.secondary ul.cosmedi-sub a{display:block;padding:9px 12px 9px 29px;font:400 12px/1.4 'Open Sans',sans-serif;text-decoration:none;color:#474747;white-space:normal}
section.content nav.secondary ul.cosmedi-sub a[aria-current="page"]{font-weight:700;color:#8e2430}
section.content nav.secondary iframe#facebookpagebox{max-width:100%;margin:15px auto}
section.content section.content-container{grid-column:2;float:none;width:100%;min-width:0;margin:0!important;position:relative;z-index:auto}
section.content section.content-container > section{width:100%;min-width:0;padding:clamp(16px,3vw,28px);border:1px solid #eee5e1;border-radius:10px;box-shadow:0 6px 22px rgba(40,20,20,.07);background:#fff;overflow-wrap:break-word}
section.content section.content-container table{max-width:100%;width:100%!important;table-layout:auto}
section.content section.content-container img,section.content section.content-container iframe{max-width:100%;height:auto}
section.content section.content-container td{overflow-wrap:anywhere}
section.content section.content-container p{line-height:1.65}
@media(max-width:760px){section.content{padding:12px 10px}section.content > .container{display:block}section.content nav.secondary{margin-bottom:18px}section.content section.content-container{margin:0 0 18px!important}section.content section.content-container > section{padding:15px}nav.main>a{margin:0 8px;font-size:12px}}


/* Version 3: two-column layout with one continuous content column. */
section.content > .container {
 display:flex!important; align-items:flex-start; gap:24px;
 width:min(1200px,calc(100% - 28px));max-width:1200px;margin:0 auto;
}
section.content nav.secondary {flex:0 0 272px;width:272px!important;max-width:272px;float:none!important;align-self:flex-start;overflow:visible;}
section.content .cosmedi-main {flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:20px;}
section.content .cosmedi-main > section.content-container {
 width:100%!important;float:none!important;min-width:0;margin:0!important;display:block;
}
section.content .cosmedi-main > section.content-container > section {
 width:100%!important;min-width:0;padding:clamp(18px,3vw,32px);
 box-sizing:border-box;overflow-wrap:break-word;
}
section.content > .container > .fix {display:none;}
/* Genuine CSS triangles instead of font icon codes or displaced glyphs. */
section.content nav.secondary .cosmedi-line > a {
 position:relative;display:block;padding-left:30px!important;line-height:1.45;
}
section.content nav.secondary .cosmedi-line > a::before {
 content:""!important;display:block!important;position:absolute!important;
 left:15px!important;top:50%!important;transform:translateY(-50%);
 width:0!important;height:0!important;border-top:4px solid transparent;
 border-bottom:4px solid transparent;border-left:6px solid #972c38;
 background:none!important;font-size:0!important;
}
section.content nav.secondary .cosmedi-item:has(> .cosmedi-sub:not([hidden])) > .cosmedi-line > a::before {
 transform:translateY(-50%) rotate(90deg);
}
section.content nav.secondary .cosmedi-line > a::after,
section.content nav.secondary .cosmedi-sub a::before,
section.content nav.secondary .cosmedi-sub a::after,
section.content nav.secondary .cosmedi-expand::before,
section.content nav.secondary .cosmedi-expand::after{content:none!important;}
section.content nav.secondary .cosmedi-line,section.content nav.secondary .cosmedi-line > a {min-height:42px;}
section.content nav.secondary .cosmedi-expand {font-family:Arial,sans-serif!important;font-size:19px!important;min-width:40px;align-self:stretch;}
section.content nav.secondary .cosmedi-sub li a {padding-left:30px!important;line-height:1.5;}
section.content nav.secondary .cosmedi-sub li::before,section.content nav.secondary .cosmedi-item::before {content:none!important;}
/* Calm typography in old HTML tables, headings and flowing text. */
section.content .cosmedi-main {color:#303038;font-family:'Open Sans',Arial,sans-serif;}
section.content .cosmedi-main section.content-container > section :is(p,li,td,blockquote,summary) {
 line-height:1.7;overflow-wrap:break-word;
}
section.content .cosmedi-main section.content-container > section p {margin:0 0 1em;text-align:left;font-size:15px;}
section.content .cosmedi-main section.content-container > section :is(h1,h2,h3,h4) {line-height:1.3;margin:0 0 .7em;overflow-wrap:break-word;}
section.content .cosmedi-main section.content-container > section h1 {font-size:clamp(22px,2.5vw,29px)!important;text-decoration:none!important;}
section.content .cosmedi-main section.content-container > section h2 {font-size:clamp(20px,2vw,24px)!important;}
section.content .cosmedi-main section.content-container > section h3 {font-size:18px!important;}
section.content .cosmedi-main section.content-container > section :is(h1,h2,h3,h4) font {font-size:inherit!important;font-family:inherit!important;}
section.content .cosmedi-main section.content-container > section table{max-width:100%!important;width:100%!important;border-collapse:collapse;}
section.content .cosmedi-main section.content-container > section :is(img,video,iframe){max-width:100%!important;}
section.content .cosmedi-main section.content-container > section img {height:auto!important;object-fit:contain;}
section.content .cosmedi-main section.content-container > section :is(input,textarea,select){max-width:100%;}
section.content .cosmedi-main section.content-container > section a{overflow-wrap:anywhere;}
@media(max-width:840px){
 section.content > .container {width:calc(100% - 20px);display:flex!important;flex-direction:column;gap:16px;}
 section.content nav.secondary {flex:auto;width:100%!important;max-width:none;}
 section.content .cosmedi-main {width:100%;display:flex;gap:16px;}
 section.content .cosmedi-main > section.content-container > section {padding:18px 14px;}
}


/* COSMEDI Testversion 4 – ausschließlich moderner Inhaltsbereich rechts.
   Vorhandene Menue-Struktur und Seiteninhalte bleiben unveraendert. */
section.content .cosmedi-main {
  --cosmedi-text:#34323a;
  --cosmedi-muted:#66616a;
  --cosmedi-accent:#982e3b;
  color:var(--cosmedi-text);
  font-family:'Open Sans',Arial,Helvetica,sans-serif;
  font-size:16px;
  line-height:1.75;
}
section.content .cosmedi-main > section.content-container > section {
  padding:clamp(24px,3.5vw,42px) !important;
  border-radius:14px;
  border:1px solid #ece5e2;
  background:#fff;
  box-shadow:0 5px 22px rgba(40,25,30,.055);
}
/* Typographie auch in alten Tabellen, font-Tags und Inline-Verdana-Angaben. */
section.content .cosmedi-main section.content-container > section :is(table,tbody,tr,td,th,p,li,div,span,font,blockquote,details,summary) {
  font-family:'Open Sans',Arial,Helvetica,sans-serif !important;
  line-height:1.75 !important;
}
section.content .cosmedi-main section.content-container > section :is(td,p,li,blockquote,details,summary),
section.content .cosmedi-main section.content-container > section td :is(font,span),
section.content .cosmedi-main section.content-container > section p :is(font,span) {
  font-size:16px !important;
  color:inherit;
}
section.content .cosmedi-main section.content-container > section p,
section.content .cosmedi-main section.content-container > section blockquote {
  margin:0 0 1.2em;
  text-align:left;
}
section.content .cosmedi-main section.content-container > section :is(h1,h2,h3,h4) {
  font-family:'Open Sans',Arial,Helvetica,sans-serif !important;
  font-weight:700 !important;
  text-align:left !important;
  text-transform:none !important;
  text-decoration:none !important;
  letter-spacing:-.015em !important;
  line-height:1.32 !important;
  color:#25252b;
  margin:0 0 22px !important;
}
section.content .cosmedi-main section.content-container > section h1 {font-size:clamp(26px,3.0vw,35px)!important;}
section.content .cosmedi-main section.content-container > section h2 {font-size:clamp(23px,2.45vw,29px)!important;}
section.content .cosmedi-main section.content-container > section h3 {font-size:clamp(20px,2vw,23px)!important;}
section.content .cosmedi-main section.content-container > section h4 {font-size:18px!important;}
section.content .cosmedi-main section.content-container > section :is(h1,h2,h3,h4) :is(font,span) {
  font-family:inherit!important;
  font-size:inherit!important;
  line-height:inherit!important;
  text-decoration:inherit!important;
}
section.content .cosmedi-main section.content-container > section :is(table,tbody,tr,td,th) {
  font-size:inherit;
}
section.content .cosmedi-main section.content-container > section table {
  width:100%!important;
  max-width:100%!important;
  border-collapse:collapse;
  margin:10px 0 16px;
}
section.content .cosmedi-main section.content-container > section td,
section.content .cosmedi-main section.content-container > section th {
  vertical-align:top;
  padding:6px 3px;
  overflow-wrap:break-word;
}
section.content .cosmedi-main section.content-container > section :is(ul,ol) {padding-left:1.5em;margin:14px 0 22px;}
section.content .cosmedi-main section.content-container > section li {margin-bottom:.45em;}
section.content .cosmedi-main section.content-container > section a:not(.cosmedi-expand) {
  color:#932a37;
  text-decoration-color:#d8a7af;
  text-underline-offset:3px;
}
section.content .cosmedi-main section.content-container > section a:hover {color:#661c27;}
section.content .cosmedi-main section.content-container > section img {
  max-width:100%!important;
  height:auto!important;
  border-radius:7px;
}
section.content .cosmedi-main section.content-container > section iframe,
section.content .cosmedi-main section.content-container > section video {max-width:100%!important;}
section.content .cosmedi-main section.content-container > section :is(input,select,textarea,button) {
  font-family:'Open Sans',Arial,sans-serif;
  font-size:15px;
  max-width:100%;
}
section.content .cosmedi-main section.content-container > section :is(input,select,textarea) {
  border:1px solid #d8d2d0;border-radius:6px;padding:9px;
}
/* Startseiten-Titel und Rezensionen wirken luftig, nicht ueberladen. */
section.content .cosmedi-main section.content-container > section > img:only-child {display:block;margin:0 auto;}
@media(max-width:840px){
 section.content .cosmedi-main {font-size:15px;line-height:1.65;}
 section.content .cosmedi-main > section.content-container > section {padding:20px 16px!important;border-radius:11px;}
 section.content .cosmedi-main section.content-container > section :is(td,p,li,blockquote,details,summary),
 section.content .cosmedi-main section.content-container > section td :is(font,span),
 section.content .cosmedi-main section.content-container > section p :is(font,span) {font-size:15px!important;}
}

/* V5: Smartphone-Menue, Desktop unveraendert. */
section.content .cosmedi-mobile-toggle { display:none; }
/* Die Untermenue-Icons sind reine CSS-Formen: keine Zeichen aus Symbolfonts. */
section.content nav.secondary .cosmedi-expand {
 position:relative!important; font-size:0!important; color:transparent!important;
 font-family:Arial,sans-serif!important; line-height:1!important;
}
section.content nav.secondary .cosmedi-expand::before {
 content:""!important;display:block!important;position:absolute!important;
 left:15px!important;top:50%!important;width:9px!important;height:9px!important;
 border-right:2px solid #8e2430!important;border-bottom:2px solid #8e2430!important;
 transform:translateY(-65%) rotate(45deg)!important;background:none!important;
}
section.content nav.secondary .cosmedi-expand[aria-expanded="true"]::before {
 transform:translateY(-30%) rotate(225deg)!important;
}
section.content nav.secondary .cosmedi-expand::after {content:none!important;}
@media (max-width:840px) {
 section.content .cosmedi-mobile-toggle {
  display:flex!important;width:100%;min-height:49px;align-items:center;justify-content:space-between;
  margin:0 0 0 0;padding:12px 17px;border:1px solid #e6dddc;border-radius:10px;
  background:#8e2430;color:#fff;font:700 16px/1.3 'Open Sans',Arial,sans-serif;
  text-align:left;cursor:pointer;
 }
 section.content .cosmedi-mobile-toggle::after {
  content:"";display:block;width:15px;height:11px;flex:none;
  border-top:2px solid #fff;border-bottom:2px solid #fff;
  background:linear-gradient(#fff,#fff) center/100% 2px no-repeat;
 }
 section.content .cosmedi-mobile-toggle[aria-expanded="true"] {border-radius:10px 10px 0 0;}
 section.content nav.secondary {display:none!important;margin-top:0!important;margin-bottom:0!important;}
 section.content nav.secondary.cosmedi-mobile-open {display:block!important;border-radius:0 0 10px 10px;}
 section.content nav.secondary .cosmedi-line > a {font-size:14px!important;padding-top:12px;padding-bottom:12px;}
 section.content nav.secondary ul.cosmedi-sub a {font-size:13px!important;padding-top:10px;padding-bottom:10px;}
 section.content nav.secondary .cosmedi-expand {min-width:46px;}
}