/* ------------------------------------------------------------------------------ */
/* ****************************************************************************** */
/* --------- (C) Copyright 2025/2026 by machtWeb | Reinhard Lange --------------- */
/* ---------------------- machtWeb.de | relaXits@machtWeb.de -------------------- */
/* ------------------------------------------------------------------------------ */
/* update	->													                            6.00/12 - 08-04-25
/* layout	-> startpage														                                */
/* file 	-> design/design.css												                            */
/* more   -> design/fonts/fontlist.css                                            */
/* colors	-> http://www.color-hex.com | https://oklch.com		                      */
/* ------------------------------------------------------------------------------ */
@charset 'utf-8';
/* info     -> woff2-files are smaller !!! */
/* convert  -> https://transfonter.org/ */
/* ------------------------------------------------------------------------------ */
/* MAIN-FONT */
/* Geist - https://vercel.com/font */
@font-face {
  font-family:'MainFont';
  src:url('fonts/GeistVF.ttf') format('truetype');
  font-style:normal;font-stretch:normal;font-display:swap;unicode-range:U+000-5FF;
}

/* ALT-FONT */
/*
@font-face {
  font-family:'AltFont';
  src:url('fonts/B612-Regular.woff2') format('truetype');
  font-weight:100 400; 
  font-style:normal;font-stretch:normal;font-display:swap;unicode-range:U+000-5FF;
}
*/
/* ------------------------------------------------------------------------------ */
/*
@font-face {
  font-family:'MainFont';
  src:url('fonts/Electrolize-Regular.woff2') format('woff2');
  font-weight:100 400; 
  font-style:normal;font-stretch:normal;font-display:swap;unicode-range:U+000-5FF;
}
*/

/* ------------------------------------------------------------------------------ */
/* TEST ONLY !!! */
/* * {outline: 1px solid orange;} */
/* links -> text-decoration-thickness: min(0.4em, 2px); */
/* 
a {
  outline: 1px solid rgba(255,255,255,0);
  outline-offset: 5px;
  transition: outline-color .3s ease-in-out;
}

a:hover, a:focus {
  outline-color: blue;
}
*/

/* ------------------------------------------------------------------------------ */
/* COLORS - MAIN and DEFAULT                                                      */
/* link -> https://www.color-hex.com/color/333333                                 */
/*      -> https://oklch.com                                                      */
/* ------------------------------------------------------------------------------ */
/*                                                             6.00/12 - 08-04-25 */
/* ------------------------------------------------------------------------------ */
/* add - logo and icons                                                           */
/* red #f53334 - rgb(245,51,52) */
/* blue #00006a - rgb(42,0,0) */
/* orange #fe9b01 - rgb(254,155,1) */
/* green #009965 - rgb(0,153,101) */
/* ------------------------------------------------------------------------------ */
/* COLORS */
:root {
/* RED - MAIN-COLOR (from LOGO ) */
--col-blu: #28298F; /* #28298F - oklch(70.98% 0.112 226.84) - rgb(69,175,215)   - hsl(196.97 81% 65%) - blue */
--col-red: #e73132; /* #e73132 - oklch(60.52% 0.217 26.45)  - rgb(231,49,50)    - hsl(359.67 79% 55%) - red */
--col-yel: #ffcc00; /* #ffcc00 - oklch(86.52% 0.176 90.381) - rgb(255,204,0)    - hsl(48 100% 50%)    - yellow */
--col-grn: #66cc33; /* #66cc33 - oklch(75.50% 0.208 137.51) - rgb(102,204,51)   - hsl(99.98 60% 50%)  - green */
--col-gry: #707070; /* #707070 - oklch(54.52% 0 0)          - rgb(112,112,112)  - hsl(0.00	0.00 0.44) - Gray44 */
/* ADD COLORS */
--col-1st:var(--col-gry); /* #ed1d26 - oklch(60.36% 0.234 26.73)   - rgb(237,29,38)    - hsl(357.44 85% 52%) - red */
--col-2nd:var(--col-gry); /* #ff9901 - oklch(77.2% 0.173 64.51)    - rgb(255,153,1)    - hsl(35.91 100% 50%) - orange */
--col-3rd:var(--col-gry); /* #003366 - oklch(32.33% 0.102 253.88)  - rgb(0,51,102)     - hsl(210 100% 20%)   - blue */
--col-4th:var(--col-gry); /* #009965 - oklch(60.28% 0.135 160.48)  - rgb(2,153,101)    - hsl(159.43 98% 30%) - green */
--col-5th:var(--col-gry); /* #707070 - oklch(54.52% 0 0)           - rgb(112,112,112)  - hsl(0.00	0.00 0.44) - Gray44 */
/* ALT COLORS */
--col-org: #ff5800; /* #ff5800 - oklch(67.92% 0.215 39.55) - rgb(255,88,0) - hsl(20.66 100% 50%) - orange */
--col-gol: #ffd700; /* #ffd700 - oklch(88.68% 0.182 95.33) - rgb(255, 215, 2) - hsl(50.53 100% 50%) - gold (link extern animation)
/* GRAY */
--col-00: #000000; /* #000000 - oklch(0% 0 0)           - rgb(0,0,0)        - hsl(0 0% 0%)          - black */
--col-2f: #2f2f2f; /* #2f2f2f - oklch(30.52% 0 0)       - rgb(47,47,47)     - hsl(223.81 0% 18%)    - Dark Charcoal - DEFAULT */
--col-33: #333333; /* #333333 - oklch(32.11% 0 0)       - rgb(51,51,51)     - hsl(0.00 0.00 0.20)   - Dark Charcoal */
--col-47: #474747; /* #474747 - oklch(39.79% 0 0)       - rgb(71,71,71)     - hsl(0.00	0.00 0.28)   - Gray28 */
--col-5b: #5b5b5b; /* #5b5b5b - oklch(47.12% 0 0)       - rgb(91,91,91)     - hsl(0.00	0.00 0.36)   - Granite Gray */
--col-70: #707070; /* #707070 - oklch(54.52% 0 0)       - rgb(112,112,112)  - hsl(0.00	0.00 0.44)   - Gray44 */
--col-84: #848484; /* #848484 - oklch(61.33% 0 0)       - rgb(132,132,132)  - hsl( 0.00	0.00 0.52) - Gray52 */
--col-99: #999999; /* #999999 - oklch(68.3% 0 0)        - rgb(153,153,153)  - hsl(0.00	0.00 0.60)   - Gray60 */
--col-ad: #adadad; /* #adadad - oklch(74.76% 0 0)       - rgb(173,173,173)  - hsl(0.00	0.00 0.68)   - Gray68 */
--col-cc: #cccccc; /* #cccccc - oklch(84.52% 0 102.07)  - rgb(204,204,204)  - hsl(91.76 0% 80%)     - Gray80 */
--col-c1: #c1c1c1; /* #c1c1c1 - oklch(81.09% 0 0)       - rgb(193,193,193)  - hsl(0.00	0.00 0.76)   - Silver */
--col-d6: #d6d7d6; /* #d6d6d6 - oklch(87.61% 0 0)       - rgb(214,214,214)  - hsl(0.00	0.00 0.84)   - Gray84 */
--col-ea: #eaeaea; /* #eaeaea - oklch(93.7% 0 0)        - rgb(234,234,234)  - hsl(0.00	0.00 0.92)   - Mercury */
--col-f2: #f2f2f2; /* #f2f2f2 - oklch(96.12% 0 0)       - rgb(242,242,242)  - hsl(0.00 0.00	0.95)  - Gray95 - DEFAULT */
--col-f8: #f8f8f8; /* #f8f8f8 - oklch(97.91% 0 0)       - rgb(248,248,248)  - hsl(0.00 0.00	0.97)  - Alabaster */
--col-ff: #ffffff; /* #ffffff - oklch(100% 0 0)         - rgb(255,255,255)   - hsl(223.81 -173% 100%) - Whithe */

/* HEADLINES */
--col-6c: #6c6d71; /* #6C6D71 - oklch(53.52% 0.006 274.89) - rgb(108, 109, 113) - 	hsl(0.63 0.02 0.43) - Mid Gray */

/* ------------------------------------------------------------------------------ */
/* logo zvshk */
/*--col-zvs */
/* logo zveh */
/*--col-zve: #ee3439; /* #ee3439 - oklch(62.05% 0.221 25.39) - rgb(238,52,57) - hsl(358.33 85% 56.99%) - red (color) */
/*--col-yel: #ffde24; /* #ffde24 - oklch(90.13% 0.18 97.76) - rgb(255,222,36) - hsl(50.97 100% 56.99%) - yellow (background) */

/* ------------------------------------------------------------------------------ */
/* CLIENT */
  /* colors */
  accent-color:var(--col-blu);      /* oklch(60.67% 0.216 26.76) - red */
  --color-primary:var(--col-blu);   /* blue | oklch(60.67% 0.216 26.76) - red */
  /* COLORS - NEW !!! */
  /*--col-client:var(--col-red);*/
  /*--col-alter:var(--col-red);*/

  --color-dark:var(--col-2f);       /* oklch(30.52% 0 0) - black-light */
  --color-light:var(--col-f2);      /* rgb(242,242,242,1) - white-light */

  --container-color:var(--col-ff);  /* for wrapper and main */

  /* text and link colors */
  --txt-col-def:oklch(30.52% 0 0);                /* #2f2f2f - black-light */
  --txt-col-lnk:oklch(61.33% 0 0);                /* #848484 - Gray52 */
  /*--txt-col-lnk:oklch(32.11% 0 0);              /* #333333 - Dark Charcoal */
  /* text - shadow for headlines */
  --txt-shadow: 0 2px 2px rgb(47,47,47,.8);     /* rgb(0,0,0,.2); - better readablity */

  /* main */
  --main-col: rgb(47,47,47,1);    /* #2f2f2f; */        /* black-light */
  --main-bgr: rgb(255,255,255,.8); /* #f2f2f2; */        /* white-light */
  /* headlines - colors */
  --main-col-h1:oklch(60.67% 0.216 26.76);      /* #e73332 - Cinnabar (red) */
  --main-col-h2:oklch(53.52% 0.006 274.89);     /* #6C6D71 - Mid Gray */ 
  --main-col-h3:oklch(53.52% 0.006 274.89);     /* #6C6D71 - Mid Gray */

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

  /* fonts available */
  --font-body: 'MainFont','AltFont','B612','Montserrat','Arial','Verdana','Helvetica','Roboto','Segoe UI',system-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), 3.55rem);    /* 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.25rem);    /* 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;

  /* nav */
  --nav-bgr-def: rgb(242,242,242,1); /* #f2f2f2; */ /* white-light */
  --nav-bgr-hov:var(--color-primary);
  --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: 80ch;           /* 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: 512/256;         /* aspect-ratio for header-logo (desktop) */
  --img-bdr-col: 1px solid rgb(47,47,47,.2);
  --img-bdr-rnd: 6px;          /* border-radius - def/max 1.6rem */

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

  /* details and summary | accordion */
  --det-bgr-col: oklch(96.12% 0 0);
  --det-bdr-col: oklch(39.79% 0 0 / 30%);
  --det-bdr-rnd: .4rem;           /* border-radius - def/max 1rem */
  --det-shadow:  0 8px 8px rgb(47,47,47,.2);

  /* BLOCKQUOTE - ASIDE */
  --blq-col-sign:#28298F;      /* #45afd7 - blue client */
  --blq-bgr-ibox:oklch(93.7% 0 0 / 60%);          /*  - Mercury */

/* BOX / CARDS / COUNTER-UP */
  --box-bgr-counter:oklch(93.7% 0 0 / 80%);       /* gray */
  --box-col-border:oklch(93.7% 0 0 / 60%);        /* Mercury */
  --box-radius: .4rem;
  --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:oklch(93.7% 0 0 / 80%);        /* Gray */
  --list-line:oklch(81.09% 0 0 / 60%);      /* 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:var(--col-gol); /* gold; */
  --link-ext-yellow:var(--col-yel); /* gold; */
  --link-ext-blue:rgb(0,0,0,.8); /* blue !!! rgb(0,84,149,1); */
  --link-int-hover:var(--color-primary); /* self rgb(204,0,0,1); */

  /* footer */
  --foot-col-text:  rgb(255,255,255,1);
  --foot-col-head: var(--color-primary);
  --foot-bgr-area:  oklch(93.7% 0 0 / 60%);               /* self none;     /* def with color - but none; ia also good */
  --foot-bdr-color: oklch(39.79% 0 0 / 20%);            /* Gray28 - top only */
  --foot-gap-size:  1rem;                               /* def 1rem */
  --foot-pad-size:  1rem;                               /* def 1rem */
  --foot-bgr-box-o: rgb(255,255,255,.04);                /* address-box 1st */
  --foot-bgr-box-e: rgb(255,255,255,.04);                /* address-box 2nd */
  --foot-bgr-box-h: rgb(255,255,255,.04);                /* address-box hover - complete */
  /* footer -> additional */
  --foot-bdr-area:  0px;                      /* 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 */
  
  /* table - impressum -> see add-table.css */
  --txt-col-1st:oklch(32.11% 0 0);                      /* Dark Charcoal */
  --set-tab-width:calc(100% - 2em);                     /* 100% minus 2em (1em for each side) */
  --set-tab-margin: 2em auto;                           /* set table better to headlines and text */
  --set-tab-border: 1px solid rgb(234,234,234,.4);    /* #eaeaea; */
  --set-tab-empty: rgb(234,234,234,.2);               /* #eaeaea; */

  /* accordion - impressum -> see add-accordion.css */
  --set-acc-width:calc(100% - 2em);
  --set-acc-margin: 2em auto;
  --set-acc-sum-hover: oklch(60.67% 0.216 26.76);       /* #e73332 - rgb(231,51,50) - Cinnabar (red) */

  /* accent - box4back / triangle */
  --box-4back-light: rgb(204,204,204,.4);   /* gray-light */
  --box-4back-dark:var(--det-bgr-col); /* rgb(0,84,149,.08);      /* blue-light */
  --box-4triangle: rgb(234,234,234,.8);        /* black-light */
  --box-4all-size: 256px;                     /* def 256px for all accent-boxes */
  --box-bdr-width: 1px solid;                 /* same - except triangle */
  --box-bdr-rnd: .8rem;                      /* 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 ;

  /* tagcloud - add-on */
  --tag-col-1:var(--color-primary);     /* main client-color */
  --tag-col-2:oklch(30.52% 0 0 / 80%);  /* gray */
  --tag-col-3:oklch(30.52% 0 0 / 85%);  /* gray */
  --tag-col-4:oklch(30.52% 0 0 / 90%);  /* gray */

  /* text-rotate - add-on */
  --rot-col-0:var(--col-99);            /* gray for pre-text and aft-text */
  --rot-col-1:var(--col-blu);           /* blue */
  --rot-col-2:var(--col-red);           /* red */
  --rot-col-3:var(--col-yel);           /* yellow/orang */
  --rot-col-4:var(--col-grn);           /* green */
  --rot-col-5:var(--col-gry);
  --rot-col-6:var(--col-gry);

  /* sitemap - buttons */
  --btn-txt-col: oklch(93.7% 0 0);        /* white */
  --btn-bgr-col: oklch(96.12% 0 0);       /* mid gray - NO transparence due to lines */
  --btn-bgr-1st: oklch(96.12% 0 0);
  --btn-bgr-2nd: oklch(87.61% 0 0);       /* #28bf5e; green */
  --btn-bgr-3rd: oklch(81.09% 0 0);
  --btn-bgr-4th: oklch(74.76% 0 0);
  --btn-bdr-col: oklch(81.09% 0 0);
  --btn-bdr-radius: 4px;

  /* user select */
  --selc-col: rgb(242,242,242,1); /* #f2f2f2; */ /* withe-light */
  --selc-bgr: oklch(60.67% 0.216 26.76 / 80%);   /* #e73332; */ /* red */

  /* 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 */

  /* 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;

}
/* ------------------------------------------------------------------------------ */
/* 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:var(--color-primary); /* self #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;text-decoration:none;}
/* 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 - 08-11-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:100;
    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);
    }

/* ------------------------------------------------------------------------------ */
/*                                                                DEACTIVATED !!! */
/* DARK-MODE                                                                      */
/* ------------------------------------------------------------------------------ */
/* link ->  https://blog.logrocket.com/three-ways-style-css-box-shadow-effects/   */
/*
@media (prefers-color-scheme: dark) {
    body {
        background:var(--dark-bgr);
        color: var(--dark-col);
    }
    nav {
        background: #222 !important;
        
        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) 
    }

    a:hover {color: #222;}
    .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:60;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:100;max-inline-size:80ch;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:var(--main-col-h2);}
h3            {max-width:var(--art-mh3-char);font-size:var(--font-size-h3);color:var(--main-col-h3);}
h4            {max-width:100%;/*var(--art-mh4-char);*/font-size:var(--font-size-h6);margin:.6em 1rem;padding:1% 2%;color:oklch(39.79% 0 0 / 70%);
                border:1px solid var(--color-primary);border-width:0 0 0 8px;}
h5            {max-width:var(--art-mh4-char);font-size:var(--font-size-h5);}

h2::first-letter {text-transform:uppercase;}
h3            {max-width:var(--art-mh6-char);margin:var(--art-mh6-spc);font-size:var(--font-size-h6);color:var(--main-col-h3);font-weight:80;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:65; /* self 100; */text-wrap:pretty;color:var(--color-dark);border:0px solid orange;}
p:first-of-type {margin-top:.6em;}
p:last-of-type  {margin-bottom:.6em;}

u               {font-weight:100;}

/* 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:var(--col-70);}
.txt-list li      {max-width:initial;padding:1px 0;font-size:1rem !important;font-family:'MainFont';color:var(--col-70);} /* list within imprint -> copyright AND datenschutz DNT */
.pdf-date-size    {display:inline-block;margin:.6em .2em;padding:.4em .4em .3em .4em;font-size:1rem;background:var(--det-bgr-col);color:var(--main-col-h3);border:1px solid var(--det-bdr-col);border-radius:4px;}

.centered        {text-align:center;}

/* LINKS */
/* add-link - with class in html-tag <a class="add-link" ...> */
.add-link       {color:var(--color-dark);text-decoration:none;}
.add-link:hover {color:var(--color-primary);}

/* col-link - with underline */
.col-link       {color:var(--color-dark);text-decoration:none;}
.col-link:hover {color:var(--color-primary);text-decoration:underline;text-underline-offset:4px;}

/* ani-link - with hover-background */
/* https://codepen.io/argyleink/pen/poEjvpd - 23-08-2021 */
.ani-link               {position:relative;padding:0 .1em 0 0;color:var(--color-dark);text-decoration:none;}
.ani-link::before       {transform:scaleX(0);transform-origin:bottom right;}
.ani-link:hover::before {transform:scaleX(1);transform-origin:bottom left;}
.ani-link::before       {content:'';position:absolute;display:block;top:0;right:0;bottom:0;left:0;inset:0 0 0 0;background:gold;/*hsl(60 80% 80%);*/z-index:-1;transition:transform .8s ease;} /* self hsl(200 100% 80%) */

/*ul, ol        {max-width:60ch;padding-inline-start:1em;}*/
.hint-color     {letter-spacing:1px;font-weight:100;color:oklch(70.98% 0.112 226.84);}                   /* blue - darker than client-color */
.hint-bold      {letter-spacing:1px;font-weight:100;color:oklch(54.52% 0 0);}                           /* dark-gray */
.hint-line      {letter-spacing:1px;font-weight:100;color:oklch(54.52% 0 0);/*text-decoration:underline;text-underline-offset:12px;*/border:1px solid;border-width:0 0 1px 0;} /* dark-gray and underline */

hr              {margin: 1em 0;border:1px solid rgb(108,109,113,.2);border-width:0 0 1px 0;}
.line-thin      {margin: 1em 0;border:1px solid rgb(108,109,113,.2);border-width:0 0 1px 0;}
.line-col       {border-color:var(--color-primary);}      /* add color for the line */
.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%;}

/* img clear-float - see modal-box */
.clear-float    {clear:both;}

/* 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;
  }
}

/* ------------------------------------------------------------------------------ */
/*                                                                6.02/00 - 19-10-23
/* VCARD - flexbox with contact-data and logo - ie jobs / datenschutz / bewerbung */ 
/* use-in -> client/data/vcard.dat.php                                            */
/* ------------------------------------------------------------------------------ */
.box-contact {
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  margin: 1rem;
  border:1px solid var(--list-line);
  border-radius:var(--box-radius);
}
.box-flex {
  flex:1;
  max-width:50%;
  box-sizing:border-box;
  padding:10px;
}
.box-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  border: 1px solid var(--list-line);
  border-width:0 1px 0 0;
  background:rgb(0,0,0,.02);
}
.box-text p {
  margin:0;
  font-size:1.06rem;
  color: oklch(47.12% 0 0);
}
.box-logo {
  display:flex;
  justify-content:center;
  background:none;
}
.box-logo-img {
  width:auto;
  height:auto;
  border:none !important;
  max-width:100%;
  max-height:100%;
  aspect-ratio: auto 1 / 1;
}
@media screen and (max-width: 768px) {
  .box-contact {
    flex-direction:column;
    max-width:96%;
    margin:1em auto;
  }
  .box-flex {
    max-width:100%;
  }
  .box-text {
    border-width:1px 0 0 0;
  }
  .box-logo {
    order:-1;

  }
  .box-logo-img {
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
  }
}

/* ------------------------------------------------------------------------------ */
/* CLAIM-TEXT in FOOTER-BOX under LOGO and VCARD */
.claim-text     {margin:.6em 0 0 0;padding:.6em 0 0 0;font-size:1.2rem !important;font-weight:80;text-align:center;border:1px solid var(--col-gry);border-width:1px 0 0 0;}
.claim-color-1  {color:var(--col-1st);} .claim-color-2 {color:var(--col-2nd);} .claim-color-3 {color:var(--col-3rd);} .claim-color-4 {color:var(--col-4th);} .claim-color-5 {color:var(--col-5th);}
/* dot-pulse -> https://codepen.io/mananrvyas/pen/QWJeymr - 14-08-2023 */
.claim-dot      {display:inline-block;width:6px;height:6px;margin:0 4px 3px 4px;border-radius:50%;background:var(--col-red);animation: dot-pulse 2s infinite linear;}
/*.claim-dot:nth-child(1) {animation-delay:0.0s;} .claim-dot:nth-child(2) {animation-delay:0.25s;} .claim-dot:nth-child(3) {animation-delay:0.50s;}*/
@keyframes dot-pulse {0% {transform: scale(0);} 30% { transform: scale(1.2); } 60%, 100% { transform: scale(0);}}

/* ------------------------------------------------------------------------------ */
/* 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;
  font-family:var(--font-body); /* 'MainFont'; */
  background: var(--list-bgr);
  border: 0px solid orange;
  border-radius:var(--img-bdr-rnd); /* same aas images */
}
.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: 80;
  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;
  }
}

/* LIST1COLUMN */
/* CSS für eine einzelne Spalte */
.list1col {
  /* max-width: calc(100% - 1.4em); */
  max-width: calc(100% - 0em);
  margin: 0 auto;
  padding: 0;
  font-family:var(--font-body); /* 'MainFont'; */
  /*background: var(--list-bgr);*/
  border: 0px solid orange;
}

.list1col img {
  width: 100%;
  height: auto;
  border: 1px solid var(--img-bdr-col);
}

.list1col ul {
  padding: .6em 0;
  list-style: none;
  border: var(--list-bdr) solid var(--list-line);
  font-size: initial;
  column-count: 1; /* Nur eine Spalte */
}

.list1col 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: 100;
  hyphens: auto;
}

.list1col li:before {
  content: var(--list-marker); /* "\f054"; */
  position: absolute;
  top: .1em;
  left: -2px;
  font-family: 'FontAwesome';
  font-size: 1rem;
  color: var(--color-primary);
}

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

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

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

/* ICONS - white and transparent */
.color-1st  {background:var(--col-1st);}
.color-2nd  {background:var(--col-2nd);}
.color-3rd  {background:var(--col-3rd);}
.color-4th  {background:var(--col-4th);}

/* 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;}


/*
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 */
blockquote    {max-width:100%;margin:0 0 0 1rem;padding-inline-start:1em;border-inline-start:.6rem solid var(--blq-col-sign);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;
}

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

/* figure and caption with hover-effekt for vopyright */
/* link -> https://codepen.io/nxworld/pen/dRQxGP */

.snip1566 {
  position: relative;
  display: block;
  max-width: 50%;
  margin: 0 auto;
  padding: 0;
  font-size:1rem; /* must be so !!! due height of figcaption */
  text-align: center;
  cursor:auto;
  overflow: hidden;
}

.snip1566.color-def {color: #fff;} /* 1 | 0 */
.snip1566.color-lgt {color: #999;} /* 2 */
.snip1566.color-mid {color: #666;} /* 3 */
.snip1566.color-drk {color: #333;} /* 4 */
.snip1566.color-blk {color: #000;} /* 5 */

/*
.snip1566 img {
  width: 100%;
  height: auto;
  opacity: 1;
}
*/

.snip1566 img {
  width: 50%;        /* Skalierung auf 70% der Containerbreite */
  max-width: 720px;
  height: auto;
  display: block;    /* notwendig, damit margin: auto greift */
  margin: 0 auto;    /* zentriert horizontal */
  opacity: 1;
}

section.centered {
  display: block;
  width: 100%;
  max-width: 960px; /* self 960px;    /* oder 100% wenn keine Begrenzung */
  margin: 0 auto;
  padding: 2rem 1rem;  /* etwas Abstand */
  text-align: center;
}

.change-table {
  width: 100%;
  max-width: 800px;
  margin: 2rem auto;
  border-collapse: collapse;
  text-align: left;
  font-size: 1rem;
}

.change-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #ddd;
  vertical-align: top;
}

.change-table td strong {
  color: #FE0306; /* oder deine Client-Farbe */
  white-space: nowrap;
}

.change-table .center-row {
  text-align: center;
  padding-top: 1.5rem;
  /*font-weight: bold;*/
  font-size: 1.4rem;
  border: none;
}

.label-bleibt {
  display: inline-block;
  padding: 0.25em 1em;
  background-color: #121487; /* deine Akzentfarbe */
  color: #fff;
  border-radius: 4px;
  font-size: 1.1rem;
  font-weight: normal;
}



.snip1566 figcaption {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  right: 0;
  bottom: 16px;
  left: 1rem;
  height: auto; /* Höhe nicht festlegen, damit der Inhalt sie bestimmt */
  width: calc(100% - 2rem);
  /*background: rgba(0, 0, 0, 0.4);*/
  border: 1px solid rgba(204,204,204,.8);
  border-width: 1px 0 0 0;
  border-radius: 0 0 4px 4px;
  overflow: hidden;
  transition: opacity 0.6s;
  opacity: 0;
}

.snip1566:hover figcaption {
  opacity: 1;
}

.snip1566 h6 {
  margin: 0;
  font-size: 1.1rem;
  text-align: center;
  line-height: 2.4; /* Anpassen des Zeilenabstands (padding in der vertikalen) */
}

.snip1566 .caption-copy {
  font-size: 0.8rem;
  align-self: flex-end; /* Rechts ausrichten */
  padding: 0 8px 8px 0; /* Abstand zwischen h6 und caption-copy in der vertikalen */
}

/* link -> https://codepen.io/argyleink/pen/vYbEXMZ */
.adaptive-glass {
  --glass-lightness: 100%;
  --glass-alpha: 50%;
  
  background: hsl(0 0% var(--glass-lightness) / var(--glass-alpha));
  -webkit-backdrop-filter: blur(40px);
          backdrop-filter: blur(40px);
}
  
  .dark .adaptive-glass {
    --glass-lightness: 0%;
  }
  
  .reduced-transparency .adaptive-glass {
    --glass-alpha: 85%;
  }
  
  @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {.adaptive-glass {
    background: hsl(0 0% var(--glass-lightness) / 90%)
}
  }

/* 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 - 12-10-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: 400px;
  right: 5vw;
  /*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 - style for better background-images - should be always white */
.overlay-color {
  position:absolute;
  top:0;
  right:0;
  left:0;
  width:100%;
  height:100%;
  background: rgb(255,255,255,.80);
}

/* overlay - full screen - for background-image - acc to menu-item */
.overlay-items {
  position:absolute;
  top:0;
  right:0;
  left:0;
  width:100%;
  height:100%;
  background: rgb(255,255,255,.86); /* self .86 */
  /*background:rgb(204,204,204,.4);*/
  }


/* numbers - horizontal - max. 2 items and/or hr-line */
.overlay-year {
  position:fixed;
  bottom:6vw; /* self 290px; */
  right:4vw; /* self 24px; */
  font-size:5rem;
  font-family:'MainFont';
  font-weight:70; /* self bold; */
  text-align:center;
  text-shadow: 2px 2px 4px rgb(0,0,0,.06);
  color: rgb(0,0,0,.06);
  }
/* line horizonzal - between years */
.overlay-line {
  border:1px solid rgb(0,0,0,.06);
  border-width:0 0 1px 0;
}

/* text - vertical - with animation fade-in */
/* see  -> start.def.pgp */
.overlay-text {
  position: fixed;
  top: 26.8vh;
  left: 0;
  font-size: clamp(2rem, 4vw, 4rem); /* Größenanpassung mit clamp() */
  font-weight: 80;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.04);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  transform-origin: right center;
  border: 1px solid rgb(0, 0, 0, .06);
  border-width: 0 0 0 4px;
  color: rgb(0, 0, 0, .06);
  opacity: 0;
  animation: fadeIn 3s ease-in-out forwards;
}

@media (max-width: 1600px) {
  .overlay-text {
    display: none; /* Verstecke bei einer Bildschirmbreite von 1600px oder kleiner */
  }
}

@media (min-width: 1601px) and (max-width: 1920px) {
  .overlay-text {
    font-size:clamp(1rem, 4vw, 3rem); /* Größe für den Bereich von 1601px bis 1920px im vertikalen Schreibmodus */
  }
}

@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: .6; } }


/* max-width: 768px OR max-width: 1020px */
@media (max-width: 1020px) {
  .background-items, .overlay-year, overlay-line {
    display: none;
  }
}

/* ------------------------------------------------------------------------------ */
/* HEADER                                                      6.00/00 - 11-09-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);
  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 0;border:0px solid red;}
.logo-right           {display:flex;justify-content:center;align-items:center;width:100%;height:auto;margin: 24px 6px;padding:8px;border:0px solid orange;}
*/
/* ------------------------------------------------------------------------------ */
/* CHECK IMAGE-SIZE ALWAYS - proposal from chat-gpt ------------------------- !!! */
/*
.desktop-logo {
  aspect-ratio:var(--img-logo-ar);
  max-width:100%;
  height:auto;
}
@media screen and (max-width: 768px)  {.desktop-logo {max-width: 80%;height:auto;}}
@media screen and (max-width: 1280px) {.desktop-logo {max-width: 85%;height:auto;}}
@media screen and (min-width: 1281px) {.desktop-logo {width: 90%;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 */
.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 */
@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: 0px solid rgba(0, 0, 0, 0.08);
}


/* 2. ONE IMAGE left (30% width) and TEXT right vertical centered */
/* 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 -1rem; /* Negative Margin, um den Abstand auszugleichen */
}

.image-container {
  flex: 1;
  margin: 2rem 1rem;
  padding: 0 1.25rem;
  display: flex;
  align-items: center; /* Vertikal zentrieren */

  border: 1px solid #ccc;
  border-width: 0 0 1px 1px;
  border-radius: 0 0 0 6px;
}
/* Klassen für verschiedene Border-Farben */
.bdr-col-1 {border-color:var(--col-1st);}
.bdr-col-2 {border-color:var(--col-2nd);}
.bdr-col-3 {border-color:var(--col-3rd);}
.bdr-col-4 {border-color:var(--col-4th);}
.bdr-col-5 {border-color:var(--col-5th);}

.image-wrapper {
  width: 30%; /* 30% Breite für das Bild */
}

.text-content {
  flex: 1; /* Nimmt den verbleibenden Platz ein */
  text-align: left; /* Links ausgerichteter Text */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Vertikal zentrierter Text */
}

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

.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 */
  }
}

/* ------------------------------------------------------------------------------ */
/* image right and text left - new from chatgpt */

.text-beside-image {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.text-beside-image .logo {
  max-width: 100%;
  width: auto;
  height: auto;
  border: none;
}

@media (min-width: 768px) {
  .text-beside-image {
    flex-direction: row-reverse;
  }

  .text-beside-image .logo {
    max-width: 50%;
    align-self: flex-start;
  }

  .text-beside-image .text2image {
    max-width: 50%;
  }
}

/* Standardstile für das Bild und den Text */
.image-container {
  display: flex;
  flex-direction: column; /* Auf kleinen Bildschirmen wird der Text unter dem Bild angezeigt */
  align-items: flex-start; /* Der Text beginnt oben */
  position: relative; /* Für die Positionierung des Zusatztexts */
  overflow: hidden; /* Verhindert das Überlaufen des Captions über das Bild */
}

.image-container .logo {
  max-width: 100%; /* Das Bild nimmt die volle Breite auf kleineren Bildschirmen */
  width: auto;
  height: auto;
  border: none;
}

.image-container .image-caption {
  position: absolute;
  bottom: -22px; /* Am unteren Bildrand anliegen */
  left: 0;
  width: 100%;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.7); /* Hintergrund mit leichter Transparenz */
  padding: 10px;
  margin: 0;
  opacity: 0; /* Anfangs unsichtbar */
  transition: opacity 0.3s ease-in-out; /* Sanfter Übergangseffekt */
  font-size: 0.9rem; /* Kleinere Schriftgröße */
  transform: translateY(100%); /* Startposition unten, ausgeblendet */
}

/* Hover-Effekt für den Zusatztext */
.image-container:hover .image-caption {
  opacity: 1; /* Bei Hover auf 100% sichtbar machen */
  transform: translateY(-100%); /* Text von unten nach oben einblenden */
}

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

.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 {
  margin-top: 16px; /* Neues Margin oben */
  padding: 16px;
  border: var(--box-bdr-col);
  border-radius: var(--box-bdr-rnd);
  box-sizing: border-box; /* Füge diese Zeile hinzu */
  font-family:var(--font-body);
  background: var(--color-primary);
  color: #fff;
}

.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(--blq-bgr-ibox);
  color:var(--color-dark);
}
.testimonial blockquote:before,
.testimonial blockquote:after {
  content: "\201C";
  position: absolute;
  line-height: 1;
  font-size: 96px; /* self 80px */
  font-style: normal;
  color:var(--blq-col-sign); /* red */
}
.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(--blq-bgr-ibox);
}
.testimonial p {
  margin: -4px 0 0 32px;
  text-align:left;
  font-size: 1rem;
  color:var(--color-dark);
  border: 0px solid orange;
}

/* ------------------------------------------------------------------------------ */
/* CSS für das Container-Div (bleibt unverändert) */
.image-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: .4em;
}
/* CSS für die flexiblen Bilder */
.image-container .flexible-image {
  max-width: 100%;
  /*height: 128px;*/
  padding:.4em .6em;
  border: 1px solid var(--det-bdr-col);
  border-radius:var(--det-bdr-rnd);
}

/* ------------------------------------------------------------------------------ */
/* UPDATE for each menu-item                                   6.00/00 - 02-11-23 */
/* ------------------------------------------------------------------------------ */
.footer-copyright {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1em;
  margin: .6em 0 0 0;
  padding: .6em;
  font-size: .8rem;
  border: 1px solid #f2f2f2;
  border-width: 0 0 0 0;
	color:gray;
}

.add-update {
  position: relative;
  line-height:1rem;
  padding: 2px;
  text-align:right;
  border:1px solid transparent;
  border-radius:var(--btn-bdr-radius);
	background: transparent;
}
.add-update:hover {
  border:1px solid var(--btn-bdr-col);
  color:var(--color-primary);
}
.add-copyright ul {
  margin:0;
  padding:0;
  list-style:none;
}
.add-copyright li {
  padding:2px 0;
}
/* NO-SHOW für Smartphones */
@media (max-width: 480px) {
  .footer-copyright {display:none;}
}

/* ------------------------------------------------------------------------------ */
/* FOOTER - FLEXBOX                                            6.00/00 - 19-10-23 */
/* ------------------------------------------------------------------------------ */
/* SEE footer.css

/* ------------------------------------------------------------------------------ */
/* 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 - 11-09-23 */
/* SCROLL - PROGRESS */
/* link     -> https://codepen.io/MarkBoots/pen/VwbbLLV */
/* update   -> 16-07-2021 */
#progress-bar {
    position:fixed;
    height:.2rem;
    background:var(--color-primary); /* self (--light-bdr); */
    box-shadow: 0 0px 4px rgb(0,0,0,.6);
    z-index:9999;
  }

/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/02 - 19-11-23 */
/* SVG Text Underline */
/* use  -> index.php
/* https://codepen.io/iam_aspencer/pen/qvNPBv */
/* 06-03-2019 */
/* ------------------------------------------------------------------------------ */
/* CONTENT - MARK-UNDERLINE */
.mark-underline {
  position:relative;
}
.mark-underline::after {
  content:'';
  position:absolute;
  right: -0.5rem;
  bottom: -0.5rem; /* self -0.125rem; */
  left: -0.5rem;
  height: 0.75rem;
  background-image: url('./specials/underline.svg');
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
}
p > .mark-underline {
  font-weight:70;
}
p > .mark-underline::after {
  right: -0.25rem;
  bottom: -0.5rem; /* self -0.2rem; */
  left: -0.25rem;
  height: 1rem; /* self 0.5rem; */
}

/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 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:-54px; /* self -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;
  }
}

/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/04 - 21-11-24 */
/* u.a. im NAV des image-sliders !!!                                              */
/* ------------------------------------------------------------------------------ */
.jump4next {
  position:absolute;
  right:200px;
  bottom:64px;
  margin-right:128px;
  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 {
  position: relative;
  top:46%;
  line-height:64px;
  font-size: 2rem !important;
  color:var(--color-primary);
  transform: translateY(-50%);
}
/* no-show for ipad/iphone */
@media (max-width: 1024px) {.jump4next {display:none;}}

/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 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/04 - 19-11-24 */
/* 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(231,51,50); /* var(--b2top-bdrc); */
    background:rgb(255,255,255,.8); /* var(--b2top-bgr); */
    transition:background 0.5s ease;
    color:rgb(231,51,50); /* var(--b2top-col); */
    cursor:pointer;
    }
/* arrow to top */
.arrow2top:before {
	  content:'';
	  position:absolute;
	  border-top:4px solid rgb(231,51,50); /* var(--b2top-col); */
	  border-right:4px solid rgb(231,51,50); /* var(--b2top-col); */
	  inset:30%;
	  transform:translateY(20%) rotate(-45deg);
  	}
.arrow2top:hover {
	  background:rgb(242,242,242); /* self var(--b2top-bgrh); */
	}
.arrow2top:hover:before {
    transform: translateY(10%) rotate(-45deg); /* Bewegung */
    border-color: rgb(200, 51, 50); /* Farbänderung */
}
.hidden {display:none;}

/* ------------------------------------------------------------------------------ */
/* MODAL    -> see modal.css */
/* CALENDAR -> see modal.css */

/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 15-11-23 */
/* SNOWFLAKES - month 12 only !!!                                                 */
/* jquery -> must NOT be activated                                                */
/* use    -> tools/main/function/snowflakes.add.php                               */
/* https://codepen.io/DesignCodeBuild/pen/GyNVbY - 04-01-2021                     */
/* ------------------------------------------------------------------------------ */
/* SNOWFLAKES TYPE 1 */
#snowflakeContainer {position:absolute;left:0;top:0;}

.snowflake {
  position:fixed;
  padding-left:16px;
  line-height:24px;
  user-select:none;
  font-size: 16px;
  color: rgba(204,204,204,.6);
}
.snowflake:hover {cursor:default;}

/* NO-SHOW - tablet and smartphone */
@media (max-width: 1024px) {.snowflake {display:none;}}

/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/04 - 17-11-24 */
/* SNOW ON TOP OF THE ROOF                                                        */
/* https://codepen.io/nicolasjesenberger/pen/YzBJVLw - 05-12-2023                 */
/* ------------------------------------------------------------------------------ */
/* SNOW2ROOF */
.snow2roof {
  position:relative;
  width:100%;
  min-width:8em;
  padding: 8px 16px;
  border:1px solid transparent;
  border-radius:6px;
  color: #fff;
  background-image:linear-gradient(to bottom, #f12828, #a00332, #9f0f31), linear-gradient(to bottom, #ae0034, #6f094c);
  background-clip:padding-box, border-box;
  background-origin:padding-box, border-box;
  box-shadow:inset 0 1px rgba(255, 255, 255, 0.25), inset 0 -1px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.25);
  transition-property:transform, filter;
  transition-duration:.2s;
  will-change:transform;
  resize:both;
}
.snow2roof:active {
  transform:scale(0.92);
  filter:brightness(0.8);
}
.snow2roof::after {
  --overflow-x: 4px;
  --snow-image: url('../images/specials/snow2roof.webp');
  content:'';
  position:absolute;
  top:-6px;
  left:calc(var(--overflow-x) * -1);
  width:calc(100% + var(--overflow-x) * 2);
  height:28px;
  border-image-source:var(--snow-image);
  border-image-slice:calc(6 * 56 / 20) fill;
  border-image-width:calc(28px / 3);
  border-image-repeat:round;
  filter:drop-shadow(0 2px 1px rgba(0, 0, 0, 0.25));
  opacity:1;
  -webkit-animation:fade-in 4s;
          animation:fade-in 4s;
}

/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/04 - 08-12-24 */
/* SANTA2HAT - left and right                                                     */
/* https://codepen.io/nicolasjesenberger/pen/QWYZEWZ - 05-12-2023                 */
/* ------------------------------------------------------------------------------ */
/* SANTA2HAT */
.santa2hat {
  position:absolute;
  /*top: -15px;*/
  /*left: -17px;*/
  height:44px;
  filter:drop-shadow(0 2px 1px rgba(0, 0, 0, 0.25));
  -webkit-animation:fade-in 6s;
  animation:fade-in 6s;
  z-index:+1;
}
.hat2left         {top:-15px;left:-17px;}
.hat2right        {top:-15px;right:-17px;}
.img-rotate-left  {transform:scaleX(-1);}
/* DO NOT TOUCH !!! animation for both accents */
@-webkit-keyframes fade-in { 0%, 50% {opacity:0;} 100% {opacity:1;}}
@keyframes fade-in { 0%, 50% {opacity:0;} 100% {opacity:1;}}

/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 15-11-23 */
/* SNOWFLAKES - month 12 only !!!                                                 */
/* jquery -> MUST be activated                                                    */
/* use    -> tools/main/function/snowflakes.add.php                               */
/* ------------------------------------------------------------------------------ */
/* SNOWFLAKES TYPE 2 */
/*
@keyframes falling { from { top: -24px; } to { top: 1600px; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
.snow-container {overflow:hidden;position:relative;}
#flake {
  position:absolute;
  top:-64px;
  font-size:10px;
  color: rgba(204,204,204,.6);
  animation:falling 20s forwards, fadeOut 6s 12s forwards;
}
@media (min-height: 1728px) { #flake { display:none; } }
*/
/* INFO
falling 15s forwards: Die Schneeflocke (#flake) wird über einen Zeitraum von 20 Sekunden animiert, 
um von der Anfangsposition oben (top: -24px) auf die gewünschte Endposition (top: 1600px) zu fallen. 
Das forwards bewirkt, dass die Endposition beibehalten wird, nachdem die Animation abgeschlossen ist.
fadeOut 6s 12s forwards: Die fadeOut-Animation beginnt 12 Sekunden nach Beginn der falling-Animation 
(das ist der 12s-Wert) und dauert 6 Sekunden lang. 
Während dieser Zeit wird die Schneeflocke ausgeblendet (opacity: 0). Auch hier wird durch forwards 
sichergestellt, dass die Endwerte der Animation beibehalten werden.
*/

/*
.snowflake_one {color:rgba(206,206,206,1.00);}
.snowflake_all {color:rgba(206,206,206,0.70);z-index: 99999;}	
*/

/* ------------------------------------------------------------------------------ */
/* END */	
/* ------------------------------------------------------------------------------ */