/* ------------------------------------------------------------------------------ */
/* ****************************************************************************** */
/* --------- (C) Copyright 2025/2026 by machtWeb | Reinhard Lange --------------- */
/* ---------------------- machtWeb.de | relaXits@machtWeb.de -------------------- */
/* ------------------------------------------------------------------------------ */
/* update	->											                                6.00/14 - 19-06-25
/* layout	-> startpage										                                        */
/* file 	-> design/design.css						                                        */
/* colors	-> http://www.color-hex.com | https://oklch.com		                      */
/* link   -> https://codepen.io/machtweb/pen/xxmNpKd                              */
/* ------------------------------------------------------------------------------ */
/* HEADER ONLY */
header {
    display: grid;
    grid-template-columns:repeat(8, auto);
    grid-gap:2px 2px;
    align-items:center;
    margin: 0; /* Setze den Margin auf 0, um die volle Breite zu verwenden */
    max-width: 100%; /* Begrenze die maximale Breite auf 100% */
    min-height: 256px;
    background:rgba(256,256,256,.75);
}

header > div:nth-child(n+3):nth-child(-n+8) {
    margin-right: 2px; /* Füge das Gap zwischen Grid-Box 3 und 8 ein */
    border: 0px solid red;
    /*background: rgb(0,0,0,.08);*/
}

.flexible, .address, .contact {
    /*max-height: 256px;*/
    height: auto;
    /*min-height:256px;*/
}

.flexible {
    flex:1;
}

/* ADRESS and CONTACT
/* Zentriere horizontal und linksbündig den Inhalt in den Grid-Boxen "address" und "contact" */
.address, .contact {
    display:flex;
    align-items:center;
}

.address ul, .contact ul {
    padding: 6px 12px;
    font-size: 1.2rem;
    text-align:left;
    color: oklch(47.12% 0 0);
    border: 1px solid var(--color-primary);
    border-width: 0 0 1px 1px;
    border-radius: 0 0 0 6px;
    background:rgba(256,256,256,.5);
}

/* ------------------------------------------------------------------------------ */
/* LOGO */
.logo {
    display:flex;
    width:auto;
    align-items:center;
    justify-content:center;

}

/* LOGO-MAIN - CLIENT */
.logo-main, .logo-add {
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
    padding: 4px;    
    object-fit:contain;
}

/* ------------------------------------------------------------------------------ */
/* TOP-BAR / BOTTOM-BAR */
.top-bar, .bottom-bar {
    max-height: 16px;
    grid-column: 1 / span 8;
    border: 0px solid red;
}

/* ------------------------------------------------------------------------------ */
/* Optional: Styling für die header-Elemente */
header div {
    padding: 4px;
    border: 0px solid orange;
    text-align: center;
} 

/* ------------------------------------------------------------------------------ */
/* max-width 1920px */
@media (max-width: 1920px) {  
    header {
        grid-template-columns: repeat(6, 1fr);
        grid-gap:0;
    }
    header > div:nth-child(n+2):nth-child(-n+8) {
        margin-right: 1px; /* Füge das Gap zwischen Grid-Box 2 und 8 ein */
        border: 0px solid orange;
        /*background: rgb(0,0,0,.04);*/
    }
    .flexible, .top-bar {
        display:none;
    }  
}

/* ------------------------------------------------------------------------------ */
/* max-width 1280px */
@media (max-width: 1280px) { 
    header {
        grid-template-columns: repeat(4, 1fr);
        grid-gap:0;
        align-items:center;
        justify-content: center;
    }
    .flexible, .headbox, .top-bar, .bottom-bar, .noshow {
        display:none;
    }
}

/* ------------------------------------------------------------------------------ */
/* max-width 768px */
@media (max-width: 768px) { 
    header {
        grid-template-columns: repeat(2, 1fr);
        grid-gap:0;
        align-items:center;
        justify-content: center;
    }
    .flexible, .headbox, .top-bar, .bottom-bar, .noshow, .logo-add, .nobox, .nocontact {
        display:none;
    }
}
/* ------------------------------------------------------------------------------ */
/* max-width 480px */
@media (max-width: 480px) { 
    header {
        grid-template-columns: repeat(2, 1fr);
        grid-gap:0;
        align-items:center;
        justify-content: center;
    }
    .flexible, .headbox, .top-bar, .bottom-bar, .noshow, .logo-add, .nobox, .nocontact {
        display:none;
    }
}

/* Punkt 4: Smartphone Hochformat */
@media screen and (max-width: 480px) and (orientation: portrait) {
  header {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "logo"
      "contact";
    place-items: center;
    text-align: center;
    padding: 16px 0;
  }

  .logo {
    grid-area: logo;
    margin-bottom: 16px; /* KLEINER Abstand! */
  }

  .contact {
    grid-area: contact;
  }

  .address {
    display: none !important;
  }

  .logo-main {
    width: 70vw;
    max-width: 70vw;
    height: auto;
  }

  .contact ul {
    margin: 0 auto;
  }
}

/* Punkt 2: Tablet Hochformat */
@media screen and (min-width: 481px) and (max-width: 900px) and (orientation: portrait) {
  header {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "logo"
      "contact";
    place-items: center;
    text-align: center;
    padding: 32px 0;
  }

  .logo {
    grid-area: logo;
    margin-bottom: 32px;
  }

  .contact {
    grid-area: contact;
  }

  .address {
    display: none !important;
  }

  .logo-main {
    max-width: 320px;
    height: auto;
  }

  .contact ul {
    margin: 0 auto;
  }
}

/* Punkt 3 – Smartphone querformat: nur Logo + Kontakt nebeneinander, zentriert */
@media screen and (max-width: 1024px) and (max-height: 500px) {
  header {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 48px;
    padding: 24px 0;
    text-align: center;
  }

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

  .contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .address {
    display: none !important;
  }

  .logo-main {
    max-width: 260px;
    height: auto;
  }

  .contact ul {
    margin: 0 auto;
  }
}


/* Punkt 1 – iPad / Tablet querformat (Viewport ca. 1025–1300px) */
@media screen and (min-width: 1025px) and (max-width: 1300px) {
  header {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 64px;
    padding: 32px 0;
    text-align: center;
  }

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

  .contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .address {
    display: none !important;
  }

  .logo-main {
    max-width: 300px;
    height: auto;
  }

  .contact ul {
    margin: 0 auto;
  }
}

/* ------------------------------------------------------------------------------ */
/* update	->											          6.00/14 - 19-06-25
/* use-in -> tools/start/page/header_ani.add.php                                  */
/* link   -> https://codepen.io/dok/pen/bPEgwG                                    */
/* update -> 14-06-2019                                                           */
/* ------------------------------------------------------------------------------ */
/* header animation */
.header-bgr-image {
    position: absolute;
    top: -6px;
    left: 0;
    width: 100%;
    height: 20vh; /* self 256px; */
    z-index: -99; /* Setze den Z-Index auf -99, um es hinter dem Header zu platzieren */
    /*background-size: cover; /* Decke den gesamten Header ab */
    /*background-position: center; /* Zentriere das Bild */
    /*background: rgb(0,0,0,.0);*/
}

/* Responsive SVG innerhalb des Containers */
.header-bgr-image svg {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* Ausblenden auf Smartphone und Tablet Portrait */
@media (max-width: 1024px) and (orientation: portrait),
       (max-width: 768px) {
    .header-bgr-image {
        display: none;
    }
}

/* ------------------------------------------------------------------------------ */
#arrows {
    animation: rotate 4s linear infinite;
    transform-origin: 225.75px 178.45000457763672px;
  }
#arrows2 {
    animation: rotate 4s linear infinite;
    transform-origin: 424.6499938964844px 217.60000610351562px;
  }
  
  @keyframes rotate {
    from {
      transform: rotate(0);
    }
    to {
      transform: rotate(359deg);
    }
  }
  @keyframes rotateBack {
    from {
      transform: rotate(0);
    }
    to {
      transform: rotate(-359deg);
    }
  }
  
  #clockwise {
    animation: rotate 5s linear infinite;
    transform-origin: 274.4500274658203px 178.40000915527344px;
  }
  #anticlockwise {
    animation: rotateBack 5s linear infinite;
    transform-origin: 298.15000915527344px 153.5px;
  }
  
  #cogclockwise {
    animation: rotate 5s linear infinite;
    transform-origin: 1031.8499755859375px 237.3499984741211px;
  }
  #coganticlockwise {
    animation: rotateBack 5s linear infinite;
    transform-origin: 1058.5001220703125px 206.5999984741211px;
  }
  
  #needle {
    animation: needle 3s ease-out infinite alternate;
    transform-origin: 993.599976px 197.100006px;
  }
  @keyframes needle {
    0%,
    30% {
      transform: rotate(-145deg);
    }
    80%,
    100% {
      transform: rotate(0);
    }
  }
  
  #controller rect:nth-child(1) {
    animation: controller1 2s 1200ms linear infinite alternate-reverse;
  }
  #controller rect:nth-child(2) {
    transform: translateY(7px);
    animation: controller2 2s 500ms linear infinite alternate-reverse;
  }
  #controller rect:nth-child(3) {
    animation: controller3 2s 900ms linear infinite alternate-reverse;
  }
  
  @keyframes controller1 {
    0% {
      transform: translateY(-10px);
    }
    100% {
      transform: translateY(5px);
    }
  }
  @keyframes controller2 {
    0% {
      transform: translateY(-5px);
    }
    100% {
      transform: translateY(5px);
    }
  }
  @keyframes controller3 {
    0% {
      transform: translateY(-7px);
    }
    100% {
      transform: translateY(5px);
    }
  }
  
  #voice path:nth-child(1) {
    animation: voice 2.5s 400ms ease-in infinite;
  }
  #voice path:nth-child(2) {
    animation: voice 2.5s 200ms ease-in infinite;
  }
  #voice path:nth-child(3) {
    animation: voice 2.5s ease-in infinite;
  }
  @keyframes voice {
    0%,
    40% {
      transform: translateX(-7px);
      opacity: 0;
    }
    100% {
      transform: translateX(0px);
      opacity: 1;
    }
  }
  
  #tick {
    stroke-dasharray: 26 28;
    stroke-dashoffset: 26;
    animation: tick 3s linear infinite;
  }
  @keyframes tick {
    50%,
    100% {
      stroke-dashoffset: 0;
    }
  }
  
  #bubbles g:nth-child(1) {
    animation: bubbles 500ms ease-out infinite alternate-reverse;
  }
  #bubbles g:nth-child(2) {
    animation: bubbles 500ms 250ms ease-out infinite alternate-reverse;
  }
  #bubbles g:nth-child(3) {
    animation: bubbles 500ms 500ms ease-out infinite alternate-reverse;
  }
  
  @keyframes bubbles {
    0%,
    50% {
      transform: translateY(5px);
    }
    100% {
      transform: translateY(-7px);
    }
  }
  
  #comp-logo {
    animation: logo 3s ease infinite;
    transform-origin: 870.7001037597656px 250.84999084472656px;
  }
  @keyframes logo {
    0% {
      transform: scale(0);
    }
    60% {
      transform: scale(1.1);
    }
    80%,
    100% {
      transform: scale(1);
    }
  }
  
  #left-brain {
    animation: brains 2s 1s ease infinite alternate-reverse;
    transform-origin: 369.6499938964844px 119.4000015258789px;
  }
  
  @keyframes brains {
    0% {
      transform: scale(1);
    }
    60% {
      transform: scale(1.05);
    }
    80%,
    100% {
      transform: scale(1);
    }
  }
  @keyframes rightbrain {
    0% {
      transform: scale(1);
    }
    60% {
      transform: scale(1.2);
    }
    80%,
    100% {
      transform: scale(1);
    }
  }
  #right-brain circle:nth-child(1) {
    animation: rightbrain 2s ease infinite alternate-reverse;
    transform-origin: 438.09999990463257px 91.19999837875366px;
  }
  #right-brain circle:nth-child(2) {
    animation: rightbrain 2s ease infinite alternate-reverse;
    transform-origin: 441.8999876976013px 147.49999380111694px;
  }
  #right-brain circle:nth-child(3) {
    animation: rightbrain 2s ease infinite alternate-reverse;
    transform-origin: 421.2000060081482px 78.09999990463257px;
  }
  #right-brain circle:nth-child(4) {
    animation: rightbrain 2s ease infinite alternate-reverse;
    transform-origin: 422.2000060081482px 158.79999685287476px;
  }
  #right-brain circle:nth-child(5) {
    animation: rightbrain 2s ease infinite alternate-reverse;
    transform-origin: 421.2000060081482px 128.8000044822693px;
  }
  #bubbles2 g:nth-child(1) {
    animation: middleBubble 8s ease infinite alternate-reverse;
  }
  #bubbles2 g:nth-child(2) {
    animation: firstBubble 7s 1s ease infinite alternate-reverse;
  }
  #bubbles2 g:nth-child(3) {
    animation: lastBubble 7s ease infinite alternate-reverse;
  }
  @keyframes firstBubble {
    0% {
      transform: translate(0px);
    }
    20% {
      transform: translate(-3px, -3px);
    }
    40% {
      transform: translate(3px, 2px);
    }
    60% {
      transform: translate(-5px, 2px);
    }
  }
  @keyframes middleBubble {
    0% {
      transform: translate(0px);
    }
    20% {
      transform: translate(3px, 5px);
    }
    40% {
      transform: translate(13px, -2px);
    }
    70% {
      transform: translate(-5px, 2px);
    }
  }
  @keyframes lastBubble {
    0% {
      transform: translate(0px);
    }
    20% {
      transform: translate(8px, -2px);
    }
    40% {
      transform: translate(-7px, -5px);
    }
    70% {
      transform: translate(5px, 5px);
    }
  }
  
  #rocket-flame path:nth-child(1) {
    animation: flame 200ms ease infinite alternate-reverse;
    transform-origin: 1340.4000244140625px 221.1999969482422px;
  }
  
  #rocket-flame path:nth-child(2) {
    animation: flame 200ms 100ms ease infinite alternate-reverse;
    transform-origin: 1335.8990478515625px 224.2974090576172px;
  }
  
  @keyframes flame {
    0% {
      transform: scaleY(1);
    }
    100% {
      transform: scaleY(1.2);
    }
  }
  
  #bubble1 {
    animation: bubble1 3s 100ms linear infinite;
  }
  #bubble2 {
    animation: bubble2 3s 90ms linear infinite;
  }
  #right-bubbles g:nth-child(1) {
    animation: bubble1 3.5s linear infinite;
  }
  #right-bubbles g:nth-child(2) {
    animation: bubble2 3.5s linear infinite;
  }
  @keyframes bubble1 {
    0% {
      transform: translate(0, 5px);
    }
    20% {
      transform: translate(5px, -3px);
    }
    40% {
      transform: translate(-5px, -6px);
    }
    60% {
      transform: translate(5px, -9px);
    }
    80% {
      transform: translate(-5px, -12px);
    }
    90%,
    100% {
      opacity: 0;
    }
  }
  @keyframes bubble2 {
    0% {
      transform: translate(0, 5px);
    }
    20% {
      transform: translate(-5px, -3px);
    }
    40% {
      transform: translate(5px, -6px);
    }
    60% {
      transform: translate(-5px, -9px);
    }
    80% {
      transform: translate(-5px, -12px);
    }
    90%,
    100% {
      opacity: 0;
    }
  }
  
  #dots circle:nth-child(1) {
    animation: dot1 3s ease-in-out infinite;
  }
  #dots circle:nth-child(2) {
    animation: dot2 3s ease-in-out infinite;
  }
  #dots circle:nth-child(3) {
    animation: dot3 3s ease-in-out infinite;
  } 
  @keyframes dot1 {
    0% {
      transform: translate(0);
    }
    25%, 75% {
      transform: translate(0, -35px);
    }
    100% {
      transform: translate(0);
    }
  }
  @keyframes dot2 {
    0% {
      transform: translate(0);
    }
    50%, 75% {
      transform: translate(0, -35px);
    }
     100% {
      transform: translate(0);
    }
   }
  @keyframes dot3 {
    0%, 25% {
      transform: translate(0);
    }
    50%, 75% {
      transform: translate(0, -35px);
    }
    100% {
      transform: translate(0);
    }
  } 
  
  .RITQwaaK_0 {
    stroke-dasharray: 9 11;
    stroke-dashoffset: 10;
    animation: draw 1000ms ease-in-out 0ms  infinite reverse;
  }
  .RITQwaaK_1 {
    stroke-dasharray: 9 11;
    stroke-dashoffset: 10;
    animation: draw 1000ms ease-in-out 0ms  infinite reverse;
  }
  .RITQwaaK_2 {
    stroke-dasharray: 9 11;
    stroke-dashoffset: 10;
    animation: draw 1000ms ease-in-out 0ms  infinite reverse;
  }
  .RITQwaaK_3 {
    stroke-dasharray: 9 11;
    stroke-dashoffset: 10;
    animation: draw 1000ms ease-in-out 0ms  infinite reverse;
  }
  .RITQwaaK_4 {
    stroke-dasharray: 9 11;
    stroke-dashoffset: 10;
    animation: draw 1000ms ease-in-out 0ms  infinite reverse;
  }
  .RITQwaaK_5 {
    stroke-dasharray: 5 7;
    stroke-dashoffset: 6;
    animation: draw2 1000ms ease-in-out 0ms  infinite reverse;
  }
  .RITQwaaK_6 {
    stroke-dasharray: 5 7;
    stroke-dashoffset: 6;
    animation: draw2 1000ms ease-in-out 0ms  infinite reverse;
  }
  .RITQwaaK_7 {
    stroke-dasharray: 5 7;
    stroke-dashoffset: 6;
    animation: draw2 1000ms ease-in-out 0ms  infinite reverse;
  }
  .RITQwaaK_8 {
    stroke-dasharray: 5 7;
    stroke-dashoffset: 6;
    animation: draw2 1000ms ease-in-out 0ms  infinite reverse;
  }
  .RITQwaaK_9 {
    stroke-dasharray: 5 7;
    stroke-dashoffset: 6;
    animation: draw2 1000ms ease-in-out 0ms infinite reverse;
  }
  @keyframes draw {
    30%, 50% {
      stroke-dashoffset: 0;
    }
    100% {
      stroke-dashoffset: -11;
    }
  }
  
  @keyframes draw2 {
    30%, 50% {
      stroke-dashoffset: 0;
    }
    100% {
      stroke-dashoffset: -7;
    }
  }

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