@import url(./app_colors.css);

/* =========================
   Basislayout & Typografie
   ========================= */

:root {
    --tap: 44px;
    --max-width: 1200px;
    --base-font-size: 16px;
    --font-family-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", 
                        sans-serif;
    --black:#333;
    --white:#fff;                    
    --color-white-soft: #f5f5f5;
    --color-wood-light:var(--bone);
    --primary: #36454f;
    --color-orange: var(--orangeWheel);
    --color-red:#c0392b;

    /* --color-border: #2f8f2f; */
    --color-border: var(--divider);
    --color-border-error: var(--color-red);
    --color-text: #222;
    --color-bg: #fff;

    /* Farben für Links */
    --color-link: var(--dividerStrong);

    /* Farben Nachrichten */
    --message-bg: #69be2888;
    --error-bg: #f7b095;

    /* Farben für Buttons */
   /* --btnTop:#F9D58C; 
   --btnBottom:#4CD822; 
   --btnBorderLight:#F8BE59;
   --btnBorderShadow:#F8BE59;
   --btnText:#131200;  */

   /* für Timeline */
  --bg:#f5f5f5; 
  --card:#ffffff; 
  --accent:#a3b18a; 
  --muted:#36454f; 
  --line:#9ddd58;
  --radius:12px; 
  --maxw:1200px;

   /* border und Schatten */
   --border:.1rem solid var(--divider);
   --box-shadow:0 .5rem 1rem rgba(0,0,0,.1);
}

/* Seite zentrieren, max. 1200px */
body {
    margin: 0;
    padding: 0;
    font-family: var(--font-family-base);
    font-size: var(--base-font-size);
    color: var(--primary);
    background: var(--white);
}

main {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 1rem;
}

/* Standard-Elemente: serifenlos, 18px Basis */
p,
ul,
ol,
li,
a,
input,
label,
button,
table {
    font-family: var(--font-family-base);
    /* keine feste font-size hier – sie erben von body */
    /* font-size: 1rem;  */
    box-sizing: border-box;
}

/* Überschriften: Faktor der Standardschriftgröße */
h1,
h2,
h3 {
    margin: 0 0 0.75em;
    font-family: var(--font-family-base);
}

h1 {
    font-size: 1.8rem;   /* 1,8x 16px */
}

h2 {
    font-size: 1.6rem; /* 1,6x 16px */
}

h3 {
    font-size: 1.2rem; /* 1,2x 16px */
    color: var(--orangeWheel);
}

thead th {
    font-weight: 500;
    text-align: center;
    padding: 0.4em;
    font-size: 0.8rem; /* 1,5x 16px */
}

/* Links & Buttons */
a {
    color: var(--navLink);
    text-decoration: none;
}
a:hover {
    color: var(--navLinkHover);
    text-decoration: underline;
}


#muted{
      color:var(--muted); 
      font-size:calc(var(--base-font-size) * 0.8);
   }

   /* Icon-Text-Kombinationen: Icon links, Text rechts, zentriert, mit Abstand */
.icon-text {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
}   

/* ===================================================================
   Buttons
   =================================================================== */
.btn {
  background: linear-gradient(to bottom, var(--btnTop), var(--btnBottom)); /* leichter Verlauf */
  border: var(--btnBorderLight);
  border-radius: 5px;
  font-weight: bold;
  padding: 5px 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5em; /* Abstand zwischen Icon und Text */
  /* 3D-Effekt durch Schatten */
  box-shadow: 0 4px 6px var(--btnBorderShadow), inset 0 1px 0 rgba(255,255,255,0.8); 
  transition: all 0.2s ease;
  justify-content: center;
  color: var(--btnText);
}


.btn:hover{
  background: linear-gradient(to bottom, var(--btnTop), var(--btnBottom)); /* leichter Verlauf */
  border: var(--btnBorderLight);
  border-radius: 6px;
  padding: 10px 20px;
  text-decoration: underline;
  /* font-size: 16px; */
  font-weight: bold;
  cursor: pointer;
  /* 3D-Effekt durch Schatten */
  box-shadow: 0 4px 6px var(--btnBorderShadow), inset 0 1px 0 rgba(255,255,255,0.8);
  transition: all 0.2s ease;
   color:var(--btnText);
}

.btn:active {
  /* gedrückt-Effekt: Schatten nach innen */
  box-shadow: inset 0 3px 5px var(--btnBorderShadow);
  /* background: linear-gradient(to bottom, #dcdcdc, #f0f0f0);*/
  background: linear-gradient(to bottom, var(--btnTop), var(--btnBottom)); /* leichter Verlauf */
  transform: translateY(2px); /* Button wirkt eingedrückt */
}
.small-btn-save {
   max-width: 40px;
  /*background: linear-gradient(to bottom, #f0f0f0, #dcdcdc);*/ /* leichter Verlauf */
  background: linear-gradient(to bottom, #a6e86a, #9ddd58); /* leichter Verlauf */
  /*border: 1px solid #aaa;*/
  border: 1px solid #7cbf3f;
  border-radius: 6px;
  padding: 2px 4px;
  /* font-size: 2rem; */
  font-weight: bold;
  color: #333;
  /* color: #2d4a1f; */
  cursor: pointer;
  align-items: center;

  /* 3D-Effekt durch Schatten */
  box-shadow: 0 4px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.8);
  transition: all 0.2s ease;
}

.small-btn-save:hover {
  background: linear-gradient(to bottom, var(--btnTop), var(--btnBottom)); /* leichter Verlauf */
}
.small-btn-save:active {
  /* gedrückt-Effekt: Schatten nach innen */
  box-shadow: inset 0 3px 5px var(--btnBorderShadow);
  /* background: linear-gradient(to bottom, #dcdcdc, #f0f0f0);*/
  background: linear-gradient(to bottom, var(--btnTop), var(--btnBottom)); /* leichter Verlauf */
  transform: translateY(2px); /* Button wirkt eingedrückt */
}
.small-btn-delete {
   max-width: 40px;
  /*background: linear-gradient(to bottom, #f0f0f0, #dcdcdc);*/ /* leichter Verlauf */
  background: linear-gradient(to bottom, #ff6666, #cc0000); /* leichter Verlauf */
  /*border: 1px solid #aaa;*/
  border: 1px solid #990000;
  border-radius: 6px;
  padding: 2px 4px;
  /* font-size: 2rem; */
  font-weight: bold;
  color: #333;
  /* color: #2d4a1f; */
  cursor: pointer;
  align-items: center;

  /* 3D-Effekt durch Schatten */
  box-shadow: 0 4px 6px var(--btnBorderShadow), inset 0 1px 0 rgba(255,255,255,0.8);
  transition: all 0.2s ease;
}

.small-btn-delete:hover {
 background: linear-gradient(to bottom, #ff8080, #cc0000);
}
.small-btn-delete:active {
  /* gedrückt-Effekt: Schatten nach innen */
  box-shadow: inset 0 3px 5px rgba(0,0,0,0.4);
  background: linear-gradient(to bottom, #cc0000, #ff6666);
  transform: translateY(2px); /* Button wirkt eingedrückt */
}

.small-btn-reset {
   max-width: 40px;
  background: linear-gradient(to bottom, var(--disableIcon), var(--disableButton)); /* leichter Verlauf*/
  border: 1px solid #aaa;
  border-radius: 6px;
  padding: 2px 4px;
  /* font-size: 2rem; */
  font-weight: bold;
  color: #333;
  cursor: pointer;
  align-items: center;

  /* 3D-Effekt durch Schatten */
  box-shadow: 0 4px 6px var(--btnBorderShadow), inset 0 1px 0 rgba(255,255,255,0.8);
  transition: all 0.2s ease;
}

.small-btn-reset:hover {
 background: linear-gradient(to bottom, #ffffff, #e0e0e0);
}
.small-btn-reset:active {
  /* gedrückt-Effekt: Schatten nach innen */
  box-shadow: inset 0 3px 5px var(--btnBorderShadow);
  background: linear-gradient(to bottom, #dcdcdc, #f0f0f0);

  transform: translateY(2px); /* Button wirkt eingedrückt */
}

.account-delete-btn:hover{
   background-color: var(--color-red);
   border: 1px solid var(--btnBorderLight);
  border-radius: 6px;
  padding: 10px 20px;
  /* font-size: 16px; */
  font-weight: bold;
  cursor: pointer;
  /* 3D-Effekt durch Schatten */
  box-shadow: 0 4px 6px var(--btnBorderShadow), inset 0 1px 0 rgba(255,255,255,0.8);
  transition: all 0.2s ease;
   color:var(--background);
}
/* Button-Gruppen: rechtsbündig, mit Abstand */
.button-row {
  display: block ruby;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 5px;
}
.sub-button-row {
  display: flex;
  flex-wrap: wrap;       /* erlaubt Umbruch */
  gap: 0.5rem;           /* Abstand zwischen Buttons */
  justify-content: center; /* zentriert die Buttons */
}



/* listen-style für ul und ol, mit Klassen für unterschiedliche Stile */
ul.first {
   list-style-type: disc;
   /* list-style-position:inside; */
   /* margin-left: 10px; */
   padding-left: 1em;
   color: var(--primary);
   }
ol.first {
   list-style-type: decimal;
   /* list-style-position:inside; */
   /* margin-left: 10px; */
      padding-left: 1em;
   color: var(--primary);
   }
ul.second {
	list-style-type: circle;
	/* list-style-position:inside; */
	/* margin-left: 10px; */
    padding-left: 1em;
   color: var(--primary);
   }

/* =========================
   Sections & Layout
   ========================= */

/* Allgemeine Section-Basis */
section {
    margin-bottom: 1.5rem;
}

/* description: volle Breite, ab 768px ausgeblendet */
section.description {
    width: 100%;
}

/* content: volle Breite, immer sichtbar */
section.content {
    width: 100%;
}

section.box-container{
    max-width: var(--maxw);
   display: flex;
   grid-template-columns: repeat(auto-fit, 30rem);
   justify-content: center;
   gap:1.0rem;
   margin:0 auto;
   align-items: flex-start;
}
section.box-container .box{
   min-width: 200px;
    border-radius: .5rem;
   background-color: var(--white);
   box-shadow: var(--btnBorderShadow);
   padding:.8em;
   text-align: center;
   border:var(--border);
   position: relative;
}

/* two_column: 30% / 70% auf Desktop, gestapelt auf kleineren Screens */
.two_column_3070 {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

/* Spaltenbreiten im Standard (Desktop) */
.two_column_3070 .left_column {
    width: 30%;
}

.two_column_3070 .right_column {
    width: 70%;
}
/* two_column: 50% / 50% auf Desktop, gestapelt auf kleineren Screens */
.two_column_5050 {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

/* Spaltenbreiten im Standard (Desktop) */
.two_column_5050 .left_column {
    width: 50%;
}

.two_column_5050 .right_column {
    width: 50%;
}

/* Boxen mit grünem Rand und runden Ecken */
.box {
    border: 1px solid var(--color-border);
    border-radius: 0.6rem;
    padding: .5rem;
    box-sizing: border-box;
}
.content span{
   padding:1rem 0;
   line-height: 1.5;
   /* font-size: 1.5rem; */
   color:var(--primary);
}

/* Box-Anzeige ein und Ausschalten */
#mute.box {
    display: none;
    opacity: 0;
}

#show.box {
    display: block;
    opacity: 1;
}

/* =========================
   Bilder & Textumfluss
   ========================= */

/* Bilder skalieren proportional mit Containerbreite */
img {
    max-width: 100%;
    /* height: auto; */
    display: block;
}
/* skaliert proportional zur Schriftgröße */
 /* img {
    width: 20em;      
    max-width: 100%;  
    height: auto;
    display: block;
} */


/* Standard: Bild links, Text umfließt (für p, ul, ol, table, form) */
/* p img,
ul img,
ol img,
table img,
form img {
    float: left;
    margin: 0 1rem 0.5rem 0;
} */

/* Bild links, Text und Listen fließen darum */ 
.img-left { 
    float: left; 
    margin: 0 2rem 0.5rem 0; 
}

/* Alternative Klassen, falls explizit rechts gewünscht */
.img-right {
    float: right;
    margin: 0 0 0.5rem 2rem;
}

/* Float aufräumen */
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

/* =========================
   Formulare
   ========================= */

form {
    width: 100%;
}

/* Label immer über Input */
label {
    display: block;
    /* margin-bottom: 0.25rem; */
    /* font-weight: 600; */
    font-weight: 300;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
textarea,
select {
    width: 100%;
    padding: 0.4em 0.6em;
    border-radius: 0.3em;
    border: 1px solid #ccc;
    font-size: 1em;
    font-family: var(--font-family-base);
    box-sizing: border-box;
    margin-bottom: 0.75em;
}

/* Pflichtfelder nicht gefüllt rot */
input:required:invalid {
  border-color: var(--color-red);
}
input[name="country_code"] { width: 35px; }
input[name="zip"] { width: 65px; }
input[name="city"] { flex: 1; min-width: 120px; }
input[name="house_number"] { width: 65px; }
input[name="street_name"] { flex: 1; min-width: 120px; }


/* Mehrere Input-Felder nebeneinander (Desktop) */
.form-row {
    display: flex;
    gap: 1rem;
    justify-items: center;
    align-items: center;
}

.form-row > div {
    flex: 1 1 0;
}

/* spezielles Layout: Label und Input nebeneinander, mit Abstand, aber ohne Umbruch - str+Hnr; plz+ort*/
.form-row2 {
    display: flex;
    flex-wrap: nowrap;     /* verhindert Umbruch */
    gap: 1rem;
    align-items: center;
    max-width: 100%;       /* optional */
}

.form-row2 label {
    white-space: nowrap;   /* verhindert Umbruch bei Labels */
}

.form-row2 input {
    min-width: 0;          /* wichtig, damit Flexbox schrumpfen darf */
}

/* Spezielles Layout: Label links, Input rechts, mit Abstand - Standort-box*/
.form-row3 {
    display: flex;
    justify-content: space-between; /* Abstand zwischen Label und Input */
    align-items: center;
    width: 100%;
}

.form-row3 label {
    white-space: nowrap;   /* verhindert Umbruch bei Labels */
    /* margin-right: 3em; */
    
}

.form-row3 input {
    width: 60%;        /* nimmt 80% der Breite ein */
    margin-left: 1em; /* schiebt das Input nach rechts */
    margin-right: 1em; /* schiebt das Input nach rechts */
}
.form-row3 select {
    /* nimmt 80% der Breite ein */
    width: 60%;
    margin-left: 1em; /* schiebt das Input nach rechts */
    margin-right: 1em; /* schiebt das Input nach rechts */
}



/* Formulare, die nur hidden + Button enthalten: nur Button sichtbar, kein zusätzlicher Raum */
form.hidden-button-form {
    display: inline-block;
    margin: 0;
    padding: 0;
}

form.hidden-button-form input[type="hidden"] {
    display: none;
}

form.hidden-button-form button {
    margin: 0;
}

/* Standard-Checkbox ausblenden */
.custom-checkbox input {
  display: none;
}

/* Gestylte Checkbox */
.custom-checkbox .checkmark {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: white;
  border: 1px solid var(--dividerStrong);
  border-radius: 4px;
  position: relative;
  cursor: pointer;
}

/* Der weiße Haken (unsichtbar im Normalzustand) */
.custom-checkbox .checkmark::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 1px;
  width: 6px;
  height: 12px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 0.2s;
}

/* Wenn angehakt → Hintergrund + Haken sichtbar */
.custom-checkbox input:checked + .checkmark {
  background-color: var(--dividerStrong);
  
}

.custom-checkbox input:checked + .checkmark::after {
  opacity: 1;
  border-color: var(--primary);

}
/* Wenn Checkbox disabled ist → grau darstellen */
.custom-checkbox input:disabled + .checkmark {
  background-color: #e0e0e0;   /* hellgrau */
  border-color: #bdbdbd;       /* etwas dunklerer Rand */
  cursor: not-allowed;
}

/* Optional: Haken im disabled Zustand etwas abdunkeln */
.custom-checkbox input:disabled:checked + .checkmark::after {
  border-color: #888;
}

/* Checkbox ist required, aber NICHT angehakt → rot */
.custom-checkbox input:required:invalid + .checkmark {
  border-color: var(--color-red);
}

/* Optional: Wenn angehakt → wieder normal */
.custom-checkbox input:required:valid + .checkmark {
  border-color: var(--btnBorderLight);
}




/* =========================
   Tabellen
   ========================= */

table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--divider);
}

thead th {
    font-weight: 700;
    text-align: center;
    background: var(--divider);
    border: 1px solid var(--divider);
    padding: 0.4em;
}

tbody td {
    border: 1px solid var(--divider);
    padding: 0.4em;
}


/* ===================================================================
   Header
   =================================================================== */
.heading{
   max-height: 2vh;
/*   min-height: 26vh;*/
   display: flex;
   flex-flow: column;
   align-items: center;
   justify-content: flex-end;
   gap:1em;
   background: url(../images/heading-bg.webp) no-repeat;
   background-size: cover;
   background-position: center;
   text-align: center;
   padding-top:5em;
}

.heading p{
   font-size: 1.8em;
   color:var(--orangeWheel);
   text-transform: uppercase;
   font-weight: 700;
}

.heading p a{
   color:var(--navLink);
}
.heading p a:hover{
   color:var(--navLinkHover);
   text-decoration: underline;
}

@keyframes fadeIn {
   0%{
      transform: translateY(1rem);
      opacity: .2s;
   }
}

.header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   max-width: var(--maxw);
   margin:0 auto;
   position: relative;
    z-index: 9999;
  /* background-color: var(--color-white-soft); */
   background-color:var(--appBarBackground);
    box-shadow: 0 2px 5px var(--btnBorderShadow);
}

/* ===================================================================
   Navigation - Grundlegendes Design
   =================================================================== */
.header-inner {
  display: inline-flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: .75rem 1rem;
  max-width: var(--maxw);
  margin: 0 auto;
  position: relative;
}

.header-inner img{
    height: 48px;
    width: 48px;
}

.header .menu {
    position: relative;
	/* background-color:var(--white); */
}

.header .menu-icon {
    display: block;
    cursor: pointer;
    /* padding: 10px; */
/* font-size: 2.5rem; */
}

.header .menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
    /* background: var(--white); */
    color: #fff;
}

.header .menu-list li {
    border-bottom: 1px solid #444;
        font-size: 1.3rem;
        font-weight: 500;
}

.header .menu-list li a {
    text-decoration: none;
    color:var(--moosGreenDark);
    display: block;
    padding: 10px;
}
.header .menu-list li a:hover {
    text-decoration: underline;
    color:var(--navLinkHover);
    display: block;
    padding: 10px;
}

/* Checkbox-Trick für das Umschalten */
#menu-toggle {
    display: none;
}

#menu-toggle:checked + .menu-icon + .menu-list {
    display: block;
}

.session-timer {
    margin-left: 8px;
    margin-top:10px;
    padding-top:5px;
    cursor: pointer;
    font-size: 0.8rem;
    /* font-weight: bold; */
        color:var(--moosGreenDark); /* gleiche Farbe wie Navigation */
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.session-timer.warning {
    color: red;
}

/* ===================================================================
   Nachrichtenbox
   =================================================================== */
.messages {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between; /* UL links, Icon rechts */
  padding: 0.75rem 1rem;
}

.messages ul {
  margin: 0;
  padding: 0;
  text-align: left; /* optional */
}

.messages i {
  cursor: pointer;
  flex-shrink: 0;
}


.messages.success {
  background-color: var(--message-bg);
  border: var(--border);
  text-align: center;
  list-style: none;
}
.messages.error {
  background-color: var(--error-bg);
  border: 1px solid var(--color-border-error);
  text-align: center;
  list-style: none;
}
  
.messages .close-msg {
  margin-left: auto;
  background: transparent;
  border: 0;
  line-height: 1;
  width: var(--tap);
  height: var(--tap);
  cursor: pointer;
}

.messages i{
   cursor: pointer;
   /* font-size: 1.4rem; */
}
.messages li{
    list-style: none;
    /* font-size: 1.4rem; */
}

/* ===================================================================
   Home
   =================================================================== */
.home{
   max-height: 40vh;
   /* min-height: 25vh; */
   background:linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)), url(../images/home-bg.jpg) no-repeat;
   background-size: cover;
   background-position: center;
   display: flex;
   align-items: center;
   justify-content: center;
   padding-top:3rem;
}

.home .content{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    max-width:1200px;
    margin:0 auto;
    padding:1rem;
    box-sizing:border-box;
}

.home-text{
    flex:1 1 60%;
    min-width:220px;
}

.home-text .bannertext{
   /* font-size: 3.0rem; */
   color:var(--white);
    font-weight:700;
    /* margin:0 0 .5rem 0; */
    line-height:1.15;
}

.home-text .lead{
   /* font-size:1.8rem; */
   color:var(--white);
   /* padding:1rem 0; */
   /* line-height: 1.5; */
   margin:0 0 0.5rem 0;

}


/* ===================================================================
   einfaches Modal styling
   =================================================================== */
.modal {
    display: none;
    position: fixed;
    z-index: 999;
    left: 0; top: 100;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.6);
}
.modal-content {
    background-color: #fff;
    margin: 10% auto;
    padding: 20px;
    width: 300px;
    text-align: center;
}
.close {
    float: right;
    font-size: 20px;
    cursor: pointer;
}

/* ===================================================================
  Timeline-Section / download & inbetriebnahme
   =================================================================== */
.timeline .box{
   padding:1.0rem;
   border-radius: .5rem;
   border:var(--border);
   box-shadow: var(--btnBorderShadow);
   background-color: var(--background);
}

    .timeline .container{
      max-width: var(--maxw);
      margin:0 auto;
      position:relative; 
   }

    .timeline {
      max-width:var(--maxw); 
      margin:0 auto
   }
    .timeline p.lead{
      margin:0 0 22px;
      color:var(--muted)
   }
    .timeline .item{
      display:flex; 
      align-items:flex-start; 
      width:100%; 
      /* margin:14px 0;  */
      gap:10px;
      flex-wrap: wrap
   }
      
   
      /* left column (step label) */
    .timeline .item .left{
      width:100%; 
      max-width:260px; 
      padding:5px; 
      display:flex; 
      align-items:center;
     
      border-radius:12px;
   }
    .timeline .item .left .bubble{
      min-width: 200px;
      background:var(--card); 
      border-radius:12px; 
      padding:8px 8px; 
      border:1px solid var(--line); 
      display:flex; 
      gap:8px; 
      align-items:center;
      box-shadow:0 3px 5px var(--line); 
   }
    .timeline .step-number{
      width:30px; 
      height:30px; 
      border-radius:10px; 
      /* background:linear-gradient(135deg,var(--accent),#affc2b);  */
      background: linear-gradient(to bottom, var(--btnTop), var(--btnBottom)); /* leichter Verlauf */
      /* color:var(--headline);  */
      display:flex; 
      align-items:center; 
      justify-content:center; 
      font-weight:700
   }
    .timeline .step-title{
      font-weight:600
   }
    .timeline .step-sub{
      font-size:0.95em; 
      color:var(--muted)
   }

    /* right column (action) */
    .timeline .item .right{
      width:60%; 
      padding:5px;
   }
    .timeline .card{
      background:var(--card); 
      padding:0px 16px 10px 16px; 
      border-radius:12px; 
      box-shadow:0 8px 28px var(--btnBorderShadow); 
      border:1px solid var(--btnBorderLight);
      color:var(--primary);
   }
    .timeline .card p{
      margin:0 0 8px
   }
    .timeline .card ul{
      /* margin:8px 0 0 20px; */
      padding-left: 1em;
      
   }
    .timeline .muted{
      color:var(--muted); 
      font-size:0.9em
   }

/* ===================================================================
   FAQ-Section
   =================================================================== */
.faq{
   /*background-color: var(--white);*/
   max-width:var(--maxw); 
   margin:0 auto
}

.faq .box-container{
   max-width: var(--maxw);
   width:fit-content;
   margin:0 auto;
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
   align-items: center;
   gap:1.0rem;
   justify-content: center;
}

.faq .box-container .box{
   position: relative;
   height: fit-content;
 /*  background-color: var(--white);*/
   box-shadow: var(--box-shadow);
   border:var(--border);
   border-radius: .5rem;
   text-align: left; 
   padding:.5rem;
}

/* .faq .box-container .box img{
   height: 10rem;
   width: 16rem;
   border-radius: 5%;
} */

.faq .box-container-answers{
   max-width: 800px;
   margin:0 auto;
   /* display: grid; */
   grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
   align-items: center;
   padding:0.5em 0;
   gap:0.5em;
   justify-content: center;
}

.faq .box-container-answers .box {
   position: relative;
   height: max-content;
   max-width: 100%;
   box-shadow: var(--box-shadow);
   border:var(--border);
   border-radius: .5rem;
   text-align: left;
   /* padding:1em 2em; */
   color:var(--black);
   margin-top: 0.2em;
}

.faq .box-container-answers .box  p{
   position: relative;
   /* padding-bottom:1.5em; */
   line-height: 1.2em;
   color:var(--primary);
/*   font-size: 1.5rem;*/

}

.faq-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;

}
.faq-category {
    display: flex;
    align-items: center;
    gap: 8px;
	/* font-size: 1.7rem; */
    text-decoration: none;
    background: #f4f4f4;
    padding: 8px 16px;
    border-radius: 8px;
    color: #333;
    transition: background 0.2s;
}

.faq-category:hover {
    background: #e0e0e0;
}
.faq-accordion {
    max-width: 700px;
    margin: 0 auto;
	/* font-size: 1.7rem; */
}


.faq-item {
    margin-bottom: 5px;
    /* border: 1px solid #ddd; */
    border-radius: 6px;
 /*   background: #fff;*/
    padding: 0 8px;
}
.faq-item summary {
    font-weight: bold;
    cursor: pointer;
    padding: 8px 0;
}
.faq-answer {
    padding: 8px 0 12px 0;
}
/* section faq ende*/   

/* ===================================================================
   Produkte
   =================================================================== */

.products .box-container{
    max-width: var(--maxw);
   display: flex;
   grid-template-columns: repeat(auto-fit, 30rem);
   align-items: flex-start;
   gap:1.5em;
   justify-content: center;
}

.products .box-container .item-box{
   min-width: 200px;
    border-radius: .5rem;
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   padding:.8em;
   text-align: center;
   border:var(--border);
   position: relative;
}

.products .box-container .item-box .image{
   height: 4em;

}

.products .box-container .item-box .name{
   padding:.5em 0;
   color:var(--primary);
   font-weight: 700;
   text-align: left;
}
.products .box-container .item-box .name2{
   /* padding:1rem 0; */
   color:var(--primary);
}

.products .box-container .item-box .points {
   /* width: 100%; */
   padding:.3em .3em;
   border-radius: .5rem;
   border:var(--border);
   margin:1em 0;

}

.products .box-container .item-box .price {
   position: absolute;
   top:1em; right:1em;
   border-radius: .5rem;
   padding:1em;
   color:var(--primary);
   font-weight: 700;
   background-color: var(--mantis);
         line-height: .5em;
}
.products .box-container .item-box .price_old {
   position: absolute;
   top:1em; left:8em;
   border-radius: .5rem;
   padding:1em;
   text-decoration: line-through;
   color:var(--primary);
   background-color: var(--disableButton);
      line-height: .2em;
}

.products .box-container .item-box .discount {
   position: absolute;
   top:2.5em; left:9em;
   border-radius: .5rem;
   padding:0.8em;
   /* color:var(--white); */
   font-weight: 600;
   background-color: var(--color-red);
   line-height: .05em;
}

/* ===================================================================
   Feedback-Beschreibungen
   =================================================================== */

.feedback .flex{
   max-width: var(--maxw);
   margin:0 auto;
   display: flex;
   align-items: center;
   flex-wrap: wrap;
}

.feedback .flex .image{
   flex:1 1 40rem;
}

.feedback .flex .image img{
   width: 100%;
}

.feedback .flex .content{
   flex:1 1 40rem;
   padding:.5rem;
   background-color: var(--color-white-soft);
}

.feedback .flex .content .box-container{
   display: flex;
   grid-template-columns: repeat(auto-fit, 30rem);
   justify-content: center;
   gap:1.0rem;
   max-width: var(--maxw);
   margin:0 auto;
   align-items: flex-start;
}

.feedback .flex .content .box-container .box{
   padding:1.0rem;
   border-radius: .5rem;
   border:var(--border);
   /* min-width: 200px; */
   box-shadow: var(--box-shadow);
   background-color: var(--color-white-soft);
}
.feedback .flex .content .box-container .box h2{
   text-align: left;
}

.feedback .flex .content span{
   padding:1rem 0;
   line-height: 1.5;
   /* font-size: 1.7rem; */
   color:var(--orangeWheel);
}
#review_message {
    margin-top: 1rem;
    /* font-size: 1.6rem; */
    font-style: italic;
    text-align: center;
}
#reviewer_name {

    font-weight: bold;
    text-align: center;
}





/* ===================================================================
   Footer-Section
   =================================================================== */
.footer{
   background-color: var(--color-white-soft);
}

.footer .box-container{
   max-width: var(--maxw);
   margin:0 auto;
   display: flex;
   grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
   gap:3em;
   align-items: flex-start;
   justify-content: center;
}

.footer .box-container .box{
   border: none;
}

.footer .box-container .box h3{
   text-transform: uppercase;
   color:var(--primary);
   font-size: 0.8em;
   padding-bottom: 0rem;
}

.footer .box-container .box p,
.footer .box-container .box a{
   display: block;
   font-size: 0.8em;
   color:var(--navLink);
   padding: 0;
   margin: 0;
}

.footer .box-container .box a:hover{
   color:var(--navLinkHover);
   text-decoration: underline;
}

.footer .credit{
   text-align: center;
   font-size: 0.8em;
   color:var(--divider);
   border-top: var(--border);
   /* margin-top: 2.5rem; */
   padding-top: 1.0rem;
}

.footer .credit span{
   color:var(--secondary);
}
/* Scroll-to-top Button */
#scrollToTopBtn {
   width: 50px;
    display: none; /* Initial nicht sichtbar */
    position: fixed;
    bottom: 40px;
    right: 30px;
    z-index: 9999;
    background-color: #556b2f;
    color: white;
    border: none;
    padding: 10px 12px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}

#scrollToTopBtn:hover {
    background-color: #6b8e23;
}

#scrollToTopBtn.show {
    display: block;
    opacity: 0;
}

/* =========================
   Responsive Typografie
   (Skalierung für alle Texte)
   ========================= */

/* Unter 768px: 64% der Standardschriftgröße */
/* Unter 768px: 75% der Standardschriftgröße */
@media (max-width: 768px) {
    body {
        font-size: calc(var(--base-font-size) * 0.75);
    }

    h1 {
        font-size: calc(1.8rem * 0.75);
    }

    h2 {
        font-size: calc(1.6rem * 0.75);
    }

    h3 {
        font-size: calc(1.4rem * 0.75);
    }
.header {
   display: block;
  
}
    /*Abstand zw-ischen Logo und Menü auf mobilen Geräten*/
.header-inner {
    display:block /* oder flex mit column direction */;

}
.header .menu { /* Position Menü-Toggle fix rechts*/
    position: absolute;
    top: 10px;
    right: 20px;
        background-color: var(--background);
}

.heading {
   max-height: 2em;
   justify-content: end;
}
.heading p{
   font-size: 1.5em;

}

    /* description ab 768px ausgeblendet (also hier und kleiner noch sichtbar) */
    section.description {
        display: none;
    }

    /* two_column: Spalten untereinander */
    .two_column_3070 {
        flex-direction: column;
    }

    .two_column_3070 .left_column,
    .two_column_3070 .right_column {
        width: 90%;
        margin-left: auto;

    }
    /* two_column: Spalten untereinander */
   .two_column_5050 {
        flex-direction: column;
    }

    .two_column_5050 .left_column,
    .two_column_5050 .right_column {
        width: 90%;
        margin-left: auto;

    }

    /* Form-Inputs untereinander */
    .form-row {
        flex-direction: column;
        align-items: stretch;

    }
    /* Form-Inputs untereinander */
    .form-row3 {
        flex-direction: column;
        align-items: stretch;
    }
    .form-row3 input {
        width: 100%;        /* nimmt volle der Breite ein */
        margin-left: auto; /* schiebt das Input nach rechts */
    }


.products .box-container{
   display: block;
}
.products .box-container .item-box{
   margin-bottom: 1.5em;
   max-width: 300px;
}

/* standorte: Spalten untereinander, mit Abstand */
section.box-container{
   display: block;
}
section.box-container .box{
   margin-bottom: 1.5em;
   max-width: 350px;
}

.header .menu-icon {
font-size: 2.5em;
padding-right: 2px;
padding-left: auto;
}

.header .menu-list {
font-size: 1em;
}

/* timeline: Spalten untereinander, mit Abstand */
.timeline .card{
      padding:0px; 
   }
.timeline .item .left {
   width: 100%; 
   max-width: 100%;

}
.timeline .item .left .bubble{
   width: 100%; 

}

/* right column (action) */
.timeline .item .right{
    width:100%; 
}


}

/* Unter 600px: 50% der Standardschriftgröße */
/* Unter 600px: 60% der Standardschriftgröße */
@media (max-width: 600px) {
    /* body {
        font-size: calc(var(--base-font-size) * 0.6);
    } */

    h1 {
        font-size: calc(1.8rem * 0.6);
    }

    h2 {
        font-size: calc(1.6rem * 0.6);
    }

    h3 {
        font-size: calc(1.4rem * 0.6);
    }

    /* button,
    label,
    input,
    table,
    th,
    td {
        font-size: 1rem; /* basiert auf noch kleinerer body-font-size 
    } */

/*faq bild ausblenden*/
.faq-group-image img{
   max-width: 20px;
   height: auto;

}    
}

/* =========================
   Desktop-spezifische Regeln
   ========================= */

/* description ab 768px ausblenden */
@media (min-width: 768px) {
    section.description {
        display: block;
    }

.header .menu-list {
        display: flex;
    }
.header .menu-icon {
        display: none;
    }
   .header .menu-list li {
        border: none;
    }

}