/* ------------------------------------------------------------------------------ */
/* ****************************************************************************** */
/* --------- (C) Copyright 2025/2026 by machtWeb | Reinhard Lange --------------- */
/* ---------------------- machtWeb.de | relaXits@machtWeb.de -------------------- */
/* ------------------------------------------------------------------------------ */
/* update	->													                            7.00/00 - 30-01-25
/* layout	-> startpage														                                */
/* file 	-> design/design.css												                            */
/* more   -> design/fonts/fontlist.css                                            */
/* colors	-> http://www.color-hex.com | https://oklch.com		                      */
/*        -> https://wiki.selfhtml.org/wiki/Farbe/Farbangaben                     */
/*        -> https://materialui.co/colors                                         */
/*        -> https://codepen.io/raphaelgoetter/pen/GgKPLrP                        */
/* ------------------------------------------------------------------------------ */
@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;
}
*/

/* ------------------------------------------------------------------------------ */
/* ROOT */
:root {

  /* DEFAULT - MAIN-COLOR (from LOGO ) */
  --col-red: #EF1C24; /* #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-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) */
  --col-blu: #45afd7; /* #45afd7 - oklch(70.98% 0.112 226.84) - rgb(69,175,215)   - hsl(196.97 81% 65%) - blue */
  --col-grn: #66cc33; /* #66cc33 - oklch(75.50% 0.208 137.51) - rgb(102,204,51)   - hsl(99.98 60% 50%)  - green */
  --col-pnk: #ff00ff; /* #ff00ff - oklch(70.17% 0.322 328.36) - rgb(255,0,255)    - hsl(300 100% 50%)   - pink */ 
  --col-gry: #707070; /* #707070 - oklch(54.52% 0 0)          - rgb(112,112,112)  - hsl(0.00	0.00 0.44) - Gray44 */

  /* SYSTEM - BODY -> TEXT, BACKGROUND AND BORDER */
  --bdy-text:   #0d0d0d; /* #0d0d0d - oklch(15.91% 0 0) - rgb(13,13,13)     - hsl(223.81 0% 5%)   - black OR #1A1A1A OR #333333 FROM #000 */
  --bdy-back:   #fafafa; /* #fafafa - oklch(98.51% 0 0) - rgb(250,250,250)  - hsl(223.81 0% 98%)  - white OR #F8F8F8 OR #EDEDED FROM #fff */
  --bdy-border: #8a8a8a; /* #8a8a8a - oklch(63.34% 0 0) - rgb(138,138,138)  - hsl(223.81 0% 54%)  - gray OR #B0B0B0 OR #A0A0A0 FROM #ccc */

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

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

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

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

  /* text-selection */
  --selc-col:#fff;
  --selc-bgr:rgb(204,0,0,.8);

  /* fonts available */
  --bdy-font: 'AltFont','MainFont','B612','Montserrat','Arial','Verdana','Helvetica','Roboto','Segoe UI',system-ui,-apple-system,BlinkMacSystemFont,sans-serif; /* body - default */
  /* -------------------------------------------------------------------------- */
}
/* ------------------------------------------------------------------------------ */
/* LIGHT MODE */
@media (prefers-color-scheme: light) {:root {background:var(--bdy-back);color: var(--bdy-text);}}
/* DARK MODE */
@media (prefers-color-scheme: dark) {:root {background:var(--bdy-text);color:var(--bdy-back);}}

/* ------------------------------------------------------------------------------ */
@layer reset, base, theme, components, utilities;
/* ------------------------------------------------------------------------------ */
/* RESET                                                       7.00/00 - 08-10-24 */
/* link     -> https://codepen.io/raphaelgoetter/pen/BaVoXva
/* update   -> 10-01-23
/* ------------------------------------------------------------------------------ */
@layer reset {
/* RESET */
/* switch to border-box model for all elements avoid min-width: auto on flex and grid items */
*, *::before, *::after {box-sizing:border-box; min-width: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) {max-width:100%;}
/* keep aspect-ratio */
*:where(iframe, img, input, select, textarea) {height:auto;}
/* give links default styles */
:where(a:not([class])) {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 {animation:none !important; transition:none !important; background-attachment:initial !important; scroll-behavior:auto !important;}}
}

/* ------------------------------------------------------------------------------ */
/* 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:var(--selc-col);background:var(--selc-bgr);} 
/* scrollbar */
body {
    --sb-track-color: orange;
    --sb-thumb-color:pink; /* self #1976d2; /* var(--main-bgr); */
    --sb-size: 1rem;
    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;}

/* ------------------------------------------------------------------------------ */
/* tip optimizing */
/* 1. Positionierung und Layout (display, position, top, right, bottom, left, width, height, margin, padding)
/* 2. Flexbox/Grid Eigenschaften (flex, grid)
/* 3. Overflow Eigenschaften (overflow, overflow-x, overflow-y)
/* 4. Text Eigenschaften (font, color, text-align, line-height)
/* 5. Spezielle Effekte (opacity, filter)
/* 6. Sonstige Eigenschaften (background, border, box-shadow) */

/* ------------------------------------------------------------------------------ */
/* HTML and BODY                                               7.00/00 - 24-01-25 */
/* ------------------------------------------------------------------------------ */
html, body {
    margin: 0;
    /* layout */
    /*W min-height:100vh;*/
    /*W min-height:100dvh;*/                 /* for mobile devices */
    block-size:100%;
    overflow-y:auto;
    overflow-wrap:break-word;          /* break words to prevent overflows */
    overscroll-behavior:contain;
    scroll-behavior:smooth;
    /* text rendering */
    text-rendering:optimizeSpeed;      /* optimizeSpeed OR optimizeLegibility */
    text-wrap:pretty;                  /* pretty OR balance; -> only chrome, edge, opera -> https://caniuse.com/mdn-css_properties_text-wrap_pretty */
    /*W -webkit-text-size-adjust:100%;*
    -webkit-overflow-scrolling:touch;
    -webkit-font-smoothing:antialiased;
    /*W -moz-osx-font-smoothing:grayscale;*/
    /* typografie */
    font-family: var(--bdy-font);
    font-size:100%;                    /* 1rem alternate */
    line-height:1.5;                   /* better reading */
    font-weight:100;
    font-style:normal;
    font-variant:normal;
    text-transform:none;
    text-align:start;
    text-indent:0;
    text-decoration-color: var(--bdy-text);
    /*background: var(--bdy-back);*/
    /* for light/dark-mode */
    /*background: color-mix(in srgb, var(--bg-color) 70%, white);*/
    /*background: rgb(255,255,255,.8);*/
    color: var(--bdy-text);
    color: color-mix(in srgb, var(--text-color) 80%, black);
    border: 1px solid var(--bdy-border);
}
/* TEST ONLY */
/* body{margin:2rem;} */

/* ------------------------------------------------------------------------------ */
/* LAYOUT TAGS */
header  {margin:1rem;padding-inline:1rem;border:2px solid var(--bdy-border);box-shadow: 0.1em 0.2em 0.5em color-mix(in lab, currentcolor 35%, #0000);}
nav     {margin:1rem;padding-inline:1rem;border:2px solid orange;}
aside   {margin:1rem;padding-inline:1rem;border:1px solid var(--bdy-border);}
main    {margin:1rem;padding-inline:1rem;border:1px solid red;}
article {padding:1rem;border:1px solid orange;}
section {padding:1rem;border:1px solid green;background:rgb(256,256,256,.1);color: var(--bdy-text);}
footer  {margin:1rem;padding-inline:1rem;border:2px solid blue;}
/* ADD TAGS */
button  {border:1px solid var(--bdy-border);}
dialog  {border:1px solid var(--bdy-border);}
address {border:1px solid var(--bdy-border);}
figure  {border:1px solid var(--bdy-border);}
/*figcaption {}*/
/* ------------------------------------------------------------------------------ */

/*
.noshow-back {display: none;}
*/




/* ------------------------------------------------------------------------------ */
/* GRID AREA LAYOUT - from chatGPT */
body {
  display:grid;
  grid-template-rows:auto auto 1fr auto;
  grid-template-columns:100%;
  grid-template-areas: 
      "header"
      "nav"
      "main"
      "footer";
  height:100vh;
  margin:0;
  padding:0;
}

.header-start, .nav-start, .footer-start {
  width:100%;
  margin:0;
  padding:0;
}

/*
.header-start {
  grid-area:header;
  margin:0;
  padding:0;
  background: #fff;
  color: #333;
}
  */


/* NEW chatGPT */
.header-start {
  display:grid;
  grid-template-columns:1fr auto auto 2fr 2fr auto auto 1fr;
  gap:0;
  /*background: rgb(256,256,256,.01); /*#fff;*/
  color: #333;
}

/* Top- und Bottom-Bar */
.top-bar, .bottom-bar {
  grid-column:1 / -1;
  width:100%;
  padding-inline:1rem;
  border: 1px solid orange;
  border-width: 1px 0;
  background: #ccc;
}

/* Header Content */
.header-content {
  display: contents;
}

/* Flexible Bereiche */
.flexible {
  grid-column: span 1;
}

/* Logo und Headbox */
.logo, .headbox {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Address und Kontakt */
.address, .contact {
  display: flex;
  flex-direction: column;
  padding: 0 10px;
}





/* NAV */
.nav-start {
  grid-area:nav;
  background: #555;
  color: #fff;
}
/* MAIN */
.main-container {
  grid-area:main;
  display:grid;
  grid-template-columns:1fr 2fr 1fr;
  width:100%;
  gap: 16px;
  margin: 16px auto;
  padding: 0;
}

.main-content, .asleft, .asright {
  margin: 0;
  padding: 2rem;
  border: 1px solid #ccc;
  border-radius: .5rem;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}


/* COLORS AND BORDERS */
/* !!! DO NOT CHANGE THE VALUES !!! */
.main-content {
  --bgr-main: oklch(47.12% 0 0); /* gray-dark */
  background: var(--bgr-main);
  /* threshold value for luminance */
  --l-threshold: 0.66;
  --diff: calc(var(--l-threshold) - l);
  /* color based to the background-color basierend */
  color: oklch( from var(--bgr-main) clamp(0.05, max(min(var(--diff) * infinity, 1), 0), 0.95) c h );
}

.asright {
  --bgr-asleft: oklch(88.68% 0.182 95.33); /* gold */
  background: var(--bgr-asleft);
  /* threshold value for luminance */
  --l-threshold: 0.66;
  --diff: calc(var(--l-threshold) - l);
  /* color based to the background-color basierend */
  color: oklch( from var(--bgr-asleft) clamp(0.05, max(min(var(--diff) * infinity, 1), 0), 0.95) c h );
}

.asleft {
  --bgr-asright: oklch(70.98% 0.112 226.84); /* blue-light */
  background: var(--bgr-asright);
  /* threshold value for luminance */
  --l-threshold: 0.66;
  --diff: calc(var(--l-threshold) - l);
  /* color based to the background-color basierend */
  color: oklch( from var(--bgr-asright) clamp(0.05, max(min(var(--diff) * infinity, 1), 0), 0.95) c h );
}


/* ------------------------------------------------------------------------------ */
/* FOOTER - GRID AREA LAYOUT */
/* ------------------------------------------------------------------------------ */
.footer-start {
  grid-area:footer;
  padding: 20px;
  background: #8a2be2;
  color: #fff;
}
.footer-title {
  font-size: 1.2em;
  color: white;
}
.footer-box-container {
  display:flex;
  flex-wrap:wrap;
  gap: 16px;
  justify-content:space-between;
}
.footer-ibox {
  flex: 1 1 150px;
  padding: 10px;
  text-align: center;
  background-color: #ff8c00;
}

/* ------------------------------------------------------------------------------ */
/* RESPONSIVE STYLES - GRID AREA LAYOUT */
/* ------------------------------------------------------------------------------ */
@media (max-width: 768px) {
  .main-container {
      grid-template-columns:1fr;
      grid-template-areas: 
          "main"
          "asright"
          "asleft";
  }
  .main-content {order:1;}
  .asright      {order:2;}
  .asleft       {order:3;}
}

/* ------------------------------------------------------------------------------ */
/* IMAGE BACKGROUND ONLY - see background.css */


/* ------------------------------------------------------------------------------ */
/* GRID-LAYOUT DEFAULT - from chatGPT */
/* ------------------------------------------------------------------------------ */
/*
body {
  margin: 0;
  padding: 0;
}

.header-start,
.nav-start,
.footer-start {
  width: 100%;
  margin: 0;
  padding: 0;
}

.main-container {
  display: grid;
  grid-template-columns: 20% 2fr 20%;
  width: 100%;
  gap: 16px;
  margin: 16px 0;
  padding:
}

.asleft {
  background-color: #ff4500;
  margin: 0;
  padding: 20px;
}

.main-content {
  background-color: #32cd32;
  margin: 0;
  padding: 20px;
}

.asright {
  background-color: #ffd700;
  margin: 0;
  padding: 20px;
}
*/

/* ------------------------------------------------------------------------------ */
/* RESPONSIVE STYLES - MAIN LAYOUT */
/* Tablets */
@media (max-width: 768px) {
  .main-container {grid-template-columns:1fr;gap:16px;}
  .main-content   {order:1;}
  .asright        {order:2;}
  .asleft         {order:3;}
}
/* Smartphones */
@media (max-width: 480px) {
  .main-container {grid-template-columns:1fr;gap:16px;}
  .main-content   {order:1;}
  .asright        {order:2;}
  .asleft         {order:3;}
}

/* Anpassung über Media Queries für den CSS-Teil, nicht für die Images im <picture> */
@media (min-width: 1024px) {
  .responsive-background {
    filter: grayscale(0%);
  }
}
@media (min-width: 768px) {
  /* Beispielanpassungen für responsive Breakpoints */
  .responsive-background {
    filter: grayscale(50%);
  }
}

/* ------------------------------------------------------------------------------ */
/* CONTENT */
/* ------------------------------------------------------------------------------ */
h1  {color:orange;}
p   {padding:.4rem;}

/* ------------------------------------------------------------------------------ */
/* IMAGES */
/* ------------------------------------------------------------------------------ */


/* ------------------------------------------------------------------------------ */
/* SPECIALS */
/* ------------------------------------------------------------------------------ */

/* underline */
/* https://codepen.io/matthiasott/pen/MWOdEB - 14-07-2017 */
.underline {position:relative;display:inline-block; &:hover, &:focus, &:active {cursor:pointer; &:after {width:100%;}} &:after {content:'';position:absolute;left:0;bottom:1px;height:1px;background: red;width:0;transition:width .6s;}}

/* ------------------------------------------------------------------------------ */
/* IFRAME - if necessary for PDF-FILES OR VIDEO */
iframe {width:100%;margin:1rem auto;padding:1rem;background:rgb(0,0,0,.04);border:1px solid rgb(0,0,0,.08);border-radius:6px;}

/* ------------------------------------------------------------------------------ */
/* WARNINGS -> missing title- OR alt-tag */
/* ------------------------------------------------------------------------------ */
main p, article p, section p {border: 1px solid blue;}

img:not([alt])  {border: 1px solid red;}
a:not([href])   {border: 1px solid red;}
a:not([title])  {border: 1px solid red;}

button:not([type]) {border: 1px solid red;}
input:not([required]), textarea:not([required]), select:not([required]) {border: 1px solid red;}

/* <div> without class oder id */
div:not([class]){margin:.5rem;padding:.5rem;border:1px solid red;background: rgba(255,0,0,.1);} 
/*div:not([id]){padding:.5rem;border:1px solid orange;background: rgba(255,0,0,.1);}*/

/* ------------------------------------------------------------------------------ */
/* DO NOT CHANGE -> see index.php after <body>                                    */
/* <div class="schema-info" itemscope itemtype="https://schema.org/LocalBusiness"></div> !!! */
.schema-info {color:red;}
/* ------------------------------------------------------------------------------ */

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