/* ==========================================================================
   ILM COSMETIX – ilm_style.css (responsive Fassung)
   Desktop (>= 980px) sieht aus wie bisher. Darunter:
   - Tablet  (<= 979px): fließende Breiten, Navigation darf umbrechen
   - Mobil   (<= 767px): Burger-Menü, alles einspaltig
   ========================================================================== */

/* syncopate-regular - latin */
@font-face {
  font-family: 'Syncopate';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/syncopate-v9-latin-regular.woff2') format('woff2'),
       url('../fonts/syncopate-v9-latin-regular.woff') format('woff'),
       url('../fonts/syncopate-v9-latin-regular.ttf') format('truetype');
}
/* syncopate-700 - latin */
@font-face {
  font-family: 'Syncopate';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/syncopate-v9-latin-700.woff2') format('woff2'),
       url('../fonts/syncopate-v9-latin-700.woff') format('woff'),
       url('../fonts/syncopate-v9-latin-700.ttf') format('truetype');
}


html, body, div, span, object, iframe, h1, h2, h3, h4, h5, p, blockquote, pre, a, abbr, em, img, q, strong, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, figure, table, caption, tbody, tr, td, th, article, aside, embed, footer, header, nav, audio, video {margin:0; padding:0; border:0; vertical-align: baseline; font:inherit;}

article, aside, footer, figure, header, nav, section {display: block;}

body {margin:0; background-color:#abb1b5; position: relative; width: 100%; min-height:100%;}
html {font-family: 'Syncopate', Helvetica, Arial, sans-serif; font-weight:400; height:100%; -webkit-text-size-adjust:100%; text-size-adjust:100%; -webkit-font-smoothing:antialiased;}

/* Bilder aus dem Redaktionssystem nie breiter als ihr Container */
img, video, iframe {max-width:100%;}
img {height:auto;}

/* Sichtbarer Tastaturfokus */
a:focus-visible, button:focus-visible {outline:2px solid #ec710b; outline-offset:2px;}

/* --- Boxen ------------------------------------------------------------- */
.StartBox, .StartBoxo {
  padding:15px 10px 15px 15px; margin:20px 0 10px 0; border:1px solid #e4e8eb; position:relative;
  background: linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}
.StartBox img, .StartBoxo img {position:absolute; bottom:-15px; right:0; margin-top:20px;}

#content .StartBox h2, #content1 .StartBox h2 {color:#333; font-size:16px; margin:0; padding:0;}
#content .StartBox p, #content1 .StartBox p {line-height:1.5em; color:#666; font-family:Helvetica, Arial, sans-serif;}
#content .StartBox ul li, #content1 .StartBox ul li {color:#666;}
#content1 .StartBox td {width:300px;}

#content .StartBoxo h2, #content1 .StartBoxo h2 {color:#ec710b; font-size:16px; margin:0; padding:0;}
#content .StartBoxo p, #content1 .StartBoxo p {line-height:1.5em; color:#666; font-family:Helvetica, Arial, sans-serif;}
#content .StartBoxo ul li, #content1 .StartBoxo ul li {color:#666;}

#content h3, #content1 h3 {padding-left:40px;}

.ContentBox {
  float:left; width:898px; position:relative; font-size:14px; padding:20px; border:1px solid #e4e8eb;
  background: linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}
#content .ContentBox h1, #content1 .ContentBox h1 {color:#ec710b; font-size:20px; margin:0; padding:0;}
#content .ContentBox h2, #content1 .ContentBox h2 {color:#333; font-size:16px; margin:0; padding:0;}
#content .ContentBox p, #content1 .ContentBox p {line-height:1.4em; color:#666; font-family:helvetica, arial, sans-serif;}
#content .ContentBox ul li, #content1 .ContentBox ul li {color:#666;}
#content .ContentBox a, #content1 .ContentBox a {color:#333;}

/* --- Kopf -------------------------------------------------------------- */
#top {position:relative; height:120px; margin:0 auto; background-color:#fff; padding-top:15px;}

#logo {background:url(../images/logo_ilm_cosmetix.gif) no-repeat center; background-size:448px 105px; margin:0 auto; text-align:center; max-width:940px; height:105px;}
#logo a {width:448px; max-width:100%; height:105px; display:block; margin:0 auto;}

/* --- Inhalt ------------------------------------------------------------ */
#content_back {background:url("../images/bg_x.gif") no-repeat top center; background-color:#f6f6f7; margin:0 auto; overflow:hidden;}
#content_wrapper {overflow:hidden; padding:0;}
#content_wrapper2 {max-width:940px; margin:10px auto 0; padding-bottom:40px; position:relative; overflow:hidden;}

#or_footer {position:absolute; bottom:0; right:0; width:29.8%; height:5px; background-color:#ec710b; z-index:5000;}
#or_footer p {font-size:12px; font-family:'Syncopate', Helvetica, Arial, sans-serif; font-weight:400; color:#fff; padding:0 0 0 20px; margin:0;}
#gr_footer {position:absolute; bottom:0; left:0; width:70.2%; height:2px; background-color:#666; z-index:5000;}

#content {position:relative; float:left; width:488px; padding:0; z-index:1; min-height:480px; margin:20px 0 40px 0;}
#content ul, #content1 ul {font-family:Helvetica, Arial, sans-serif; line-height:1.4em; text-decoration:none; color:#666; padding:5px 20px 5px 25px; list-style-type:square; font-size:14px;}
#content ul li, #content1 ul li {padding:0 0 4px 0;}

#content b, #content1 b {font-weight:400; color:#666;}
#content p, #content1 p {color:#666; font-size:16px;}
#content a, #content1 a {font-weight:500; color:#ec710b;}

#content1 {position:relative; float:left; width:100%; padding:0; z-index:1; min-height:480px; margin:20px 0 40px 0;}
#content1 p {color:#666;}

#content_full {float:left; width:100%; padding:0; z-index:1; margin:0 0 20px 0; position:relative; font-size:14px;}
#content_full p {color:#666; font-size:14px;}
#content_full .StartBox p {line-height:1.3em; color:#666; font-family:'Helvetica', 'Arial', sans-serif;}
#content_full b {line-height:1.2em; color:#ec710b;}

#CImage {position:relative; float:right; width:431px; margin:20px 0 40px;}

#clear {clear:both;}

h1, h2 {font-family:'Syncopate', sans-serif; line-height:1.2em; color:#ec710b;}
h1 {font-size:24px; padding:10px 25px 8px 0; margin:0 0 17px 0;}
h2 {font-size:20px; color:#ec710b; padding:20px 25px 5px 0; margin-bottom:5px;}
h3 {font-size:15px; color:#000; margin:0 0 5px 0; font-weight:300; padding-top:15px;}

sup, sub {line-height:0;}

p {font-family:'Helvetica', 'Arial', sans-serif; line-height:1.9em; color:#333; padding:5px 0; font-size:15px; margin-top:1px;}

a:hover {color:#ec710b;}

/* --- Hauptnavigation --------------------------------------------------- */
#nav {position:relative; min-height:36px; margin:0 auto; background-color:#fff; border-bottom:1px solid #d7dce0;}
ul#navigation {margin:0 auto; padding:0; list-style-type:none; font-family:'Syncopate', sans-serif; font-weight:normal; text-align:center; max-width:940px; min-height:36px; background-color:#fff;}
ul#navigation li {display:inline; font-size:14px; margin:0; padding:0; position:relative;}
ul#navigation li a.current {border-bottom:2px solid #ec710b; color:#000; margin-bottom:-2px;}
ul#navigation li:hover {position:relative; z-index:599; color:#ec710b;}
ul#navigation a {padding:12px 6px 6px 6px; color:#3f3f3f; text-decoration:none; display:inline-block; border-bottom:2px solid transparent;}
ul#navigation a:hover {border-bottom:2px solid #ec710b; color:#ec710b;}

/* Burger-Knopf: nur mobil sichtbar */
.nav-toggle {display:none;}

/* --- Unternavigation --------------------------------------------------- */
#NaviSub {position:relative; min-height:36px; margin:0 auto; background-color:#fff; border-bottom:1px solid #d7dce0;}
#NaviSub ul {margin:0 auto; padding:0; list-style-type:none; font-family:'Syncopate', sans-serif; font-weight:400; text-align:center; max-width:940px; font-size:14px; background-color:#fff;}
#NaviSub ul li {display:inline; font-size:13px; margin:0; padding:0; position:relative;}
#NaviSub ul a.current {color:#ec710b; font-size:13px;}
#NaviSub ul li:hover {position:relative; z-index:599; color:#ec710b;}
#NaviSub ul a {padding:12px 8px 6px 8px; color:#3f3f3f; text-decoration:none; display:inline-block; font-size:13px;}
#NaviSub ul a:hover {color:#ec710b;}

/* --- Footer ------------------------------------------------------------ */
#footer {min-height:280px; clear:both; margin:0; font-family:'Syncopate', sans-serif; text-align:center; font-size:12px; color:#666; padding:0; background:linear-gradient(to bottom, #e2e7e9 0, #abb1b5 280px, #abb1b5 100%);}
#footer_spacer {background:url("../images/footer_trenner_partner_produkte.gif") no-repeat left top; max-width:940px; height:11px; margin:0 auto; clear:both;}

#PLogo, #FCopy, #fback {max-width:940px; margin:0 auto; clear:both; position:relative;}
#fback {padding:10px 0 80px 0;}
#fback::after, #PLogo::after {content:""; display:table; clear:both;}
#FCopy ul {list-style-type:none;}
#FCopy li {display:inline;}
#footer a {color:#000; text-decoration:none; display:inline-block;}
#footer a:hover {text-decoration:underline;}
#FCLEFT p {padding:5px 0 20px; line-height:1.4em; color:#666; font-size:12px;}

#FNav {clear:both;}

#F_CR {float:left; width:200px; text-align:left;}
#F_AD {float:left; width:200px; text-align:left;}
#F_Nav {float:left; width:200px; text-align:left;}
#F_KT {float:right; text-align:right;}
#F_KT b {color:#000;}
#F_KT a:hover {color:#ec710b;}
#fback p {font-family:'Syncopate', sans-serif; font-size:12px; line-height:16px; color:#000;}
#fback a:hover {color:#ec710b;}

#F_Nav ul {list-style:none; padding-top:5px;}
#F_Nav li {display:block; font-size:12px; margin:0; padding:0; position:relative;}
#F_Nav li a {padding:2px 5px 2px 0; color:#000; text-decoration:none; font-size:11px;}
#F_Nav li.FNavFirst {color:#666; font-size:11px; padding-bottom:5px;}
#F_Nav li.FNavFirst a {color:#666; text-decoration:none;}
#F_Nav li a.currentGen {color:#ec710b; text-decoration:none;}

#PLogo {padding:20px 0 0 0;}
#PL1 {float:left; background-image:url(../images/footer_logo_rosel_heim.png); height:112px; width:222px; margin-left:10px;}
#PL2 {float:left; background-image:url(../images/footer_logo_aroma_derm.png); height:112px; width:114px; margin-left:50px;}
#PL3 {float:left; background-image:url(../images/footer_logo_goldeneye.png); height:112px; width:160px; margin-left:50px;}
#PL4 {float:left; background-image:url(../images/footer_logo_silhouet_tone.png); height:112px; width:251px; margin-left:50px;}
#PL1:hover, #PL2:hover, #PL3:hover, #PL4:hover {background-position:0 -112px;}
#PLogo a {display:block; width:100%; height:112px;}


/* ==========================================================================
   TABLET  (<= 979px)
   ========================================================================== */
@media (max-width: 979px) {

  #content_wrapper2, #fback, #PLogo {padding-left:20px; padding-right:20px; box-sizing:border-box;}
  ul#navigation, #NaviSub ul {padding:0 10px; box-sizing:border-box;}

  /* Navigation darf in zwei Zeilen umbrechen */
  ul#navigation li, #NaviSub ul li {display:inline-block;}

  /* Zweispaltig, aber fließend */
  #content {width:52%;}
  #CImage {width:44%;}

  .ContentBox {float:none; width:auto;}

  #content1 .StartBox td {width:auto;}

  /* Footer als umbrechende Zeile */
  #fback {display:flex; flex-wrap:wrap; gap:20px 30px; padding-bottom:50px;}
  #F_CR, #F_AD, #F_Nav, #F_KT {float:none; width:auto; flex:1 1 40%; text-align:left;}
  #footer_spacer {margin:0 20px; max-width:none;}

  #PLogo {display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px 30px; padding-bottom:20px;}
  #PL1, #PL2, #PL3, #PL4 {float:none; margin-left:0;}
}


/* ==========================================================================
   MOBIL  (<= 767px)
   ========================================================================== */
@media (max-width: 767px) {

  /* Kopf: Logo skaliert mit */
  #top {height:auto; padding:15px 20px;}
  #logo {width:100%; max-width:448px; height:auto; aspect-ratio:448 / 105; background-size:contain;}
  #logo a {width:100%; height:100%;}

  /* Burger-Menü (nur wenn JavaScript läuft; ohne JS bleibt die Liste sichtbar) */
  .js .nav-toggle {
    display:flex; align-items:center; gap:12px; width:100%; box-sizing:border-box;
    padding:14px 20px; margin:0; border:0; background:#fff; cursor:pointer;
    font-family:'Syncopate', sans-serif; font-size:13px; color:#3f3f3f; text-align:left;
  }
  .nav-toggle__icon {position:relative; display:block; width:22px; height:2px; background:#3f3f3f;}
  .nav-toggle__icon::before, .nav-toggle__icon::after {content:""; position:absolute; left:0; width:22px; height:2px; background:#3f3f3f;}
  .nav-toggle__icon::before {top:-7px;}
  .nav-toggle__icon::after {top:7px;}
  #nav.is-open .nav-toggle__icon {background:transparent;}
  #nav.is-open .nav-toggle__icon::before {top:0; transform:rotate(45deg);}
  #nav.is-open .nav-toggle__icon::after {top:0; transform:rotate(-45deg);}
  .js .nav-toggle:hover {color:#ec710b;}

  .js ul#navigation {display:none;}
  .js #nav.is-open ul#navigation {display:block;}

  ul#navigation {padding:0; text-align:left; border-top:1px solid #d7dce0;}
  ul#navigation li {display:block; border-bottom:1px solid #eef0f2;}
  ul#navigation li:last-child {border-bottom:0;}
  ul#navigation a {display:block; padding:14px 20px; font-size:13px; border-bottom:0; border-left:3px solid transparent;}
  ul#navigation a:hover, ul#navigation li a.current {border-bottom:0; border-left-color:#ec710b; margin-bottom:0;}

  /* Unternavigation: kompakt, umbrechend */
  #NaviSub ul {padding:6px 10px;}
  #NaviSub ul a {padding:8px 6px; font-size:12px;}

  /* Inhalt einspaltig */
  #content_wrapper2 {margin-top:0;}
  #content, #CImage, #content1, #content_full {float:none; width:auto; min-height:0; margin:20px 0;}
  #content {margin-bottom:30px;}
  #content h3, #content1 h3 {padding-left:0;}

  h1 {font-size:19px; padding-right:0;}
  h2 {font-size:16px; padding-right:0;}
  h1, h2, h3 {overflow-wrap:break-word; -webkit-hyphens:auto; hyphens:auto;}
  #content p, #content1 p {font-size:15px;}
  p {line-height:1.7em;}

  .ContentBox {padding:15px;}
  .StartBox, .StartBoxo {padding:15px;}
  .StartBox img, .StartBoxo img {position:static; display:block; margin:15px 0 0 auto;}

  /* Tabellen seitlich scrollbar statt die Seite zu sprengen */
  #content table, #content1 table, #content_full table {display:block; max-width:100%; overflow-x:auto;}

  /* fluid_styled_content: Bilder neben Text untereinander */
  .ce-textpic .ce-gallery,
  .ce-intext.ce-right .ce-gallery,
  .ce-intext.ce-left .ce-gallery,
  .ce-column {float:none !important; margin-left:0 !important; margin-right:0 !important; max-width:100%;}
  .ce-gallery figure {display:block;}
  .ce-gallery img {width:100%;}
  .ce-intext.ce-right .ce-bodytext, .ce-intext.ce-left .ce-bodytext {clear:both;}

  /* Orange/graue Abschlusslinie */
  #or_footer {width:40%;}
  #gr_footer {width:60%;}

  /* Footer zentriert gestapelt */
  #footer {min-height:0;}
  #fback {flex-direction:column; align-items:center; gap:18px; padding-top:20px; padding-bottom:30px;}
  #F_CR, #F_AD, #F_Nav, #F_KT {flex:none; width:100%; text-align:center;}
  #F_Nav li a {display:inline-block; padding:6px 4px; font-size:12px;}

  #PLogo {gap:5px 20px;}
}

@media (prefers-reduced-motion: reduce) {
  * {transition:none !important;}
}

/* ---------- Barrierefreiheit: Skiplink (nur bei Tastaturfokus sichtbar) ---------- */
.skip-link {position:absolute; left:10px; top:-100px; z-index:1000; padding:10px 16px; background:#333; color:#fff; font-family:Helvetica, Arial, sans-serif; font-size:14px; text-decoration:none;}
.skip-link:focus {top:10px;}
main#content:focus, main#content1:focus {outline:none;}