/* ------------------------------------------------------------------------------ */
/* ****************************************************************************** */
/* --------- (C) Copyright 2023/2024 by machtWeb | Reinhard Lange --------------- */
/* ---------------------- machtWeb.de | relaXits@machtWeb.de -------------------- */
/* ------------------------------------------------------------------------------ */
/* update	->													                            6.00/00 - 23-08-23
/* layout	-> startpage														                                */
/* file 	-> design/design.css												                            */
/* colors	-> http://www.color-hex.com											                        */
/* ------------------------------------------------------------------------------ */
@charset 'utf-8';
/* info -> woff2-files are smaller !!! */
@font-face {
    font-family:'MainFont';
    src:url('fonts/Anodina-Light.woff2') format('woff2');
    font-weight:200; 
    font-style:normal;font-stretch:normal;font-display:swap;unicode-range:U+000-5FF;
}
/*
@font-face {
    font-family:'Oxanium';
    src:url('fonts/Oxanium-VariableFont_wght.ttf') format('truetype');
    font-weight:200 800; 
    font-style:normal;font-stretch:normal;font-display:swap;unicode-range:U+000-5FF;
}
@font-face {
    font-family:'Montserrat';
    src:url('fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
    /*font-weight:200 800;
    font-style:normal;font-stretch:normal;font-display:swap;unicode-range:U+000-5FF;
}
@font-face {
    font-family:'OpenSans';
    src:url('fonts/OpenSans-Light.ttf') format('truetype');
    /*font-weight:200 800;
    font-style:normal;font-stretch:normal;font-display:swap;unicode-range:U+000-5FF;
}
/* for h2 only 
@font-face {
  font-family:'Staatliches';
  src:url('fonts/Staatliches-Regular.ttf') format('truetype');
  /*font-weight:200 800;
  font-style:normal;font-stretch:normal;font-display:swap;unicode-range:U+000-5FF;
}
*/

/* ------------------------------------------------------------------------------ */
/* TEST ONLY */
/* * {outline: 1px solid orange;} */

/* ------------------------------------------------------------------------------ */
/* COLORS - CLIENT */
:root {
  /* colors */
  --color-dark: #2f2f2f;    /* rgb(47,47,47,1); */      /* black-light */
  --color-light: #f2f2f2;   /* rgb(242,242,242,1); */   /* white-light */
  --color-primary:#005495;  /* rgb(0,84,149,1); */      /* blue-dark */

  accent-color: hsl(0 69% 54%);

  --container-color: white; /* for wrapper and main */

  --main-col: rgb(47,47,47,1);    /* #2f2f2f; */        /* black-light */
  --main-bgr: rgb(255,255,255,.8); /* #f2f2f2; */        /* white-light */

  --aside-col: rgb(47,47,47,1);    /* #2f2f2f; */        /* black-light */
  --aside-bgr: rgb(255,255,255,.8); /* #f2f2f2; */        /* white-light */


  /* light-/dark-mode - body only - automatic */
  --light-bgr: #f2f2f2;        /* background */
  --light-col: #2f2f2f;        /* color-text */
  /*--light-bdr: rgb(255,0,0,1); /* #ff0000 border-color */
  --light-bdr: rgb(204,0,0,1); /* #cc0000 border-color */
  /*--light-bdr: rgb(153,0,0,1); /* #990000 border-color */
  --dark-bgr: #2f2f2f;
  --dark-col: #f2f2f2;
  --dark-bdr: #ffffff;

  /* fonts available */
  --font-body: 'Montserrat','Arial','Helvetica','Roboto','Segoe UI',-apple-system,BlinkMacSystemFont,sans-serif; /* body - default */
  --font-hero: 'Oxanium';         /* headline start / slider */
  --font-head: 'Oxanium';         /* headlines */
  --font-text: 'MainFont';        /* p-tag */
  --font-spec: 'MainFont';        /* ie footer */
  --font-count: 'Arial';          /* counter for boxes - ie contact footer */
  /* DO NOT TOUCH font-size !!! */
  --font-size-h1: clamp(1.80rem, calc(1.50rem + 1.60vw), 2.45rem);    /* h1 - self 3.55rem */
  --font-size-h2: clamp(1.70rem, calc(1.40rem + 1.50vw), 2.30rem);    /* h2 */
  --font-size-h3: clamp(1.60rem, calc(1.30rem + 1.40vw), 2.15rem);    /* h3 */
  --font-size-h4: clamp(1.50rem, calc(1.00rem + 1.10vw), 1.80rem);    /* h4 */
  --font-size-h5: clamp(1.40rem, calc(0.80rem + 1.10vw), 1.80rem);    /* h5 */
  --font-size-h6: clamp(1.20rem, calc(0.80rem + 0.90vw), 1.40rem);    /* h6 */
  --font-size-df: clamp(1.00rem, calc(0.80rem + 0.90vw), 1.40rem);    /* p ul ol li ? */
  --font-size-pp: clamp(0.85rem, calc(0.80rem + 0.90vw), 1.40rem);    /* p ul ol li ? */
  /* original
  --font-size-xl: clamp(2.44rem, calc(2.05rem + 1.93vw), 3.55rem);
  --font-size-lg: clamp(1.95rem, calc(1.71rem + 1.24vw), 2.66rem);
  --font-size-sm: clamp(1.56rem, calc(1.41rem + 0.76vw), 2.00rem);
  --font-size-xs: clamp(1.00rem, calc(0.96rem + 0.22vw), 1.13rem);
  --font-size-df: clamp(1.25rem, calc(1.16rem + 0.43vw), 1.50rem);
  */

  /* header and footer size - large screens >= 1920px */
  --head-size: 70vw;
  --foot-size: 70vw;

  /* text */
  --txt-shadow: 0 2px 2px rgb(47,47,47,.8); /* rgb(0,0,0,.2); */

  /* nav */
  --nav-bgr-def: rgb(242,242,242,1); /* #f2f2f2; */ /* white-light */
  --nav-bgr-hov: rgb(0,84,149,1); /* #005495; */ /* blue-dark */
  --nav-bgr-lar: rgb(242,242,242,.95); /* #f2f2f2; */ /* white-light - for nav left-and-right space */
  --nav-shadow: 0 8px 8px rgb(47,47,47,.2); /* rgb(0,0,0,.2); /* except dark-mode */

  /* section */
  --sec-def-char: 60ch;           /* section */

  /* article */
  /* colors and borders */
  --art-mhx-col: rgb(0,84,149,1); /* #005495; */ /* blue-dark */
  --art-mh6-spc: .6rem 0 0 1rem;         /* space to p-tag */

  /* max. charachter - inkl. h1, h2, h3 */
  --art-max-char: 60ch;           /* article */
  --art-mis-char: 28ch;           /* hx - max-inline-size - def 20ch */
  --art-mh1-char: 40ch;           /* h1 */
  --art-mh2-char: 40ch;           /* h2 */
  --art-mh3-char: 70ch;           /* h3 */
  --art-mh4-char: 70ch;           /* h4 */
  --art-mh5-char: 70ch;           /* h5 */
  --art-mh6-char: 70ch;           /* h6 */  
  --art-mpp-char: 80ch;           /* p-tag */
  --art-mol-char: 60ch;           /* ul/ol/li */
  --art-hline-hgt: 1.0;           /* hx - line-height */
  --art-pline-hgt: 1.15;          /* p-tag - line-height */

  --art-border: 1px solid rgb(204,204,204,.4); /* #cccccc */
  --art-hypens: auto;             /* article -> hypens def */
  --flow-space: 1rem;

  /* images */
  --img-logo-ar: 686/160;         /* aspect-ratio for header-logo (desktop) */
  --img-bdr-col: 1px solid rgb(47,47,47,.2);
  --img-bdr-rnd: 1.2rem;          /* border-rounded - def/max 1.6rem */

  /* buttons */
  --btn-bdr-rnd: .8rem;           /* border-roundes - def/max 1rem */

/* BOX / CARDS */
  --box-radius: .8rem;
  --box-shadow: 0 8px 8px rgb(47,47,47,.2); /* rgb(0,0,0,.2); /* same as nav - except dark-mode */

  /* list-items ul/ol/li */
  --list-bdr:0;                     /* def 0 OR 1px solid */
  --list-bgr:rgb(230,238,244,.8); /* #E6EEF4; */ /* blue-light */
  --list-line:rgb(0,84,149,.2);   /* vertical line between colums */
  --list-marker: "\f054";           /* fontwesome 4 - chevron-arrow-right */

  /* links extern within text */
  --link-ext-under:var(--color-primary);
  --link-ext-hover: gold;
  --link-ext-yellow:gold;
  --link-ext-blue: rgb(0,84,149,1);
  --link-int-hover:rgb(204,0,0,1);

  /* footer */
  --foot-col-text:  rgb(255,255,255,1);
  --foot-col-head: var(--color-primary);
  --foot-bgr-area:  none;     /* def with color - but none; ia also good */
  --foot-gap-size:  1rem;                   /* def 1rem */
  --foot-pad-size:  1rem;                   /* def 1rem */
  --foot-bgr-box-o: rgb(0,84,149,.04);      /* address-box 1st */
  --foot-bgr-box-e: rgb(0,84,149,.04);      /* address-box 2nd */
  --foot-bgr-box-h: rgb(0,84,149,.04);      /* address-box hover - complete */
  /* footer -> additional */
  --foot-bdr-area:  6px;                    /* border-radius        -> def 6px | OR 6px 0 */
  --foot-adr-logo:  2/1;                    /* logo - aspect-ratio  -> def 2/1 | 4/3 | 16/9 */
  --foot-hov-data:  rgb(0,84,149,.08);      /* ul/li - data with hover-silde-effect */
  --foot-col-data:  var(--color-primary);   /* ul/li - border with color */
  --foot-bdr-data:  0 0 1px 1px;            /* ul/li - with border  -> def 0 0 1px 1px | 0 0 0 1px */

  --foo-border: var(--art-border); /* same as article */
  /*--foo-txt-col: rgb(51,51,51,1); /* #333333 */
  --foo-txt-col: rgb(47,47,47,1);
  /*--foo-txt-col: rgb(153,153,153,1); /* #999999 */
  /*--foo-txt-col: rgb(204,204,204,1); /* #cccccc */
  
  /* accent - box4back / triangle */
  --box-4back-light: rgb(204,204,204,.4);   /* gray-light */
  --box-4back-dark :rgb(0,84,149,.08);      /* blue-light */
  --box-4triangle: rgb(0,84,149,.2);        /* blue-light */
  --box-4all-size: 256px;                     /* def 256px for all accent-boxes */
  --box-bdr-width: 1px solid;                 /* same - except triangle */
  --box-bdr-rnd: 1.2rem;                      /* same */
  --box-rotate-def: rotate(45deg);            /* def rotate 45-grad */
  /*--box-rotate-spec: rotate(10deg);           /* special rotate 10-grad */

  /* scroll-down - mouse-art - start-slider or start-image only */
  --scr-dwn-col:var(--light-bdr);       /* red; */
  --scr-dwn-bgr:rgb(242,242,242,.8);  /* #f2f2f2; */ /* gray-light */
  --scr-dwn-pos:-64px;                  /* def -64px - depends of nav-tag height and the shadow */

  /* back2top */
  --b2top-col: rgb(255,255,255,1);
  --b2top-bgr: rgb(0,84,149,.2);
  --b2top-bdrc:rgb(0,84,149,1);       /* dark border */
  --b2top-bgrh:rgb(0,84,149,.8);      /* dark when hover */
  --b2top-show: 1rem;					        /* NOT IN USE -> see jscipt / def 8rem 	-> control when the button appear */
  --b2top-pos: 1.6rem;				        /* def 2.2rem 	-> right AND bottom */
  --b2top-size: 3.6rem;				        /* def 3.6rem */
  --b2top-bdr: 50%;					          /* def 50% OR 4px if sqare ;

  /* user select */
  --selc-col: rgb(242,242,242,1); /* #f2f2f2; */ /* withe-light */
  --selc-bgr: rgb(0,84,149,.8);   /* #005495; */ /* blue-dark */

  /* box-counter - box-front */
  /* --count-font:var(--font-count);    /* Arial */ 
  --count-color: rgba(0,0,0,.25);     /* color of the counter - must be the same as card-back-background AND no transparent */
  --count-size: 2.6rem;                 /* counter size - def 2.4rem */
  /*--count-pos-top:0;                  /* counter position top - NOT IN USE */
  --count-pos-right:1rem;               /* counter position right - def 1rem */
  --count-pos-bottom:0;                 /* counter position bottom - def 0rem */ 
  /*--count-pos-left:0;                 /* counter position left - NOT IN USE */
  --count-width: 1px;                   /* counter stroke - def 1px | max 3px */
}
/* ------------------------------------------------------------------------------ */
/* SPECIALS */
/* user-select */
::selection				  {color:var(--selc-col);background:var(--selc-bgr);} 
::-moz-selection		{color:var(--selc-col);background:var(--selc-bgr);}
/* text-fragment */
::target-text       {color:#fff;background:rgb(204,0,0,1);} 
/* scrollbar */
body {
  --sb-track-color: #ccc;
  --sb-thumb-color: #1976d2; /* var(--main-bgr); */
  --sb-size: 10px;
  scrollbar-color:var(--sb-thumb-color) var(--sb-track-color);
  scrollbar-width:var(--sb-size);
}
  body::-webkit-scrollbar       {width:var(--sb-size);}
  body::-webkit-scrollbar-track {background:var(--sb-track-color);border-radius:2px;}
  body::-webkit-scrollbar-thumb {background:var(--sb-thumb-color);border-radius:2px;}
/* ------------------------------------------------------------------------------ */

@layer reset, base, theme, components, utilities;

/* ------------------------------------------------------------------------------ */
/* RESET                                                       6.00/00 - 02-01-23 */
/* link     -> https://codepen.io/raphaelgoetter/pen/BaVoXva
/* update   -> 29-11-22
/* ------------------------------------------------------------------------------ */
@layer reset {
/* switch to border-box model for all elements / avoid min-width: auto on flex and grid items */
*, *:before, *:after, ::after, ::before {box-sizing:border-box;min-width:0;margin:0;padding:0;}
/* remove default margin and padding */
*:where(body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) {margin:0;padding:0;}
/* remove list styles */
*:where(ol, ul) {list-style:none;}
/* prevent elements to exceed their container */
*:where(img, table, td, blockquote, pre, code, input, textarea, select, video, svg, iframe, embed, object) {max-width:100%;}
/* keep aspect-ratio */
/**:where(iframe, img, input, select, textarea) {height:auto;}*/ /* IFRAME !!! */
/* give links default styles */
:where(a:not([class])) {-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto;}
/* inherit fonts for inputs and buttons */
:where(input, button, textarea, select) {font:inherit;}
/* styles for tables */
:where(table) {table-layout:fixed;border-collapse:collapse;vertical-align:top;}
/* remove border on images and iframes */
:where(img, iframe) {border-style:none;}
/* fill color matching to text color */
:where(svg:not([fill])) {fill:currentColor;}
/* remove all animations on demand */
@media (prefers-reduced-motion: reduce) {
*, *:before, *:after, *::before, *::after {
    -webkit-animation: none !important;
            animation: none !important;
    transition: none !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    }
  }
}

/* ------------------------------------------------------------------------------ */
/* HTML and BODY                                               6.00/00 - 02-01-23 */
/* ------------------------------------------------------------------------------ */
html {
	block-size:100%;
	overflow-y:auto;
  overflow-wrap:break-word;           /* break words to prevent overflows */
  overscroll-behavior: contain;
	scroll-behavior:smooth;             /* disabling pull to refresh */
	text-rendering:optimizeSpeed;       
	-webkit-text-size-adjust:100%;
	-webkit-overflow-scrolling:touch;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	color: rgb(0,0,0,.5);
   }

/* set core body defaults */
body {
    /* display:grid;  grid-template-columns:1fr 0;  important for back2top */
    min-height:100vh;
    min-height:100dvh;
    margin:0;
    font-family:var(--font-body);
    font-size: var(--font-size-df);
    font-weight:lighter;
    font-style:normal;
    font-variant:normal;
    text-rendering:optimizeSpeed;
    text-transform:none;
    text-decoration: rgb(32,33,36,1);
    text-align:start;
    text-indent:0;
    /* light-mode */
    /*background:#fff; /*var(--light-bgr);*/
    color: var(--light-col);
    }

/* ------------------------------------------------------------------------------ */
/* dark-mode */
@media (prefers-color-scheme: dark) {
    body {
        background:var(--dark-bgr);
        color: var(--dark-col);
    }
    /*nav {box-shadow:none;}*/
    nav {
        background: #222 !important;
        /* https://blog.logrocket.com/three-ways-style-css-box-shadow-effects/ */
        box-shadow: 0px 1px 2px rgba(0,255,255,0.5), 
        0px 2px 4px rgba(0,255,255,0.5), 
        0px 4px 8px rgba(0,255,255,0.5) 
       /* 0px 8px 16px rgba(0,255,255,0.5) */ !important;
    }
    /* links */
    a:hover {color: #222;}
    /* back2top */
    .back2top {border: 2px solid #f2f2f2 !important;}
}

/* ------------------------------------------------------------------------------ */
/* https://set.studio/some-simple-ways-to-make-content-look-good/ */
/* https://codepen.io/andy-set-studio/pen/BaOwGBB/05994a8d3593ad72cc286bc63c2e734d *(
/* @link https://utopia.fyi/type/calculator?c=320,18,1.25,1240,18,1.333,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

article       {max-width:var(--art-max-char);margin:1rem;margin-inline:auto;padding:1rem;line-height:var(--art-pline-hgt);border:var(--art-border);z-index:0;}  

h1, h2, h3    {margin:0 0 .4em 1rem;font-family: 'MainFont',sans-serif;font-weight:800;line-height:var(--art-hline-hgt);max-inline-size:var(--art-mis-char);text-wrap:balance;}
h4, h5, h6    {font-family: 'MainFont',sans-serif;font-weight:400;max-inline-size:40ch;text-wrap:balance;}
h1            {max-width:var(--art-mh1-char);font-size:var(--font-size-h1);color:var(--color-primary);}
h2            {max-width:var(--art-mh2-char);font-size:var(--font-size-h2);color:rgb(108,109,113,1); /* #2f2f2f; */}
h3            {max-width:var(--art-mh3-char);font-size:var(--font-size-h3);}
h4            {max-width:100%;/*var(--art-mh4-char);*/font-size:var(--font-size-h4);margin:.6em 1rem;padding:2% 4%;background:var(--color-primary);color:#fff;border:1px solid var(--color-primary);border-radius:var(--box-bdr-rnd);}
h5            {max-width:var(--art-mh4-char);font-size:var(--font-size-h5);}

h3            {max-width:var(--art-mh6-char);margin:var(--art-mh6-spc);font-size:var(--font-size-h6);color:var(--art-mhx-col);font-weight:100;text-transform:uppercase;}

p               {max-width:var(--art-mpp-char);padding:.2em .7em;font-size:var(--font-size-pp);font-family:var(--font-text);font-weight:100;color:var(--color-dark);border:0px solid orange;}
p:first-of-type {margin-top:.6em;}
p:last-of-type  {margin-bottom:.6em;}

/* text - smaller than default */
.txt-smaller h6   {max-width:initial;padding:1rem 0 0;font-size:1.2rem;color:var(--light-col);}
.txt-smaller      {max-width:initial;font-size:1.2rem;}
.txt-smallest     {max-width:initial;font-size:.8rem;text-align:center;text-decoration:none;color:rgb(0,84,149,1);}

.centered        {text-align:center;}

/*ul, ol        {max-width:60ch;padding-inline-start:1em;}*/

hr              {border:1px solid rgb(108,109,113,.2); /* #2f2f2f; */}
.line-thin      {margin: 1em 0;border:1px solid rgb(108,109,113,.2); /* #2f2f2f; */ border-width:0 0 1px 0;}
.line-back      {border:1px solid rgb(108,109,113,.08); /* #2f2f2f; */ border-width:0 0 1px 0;}

embed           {border: 1px solid orange;}
object          {border: 1px solid green;width:100%;}

/* Standardstile für den Container */
/* Standardstile für den Container */
.logotext {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  border: 0px solid red;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

/* Stile für das Logo innerhalb des Containers */
.logotext img {
  max-width: 50%;
  height: auto;
  border: none !important;
}

/* Stile für den Text */
.logotext .text {
  max-width: 50%;
  flex: 1;
}

/* Stile für Tablets (z. B. Bildschirmbreite von 768px bis 1024px) */
@media (max-width: 1024px) {
  .logotext .text, .logotext img {
    max-width: 75%;
  }
}

/* Stile für Smartphones (z. B. Bildschirmbreite von 0px bis 767px) */
@media (max-width: 767px) {
  .logotext {
    flex-direction: column-reverse;
    justify-content: flex-end; /* Logo wird auf der rechten Seite angezeigt */
  }
  .logotext .text, .logotext img {
    max-width: 100%;
  }
}

/* Stile für größere Bildschirme (z. B. Bildschirmbreite größer als 1024px) */
@media (min-width: 1025px) {
  .logotext {
    justify-content: flex-end; /* Logo wird auf der rechten Seite angezeigt */
  }
}















iframe          {border: 0px solid red;width:100%;padding-bottom: 1em;	background: linear-gradient(135deg, rgb(255,255,255,.02) 0,rgb(255,255,255,.02) 98.8%,orange 1em);}

/* https://codepen.io/bramus/pen/KKdxyxo */
/* @note: Does not work in MobileSafari: https://caniuse.com/#feat=css-resize */
/* Für Desktop */
.resizable {
  display: flex;
  min-height: 25vh;
  height: 50vh;
  resize: vertical;
  overflow: auto;
  margin: 1em;
  border: 1px solid #ccc;
  border-radius: 1.2rem 1.2rem 0 0;
}

.resizable > * {
  flex: 1;
}

/* Für Tablet und Smartphone */
.pdf-links {
  display: none;
}

@media only screen and (max-width: 1280px) {
  .resizable {
    display: none;
  }
  
  .pdf-links {
    display: block;
    margin: 1em;
  }
}

/* ------------------------------------------------------------------------------ */
/* border-animation -> jobs */
/* https://codepen.io/RitikaAgrawal08/pen/qBYmYdN */

.ani-border     {position:absolute;border-radius:100vmax;}

.top            {top:0;left:0;width:0;height:6px;     background:linear-gradient(90deg,transparent 50%,rgb(255,49,49,.5),rgb(255,49,49,1));}
.bottom         {right:0;bottom:0;height:6px;         background:linear-gradient(90deg,rgb(57,255,20,1),rgb(57,255,20,.5),transparent 50%);}
.right          {top:0;right:0;width:6px;height:0;    background:linear-gradient(180deg,transparent 30%, rgb(0,255,255,.5),rgb(0,255,255,1));}
.left           {left:0;bottom:0;width:6px;height:0;  background:linear-gradient(180deg,rgb(255,255,113,1),rgb(255,255,113,.5),transparent 70%);}

.top            {animation: animateTop 4s ease-in-out infinite;}
.bottom         {animation: animateBottom 4s ease-in-out infinite;}
.right          {animation: animateRight 4s ease-in-out infinite;}
.left           {animation: animateLeft 4s ease-in-out infinite;}

@keyframes animateTop     { 25%       {width:100%;opacity:1;} 30%, 100% {opacity:0;} }
@keyframes animateBottom  {  0%, 50%  {opacity:0;width:0;} 75% {opacity:1;width:100%;} 76%, 100% {opacity:0;}}
@keyframes animateRight   {  0%, 25%  {opacity:0;height:0;} 50% {opacity:1;height:100%;} 55%, 100% {height:100%;opacity:0;}}
@keyframes animateLeft    {  0%, 75%  {opacity:0;bottom:0;height:0;} 100% {opacity:1;height:100%; }}


/* dot-pules -> jobs */
/* https://codepen.io/sindreholm/pen/mdLvZqx */

.section-container {
  /*display: flex;
  align-items: center;*/
  position: relative;
}

.dot {
  position: absolute;
  top: 6px;
  left: 1em;
  height: .6em;
  width: .6em;
  background: white;
  border-radius: 100%;
  animation: pulse 800ms ease-in-out infinite alternate; 
  z-index:-1;
}

.dot::after {
  height: .6em;
  width: .6em;
  background: #F4B5B5;
  border-radius: 100%;
  opacity: 0;
  display: block;
  content: ' ';
  transform-origin: center;
  animation: zoomie 3200ms ease-in-out infinite;
}

@keyframes pulse {
  0% {
    background: #F4B5B5;
  }
  75% {
    background: #F6231E;
  }
  100% {
    background: #F6231E;
  }
}
@keyframes zoomie {
  0% {
    transform: scale(0);
    opacity: 1;
    background: #F6231E;
  }
  30% {
    transform: scale(3.5);
    opacity: 0;
    background: #F4B5B5;
  }
  100% {
    opacity: 0;
    transform: scale(0);
  }
}

.section-container h3 {
  margin-left:2em; /* Berücksichtigen Sie die Position des Punktes */
}

/* https://codepen.io/ronnymdev/pen/ExWjZXQ */
/* blinig dots */
#blinking-dots {
  width: 42px;
  display: flex;
  justify-content: space-between;
  margin-left: 18px;
  margin-top: 10px;
}

.blinking-dot-left {
  border-radius: 50%;
  animation: blinker 1.4s infinite 0.6s;
}
.blinking-dot-right {
  border-radius: 50%;
  animation: blinker 1.4s infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

.red {
border: .36em solid red;
background: red;
}
.green {
border: .36em solid green;
background: green;
}


/* ------------------------------------------------------------------------------ */
/* CERT-LIST */
/* info -> with images and list-items */
.cert-container {
  position: relative;
  max-width: calc(100% - 1.4em);
  margin:1em auto;
  padding:0 0 .4rem 0;
  background: var(--list-bgr);
  border: 0px solid orange;
}
.cert-container img {
  width:100%;
  height:auto;
  border: 1px solid var(--img-bdr-col);
}
.cert-list {
  position:relative;
  padding:1em 0;
  column-count:2;
  column-gap:1rem;
  list-style:none;
  border:var(--list-bdr) solid var(--list-line);
  font-size:initial;
}
/* vertical line between columns */
.cert-list::after {
  content:'';
  position:absolute;
  top:0;
  right:50%;
  width:1px;
  height:100%;
  background:var(--list-line);
}
.cert-list li {
  position:relative;
  margin: 0 1em;
  padding-left: 1.2em;
  line-height: 1.5;
  font-size: clamp(.8rem, calc(0.80rem + 0.90vw), 1.08rem);
  font-weight: 300;
  hyphens:auto;
}
/* fontwesome 4 - chevron-arrow-right */
.cert-list li:before {
  content:var(--list-marker); /* "\f054"; */
  position:absolute;
  top:.1em;
  left:-2px;
  font-family:'FontAwesome';
  font-size:1rem;
  color:var(--color-primary);
}

@media (max-width: 1020px) {
  .cert-list {
    column-count: 1;
  }
  .cert-list::after {
    display: none;
  }
}

/* ------------------------------------------------------------------------------ */

/* hyphenation for the elements */
h3, h4, h5, h6, p, ul, ol, blockquote {hyphens:var(--art-hypens);}

/* images - silder also */
.img-border   {border-radius:var(--img-bdr-rnd);border:var(--img-bdr-col);}

/* buttons - slider also */
.btn-border   {border-radius: var(--btn-bdr-rnd);}
/* keine wort-trennung (ie span-tag phone */
.nowrap       {white-space: nowrap;}
.nohypens     {hyphens: none;}
/* links */
/*
a {color:currentColor;text-decoration-color:var(--color-primary);text-decoration-thickness:0.4ex;text-underline-offset:0.4ex;}
*/

/* ------------------------------------------------------------------------------ */
/* LINKS */
/* https://codepen.io/maddesigns/pen/gOGjNvm */
/* info -> within span-tag and animation transparent background */
.link_extern a {
  display:inline-block;
  padding: .02rem 0;
  line-height:auto;
  background:linear-gradient( to right, var(--link-ext-hover), var(--link-ext-hover) ) no-repeat;
  color:currentColor;
  word-wrap: break-word;
  text-decoration-color:var(--link-ext-under);
  text-decoration-thickness:.2ex;
  text-underline-offset:.6ex;
  /* full height, but no width */
  background-size:var(--s, 0) 100%;
  /* when un-hovered, animate to the right */
  background-position:var(--p, right);
  transition:background-size 250ms ease;
}

/* resize horizontally to fill the space */
/* when hovering, animate from the left */
.link_extern a:hover {
  --s: 100%;
  --p: left;
}


/* ------------------------------------------------------------------------------ */
/* UTILITIES */
.flow > * + * {margin-block-start:var(--flow-space,1rem);}
/* flow and rythm */
:is(h1, h2, h3, blockquote)   {--flow-space: 1.5rem;}
:is(h1, h2, h3) + *           {--flow-space: 0.5rem;}  

/* blocks */
.lede         {max-width:50ch;font-size:var(--font-size-df);font-style: italic;text-wrap:balance;}
.lede + *     {--flow-space:1rem;}
blockquote    {max-width:50ch;margin: 0 0 0 1rem;padding-inline-start:1em;border-inline-start:.6rem solid var(--light-bdr);font-style:italic;font-size:var(--font-size-pp);font-weight:400;}

/* ------------------------------------------------------------------------------ */
/* CONTENT                                                     6.00/00 - 02-01-23 */
/* ------------------------------------------------------------------------------ */


/* FULL BLEED */
/* https://codepen.io/andy-set-studio/pen/vYOJjNw */
/* 09-03-2020 */
/* add this class to an element to make it fill the width of the screen and sit horizontally central */
 .full-bleed {width: 100vw; margin-left: calc(50% - 50vw);}

/* EVERYTHING BELOW THIS LINE IS FOR PRESENTATION ONLY */
/* A promo presentational component */
.promo {
  padding: 2rem 0;
  color: #fff;
  background:rgb(204,0,0,1); /* self hsl(338,81%,41%); */
}

.promo__inner {
  max-width: 50rem;
  margin: 0 auto;
  border: 1px solid orange;
}

.promo h3.fluid-type {
  --fluid-type-min-size: 2;
  --fluid-type-max-size: 3.5;
  margin:0 1rem;
  margin-inline:auto;
  max-width:var(--art-mh3-char);
}

.promo p {
  margin:0 1rem;
  font-size: 1.5rem;
}

/* A feature figure presentational component */
.feature-figure img {
  width: 100%;
  box-shadow: 0 0 20px hsl(0, 0%, 0%, 0.2);
}

.feature-figure figcaption {
  max-width: 80ch;
  margin: .6rem auto;
  padding: 1rem;
  text-align: center;
  font-weight: 300;
  font-size: 1rem;
  border: 1px solid red;
}

@supports (object-fit: cover) {
  .feature-figure img {
    max-height: 25rem;
    object-fit: cover;
  }
}

/* shared wrapper */
.wrapper {
  max-width:var(--art-max-char);
  /* max-width: 50rem; /* check article width */
  margin-left:auto;
  margin-right:auto;
  border:0px solid red;
}

/* ------------------------------------------------------------------------------ */
/* OVERLAYS and BACKGROUNDS                                    6.00/00 - 24-08-23 */
/* see -> start.def.php                                                           */ 
/* ------------------------------------------------------------------------------ */
.background-items {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;  
  z-index:-1;

  /*background: orange;*/
  /*background-image: url('../images/backgrounds/referenzen-sw.webp'); /* 1920x1080 */
  /*background-size: cover;*/
  border:0px solid orange;
}
/* MENU-ITEMS - with img-tag */
.background-image {
/*  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
*/
  z-index:-1;
  /*filter: grayscale(100%);*/
  }


/* JOBS ONLY */
.bgr-img-jobs {
  position: fixed;
  top: 300px;
  right: 2vw;
  /*left: 32px;*/
  width: auto; /* Verwendet das ursprüngliche Bildverhältnis */
  max-width: calc(100% - 2vw); /* Begrenzt die maximale Breite auf 100% - 32px */
  height: 100%;
  object-fit: cover;
  z-index: -1;
}
@media (max-width: 1280px) {
  .bgr-img-jobs {
    display: none;
  }
}

.overlay-items {
  position:absolute;
  top:0;
  right:0;
  left:0;
  width:100%;
  height:100%;
  background: rgb(255,255,255,.86); /* self .86 */
  }
/* numbers - horizontal - max. 2 items and/or hr-line */
.overlay-year {
  position:fixed;
  top: 290px;
  left:24px;
  font-size:4rem;
  font-weight:bold;
  text-align:center;
  text-shadow: 2px 2px 4px rgb(0,0,0,.04);
  color: rgb(0,0,0,.04);
  }
/* text - from menu-item - vertical */
.overlay-text {
  position:fixed;
  top: 620px;
  right:-240px;
  font-size:5rem;
  font-weight:bold;
  text-align:center;
  text-transform:uppercase;
  text-shadow:2px 2px 4px rgb(0,0,0,.04);
  color: rgb(0,0,0,.04);
  border: 1px solid rgb(108,109,113,.04);
  border-width: 0 0 6px 0;
  transform:rotate(90deg);
}
/* max-width: 768px OR max-width: 1020px */
@media (max-width: 1020px) {
  .background-items, .overlay-year, .overlay-text {
    display: none;
  }
}

/* ------------------------------------------------------------------------------ */
/* HEADER                                                      6.00/00 - 23-08-23 */
/* ------------------------------------------------------------------------------ */
header {
  display: flex;
  top: 1rem;
  max-height: 200px;
  min-height: 200px;
  justify-content: space-between;
  align-items: center;
  border: 0px solid red;
  background: rgb(255, 255, 255, 1);
  color: #001B57;
  z-index: -1;
}

.header-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width:var(--head-size); /* self 70vw; */
  margin: 0 auto;
}

@media screen and (max-width: 1920px) {
  .header-wrapper {
    max-width: 100%;
  }
}

/*
.header-bgr-image {
  background: linear-gradient(to right top, rgb(25,118,210,.8), rgb(255,255,255,.2)), url('../images/image-01-2560.webp');
  background-size: cover; /* um das Bild zu skalieren, sodass es den ganzen Bereich des divs abdeckt */
/*  background-position-y: 50%; /* center; */ 
/* } */

/* LOGO - LEFT and RIGHT */
.logo-left a ,
.logo-right a         {display:flex;justify-content:center;align-items:center;text-decoration:none;}

.logo-left            {display:flex;justify-content:center;align-items:center;margin: 0 0 0 2vw;border:0px solid red;}
.logo-right           {display:flex;justify-content:center;align-items:center;width:256px !important;height:148px !important;margin: 0 2vw 0 0;border:0px solid orange;}

/* ------------------------------------------------------------------------------ */
/* CHECK IMAGE-SIZE ALWAYS - proposal from chat-gpt ------------------------- !!! */
.desktop-logo {
  aspect-ratio:var(--img-logo-ar); /* 686/160; /* image-size */
  max-width:100%;
  height:auto;
}
@media screen and (max-width: 768px)  {.desktop-logo {max-width: 75%;height:auto;}}
@media screen and (max-width: 1280px) {.desktop-logo {max-width: 80%;height:auto;}}
@media screen and (min-width: 1281px) {.desktop-logo {width: 85%;height:auto;} .logo-right {width:100%;height:auto;}}

.logo-left,
.logo-right {
  display:flex;
  justify-content:center;
  align-items:center;
}

/* ------------------------------------------------------------------------------ */

.wrap-the-box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.box {
  width: 172px;
  height: 172px;
  margin: 0 auto;
  margin-top: 4rem;
  margin-right:2rem;

  background-color: #A3A4A6;
  border-radius: 1rem;
  transform: rotate(45deg);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.box .claim {
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(-45deg);
  white-space: nowrap;
}

@media (max-width: 1280px) {
  .wrap-the-box {
    display: none;
  }
}

@media (min-width: 1281px) and (max-height: 1280px) {
  .box {
    width: 10vw;
    height: 10vw;
  }

  .box .claim {
    font-size: 1.5vw;
    transform: rotate(-45deg);
    white-space: nowrap;
  }
}

@media (min-width: 1281px) and (min-height: 1281px) and (max-width: 1920px) and (max-height: 1920px) {
  .box {
    width: 15vw;
    height: 15vw;
  }

  .box .claim {
    font-size: 1.7vw;
    transform: rotate(-45deg);
    white-space: nowrap;
  }
}

@media (min-width: 1921px) and (min-height: 1921px) {
  .box {
    width: 172px;
    height: 172px;
  }

  .box .claim {
    font-size: 1rem;
    transform: rotate(-45deg);
    white-space: nowrap;
  }
}

.box:hover .claim {
  color: red;
  animation: color-change 0.5s ease;
}

@keyframes color-change {
  from {
    color: #fff;
  }
  to {
    color: red;
  }
}

/* ------------------------------------------------------------------------------ */
/* SPECIALS                                                    6.00/00 - 13-04-23 */
/* ------------------------------------------------------------------------------ */
/* container for all box4back necessary */
.container {
  position:relative;
}
/* box4back */
.box4back {
  position:absolute;
  z-index:-1;
  top: 80%;
  left: 80%;
  width:var(--box-4all-size);
  height:var(--box-4all-size);
  transform: translate(-50%, -50%) var(--box-rotate-def);
  transform-origin: 50% 50%;
  border-radius:var(--box-bdr-rnd);
}
.box4back.accent-light  {background:var(--box-4back-light); /* rgb(204,204,204,.4); */ border:var(--box-bdr-width) rgb(204,204,204,.2);}
.box4back.accent-dark   {background:var(--box-4back-dark); /* rgb(0,84,149,.08); */ border:var(- -box-bdr-width) rgb(0,84,149,.2);}

/* box4triangle !!! DO NOT CHANGE !!! */
.box4triangle {
  position:absolute;
/*  bottom: -257px; /* OR -256px; */
/*  right: -32px; */
  transform:translate(-50%, -50%) rotate(45deg);
  transform-origin:50% 50%;
  width:var(--box-4all-size);
  height:var(--box-4all-size);
  border-radius:var(--box-bdr-rnd);
  overflow:hidden;
}

.box4triangle.box2top {
  z-index:-1;
  bottom: -257px; /* OR -256px; */
  right: -32px;
  background-image:linear-gradient(to bottom right, var(--box-4triangle) 50%, rgb(255,255,255,.0) 50%); /* rgb(0,84,149,.2) */
}

/* -> for slider-nav only !!! */
.box4triangle.box2nav {
  z-index:-1;
  bottom: -242px; /* OR -256px; */
  right: -32px;
  background-image:linear-gradient(to bottom right, var(--box-4triangle) 50%, rgb(255,255,255,.0) 50%); /* rgb(0,84,149,.2) */
}

.box4triangle.box2footer {
  z-index:0;
  top: 0;
  left: 15%; /* OR 257px; */
  background-image:linear-gradient(to bottom right, var(--box-4triangle) 50%, rgb(0,84,149,.04) 50%);
}

/* ------------------------------------------------------------------------------ */
/* COMPANY INFO and CONTACT */
/* COMPANY INFO and CONTACT */
.contact-info-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: 1.18rem;
  font-weight: 300;
  color: var(--color-primary);
  border: 0px solid orange;
}

.contact-info {
  display: flex;
  flex-direction: column;
  width: 50%;
  border: 0px solid red;
}

.contact-info .add-border {
  margin: 0 0 0 1em;
  padding: 0 0 0 8px;
  border: 1px solid var(--color-primary);
  border-width: 0 0 0 1px;
}

.contact-info h3 {
  margin-bottom: 8px;
  text-align: left;
}

.contact-info.general {
  width: 100%;
  padding: 1em;
  text-align: center;
  border: 0px solid green;
}

.contact-info.general h4 {
  margin-bottom: 8px;
  font-size: 1.4rem;
  text-align: center;
}


.contact-info a {
  color: var(--color-primary);
  text-decoration: none !important; /* Entfernt das Unterstreichen aller Links in .contact-info */
}

.contact-info a.phone,
.contact-info a.fax,
.contact-info a.mail {
  display: flex;
  align-items: center;
  margin: 2px 0;
  line-height: 1.2;
  letter-spacing: 0; /* -1px; */
  white-space: nowrap;
  text-decoration: none;
}

.contact-info a.phone i,
.contact-info a.fax i,
.contact-info a.mail i {
  margin-right: 10px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
}

.contact-info a.phone:hover,
.contact-info a.fax:hover,
.contact-info a.mail:hover {
  color: red;
}

.contact-info a.fax {
  pointer-events: none;
  text-decoration: none !important;
}

.contact-info a.mail {
  justify-content: center;
}

.contact-info::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
}

/* Media queries for responsive design */

@media (max-width: 1279px) {
  .contact-info-wrapper {
    font-size: 1rem; /* Adjust the font size for smaller screens */
  }

  .contact-info a.phone i,
  .contact-info a.fax i {
    width: 16px; /* Adjust icon size for smaller screens */
    height: 16px;
  }

  .contact-info .add-border {
    margin: 0; /* Remove the margin to save space */
    padding: 0 8px; /* Adjust the padding for smaller screens */
  }

  .contact-info.general h4 {
    font-size: 1.2rem; /* Adjust the font size for smaller screens */
  }

  .logo-right,
  .contact-info a.fax {
    display: none; /* Hide right logo and fax numbers for screens smaller than 1280px */
  }

  .contact-info-wrapper .logo-left img.desktop-logo {
    width: 40%; /* Reduce the size of the left logo for smaller screens (max 40%) */
    max-width: 40vw; /* Optionally set a maximum width for the logo */
    margin-right: 2%; /* Add a right margin of 2% for the left logo */
  }

  .contact-info {
    width: 100%; /* Full width for contact-info divs at smaller screens */
  }

  .contact-info.general {
    padding: 1em 0; /* Add some vertical spacing for general info at smaller screens */
  }
}

/* Mobile Logo */
/* Mobile Logo */
@media (max-width: 619px) {
  .logo-left {
    display: none; /* Hide the original logo div at screens smaller than 620px */
  }

  .contact-info-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Set the contact info wrapper to fill the viewport vertically */
  }

  .logo-left-mobile {
    display: block;
    text-align: center;
    margin: auto; /* Center the mobile logo vertically and horizontally */
  }

  .logo-left-mobile img {
    width: auto;
    max-width: 124px;
    height: auto;
  }
}


/* Hide Mobile Logo for Larger Screens */
@media (min-width: 620px) {
  .logo-left-mobile {
    display: none;
  }

  /* Add margin to the right of logo-left for screens larger than 620px */
  .logo-left {
    margin-right: 4%;
  }
}



/* ------------------------------------------------------------------------------ */
/* MAIN */
main {background:var(--main-bgr);border:1px solid rgb(204,204,204,.2);border-width:1px;}

section {content-visibility:auto;contain-intrinsic-size: auto 640px;border: 0px solid orange;}

.main-section {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 60ch;
  min-height: calc(100vh - 2rem);
  margin: auto;
}

/*section:nth-of-type(1) {background: rgb(255,165,0,1);}  /* orange; */
/*section:nth-of-type(2) {background: rgb(255,165,0,.8);} /* orange; */
/*section:nth-of-type(3) {background: rgb(255,165,0,.4);} /* #cc8400 */
/*section:nth-of-type(4) {background: rgb(255,165,0,.2);} /* #cc8400 */

@media (max-width: 768px) {
  .main-section {
    min-height: initial;
  }
}

/* ------------------------------------------------------------------------------ */
/* MAIN and ASIDE                                              6.00/00 - 27-07-23 */
/* ------------------------------------------------------------------------------ */
/* https://codepen.io/user1122334455/pen/MWBmEGK */
/* 12-01-2023 */
/* :root {--container-color: white;} */

.wrapper {
  display: flex;
  max-width: 1400px; /* optimum */
  margin: 2em auto; /* self 1em auto; */
  gap: 1em;
  padding: 0;
}
@media (max-width: 500px) {
  .wrapper {
    display: block;
  }
}
.wrapper main {
  container-type: inline-size;
  flex: 1;
  padding: 2rem;
  --container-color: orange;
  background:var(--main-bgr);
  color:var(--main-col);
}
/* ------------------------------------------------------------------------------ */
/* 1. ONE image in row main - 100% */
.wrapper main img {
  display: block; /* Stellt sicher, dass das Bild allein auf einer Zeile angezeigt wird */
  width: calc(100% - 32px); /* 100% Breite abzüglich 16px Abstand rechts und 16px Abstand links */
  max-width: 1280px;
  height: auto;
  margin: 1em auto; /* Zentriert das Bild vertikal und fügt oben und unten 1em Abstand hinzu */
  border: 1px solid rgba(0, 0, 0, 0.08);
}
/* 2. TWO images in row main - 50% each */
/* Standard-Stil für die Bilder */
.image-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* Gleichmäßig verteilter Abstand zwischen den Bildern */
  margin: 0 -16px; /* Negative Margin, um den Abstand auszugleichen */
}

.image-container {
  flex: 1; /* Gleicher Platz für beide Bilder */
  padding: 1px 0 0 0;
}

.image {
  width: 100%;
  height: auto;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

/* Media Query für Tablets und Smartphones */
@media screen and (max-width: 768px) {
  .image-grid {
    justify-content: flex-start; /* Zentriert die Bilder vertikal */
    margin: 0; /* Entfernt den negativen Margin */
  }

  .image-container {
    flex: 100%; /* Volle Breite für das Bild auf kleinen Bildschirmen */
    padding: 16px; /* Fügt Abstand um das Bild hinzu */
  }
}

/* Standard-Stil für die Bilder */
/* 3. TWO images in row 33% and 66% */
/* 3. TWO images in row 33% and 66% */
.image2grid3 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* Gleichmäßig verteilter Abstand zwischen den Bildern */
  margin: 0 -16px; /* Negative Margin, um den Abstand auszugleichen */
}

/* container */
.image2cont3:first-child {
  flex: 1 0 33%; /* 33% Breite für das erste Bild */
  padding: 0 8px 0 16px; /* Fügt 8px Abstand auf der linken und 16px Abstand auf der rechten Seite des Bildcontainers hinzu */
  box-sizing: border-box; /* Berücksichtigt Padding in der Breite */
}

.image2cont3:last-child {
  flex: 1 0 66%; /* 66% Breite für das zweite Bild */
  padding: 0 16px 0 8px; /* Fügt 16px Abstand auf der linken und 8px Abstand auf der rechten Seite des Bildcontainers hinzu */
  box-sizing: border-box; /* Berücksichtigt Padding in der Breite */
}

.image {
  width: 100%;
  height: auto;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

/* Media Query für Tablets und Smartphones */
@media screen and (max-width: 768px) {
  .image2grid3 {
    display: block; /* Bilder untereinander anzeigen */
    margin: 0; /* Entfernt den negativen Margin */
  }

  .image2cont3 {
    flex: 100%; /* Volle Breite für das Bild auf kleinen Bildschirmen */
    padding: 16px; /* Fügt Abstand um das Bild hinzu */
  }
}





/* ------------------------------------------------------------------------------ */
.wrapper main .logo {
  width: 512px; /* Setze die Breite auf 256px */
  height: auto; /* Die Höhe passt sich proportional zur Breite an */
  float: right; /* Das Bild wird rechts ausgerichtet */
  margin: 1em; /* Fügt links davon einen Abstand hinzu */
  border: none;
}

.wrapper main .teaser-section {
  display: flex;
  align-items: flex-end; /* Ausrichtung an der Unterseite */
  justify-content: space-between;
  max-width: 1280px; /* same as images main */
  margin: 0 auto;
  padding: 16px;
  border: 0px solid orange;
}

.wrapper main .header-text {
  flex: 1;
  padding-right: 16px;
}

.wrapper main .header-box {
  padding: 16px;
  background: var(--color-primary);
  color: #fff;
  border: var(--box-bdr-col);
  border-radius: var(--box-bdr-rnd);
  margin-top: 16px; /* Neues Margin oben */
  box-sizing: border-box; /* Füge diese Zeile hinzu */
}

.wrapper main .header-image {
  flex: 1;
  max-width: 50%;
  height: auto;
  border: var(--box-bdr-col);
  border-radius: var(--box-bdr-rnd);
  margin-top: 16px; /* Behalte das Margin oben für das Bild */
  box-sizing: border-box; /* Füge diese Zeile hinzu */
}

/* Media query for tablet and smartphone */
@media (max-width: 768px) {
  .wrapper main .teaser-section {
    flex-direction: column;
    align-items: center;
  }
  .wrapper main .header-text {
    padding-right: 0;
  }
  .wrapper main .header-image {
    max-width: 100%;
    margin-top: 20px;
  }
}





/* ASIDE */
/* Ursprünglicher CSS-Code ohne die Image-Galerie-Klasse in .ibox */
.wrapper aside .ibox {
  display: flex;
  flex-direction: column;
  margin: 0 0 1em 0;
  padding: 0 0 .4em 0 !important;
  border: 1px solid var(--color-primary);
  border-width: 0 0 1px 0;
}

.wrapper aside .ibox h2,
.wrapper aside .ibox h3 {
  margin: 0;
  padding: 8px;
  font-size: 1.4rem;
}

.wrapper aside .ibox p {
  margin: 0;
  padding: 8px;
  font-size: 1.2rem;
}

.wrapper aside .ibox .img-container {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  overflow: hidden;
}

/* Anpassung der Bildgröße in der .ibox-Klasse */
.wrapper aside .ibox img {
  width: 100%;
  height: auto;
  border-radius: 0;
  border: 1px solid #ccc;
  display: block;
}

/* iBOX - LINKS */
.wrapper aside .ibox-link {
  position:relative;
  text-decoration:none;
}
.wrapper aside .ibox-link i {
  position:absolute;
  right: 12px;
  bottom:0;
  font-size: 1.6rem;
  color:var(--color-primary);
}
.wrapper aside .ibox-link:hover i {
  color: orangered;
}
.wrapper aside .ibox-link:visited {
  color: rgb(108,109,113,1);
}
/* Deaktivieren der Image-Galerie-Klasse in .ibox */
.wrapper .ibox .image-gallery {
  display:none;
}

/*.wrapper aside .ibox-link:hover        {border:1px solid red;}*/
/*.wrapper aside img:hover      {transform: scale(1.1);}*/

@container (width > 200px) {
  .wrapper main section.images {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    margin: 0 1rem;
  }
  .wrapper main section.images figure {
    flex: 1 1 auto;
  }
  .wrapper main h1 {
    display:flex;
    align-items:center;
    color:var(--color-primary);
  }
  .wrapper main h1:after {
    content:'';
    margin-left: 0.5rem;
    font-size: 1rem;
  }
}

@container (width > 600px) {
  .wrapper main section.images figure {
    flex: 1;
    border: 0px solid red;
    margin:0 auto;
    margin-bottom: 1em;
  }
  .wrapper main h1 {
    color:var(--color-primary);
  }
  .wrapper main h1:after {
    content:'';
  }
}

.wrapper aside {
  container-type: inline-size;
  flex: 0 0 25%; /* self 33%; */
  padding: 1em;
  border:1px solid rgb(204,204,204,.2);
  background:var(--aside-bgr);
  color:var(--aside-col);
  /*--container-color: green;*/
}
.wrapper aside img:hover {transform:scale 1.1;}

@container (width < 350px) {
  h2 {
    color: rgb(108,109,113,1) !important;
  }

  h2:has(+ h3 + p) + h3 {
    color: #000;
    text-decoration: underline;
  }
  h2:has(+ h3 + p) + h3:after {
    content: "";
    font-size: .8rem;
  }

  .wrapper aside {
    padding:0;
    background:orange !important;
  }

  section.images:has(figure:only-child) figure {
    box-shadow: 2px 2px 5px 3px #ccc;
  }
}

@container style(--container-color: #ccc) {
  figure img {
    border: solid 2px var(--container-color);
  }
}
@container style(--container-color: green) {
  figure img {
    border: solid 2px var(--container-color);
  }
}

/* ------------------------------------------------------------------------------ */
/* ASIDE TEST !!! for small screens */
@media (max-width: 1280px) {
    aside {
      display: none;
    }
  }
/* ------------------------------------------------------------------------------ */


/*article {border: 1px solid darkturquoise; } */
/* ASIDE NOT VISIBLE BUT SPACE */
.wrapper .aside2space {border: 0px solid blue;background:none;}

/* ------------------------------------------------------------------------------ */
/* ASIDE                                                       6.00/00 - 20-08-23 */
/* ------------------------------------------------------------------------------ */
/* ASIDE - TESTIMONIAL */
/* https://codepen.io/jeremycaris/pen/zYOorR */

.testimonial {
  margin: 0 0 20px 0;
  border: 0 0 1px 0;
  border-color: var(--color-primary);
}

.testimonial blockquote {
  position: relative;
  margin: 4px 0 0 0;
  padding: 40px 18px; /* self 20px 60px; */
  border: none;
  border-radius: 1.2rem;
  font-size: 1.1rem;
  font-weight:100;
  font-style: italic;
  background:var(--list-bgr);
  color:var(--color-dark);
}

.testimonial blockquote:before,
.testimonial blockquote:after {
  content: "\201C";
  position: absolute;
  line-height: 1;
  font-size: 96px; /* self 80px */
  color:var(--color-primary); /* self #757f9a; */
  font-style: normal;
}

.testimonial blockquote:before  {top:0;left:10px;}
.testimonial blockquote:after   {content:"\201D";right:10px;bottom:-0.5em;}
/* arrow - down */
.testimonial div {
  width:0;
  height:0;
  margin:0 0 0 60px;
  border-left:0 solid transparent;
  border-right:20px solid transparent;
  border-top:20px solid var(--list-bgr);
}

.testimonial p {
  margin: -4px 0 0 32px;
  text-align:left;
  font-size: 1rem;
  color:var(--color-dark);
  border: 0px solid orange;
}


/* ------------------------------------------------------------------------------ */
/* FOOTER - FLEXBOX                                            6.00/00 - 23-08-23 */
/* ------------------------------------------------------------------------------ */
footer {
    position:absolute;
    display:flex;
    width:100%;
    margin: 2rem 0;
    padding: 2rem;
    justify-content:center;
    font-family:var(--font-spec);
    background:rgb(255,255,255,1);
    counter-reset:Element;
    border: 0px solid orange;
}

.footer-content {
  max-width:var(--foot-size); /* self 70vw; */
}

@media (max-width: 1920px) {
  .footer-content {
      max-width: 100vw;
  }
}

footer h3 {
    margin: 1rem 0 1rem 0;
    font-size: 2rem;
    }

/* AREA CONTACT */
.area_contact {
    display:flex;
    flex-wrap:wrap;
    width:100%;
    gap: 1em;
    padding:0;
    /* border: var(--foo-border); /* 1px solid orange; */
    }

.area_contact h4 {
/*    border: 0px solid red;
    border-width: 0 0 1px 0; */
    font-size: 1.6rem;
    color:var(--foo-txt-col);
    }

/* FOOTER-BOX => FBOX */
.area_contact .fbox {
    flex-basis: 256px; /* self 228px */
    flex-grow:1;
    margin:0;
    padding:0;
    border: 0px solid red;
    border-width:0;
    box-shadow: var(--nav-shadow);
    /*background: #f8f8f8;*/
    color:var(--foo-txt-col);
  }
.area_contact .fbox p {
    font-size: 1.04rem;
    color:var(--foo-txt-col);
}

.area_contact .fbox:nth-of-type(3n+1) {
    flex-shrink:1; /* shrinks slower */
    /*background: #ebebf0;*/
    }



/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 12-09-22 */
/* FOOTER - COMPANY DATA */
/* MEDIA - DO NOT TOUCH !!! */
/*@media (min-width: 320px) { footer {flex-flow:column;} .fbox {flex-grow:1; } }*/
/*@media (min-width: 780px) { footer {flex-flow:row wrap;} .fbox {flex-grow:1;} .fbox:nth-last-child(2) {border:0px solid yellow;} }*/
/*@media (min-width:1280px) { footer {flex-flow:row;} .fbox {width:100%;} .fbox:last-child {border:0px solid blue;}}*/

/* logo company -> NO SHOW on small screens -> max 512px test */
@media (max-width: 830px)       { footer .fbox:nth-child(1), .fbox:nth-child(2) {display:none;} }

footer .fbox:last-child         {border:0px solid red;}
footer .fbox:first-child        {background:#fff !important;}

/* DETAILS - ADDRESS BOX*/
footer .fbox             {object-fit:contain;border-radius:1rem;color:var(--foot-col-text);}
footer .fbox:hover       {background:var(--foot-bgr-box-h) !important;transition:all .8s;}
footer .fbox h4          {margin:0;padding:.6rem 1rem;font-size:1.4rem;text-transform:uppercase;background:var(--color-primary);color:#fff;border-radius:.98rem .98rem 0 0;/*border:0px solid var(--foot-col-head);border-width:0 0 1px 0;*/}
footer .fbox-inner       {margin:0 1rem;}
footer .fbox .adr-logo   {display:flex;flex-direction:column;align-items:center;aspect-ratio:var(--foot-adr-logo);margin:1rem auto 0;padding:0;border:1 solid var(--foot-col-text,#fff);background:rgb(255,255,255,1);}

/* ADR-LOGO IMAGE SCALES DOWN !!! */
footer .fbox:nth-child(1) .adr-logo img {object-fit:contain;max-width:100%;}

/* ADRESS DATA */
footer .fbox p                   {-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;padding:0;}
footer .fbox ul                  {list-style-type:none;list-style-position:outside;margin:1rem auto;padding:.4rem;border:solid var(--foot-col-data);border-width:var(--foot-bdr-data);}
footer .fbox li                  {padding-left: .6rem;font-size:1.1rem;}
footer .fbox li::marker          {font-size:initial;color:var(--color-primary);} /* color for fall-back */
/* versions of font-awesome above 4.7.0 */
footer .fbox li .fa-cog          {color:var(--color-primary);font-size:1.2rem;}
footer .fbox li .fa-cog:hover    {color:#fff;}
/* hover -> fade-in AND fade-out */
footer .fbox li                  {transition:all 2s;}
footer .fbox li:hover,     
footer .fbox li:focus            {color:var(--color-primary);box-shadow:inset 0 -30px var(--foot-hov-data);transition:all .8s;cursor:default;}
footer .fbox .nohover:hover,     
footer .fbox .nohover:focus      {color:var(--color-primary);box-shadow:none;transition:none !important;}
/* for links and email */
footer .fbox .add-link           {color:var(--color-primary);text-decoration:none;border:none;cursor:pointer;}  
/* fa-clock-o | unicode: f017 */
footer .fbox .icon-clock         {margin:0 0 0 2.2rem;padding:0 0 0 0rem;list-style-position:outside;}
footer .fbox .icon-clock::before {margin:-.4rem 0 0 -2rem;padding:0 1rem 0 0;font-family:'FontAwesome';font-size:1.4rem;content:'\f017 ';}
footer .fbox .marker-noshow      {list-style-type:none;}
/* hover -> data-box */
footer .fbox:nth-child(odd)      {background:var(--foot-bgr-box-o);}
footer .fbox:nth-child(even)     {background:var(--foot-bgr-box-e);}

.office-times {
  position:relative;
  column-count:1;
  list-style:none;
  font-size:initial;
}
.office-times li {
  position:relative;
  margin: 0 1em;
  padding-left: 1.2em;
  line-height: 1.2;
  font-size: clamp(.8rem, calc(0.80rem + 0.90vw), 1.08rem);
  font-weight: 300;
  hyphens:auto;
}
.office-times li:before {
  content:var(--list-marker); /* "\f054"; */
  position:absolute;
  top:.1em;
  left:-2px;
  font-family:'FontAwesome';
  font-size:1rem;
  color:var(--color-primary);
}
footer .fbox .office-times li:hover {background:none !important;}



/* FOOTER SUB FOR COPYRIGHT */
.copyr                                  {display:flex;justify-content:center;align-items:stretch;align-content:stretch;margin:0;padding:0;}
.copyr .copyr-item                      {margin:0;padding:0 .4rem;font-size:1rem;}

/* ------------------------------------------------------------------------------ */
/* ADDRESS 
/* ------------------------------------------------------------ 6.0/00 - 18-03-23 */
address {display:flex;flex-wrap:nowrap;gap:0rem;text-decoration:none;font-style:normal;}
address a:where([href]) {text-decoration:none;}

/*figure  {}*/
/*picture {}*/

/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 27-03-23 */
/* info -> Info on hover without JS - DOES NOT WORK IN HEADER !!! */
/* link -> https://codepen.io/guuslieben/pen/gabQWM */
a.dfn-hover {
	text-decoration:none;
	color:#013C80;
	}
/* code for hover info */
dfn {
	position:relative;
	padding:0;
  	/*background: #ccc;*/
  	font-style:normal;
  	border:none 1px rgba(0,0,0,.8);
  	cursor:help;
	}
dfn::after {
  	content:attr(data-info);
  	display:inline;
  	position:absolute;
  	top:24px; 
  	left:0;
  	width:256px;
  	padding:.5em .8em;
  	font-size:14px;
  /*font-weight: 700;*/
  	line-height:1.5em;
	border-radius: 4px;
	border: 1px solid rgba(238,116,29,1);
	background:rgba(238,116,29,.9); /*ee741d; rgba(0,0,0,.8); */
	color: #fff;
  	opacity:0;
	pointer-events:none; /* This prevents the box from apearing when hovered. */
	transition:opacity 250ms,top 250ms;
}
dfn::before {
	content:'';
	display:block;
	position:absolute;
	top:12px; 
	left:20px;
	width:0; 
	height:0;
	border:solid transparent 8px;
	border-bottom-color:rgba(238,116,29,.9); /*ee741d; rgba(0,0,0,0.8); */
	opacity:0;
	transition:opacity 250ms, top 250ms;
	}
dfn:hover {z-index:2;} /* Keeps the info boxes on top of other elements */
dfn:hover::after,
dfn:hover::before {opacity:1;}
dfn:hover::after {top:26px;} 	/* hover-box */
dfn:hover::before {top:10px;} 	/* triangle */




/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 13-03-23 */
/* SCROLL - PROGRESS */
/* link     -> https://codepen.io/MarkBoots/pen/VwbbLLV */
/* update   -> 16-07-2021 */
#progress-bar {
    position:fixed;
    height:.2rem;
    background:var(--light-bdr);
    box-shadow: 0 0px 4px rgb(0,0,0,.6);
    z-index:9999;
  }

/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 22-07-23 */
/* link	-> https://codepen.io/bowersrd/pen/BaoKGYj */
/* upd	-> 17-04-2020 */
/* desc	-> animated mouse scroll down positioned at the bottom of the page indicating the user to scroll down for more content. It also can scroll down upon being clicked if set up. */
.jump2next {
  display:block;
  position:relative;
  top:-64px; /* height of the nav-tag */
  border: 0px dashed orange;
}

.jump2article {
  display:block;
  position:relative;
  top:-142px; /* space to the nav-tag */
  border: 0px dashed orange;
}

.scroll-down {
  position:absolute;
  bottom: 6rem;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  z-index:99; /* must be 99 due to nav-tag */
}
.scroll {
  display:flex;
  width:2rem;
  height:4rem;
  border:2px solid var(--scr-dwn-col);
  border-radius:2rem;
  background:var(--scr-dwn-bgr);
  justify-content:center;
  align-items:center;
}
.scroll span {
  width:.8rem;
  height:.8rem;
  display:block;
  background:var(--scr-dwn-col);
  border-radius:50%;
  animation:cursor-slide 1.15s linear infinite;
}
.arrow-down {
  width:.8rem;
  height:.8rem;
  border:2px solid transparent;
  border-right-color:var(--scr-dwn-col);
  border-bottom-color:var(--scr-dwn-col);
  transform:rotate(45deg);
  margin-top:.3rem;
  animation:arrow-pulse 1.15s linear infinite;
}
/* animation keyframes */
@keyframes cursor-slide { 0% {opacity:0;transform:translateY(-1rem);} 100% {opacity:1;transform:translateY(1rem);} }
@keyframes arrow-pulse  { 0 {opacity:0;} 25% {opacity:.25;} 50% {opacity:.50;} 75% {opacity:.75;} 100% {opacity:1;} }

@media only screen and (max-width: 767px) {
  .scroll-down {
    display: none;
  }
}

/* im NAV des image-sliders !!! */
.jump4next {
  position: absolute;
  bottom: 24px;
  right: 200px;
  z-index:0; /* must be 99 to show behind the slider-nav */
}
.jump4scroll {
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border:1px solid rgb(0,84,149,.08);
  text-align: center;
  background: rgb(255,255,255,.0);
  transition:background 0.5s ease;
}
.jump4scroll:hover {
  border:1px solid var(--color-primary);
  background: rgb(255,255,255,.4);
  color:#fff;
}
.fa-chevron-down {
  font-size: 2rem !important;
  line-height:64px;
  color:var(--color-primary);
  position: relative;
  top: 46%;
  transform: translateY(-50%);
}

/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 04-09-23 */
/* COUNTER - postion background */
/* info -> postion of the article OR aside must be relative !!! */
/*      -> works for ALL boxes
/* link -> https://stackoverflow.com/questions/43514987/css-increasing-number-as-background-images-for-css */
/*      -> https://codepen.io/bloom-dan/pen/gLmabb */
.fbox {position:relative;}	
.fbox::before {
  display:none; 
	position:absolute;
  right:var(--count-pos-right);
  bottom:var(--count-pos-bottom);
	content:counter(Element) '';
  counter-increment:Element 1;
  font-family:var(--font-count); /* Arial */
	font-size:var(--count-size); 
	font-weight: 800;
	  -webkit-text-fill-color:transparent; /* works FF, Chrome and Edge */
	  -webkit-text-stroke:var(--count-width);
	  -webkit-font-smoothing:antialiased;
	color:var(--count-color); /* must be the same color als card-back background */
  opacity:1;
	z-index:999;
	}

/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 22-04-23 */
/* back2top - button with jscript - use in index.php */
/* link	-> https://codepen.io/RitikaAgrawal08/pen/bGoMQLm */
/* 04-01-2022 */
.back2top {
    position:fixed;
    display:flex;
    flex-direction:column;
    right:var(--b2top-pos);
    bottom:var(--b2top-pos);
    align-items:center;
    justify-content:center;
    width:var(--b2top-size);
    height:var(--b2top-size);
    border-radius:var(--b2top-bdr);
    border:1px solid rgb(0,84,149,.8); /* var(--b2top-bdrc); */
    background:rgb(255,255,255,.8); /* var(--b2top-bgr); */
    transition:background 0.5s ease;
    color:rgb(0,84,149,1); /* var(--b2top-col); */
    cursor:pointer;
    }
/* arrow to top */
.arrow2top:before {
	content:'';
	position:absolute;
	border-top:4px solid rgb(0,84,149,.6); /* var(--b2top-col); */
	border-right:4px solid rgb(0,84,149,.6); /* var(--b2top-col); */
	inset:30%;
	transform:translateY(20%) rotate(-45deg);
  	}
.arrow2top:hover {
	background:var(--b2top-bgrh);
	}
.hidden {display:none;}



/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 20-04-23 */
/* WARNING - CSS-SUPPORT */
/* shown above header - if activated */
/* show/hide warning if no container queries support */
@supports (container-type: inline-size) {.warning {display:none;}}
.warning {
	padding: 1em;
	border: 1px solid #123456;
	background: rgba(205 230 255 / 0.8);
    background: rgba(255 255 225 / 0.8);
    }
.warning p {
	margin: 0;
	padding: 0;
    font-family: 'Arial';
    text-align:center;
	color: #123456;
    }

/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 13-03-23 */
/* CHECK-SIZE
/* link -> https://codepen.io/ivan_albizu/pen/YzQWxKN */
/* 27-10-2022 */
.check-size {width:100%;}
.check-px {
    position:absolute;
    top:.3rem;
    right:.3rem;
    min-width:84px;
    padding: .06rem .4rem;
    border: 1px solid rgb(255,165,0,.6); /* #cc8400 */
    font-family:'MainFont',sans-serif;
    text-align:right;
    background:rgb(255,165,0,.2); /* #cc8400 */
    color: rgb(0,0,0,.6);
    }
/* ------------------------------------------------------------------------------ */
/* END */	
/* ------------------------------------------------------------------------------ */