@charset "UTF-8";
/*
Theme Name: Hyptime Website
Theme URL: https://www.hyptime.com
Version: 6.0

AUFBAU
  1. Basis: Variablen, Reset, Schriften, Typografie
  2. Formulare, Buttons, Meldungen, Modal
  3. Header und Mega-Menü
  4. Unternavigation (web_subnav.php)
  5. Brotkrumen (web_breadcrumb.php)
  6. Footer und „Nach oben“ (web_footer.php)
  7. FAQ (auf allen Seiten gleich)
  8. Seitenrahmen und Formularlayout
  9. Altbestand (nur für ältere Seiten, siehe Hinweis dort)

Nur Bausteine, die auf vielen Seiten vorkommen, gehören hierher.
Seitenspezifisches CSS bleibt in der jeweiligen Seite.
*/
:root {
    --inp-bg: #ffffff;
    --inp-bg-hover: #ffffff;
    --inp-bg-focus: #ffffff;
    --inp-border: #d3d7de;
    --inp-border-hover: #a9b1bd;
    --inp-radius: 12px;
    --inp-pad-x: 16px;
    --inp-height: 58px;
    --inp-text: #111111;
    --inp-label: #6b7280;
    --inp-label-focus: #006fcf;
    --inp-accent: #006fcf;
    --inp-success: #12855b;
    --inp-error: #d0342c;
    --btn-radius: 7px;
    --search-accent: #006fcf;
    --search-bg: #f5f9fd;
    --search-border: #cfe3f5;
}

/* =================================================================
   1. BASIS
   ================================================================= */

/* RESET
*******************************************************/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, del, dfn, font, img, ins, kbd, q, s, samp,
sub, sup, tt, var, dir, dd, dl, dt, li, ol, ul, form, fieldset, input, textarea, label, 
table, legend, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
    outline: 0;  
	font-family: inherit;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	text-align: left;
	vertical-align: baseline;
}

/* FONT FACES — Zusammengefasst unter 'Roboto' und 'Roboto Serif' */
@font-face { font-family: 'Roboto'; src: url('cssfonts/RobotoLight.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; } 
@font-face { font-family: 'Roboto'; src: url('cssfonts/RobotoFlexRegular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } 
@font-face { font-family: 'Roboto Serif'; src: url('cssfonts/RobotoSerifCondThin.ttf') format('truetype'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roboto Serif'; src: url('cssfonts/RobotoSerifCondenRegular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roboto Serif'; src: url('cssfonts/RobotoSerifCondSemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }

:focus {outline: 0;}
img, a img, :link img, :visited img {border: none;} 
:-moz-any-link:focus {outline: none;  }
ul, ol, li { list-style: none; }
html, nav, map, dt, isindex, form {  display: block; } 
/* HTML 5 elements display block-level*/  
header, nav, article, footer, address, section {  display: block;  }
blockquote:before, blockquote:after, q:before, q:after {	content: "";	}
blockquote, q {    quotes: "" ""; }
/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: separate; border-spacing: 0;}
caption, th, td {  text-align: left;  font-weight: normal; 	}
   
html { scroll-behavior: smooth; }
@media screen and (prefers-reduced-motion: reduce) { 	html { scroll-behavior: auto; } }

/*BODY, LINKS 
******************************************************* 006FCF  005fb1 */
body { color: #000; font-family:'Roboto', 'Arial', sans-serif; font-weight: 400; font-size:14px; background-color: #fff; }
a{ color: #006FCF; cursor: pointer;text-decoration: none; }
a:hover { color:#0361bf;  } 
p{ font-size: 15px; font-family:'Roboto', sans-serif; font-weight: 400; } 
span{ display: inline-block;}
.pBig{ font-size: 22px; line-height: 28px; font-family:'Roboto', sans-serif; font-weight: 300; } 
.pBig2{ font-size: 18px; font-family:'Roboto', sans-serif; font-weight: 300; }  
.pSmall{ font-size: 14px; }  
.pSmall2{ font-size: 12px; }  
 
h1, h2, h3, h4, h5, h6{ color: #0c131f; font-family:'Roboto Serif', 'Helvetica', serif; font-weight: 600; }
h1{ font-size: 38px; font-family: 'Roboto Serif', serif; font-weight: 400; } 
h2{ font-size: 30px; } 
h3{ font-size: 24px; } 
h4{ font-size: 20px; } 
h5{ font-size: 44px;   } 
h6{ font-size: 44px; font-family: 'Roboto Serif', serif; font-weight: 100; }

.h1titel{ font-size: 38px; text-align: center; margin:60px 0px 20px 0px; font-family: 'Roboto Serif', serif; font-weight: 600; }  
.h2titel{ font-size: 22px; text-align: center; line-height: 28px; font-family:'Roboto', sans-serif; font-weight: 300; margin-bottom: 40px; }  

@media only screen and (max-width:800px){
    .h1titel{ font-size: 30px;   }  
    .h2titel{ font-size: 20px; font-weight: 100;   }  
   h1{ font-size: 34px;} 
   h5{ font-size: 34px;} 
   h6{ font-size: 34px;} 
} 

.removeX{ padding:2px 6px; cursor: pointer;margin: 0px 7px; font-size: 20px; font-family: 'Roboto', sans-serif; font-weight: 300; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; width: 20px; height: 20px; }
.removeX:hover{ color:#fff;   }

label{ margin:15px 4px; font-size: 15px;  }
.inputHalb, .inputviertel{ font-size: 15px; }
.geoLoading{ display: none; }

.inputBlackKl{ border-bottom: 3px solid #676767; color:#e3e3e3; background-color: transparent; padding:3px; width:100%; }
.inputTeildate{ background-color: #fff; padding:2px; text-align: right;width:120px; font-size: 14px; }

.input{ border: 1px solid #cecece; background-color: #fff; padding: 12px 5px; width:100%; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; font-size: 16px; }
.inputHalb{ border: 1px solid #cecece; background-color: #fff; box-sizing: border-box; padding: 12px 5px; width:49.5%; border-radius: 5px; -moz-border-radius:5px; -webkit-border-radius:5px; }
.inputviertel{ border: 1px solid #cecece; background-color: #fff; box-sizing: border-box; padding: 12px 5px; width:24.5%; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;}
.input:focus, .inputHalb:focus, .inputviertel:focus { outline: none; border: 1px solid #0086cd; box-shadow: 0px 0px 5px #0086cd; -moz-box-shadow: 0px 0px 5px #0086cd; -webkit-box-shadow: 0px 0px 5px #0086cd; }
.inputKlein{ border: 1px solid #cecece; background-color: #fff; padding:3px; width:100%; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-sizing: border-box; }

input[type='date'], input[type='time'] { min-width: 60px; } 

input[type="button"] { -webkit-appearance: none; font-size: 14px; font-family:"Roboto Serif", serif; font-weight: 400; }
input[type="submit"] { -webkit-appearance: none; font-size: 14px; font-family:"Roboto Serif", serif; font-weight: 400; }

/* =================================================================
   2. FORMULARE, BUTTONS, MELDUNGEN, MODAL
   ================================================================= */

/* =================================================================
   EINGABEFELDER, EIN DESIGN FÜR ALLE SEITEN
   -----------------------------------------------------------------
   Markup überall gleich:
     <div class="labelInInput">
         <input|select|textarea class="inputInhalt" ...>
         <label class="inputLabel">Bezeichnung</label>
     </div>
   Die Bezeichnung steht immer klein oben im Feld, egal ob das Feld
   leer ist, einen Platzhalter hat oder ein Auswahlfeld ist. Dadurch
   sieht jedes Feld auf jeder Seite gleich aus und nichts springt.
   Lage, Größe und Abstände sind mit !important gesichert, damit
   ältere seitenspezifische Stylesheets (zum Beispiel PRICING) das
   Feld nicht mehr verschieben können. Farben und Zustände lassen
   sich weiterhin über die Variablen --inp-* steuern.
   ================================================================= */
.labelInInput { position:relative !important; box-sizing:border-box; width:100%; margin:0 0 16px 0; padding:0 !important; }

.inputInhalt {
    -webkit-appearance:none; -moz-appearance:none; appearance:none;
    box-sizing:border-box !important; display:block; width:100% !important; margin:0 !important;
    min-height:var(--inp-height) !important; height:auto;
    padding:27px var(--inp-pad-x) 9px var(--inp-pad-x) !important;
    background-color:var(--inp-bg); border:1px solid var(--inp-border) !important; border-radius:var(--inp-radius) !important;
    font-family:"Roboto",Arial,sans-serif !important; font-weight:400 !important; font-size:16px !important; line-height:1.35 !important;
    color:var(--inp-text); text-align:left !important; text-indent:0; vertical-align:top;
    box-shadow:none;
    transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.inputInhalt:hover:not(:focus):not([readonly]):not([disabled]) { background-color:var(--inp-bg-hover); border-color:var(--inp-border-hover) !important; }
.inputInhalt:focus { outline:none; background-color:var(--inp-bg-focus); border-color:var(--inp-accent) !important; box-shadow:0 0 0 4px rgba(0,111,207,.12); }
.inputInhalt::placeholder { color:transparent; opacity:0; }
.inputInhalt::-webkit-input-placeholder { color:transparent; }

.inputLabel {
    position:absolute !important; pointer-events:none; z-index:2;
    left:var(--inp-pad-x) !important; right:auto !important; top:9px !important; bottom:auto !important;
    margin:0 !important; padding:0 !important; width:auto !important; height:auto !important;
    max-width:calc(100% - var(--inp-pad-x) - 40px) !important;
    transform:none !important;
    font-family:"Roboto",Arial,sans-serif !important; font-weight:400 !important;
    font-size:12.5px !important; line-height:1.2 !important; letter-spacing:.01em;
    color:var(--inp-label); text-align:left !important;
    white-space:nowrap; text-overflow:ellipsis; overflow:hidden;
    background:transparent !important;
    transition:color .18s ease;
}
.inputInhalt:focus + .inputLabel { color:var(--inp-label-focus); }

/* Auswahlfelder */
select.inputInhalt {
    padding-right:44px !important; cursor:pointer;
    background-repeat:no-repeat; background-position:right 16px center; background-size:12px 8px;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5L6 6.5L11 1.5'/%3E%3C/svg%3E");
}
select.inputInhalt::-ms-expand { display:none; }
select.inputInhalt > option { padding-left:0; color:#111111; }

/* Mehrzeilige Felder */
textarea.inputInhalt { min-height:120px !important; padding-top:29px !important; resize:vertical; line-height:1.5 !important; overflow:auto; }

/* Zahlen und Datum */
input.inputInhalt[type="number"] { -moz-appearance:textfield; }
input.inputInhalt[type="number"]::-webkit-outer-spin-button, input.inputInhalt[type="number"]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
input.inputInhalt[type="date"], input.inputInhalt[type="time"] { min-width:0; }
input.inputInhalt[type="date"]::-webkit-date-and-time-value, input.inputInhalt[type="time"]::-webkit-date-and-time-value { text-align:left; margin:0; }
input.inputInhalt[type="date"]::-webkit-calendar-picker-indicator, input.inputInhalt[type="time"]::-webkit-calendar-picker-indicator { opacity:.55; cursor:pointer; }
input.inputInhalt[type="date"]:hover::-webkit-calendar-picker-indicator { opacity:1; }

.inputInhaltBlock { border:1px solid var(--inp-border); }

/* Nur lesbar oder gesperrt: gleiche Form, ruhigere Farben */
.inputInhalt[readonly], .inputInhalt[disabled] { background-color:#f3f4f6; border-color:#e4e7eb !important; color:#4b5563; cursor:default; box-shadow:none; }
.inputInhalt[readonly]:focus, .inputInhalt[disabled]:focus { outline:none; border-color:#e4e7eb !important; box-shadow:none; }
.inputInhalt[disabled] { opacity:1; cursor:not-allowed; }
.inputInhalt[readonly] + .inputLabel, .inputInhalt[disabled] + .inputLabel { color:#9aa1ab; }
.inputInhalt.inputGesperrt[readonly], .inputInhalt.inputGesperrt[disabled] { background-color:#f3f4f6; color:var(--inp-label); cursor:not-allowed; }
select.inputInhalt[disabled] {
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23b6bcc4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5L6 6.5L11 1.5'/%3E%3C/svg%3E");
}

/* Rückmeldung nach der Prüfung */
.inputInhalt.feedback-success { border-color:var(--inp-success) !important; background-color:#f2fbf7; box-shadow:0 0 0 4px rgba(18,133,91,.12); }
.inputInhalt.feedback-success + .inputLabel { color:var(--inp-success); }
.inputInhalt.feedback-error { border-color:var(--inp-error) !important; background-color:#fdf4f3; box-shadow:0 0 0 4px rgba(208,52,44,.12); }
.inputInhalt.feedback-error + .inputLabel { color:var(--inp-error); }
.inputInhalt.feedback-success:focus { box-shadow:0 0 0 4px rgba(18,133,91,.22); }
.inputInhalt.feedback-error:focus { box-shadow:0 0 0 4px rgba(208,52,44,.22); }

/* Automatisch ausgefüllte Felder (Chrome, Safari) nicht gelb einfärben */
.inputInhalt:-webkit-autofill, .inputInhalt:-webkit-autofill:hover, .inputInhalt:-webkit-autofill:focus {
    -webkit-text-fill-color:var(--inp-text); -webkit-box-shadow:0 0 0 1000px var(--inp-bg-focus) inset; transition:background-color 9999s ease-out 0s;
}

/* Mehrere Felder nebeneinander, auf dem Handy untereinander */
.form-row { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 14px; }
.form-row-3 { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0 14px; }
@media (max-width:600px) {
    .form-row, .form-row-3 { grid-template-columns:minmax(0, 1fr); }
    .form-row > *, .form-row-3 > * { grid-column:auto !important; }
}

@keyframes pulse-green { 0%{box-shadow:inset 0 0 0 0 rgba(18,133,91,.4);} 50%{box-shadow:inset 0 0 6px 4px rgba(18,133,91,0);} 100%{box-shadow:inset 0 0 0 0 rgba(18,133,91,0);} }
@keyframes pulse-red { 0%{box-shadow:inset 0 0 0 0 rgba(208,52,44,.4);} 50%{box-shadow:inset 0 0 6px 4px rgba(208,52,44,0);} 100%{box-shadow:inset 0 0 0 0 rgba(208,52,44,0);} }
.editChange { transition:box-shadow .8s ease-out,border-color .8s ease-out; }

@media (prefers-reduced-motion:reduce) { .inputInhalt, .inputLabel { transition:none; } }

@media (prefers-color-scheme:dark) {
    :root.hyp-dark { --inp-bg:#1b1f24; --inp-bg-hover:#20252b; --inp-bg-focus:#12161a; --inp-border:#2b3138; --inp-border-hover:#3a424b; --inp-text:#e8eaed; --inp-label:#9aa3ad; }
}

/* SUCHFELDER */
.er-search-field { position:relative; margin-bottom:14px; }
.er-search-caption { display:block; font-size:12.5px; font-weight:600; color:var(--search-accent); margin-bottom:5px; }
.er-search-box { position:relative; }
.er-search-box::before {
    content:""; position:absolute; left:14px; top:50%; width:16px; height:16px; margin-top:-8px; pointer-events:none;
    background-repeat:no-repeat; background-size:contain;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006fcf' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");
}
.er-search-input { box-sizing:border-box; width:100%; min-height:52px; padding:0 14px 0 40px; background:var(--search-bg); border:1.5px solid var(--search-border); border-radius:var(--inp-radius); font-family:"Roboto",system-ui,sans-serif; font-weight:300; font-size:15px; color:var(--inp-text); transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease; }
.er-search-input::placeholder { color:#7c98b8; }
.er-search-input:hover { border-color:var(--search-accent); }
.er-search-input:focus { outline:none; background:#fff; border-color:var(--search-accent); box-shadow:0 0 0 3px rgba(0,111,207,.14); }

/* BUTTONS */
.submit, .submitBlack, .submitLightBlue, .submitBlue, .submitBlueBig,
.submitGreenBig, .submitYellowBig, .submitRed, .submitYellow, .submitGrau {
    -webkit-appearance:none; appearance:none; box-sizing:border-box;
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    border:none; outline:none; cursor:pointer; text-decoration:none;
    font-family:"Roboto",Arial,sans-serif; font-weight:600; line-height:1.2;
    letter-spacing:.01em; border-radius:var(--btn-radius);
    transition:background-color .2s ease, box-shadow .2s ease, transform .12s ease;
}
.submit:hover, .submitBlack:hover, .submitLightBlue:hover, .submitBlue:hover, .submitBlueBig:hover,
.submitGreenBig:hover, .submitYellowBig:hover, .submitRed:hover, .submitYellow:hover { transform:translateY(-1px); }
.submit:active, .submitBlack:active, .submitLightBlue:active, .submitBlue:active, .submitBlueBig:active,
.submitGreenBig:active, .submitYellowBig:active, .submitRed:active, .submitYellow:active { transform:translateY(0); }
.submit:focus-visible, .submitBlack:focus-visible, .submitLightBlue:focus-visible, .submitBlue:focus-visible,
.submitBlueBig:focus-visible, .submitGreenBig:focus-visible, .submitYellowBig:focus-visible,
.submitRed:focus-visible, .submitYellow:focus-visible { box-shadow:0 0 0 3px rgba(0,111,207,.3); }

.submit { background:#0070ba; color:#f3f4f8; padding:12px 5px; width:100%; border-radius:var(--btn-radius); text-align:center; cursor:pointer; }
.submit:hover { background:#0086cd; }
.submitBlack{ background: #1c222b; color: #f3f4f8; padding: 12px 0; width:100%; border-radius: var(--btn-radius); text-align: center; cursor: pointer; }
.submitBlack:hover{ background: #222d3e;}

.submitLightBlue{ background-color: #006FCF;font-size: 16px; width: 100%;margin-top: 20px; color: #fff; padding: 12px 15px; border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; text-align: center; cursor: pointer; } 
.submitLightBlue:hover{ background-color:#0361bf; }

.submitBlue{ background: #4da6c6; color: #fff; padding: 12px 0; width:100%; border-radius: var(--btn-radius); text-align: center; cursor: pointer; }
.submitBlue:hover{ background: #2984a5;}
 
.submitBlueBig{ background: #006fcf; color: #fff; padding: 16px 22px; min-height:54px; font-size:16px; width:auto; border-radius: var(--btn-radius); text-align: center; cursor: pointer; border:none !important; outline:none; box-shadow:0 6px 18px rgba(0,111,207,.22); }
.submitBlueBig:hover{ background: #0361bf; box-shadow:0 10px 24px rgba(0,111,207,.3);}
.submitGreenBig{ background: #a3c032; color: #fff; padding: 15px; border-radius: var(--btn-radius); text-align: center; cursor: pointer; }
.submitGreenBig:hover{ background: #7f9919;}
.submitYellowBig{ background: #e9b614; color: #0b182f; padding: 15px; border-radius: var(--btn-radius); text-align: center; cursor: pointer; }
.submitYellowBig:hover{ background: #cc9f10;}
.submitKl{ display:inline-block; width:auto; padding:3px 5px; border-radius:3px; }

.blueSubmitNew{ background: #006fcf; color: #fff;border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; padding: 3px 10px 5px 10px; cursor: pointer; }
.blueSubmitNew:hover{ background: #0361bf; }
.blueSubmitNew a{ color: #fff; }

.blackSubmitNew{ background: #1c222b; color: #f3f4f8;border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; padding: 3px 10px 5px 10px; cursor: pointer; }
.blackSubmitNew:hover{ background: #222d3e; }
.submitFull{ width:100%; }

.submitBlueTopFivNav{ background: #fff; color: #363B3C;border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; padding: 6px 10px 6px 10px; cursor: pointer; font-family:"Roboto", sans-serif; font-size: 14px; font-weight: bold;text-align: center; min-width: 110px; }
.submitBlueTopFivNav a:hover{ color:#363B3C; }

.submitBlueTopFivNavExProdukt{ background: #0072e3; color: #0072e3;border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; padding: 6px 10px 6px 10px; cursor: pointer; font-family:"Roboto", sans-serif; font-weight: 300; font-size: 15px; text-align: center; }

.submitGrau{ background: #dedede; color: #8a8a8a; padding: 12px 15px; border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; text-align: center; cursor: pointer; }
.submitGrau:hover{ background: #dedede;}

.submitRed{ background: #ab1f08; color: #f8f1f0; padding: 12px 0; width:100%; border-radius: var(--btn-radius); text-align: center; cursor: pointer; }
.submitRed:hover{ background: #8f1b08;}

.submitYellow{ background: #e9b614; color: #0b182f; padding: 12px 0; width:100%; border-radius: var(--btn-radius); text-align: center; cursor: pointer; }
.submitYellow:hover{ background: #cc9f10;}

.responsive-image { max-width: 100%; height: auto; }
  
.moreData{ width:100%; border-top: 1px dotted #b2dfdb; color: #939393; margin: 0px auto; font-size: 13px; clear: both; padding:5px 0px;}
.moreData .mul{ width:200px; margin: 0px auto; text-align: center; cursor: pointer; }
.moreData .mul .mdPfeil{ border: 1px solid #80cbc4; width: 23px; height:40px; text-align: center; margin: 0px auto; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; font-size:20px; color: #80cbc4; transition: .3s; }
.moreData .mul:hover{ color: #80cbc4; }
.moreData .mul:hover .mdPfeil{ padding-top: 10px; color: #e9bf0d; height: 30px; }
  
.rotate { transform: rotate(180deg); transition: .3s; }

.checkboxBlack[type="checkbox"], .checkboxWhite[type="checkbox"] { display:none; }
.checkboxBlack[type="checkbox"] + label::before, .checkboxWhite[type="checkbox"] + label::before { width: 22px; height: 22px; display: block; content: ""; float: left; margin-right: 5px; } 
.checkboxBlack[type="checkbox"] + label::before { background: url(../img/iconKl2.webp) -1px -27px no-repeat; background-size: 499px 51px; }
.checkboxBlack[type="checkbox"]:checked+label::before { background: url(../img/iconKl2.webp) -1px -3px no-repeat; background-size: 499px 51px; }

.checkboxWhite[type="checkbox"] + label::before { background: url(../img/iconKl2.webp) -26px -27px no-repeat; background-size: 499px 51px; }
.checkboxWhite[type="checkbox"]:checked+label::before { background: url(../img/iconKl2.webp) -26px -3px no-repeat; background-size: 499px 51px; }

.checkbox_slide { display:none; }
.checkbox_slide + label { width: 40px; height: 20px; border-radius: 20px; border: 2px solid #ddd; background-color: #eee; display: inline-block; content: ""; float: left; transition: background-color 0.5s linear; margin:0px; }
.checkbox_slide + label:hover { cursor: pointer; }
.checkbox_slide + label::before { width: 20px; height: 20px; border-radius: 20px; background-color: #fff; display: block; content: ""; float: left; margin-right: 5px; transition: margin 0.1s linear; box-shadow: 0px 0px 5px #aaa; }
.checkbox_slide:checked+label{ background-color: #006FCF; }
.checkbox_slide:checked+label::before { margin: 0 0 0 20px; }

.checkbox_slide_2 { display:none; }
.checkbox_slide_2 + label { width: 40px; height: 20px; border-radius: 20px; border: 2px solid #ddd; background-color: #eee; display: inline-block; content: ""; float: left; transition: background-color 0.5s linear; margin:0px; }
.checkbox_slide_2 + label:hover { cursor: pointer; }
.checkbox_slide_2 + label::before { width: 20px; height: 20px; border-radius: 20px; background-color: #fff; display: block; content: ""; float: left; margin-right: 5px; transition: margin 0.1s linear; box-shadow: 0px 0px 5px #aaa; }
.checkbox_slide_2:checked+label{ background-color: #e9bf0d; }
.checkbox_slide_2:checked+label::before { margin: 0 0 0 20px; }
  
.moreDataPage{ color: #000; font-size: 15px; text-align: center; padding-top:30px; }
.moreDataPage a{ color:#006bde; text-decoration: underline;}

.closeButton{ display: inline-block; cursor:pointer; color: #000; font-size: 38px; padding:10px; margin-top: 5px; }
.closeButton:before { content: "×";}
.closeButton:hover { color: #0c6eb8; }

/* FORMULAR-VALIDIERUNGSHINWEISE */
.formContent li,
.formContent li > div,
.form-row, .form-row-3, .form-section,
.labelInInput { position:relative; }

.inputAlert, .inputAlertRight {
    position:absolute; z-index:60; width:max-content; max-width:min(320px, 100%);
    animation:inpAlertIn .18s cubic-bezier(.2,.8,.3,1) both;
}
.inputAlert { left:0; bottom:100%; margin-bottom:10px; }
.inputAlertRight { left:100%; top:0; margin-left:11px; }

.inputAlert p, .inputAlertRight p {
    position:relative !important; margin:0 !important; padding:11px 32px 11px 14px !important;
    background:#f6f9fc !important; opacity:1 !important;
    border:1px solid #dce6f0 !important; border-radius:10px !important;
    font-family:"Roboto",Arial,sans-serif !important; font-size:13px !important; font-weight:400 !important;
    line-height:1.45 !important; color:#1d2939 !important; text-align:left !important; text-transform:none !important;
    box-shadow:0 10px 24px rgba(15,23,42,.12), 0 2px 6px rgba(15,23,42,.05) !important;
}

.inputAlert p .INPAlertClose, .inputAlertRight p .INPAlertClose {
    position:absolute !important; top:50% !important; right:8px !important; float:none !important; margin:-9px 0 0 0 !important;
    width:18px !important; height:18px !important; line-height:17px !important; text-align:center !important; border-radius:50% !important;
    font-size:14px !important; font-weight:400 !important; color:#9aa7b5 !important; cursor:pointer;
    transition:color .15s ease, background-color .15s ease;
}
.inputAlert p .INPAlertClose:hover, .inputAlertRight p .INPAlertClose:hover { color:#0f6fcf !important; background-color:#eef6ff !important; }

.inputAlert .arrow, .inputAlertRight .arrow { position:absolute; width:0; height:0; margin:0; }
.inputAlert .arrow { left:16px; top:100%; border-left:8px solid transparent; border-right:8px solid transparent; border-top:8px solid #dce6f0; }
.inputAlert .arrow::after { content:""; position:absolute; left:-7px; top:-9px; border-left:7px solid transparent; border-right:7px solid transparent; border-top:7px solid #f6f9fc; }
.inputAlertRight .arrow { right:100%; top:17px; border-top:8px solid transparent; border-bottom:8px solid transparent; border-right:8px solid #dce6f0; }
.inputAlertRight .arrow::after { content:""; position:absolute; top:-7px; left:-9px; border-top:7px solid transparent; border-bottom:7px solid transparent; border-right:7px solid #f6f9fc; }

@keyframes inpAlertIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }

@media (max-width:640px) {
    .inputAlert, .inputAlertRight { max-width:100%; width:auto; right:0; }
    .inputAlertRight { left:0; top:auto; bottom:100%; margin:0 0 10px 0; }
    .inputAlertRight .arrow { right:auto; left:16px; top:100%; border:none; border-left:8px solid transparent; border-right:8px solid transparent; border-top:8px solid #dce6f0; }
    .inputAlertRight .arrow::after { top:-9px; left:-7px; border-top-color:#f6f9fc; border-right-color:transparent; }
}

.loading1{ margin:0px auto; background: url(../img/loading1.gif) center no-repeat ; background-size: 180px 180px; height:200px; }  
.loading2{ margin:0px auto; background: url(../img/loading2.gif) center no-repeat ; background-size: 24px 24px; height:25px; }
.loading3{ margin:0px auto; background: url(../img/loading3.gif) center no-repeat ; background-size:50px 50px; height:55px; }
.loading4{ margin:0px auto; background: url(../img/loading1.gif) center no-repeat ; background-size: 150px 150px; height:60px; }  
  
/* MELDUNGEN */
.alert { font-size: 14px; padding: 12px; z-index: 9999; width: 100vw; position: fixed; color: white; opacity: 1; transition: opacity 0.6s; margin-bottom:1px; }
.alertNew { font-size: 14px; padding: 12px; color: white; opacity: 1; transition: opacity 0.6s; margin-bottom:1px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }

.alert_info{ background-color: #f4cb27; color:#877117; }
.alert_success {background-color: #a3c032; color:#e5f5d3; }
.alert_warning {background-color: #00adef; color:#f3fafd; }
.alert_error {background-color: #e9573f; color:#f4cecf; }
.alert_closebtn { margin:-11px 15px 0px 0px; width: 28px; height: 28px; font-size: 32px; cursor: pointer; position: relative; float: right;}
.alert_closebtn:hover { color: #0a68a7; }
.alert_fixed { position: fixed; z-index: 9999999; margin: 0px auto; }

.alert_info_pricing { font-size: 17px; background-color: #f4cb27; color: #877117; padding: 20px; border-radius: 8px; text-align: center; margin: 20px 0; }

.clr_yellow{color:#f4cb27; }
.clr_red{color:#e9573f; }
.clr_green{color:#a3c032; }
.clr_blue{color:#006fcf; }   
 
.keineEintraege{ color: #b9b9b9; font-size: 19px; margin: 15% auto; text-align: center; }

/* MODAL */
.modalFix { display: none; position: fixed; z-index: 999999; left: 0; top: 0; width: 100%; height:100%; overflow: auto; background-color: rgba(0,0,0,0.7); }
.modal { display: none; position: fixed; z-index: 999999; left: 0; top: 0; width: 100%; height:100%; overflow: auto; background-color: rgba(0,0,0,0.7); }
.modal-content { border-radius:7px; -moz-border-radius: 7px; background-color: #fefefe; margin: 7% auto; padding: 15px; border: 1px solid #888; width:90%; max-width: 610px; }
.modalClose { margin:-15px -15px 0px 0px; width: 28px; font-size: 32px; float: right;cursor: pointer; }
.modalClose:hover, .modalClose:focus{ color:#0a68a7; }


/* =================================================================
   3. HEADER UND MEGA-MENÜ
   ================================================================= */
/* HEADER */
#container, #container *, #container *::before, #container *::after { box-sizing: border-box; }
#container{ width:100%; color: #000000; margin: 0px auto; } 
header.main-header { 
    z-index: 998; width: 100%; height: auto !important; min-height: auto !important; 
    font-family: 'Roboto Serif', Arial, serif; font-weight: 100; font-size: 14px; 
    display: block;
    color: var(--header-color, #ffffff);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.4s ease;
}

header.main-header.mode-absolute { position: absolute; top: 0; left: 0; }
header.main-header.mode-fixed { position: fixed; top: var(--hy-oben, 0px); left: 0; }
header.main-header.mode-sticky { position: sticky; top: 0; }
header.main-header.mode-trigger { position: fixed; top: var(--hy-oben, 0px); left: 0; transform: translate3d(0, -100%, 0); opacity: 0; }
header.main-header.mode-trigger.is-visible { transform: translate3d(0, 0, 0); opacity: 1; }

/* Feste Leisten auf dem Handy ruhig halten ---------------------------
   Auf dem iPhone wandert eine fixierte Leiste beim Herunterscrollen nach
   oben aus dem Bild, weil Safari seine Adressleiste ein- und ausklappt
   und den sichtbaren Bereich dabei verschiebt. Drei Maßnahmen dagegen:
   1. --hy-oben / --hy-unten werden in web_footer.php aus dem sichtbaren
      Bereich (visualViewport) gesetzt, die Leiste folgt ihm dadurch.
   2. translate3d und will-change geben der Leiste eine eigene Ebene,
      damit Safari sie beim Scrollen nicht verzögert neu zeichnet.
   3. backface-visibility verhindert ein Flackern beim Ein- und Ausblenden. */
header.main-header.mode-fixed, header.main-header.mode-trigger,
.sub-nav-wrapper.mode-under_header, .sub-nav-wrapper.mode-trigger {
    will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden;
}

header.main-header #headerTop_2 { 
    background: var(--header-bg, linear-gradient(to bottom, #00275c, rgba(0, 39, 92, 0.6) 40%, rgba(0, 14, 40, 0) 80%), linear-gradient(135deg, #000e28, #2b3780, #a90076, #004e92, #000e28)); 
    background-size: 100% 100%, 800% 800%; 
    padding: 10px 0; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); border-bottom: 1px solid rgba(255,255,255,0.1); 
}

header.main-header #headerTop_2 .HT_Section{ margin: 0px auto; max-width: 1400px; display: flex; justify-content: space-between; align-items: center; padding: 0 15px; position: relative; height: auto !important; min-height: 0 !important; }
header.main-header #headerTop_2 .HT_Section ul{ display: flex; align-items: center; list-style: none; padding: 0; margin: 0; }
header.main-header #headerTop_2 .HT_Section .left-nav { flex: 1 1 0; justify-content: flex-start; }
header.main-header #headerTop_2 .HT_Section .right-nav { flex: 1 1 0; justify-content: flex-end; }
header.main-header #headerTop_2 .HT_Section ul li{ margin: 0px 3px; cursor: pointer; color: inherit; display: flex; align-items: center; }
header.main-header #headerTop_2 .HT_Section ul li:not(:last-child) { border-right: 1px solid color-mix(in srgb, currentColor 20%, transparent); padding-right: 12px; margin-right: 12px; }
header.main-header #headerTop_2 .HT_Section .firmen_Logo { flex: 0 0 auto; position: absolute; left: 50%; transform: translateX(-50%); z-index: 1; display: flex; align-items: center; justify-content: center; }
header.main-header #headerTop_2 .HT_Section .firmen_Logo .hyptimeLogoHTop_bright{ width: 105px; height: 21px; background: url(../img/Hyptime_web_logo_bright.png) no-repeat center; background-size: 100px auto; }
header.main-header #headerTop_2 .HT_Section .firmen_Logo .hyptimeLogoHTop_dark{ width: 105px; height: 21px; background: url(../img/Hyptime_web_logo_dark.png) no-repeat center; background-size: 100px auto; }

.top-nav-dynamic-icon { display: flex; align-items: center; justify-content: center; height: 26px; border-radius: 4px; transition: background 0.2s; padding: 0 4px; }
.top-nav-dynamic-icon a { text-decoration: none; display: flex; align-items: center; color: inherit; }
.top-nav-dynamic-icon svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.5px; fill: none; transition: stroke 0.2s ease; }
.right-nav-text { font-size: 13px; margin-left: 6px; color: inherit; font-family: inherit; font-weight: 400 !important; transition: color 0.2s; display: inline-block; }
.top-nav-dynamic-icon:hover svg { stroke: var(--header-hover, #009ced); }
.top-nav-dynamic-icon:hover .right-nav-text { color: var(--header-hover, #009ced); }
.login-btn svg, .login-btn .right-nav-text { stroke: currentColor; color: inherit; font-weight: normal; }
.login-btn.login-active svg, .login-btn.login-active .right-nav-text, .top-nav-dynamic-icon.header-link-active svg, .top-nav-dynamic-icon.header-link-active .right-nav-text { stroke: var(--header-active, #e9bf0d); color: var(--header-active, #e9bf0d); font-weight: bold; }
.login-btn.login-active:hover svg, .login-btn.login-active:hover .right-nav-text, .top-nav-dynamic-icon.header-link-active:hover svg, .top-nav-dynamic-icon.header-link-active:hover .right-nav-text { stroke: var(--header-hover, #009ced); color: var(--header-hover, #009ced); }

.logo-icon { display: none; }
@media (max-width: 980px){ 
    header.main-header #headerTop_2 .HT_Section .left-nav { flex: 0 0 auto; order: 1; display: flex; } 
    header.main-header #headerTop_2 .HT_Section .firmen_Logo { position: static; left: auto; transform: none; order: 2; margin-left: auto; margin-right: 15px; display: flex; } 
    header.main-header #headerTop_2 .HT_Section .right-nav { flex: 0 0 auto; order: 3; } 
}
@media (max-width: 620px){ 
    header.main-header #headerTop_2 .HT_Section { padding: 0 10px; } 
    header.main-header #headerTop_2 .HT_Section ul li { margin: 0px 2px; } 
    header.main-header #headerTop_2 .HT_Section .trenner { margin: 0 3px; } 
    .right-nav-text { display: none !important; } 
}


/* MEGA MENU */
.left-nav-container .left-nav .has-mega-menu { position: static; }
.mega-menu { position: absolute; top: calc(100% + 15px); left: 15px; right: 15px; width: auto; max-width: 1400px; margin: 0 auto; opacity: 0; visibility: hidden; transform: translateY(15px); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 0 0 12px 12px; box-shadow: 0 25px 50px rgba(0,0,0,0.1), 0 5px 15px rgba(0,0,0,0.05); padding: 30px; z-index: 1000; max-height: calc(100vh - 120px); overflow-y: auto; cursor: default; }
@media (min-width: 680px) { .has-mega-menu:hover .mega-menu { opacity: 1; visibility: visible; transform: translateY(0); } }
.mega-menu.is-open { display: block !important; opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; }
.left-nav-container .left-nav .has-mega-menu > a { position: relative; width: fit-content; display: flex; }
.left-nav-container .left-nav .has-mega-menu > a::after { content: ""; position: absolute; top: 100%; left: 0; width: 100%; height: 17px; z-index: 1001; }

/* LAYOUT, SPALTEN & LINKS */
.mega-inner { display: flex; flex-wrap: wrap; gap: 35px; align-items: stretch; justify-content: space-between; }
.mega-col { display: flex; flex-direction: column; flex: 1 1 240px; min-width: 240px; }
.mega-col h5 { color: #111; font-family: 'Roboto Serif', Georgia, serif; font-weight: 600; font-size: 16px; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 2px solid rgba(0,111,207,0.1); padding-bottom: 8px; }
.mega-col ul { display: flex; flex-direction: column; gap: 8px; }
header #headerTop_2 .HT_Section ul .mega-col li { margin: 0 !important; width: 100%; justify-content: flex-start; }
.mega-col .mega-link { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; text-decoration: none; padding: 10px 12px; margin-left: -12px; border-radius: 8px; transition: all 0.2s ease; width: 100%; }
.mega-col .mega-link:hover { background: rgba(0, 111, 207, 0.06); transform: translateX(4px); }
.mega-col .mega-link svg { width: 22px; height: 22px; stroke: #006FCF; fill: none; margin-top: 1px; }
.mega-link .link-text-wrap { display: flex; flex-direction: column; }
.mega-link .link-title { color: #111; font-size: 15px; font-weight: 600; font-family: 'Roboto', Arial, sans-serif; transition: color 0.2s ease; }
.mega-link .link-desc { color: #666; font-size: 13px; font-family: 'Roboto', Arial, sans-serif; font-weight: 300; margin-top: 4px; line-height: 1.4; }
.mega-col .mega-link:hover .link-title { color: #006FCF; }
.mega-col .mega-link.UNaktiv .link-title { color: #006FCF; } 
.mega-col .mega-link.UNaktiv { background: rgba(0, 111, 207, 0.08); border-left: 3px solid #006FCF; padding-left: 9px; pointer-events: none; } 
.mega-col .mega-link.UNaktiv svg { stroke: #006FCF; }

/* WERBE- & TRUST-KARTEN */
.mega-link-soon { cursor: default; }
.mega-link-soon:hover { background: transparent; transform: none; }
.mega-col .mega-link-soon:hover .link-title { color: #9a9a9a; }
.mega-link-soon svg { stroke: #9a9a9a; }
.mega-link-soon .link-title { color: #9a9a9a; font-weight: 500; }
.mega-link-soon .link-desc { color: #888; }

.mega-status { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; font-family: 'Roboto', Arial, sans-serif; margin-top: 8px; padding: 3px 10px 3px 8px; border-radius: 20px; width: fit-content; }
.mega-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.mega-status.mega-status--live { color: #006FCF !important; background: rgba(0, 111, 207, 0.14) !important; }
.mega-status.mega-status--live::before { background: #006FCF !important; }
.mega-status.mega-status--dev { color: #1a7f5a !important; background: rgba(26, 159, 110, 0.1) !important; }
.mega-status.mega-status--dev::before { background: #1a9f6e !important; }
.mega-status.mega-status--planning { color: #b3760f !important; background: rgba(233, 191, 13, 0.12) !important; }
.mega-status.mega-status--planning::before { background: #e9bf0d !important; }
.mega-status.mega-status--optimizing { color: #5b3fb3 !important; background: rgba(103, 72, 209, 0.1) !important; }
.mega-status.mega-status--optimizing::before { background: #6748d1 !important; }

.mega-col.ad-wrapper { min-width: 280px; max-width: 320px; display: flex; flex-direction: column; gap: 15px; margin: 0; align-self: start; }
.mega-ad-box { background: linear-gradient(145deg, rgba(0, 111, 207, 0.04), rgba(0, 111, 207, 0.01)); border: 1px solid rgba(0,111,207,0.1); border-radius: 10px; padding: 20px 22px; }
.mega-ad-badge { display: inline-block; background: rgba(0, 111, 207, 0.1); color: #006FCF; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; padding: 5px 12px; border-radius: 20px; margin-bottom: 12px; }
.mega-ad-title { font-family: 'Roboto Serif', Georgia, serif; font-weight: 600; font-size: 19px; color: #111; margin-bottom: 8px; line-height: 1.2; border-bottom: none; text-transform: none; letter-spacing: normal; }
.mega-ad-text { font-size: 12px; color: #555; margin-bottom: 16px; font-family: 'Roboto', Arial, sans-serif; font-weight: 300; line-height: 1.5; }
.ad-perks { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.ad-perks span { font-size: 13px; color: #444; display: flex; align-items: center; gap: 10px; font-family: 'Roboto', Arial, sans-serif; }
.ad-perks svg { width: 14px; height: 14px; stroke: #009ced; }
.mega-ad-btn { background-color: #006FCF; color: #ffffff; padding: 10px 20px; border-radius: 6px; font-family: 'Roboto', Arial, sans-serif; font-weight: bold; text-align: center; text-decoration: none; width: fit-content; transition: background 0.3s; box-shadow: 0 4px 10px rgba(0, 111, 207, 0.2); }
.mega-ad-btn .btn-arrow { width: 16px; height: 16px; transition: transform 0.3s ease; }
.mega-ad-btn:hover { background-color: #005fb1; transform: translateY(-1px); box-shadow: 0 6px 15px rgba(0, 111, 207, 0.25); }
.mega-ad-btn:hover .btn-arrow { transform: translateX(4px); }
.trust-stack { display: flex; flex-direction: column; gap: 8px; }
.mega-trust-box { border-radius: 8px; padding: 12px 16px; display: flex; align-items: center; gap: 14px; }
.mega-trust-box svg { width: 22px; height: 22px; fill: none; flex-shrink: 0; }
.mega-trust-box .link-text-wrap { display: flex; flex-direction: column; justify-content: center; }
.mega-trust-box .link-title { color: #111; font-size: 13px; font-weight: bold; font-family: 'Roboto', Arial, sans-serif; }
.mega-trust-box .link-desc { color: #555; font-size: 12px; font-family: 'Roboto', Arial, sans-serif; font-weight: 300; margin-top: 2px; line-height: 1.3; }
.trust-sec { background: linear-gradient(145deg, rgba(34, 197, 94, 0.08), rgba(34, 197, 94, 0.01)); border: 1px solid rgba(34, 197, 94, 0.15); }
.trust-sec svg { stroke: #16a34a; }
.trust-qual { background: linear-gradient(145deg, rgba(99, 102, 241, 0.08), rgba(99, 102, 241, 0.01)); border: 1px solid rgba(99, 102, 241, 0.15); }
.trust-qual svg { stroke: #4f46e5; }

/* ---------- Mega-Menü: Verkauf, Plattform, Demnächst ---------- */
/* ---------- Spaltenbreiten ---------------------------------------
   Vier Spalten: Verkauf (breit), Plattform, Demnächst, Werbespalte.   */
.mega-inner .mega-col-vk   { flex: 2.2 1 560px; min-width: 520px; }
.mega-inner .mega-col-mehr { flex: 1 1 210px; min-width: 200px; }
.mega-inner .mega-col-bald { flex: 1 1 200px; min-width: 190px; }
.mega-inner .mega-col.ad-wrapper { flex: 0 1 260px; min-width: 240px; max-width: 280px; }

/* ---------- Spaltentitel mit Link rechts ------------------------- */
.mega-col h5.mega-h5-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.mega-col h5.mega-h5-row .mega-h5-link { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-family: 'Roboto', Arial, sans-serif; font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; color: #006FCF; white-space: nowrap; }
.mega-col h5.mega-h5-row .mega-h5-link svg { width: 14px; height: 14px; stroke: #006FCF; fill: none; transition: transform 0.25s ease; }
.mega-col h5.mega-h5-row .mega-h5-link:hover svg { transform: translateX(4px); }
.mega-col h5.mega-h5-row .mega-h5-link.is-aktiv { color: #111; pointer-events: none; }
.mega-col h5.mega-h5-row .mega-h5-link.is-aktiv svg { display: none; }

/* Kleine Zwischenüberschrift („Verkaufsmodule“, „Funktionen“) */
.mega-col .mega-subhead-sm { display: block; font-family: 'Roboto', Arial, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; color: #8a8f98; margin: 0 0 8px; }

/* ---------- Verkauf: Verkaufsmodule links, Funktionen rechts ----- */
.mega-col-vk .vk-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 26px; }
.mega-col-vk .vk-cols-fn { border-left: 1px solid rgba(0,111,207,0.1); padding-left: 24px; }
.mega-col ul.vk-list-bereiche, .mega-col ul.vk-list-fn { gap: 2px; }

/* Farbpunkt der Belegart vor dem Titel */
.mega-link.vk-link .vk-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--vk-c, #006FCF); display: inline-block; margin-right: 8px; vertical-align: 1px; }

/* Funktionen: gleiche Bauart wie die Verkaufsmodule, eine Stufe kleiner */
.mega-col .mega-link.mega-link-fn { padding: 7px 12px; gap: 11px; grid-template-columns: 20px 1fr; }
.mega-col .mega-link.mega-link-fn svg { width: 18px; height: 18px; margin-top: 1px; }
.mega-link.mega-link-fn .link-title { font-size: 14px; font-weight: 500; }
.mega-link.mega-link-fn .link-desc { font-size: 12px; margin-top: 1px; line-height: 1.35; }

/* ---------- Demnächst (eigene Spalte) -----------------------------
   Titel, darunter das Status-Schild, darunter die Beschreibung.       */
.mega-col-bald ul { gap: 2px; }
.mega-col .mega-link.mega-link-bald { padding-top: 7px; padding-bottom: 7px; }
.mega-col .mega-link.mega-link-bald svg { width: 20px; height: 20px; }
.mega-link.mega-link-bald .link-title { display: block; font-size: 14px; color: #6e6e73; font-weight: 500; }
.mega-col .mega-link-soon.mega-link-bald:hover .link-title { color: #6e6e73; }
.mega-link.mega-link-bald .mega-status { display: inline-flex; margin: 5px 0 3px; font-size: 10.5px; padding: 2px 8px 2px 7px; }
.mega-link.mega-link-bald .link-desc { font-size: 12px; color: #8a8a8a; margin-top: 0; }
.mega-link-soon.mega-link-bald svg { stroke: #8a8f98; }

/* ---------- Gegen Regeln anderer Stylesheets absichern -------------
   Auf dem Server greifen weitere Header-Regeln (Link-Farbe, SVG-Größe).
   Mit ID-Selektor haben diese Angaben Vorrang.                         */
header.main-header #headerTop_2 .HT_Section .mega-col h5.mega-h5-row a.mega-h5-link { color: #006FCF; display: inline-flex; align-items: center; gap: 6px; }
header.main-header #headerTop_2 .HT_Section .mega-col h5.mega-h5-row a.mega-h5-link svg { display: inline-block; width: 14px; height: 14px; stroke: #006FCF; fill: none; }
header.main-header #headerTop_2 .HT_Section .mega-col h5.mega-h5-row a.mega-h5-link.is-aktiv { color: #111; }
header.main-header #headerTop_2 .HT_Section .mega-col h5.mega-h5-row a.mega-h5-link.is-aktiv svg { display: none; }
header.main-header #headerTop_2 .HT_Section .mega-col .mega-link .vk-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }

/* ---------- Header-Regeln für li im Menü zurücksetzen -------------
   body.css gibt jedem li im Header einen Trennstrich rechts und
   zentriert den Inhalt, im Mega-Menü darf das nicht greifen.         */
header.main-header #headerTop_2 .HT_Section .mega-inner .mega-col ul li { border-right: none; padding-right: 0; }
header.main-header #headerTop_2 .HT_Section .mega-inner .mega-col ul li > a,
header.main-header #headerTop_2 .HT_Section .mega-inner .mega-col ul li > div { width: 100%; }

/* ---------- Schmalere Bildschirme --------------------------------- */
/* Werbespalte: wird über 'werbespalte' in verkauf_nav.php geschaltet.
   Das Menü ist höchstens 1400 px breit, neben drei Spalten passt sie nur
   auf breiten Bildschirmen, darunter wird sie ausgeblendet.            */
@media (max-width: 1599px) { .mega-inner .mega-col.ad-wrapper { display: none; } }
@media (max-width: 1180px) {
    .mega-inner .mega-col-vk { flex-basis: 100%; min-width: 0; }
}
@media (max-width: 680px) {
    .mega-col-vk .vk-cols { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .mega-col-vk .vk-cols-fn { border-left: 0; padding-left: 0; border-top: 1px solid rgba(0,111,207,0.1); padding-top: 16px; }
    .mega-inner .mega-col-mehr, .mega-inner .mega-col-bald { min-width: 0; flex-basis: 100%; }
    .mega-col h5.mega-h5-row { flex-wrap: wrap; }
}

/* =================================================================
   4. UNTERNAVIGATION (web_subnav.php)
   ================================================================= */
/* SUB-NAVIGATION (web_subnav.php) */
.sub-nav-wrapper {
    width: 100%;
    z-index: 997;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.4s ease;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.sub-nav-wrapper.mode-sticky { position: sticky; top: 0; margin-top: 47px; }
.sub-nav-wrapper.mode-under_header,
.sub-nav-wrapper.mode-trigger { position: fixed; top: var(--hy-oben, 0px); left: 0; transform: translate3d(0, -100%, 0); opacity: 0; }
.sub-nav-wrapper.mode-under_header.is-visible,
.sub-nav-wrapper.mode-trigger.is-visible { transform: translate3d(0, 0, 0); opacity: 1; }

.sub-nav-container { max-width: 1400px; margin: 0 auto; padding: 12px 15px; display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: 20px; }
.sub-nav-brand { display: flex; align-items: center; gap: 12px; min-width: 0; flex-shrink: 1; }

.sub-mobile-toggle { display: none; cursor: pointer; padding-right: 5px; flex-shrink: 0; }
.sub-mobile-toggle svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2; fill: none; }
.sub-nav-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: rgba(255,255,255,0.1); border-radius: 8px; flex-shrink: 0; }
.sub-nav-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }

.sub-nav-titles { display: flex; flex-direction: column; min-width: 0; }
.sub-category { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; opacity: 0.7; font-family: 'Roboto', Arial, sans-serif; line-height: 1; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sub-name { font-size: 18px;  font-weight: normal; font-family: 'Roboto Serif', Georgia, serif; font-weight: 600; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sub-nav-links { display: flex; gap: 20px; flex: 1; justify-content: center; }
.sub-nav-links.align-right { justify-content: flex-end; }
.sub-nav-links a { color: inherit; text-decoration: none; font-size: 14px; font-family: 'Roboto', Arial, sans-serif; opacity: 0.8; transition: opacity 0.2s; }
.sub-nav-links a:hover, .sub-nav-links a.active { opacity: 1; font-weight: bold; }

.sub-nav-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
.sub-btn { padding: 6px 16px; font-size: 0.85rem; border-radius: 6px; text-decoration: none; font-family: 'Roboto', Arial, sans-serif; font-weight: bold; white-space: nowrap; flex-shrink: 0; transition: opacity 0.2s, transform 0.2s; border: none; }
.sub-btn:hover { opacity: 0.85; transform: translateY(-1px); }

@media (max-width: 992px) {
    /* Auf dem Handy ohne Weichzeichner: Safari zeichnet den Hintergrund einer
       fixierten Leiste beim Scrollen sonst verzögert und versetzt neu.
       Die Hintergrundfarbe aus web_subnav.php ist fast deckend, optisch
       ändert sich dadurch praktisch nichts. */
    .sub-nav-wrapper { backdrop-filter: none; -webkit-backdrop-filter: none; }
    .sub-mobile-toggle { display: block; }
    .sub-category { display: none; }
    .sub-nav-links { 
        position: absolute; top: 100%; left: 0; width: 100%; 
        background-color: var(--sub-bg, #0a1e3d);
        background-color: color-mix(in srgb, var(--sub-bg, #0a1e3d) 96%, transparent); 
        backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
        flex-direction: column; padding: 0; gap: 0;
        max-height: 0; overflow: hidden; transition: max-height 0.3s ease;
        box-shadow: 0 10px 20px rgba(0,0,0,0.15);
        transform: translateZ(0); -webkit-transform: translateZ(0);
    }
    /* Geöffnete Liste: nie höher als der sichtbare Bereich unter der Leiste,
       bei vielen Einträgen innerhalb der Liste scrollbar. Deckender
       Hintergrund, damit kein Seiteninhalt durchscheint. */
    .sub-nav-links.mobile-open {
        max-height: calc(100vh - var(--hy-oben, 0px) - 130px);
        max-height: calc(100dvh - var(--hy-oben, 0px) - 130px);
        overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
        padding: 6px 0 10px; border-top: 1px solid rgba(255,255,255,0.08);
        background-color: var(--sub-bg, #0a1e3d);
    }
    .sub-nav-links.mobile-open::-webkit-scrollbar { width: 4px; }
    .sub-nav-links.mobile-open::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 4px; }
    .sub-nav-links a { flex-shrink: 0; padding: 13px 20px; font-size: 16px; border-bottom: 1px solid rgba(255,255,255,0.05); }
}
@media (max-width: 620px) {
    .sub-nav-actions .sub-btn:nth-child(1) { display: none; }
}
@media (max-width: 400px) {
    .sub-nav-container { padding: 10px 12px; gap: 10px; }
    .sub-nav-icon { width: 28px; height: 28px; }
    .sub-nav-icon svg { width: 15px; height: 15px; }
    .sub-name { font-size: 15px; }
    .sub-btn { padding: 7px 12px; font-size: 0.78rem; }
}

/* =================================================================
   5. BROTKRUMEN (web_breadcrumb.php)
   ================================================================= */
.hy-bc { font-family: 'Roboto', Arial, sans-serif; font-weight: 300; font-size: 13px; padding: 14px 0 2px; }
.hy-bc ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; list-style: none; margin: 0; padding: 0; }
.hy-bc li { display: inline-flex; align-items: center; color: #86868b; }
.hy-bc li:not(:last-child)::after { content: "›"; margin: 0 9px; color: #c3c7cd; font-size: 14px; line-height: 1; }
.hy-bc a { color: #6e6e73; text-decoration: none; transition: color 0.2s ease; }
.hy-bc a:hover { color: var(--hy-bc-c, #006FCF); }
.hy-bc .hy-bc-akt { display: inline-flex; align-items: center; gap: 7px; color: #1d1d1f; font-weight: 400; }
.hy-bc .hy-bc-akt i { width: 7px; height: 7px; border-radius: 50%; background: var(--hy-bc-c, #006FCF); display: inline-block; }
.hy-bc.hy-bc-dunkel li { color: rgba(255,255,255,0.45); }
.hy-bc.hy-bc-dunkel li:not(:last-child)::after { color: rgba(255,255,255,0.25); }
.hy-bc.hy-bc-dunkel a { color: rgba(255,255,255,0.6); }
.hy-bc.hy-bc-dunkel a:hover { color: #ffffff; }
.hy-bc.hy-bc-dunkel .hy-bc-akt { color: #ffffff; }

/* =================================================================
   6. FOOTER (web_footer.php)
   Eigener Namespace #siteFooter.
   ================================================================= */
/* =================================================================
   FOOTER — eigener Namespace #siteFooter, da der Footer außerhalb
   von #container jeder Seite eingebunden wird. Dunkles Theme als
   bewusster Seitenabschluss, unabhängig vom Theme der jeweiligen
   Seite selbst.  background: #000e28 ;
   ================================================================= */
#siteFooter, #siteFooter *, #siteFooter *::before, #siteFooter *::after { box-sizing: border-box; }

#siteFooter {
    position: relative;
    background:   linear-gradient(135deg, #041d4c 0%, #004ba8 100%) ;
    color: rgba(255,255,255,0.65);
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 15px;
    line-height: 1.6;
    overflow: hidden;
    padding: 72px 0 0;
}
#siteFooter a { text-decoration: none; color: inherit; }
#siteFooter .sf-container { max-width: 1360px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 80px); position: relative; z-index: 2; }

/* Sicherheitsnetz: alle SVG-Icons standardmäßig als Linien-Icons */
#siteFooter svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Dekorativer Hintergrund */
#siteFooter .sf-glow-1 { position: absolute; width: 50vw; height: 50vw; background: radial-gradient(circle, rgba(0,111,207,0.16) 0%, transparent 70%); top: -15%; right: -10%; filter: blur(90px); z-index: 1; pointer-events: none; }
#siteFooter .sf-glow-2 { position: absolute; width: 35vw; height: 35vw; background: radial-gradient(circle, rgba(52,199,89,0.08) 0%, transparent 70%); bottom: 0; left: -5%; filter: blur(90px); z-index: 1; pointer-events: none; }
#siteFooter .sf-dotgrid { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 26px 26px; z-index: 1; pointer-events: none; }
#siteFooter .sf-watermark { position: absolute; right: -4%; bottom: -8%; width: 34vw; max-width: 480px; opacity: 0.05; z-index: 1; pointer-events: none; }
#siteFooter .sf-watermark svg { width: 100%; height: 100%; color: #ffffff; }

/* -----------------------------------------------------------------
   VERKAUF — eigene Zeile über der flachen Navigation.
   Gleiche Bildsprache wie der Rest des Footers, nur mit den
   Belegart-Farbpunkten aus der Anwendung.
   ----------------------------------------------------------------- */
#siteFooter .sf-module { display: grid; grid-template-columns: 300px 1fr; gap: 28px 48px; padding: 0 0 44px; align-items: start; }
#siteFooter .sf-module-head { display: block; }
#siteFooter .sf-module-title { display: flex; align-items: center; gap: 10px; font-family: 'Roboto Serif', serif; font-weight: 600; font-size: 1.32rem; color: #ffffff; line-height: 1.15; }
#siteFooter .sf-module-title svg { width: 20px; height: 20px; color: #6bb6ff; stroke-width: 1.8; flex-shrink: 0; }
#siteFooter .sf-module-desc { display: block; font-size: 0.85rem; color: rgba(255,255,255,0.45); margin-top: 8px; max-width: 34ch; }
#siteFooter .sf-module-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 0.85rem; font-weight: 500; color: #6bb6ff; }
#siteFooter .sf-module-link svg { width: 14px; height: 14px; transition: transform 0.25s ease; }
#siteFooter .sf-module-head:hover .sf-module-link { color: #ffffff; }
#siteFooter .sf-module-head:hover .sf-module-link svg { transform: translateX(4px); }

#siteFooter .sf-vk-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 32px; list-style: none; margin: 0; padding: 0; }
#siteFooter .sf-vk-link { display: flex; align-items: flex-start; gap: 11px; padding: 10px 0; }
#siteFooter .sf-vk-link .sf-vk-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--vk-c, #6bb6ff); flex-shrink: 0; margin-top: 7px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--vk-c, #6bb6ff) 22%, transparent); }
#siteFooter .sf-vk-link .sf-link-title { display: block; font-size: 0.87rem; font-weight: 500; color: rgba(255,255,255,0.85); transition: color 0.2s; }
#siteFooter .sf-vk-link .sf-link-desc { display: block; font-size: 0.73rem; color: rgba(255,255,255,0.4); margin-top: 1px; }
#siteFooter .sf-vk-link:hover .sf-link-title, #siteFooter .sf-vk-link.sf-active .sf-link-title { color: #6bb6ff; }
#siteFooter .sf-vk-quer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 16px; grid-column: 1 / -1; }
#siteFooter .sf-vk-quer-titel { font-size: 0.68rem; letter-spacing: 1.4px; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-right: 6px; }
#siteFooter .sf-vk-quer a { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 50px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.03); font-size: 0.78rem; color: rgba(255,255,255,0.6); transition: all 0.2s ease; }
#siteFooter .sf-vk-quer a:hover { border-color: #6bb6ff; color: #ffffff; }
#siteFooter .sf-vk-quer a svg { width: 13px; height: 13px; color: #6bb6ff; }

@media (max-width: 1080px) {
    #siteFooter .sf-module { grid-template-columns: 1fr; gap: 20px; }
    #siteFooter .sf-vk-list { grid-template-columns: repeat(2, 1fr); gap: 4px 24px; }
}
@media (max-width: 560px) {
    #siteFooter .sf-vk-list { grid-template-columns: 1fr; gap: 0; }
    #siteFooter .sf-module-desc { max-width: none; }
}

/* Navigation: flaches Grid statt Spalten mit Titeln, alle Einträge gleich breit */
#siteFooter .sf-nav-flat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 40px; padding-bottom: 52px; list-style: none; margin: 0; }
#siteFooter .sf-nav-link { display: flex; align-items: flex-start; gap: 11px; padding: 10px 0; }
#siteFooter .sf-nav-link svg { width: 17px; height: 17px; color: #6bb6ff; flex-shrink: 0; margin-top: 2px; }
#siteFooter .sf-link-title { display: block; font-size: 0.87rem; font-weight: 500; color: rgba(255,255,255,0.85); transition: color 0.2s; }
#siteFooter .sf-link-desc { display: block; font-size: 0.73rem; color: rgba(255,255,255,0.4); margin-top: 1px; }
#siteFooter .sf-nav-link:hover .sf-link-title, #siteFooter .sf-nav-link.sf-active .sf-link-title { color: #6bb6ff; }
#siteFooter .sf-divider { height: 1px; background: rgba(255,255,255,0.08); }
#siteFooter .sf-nav-flat-head { font-size: 0.68rem; letter-spacing: 1.4px; text-transform: uppercase; color: rgba(255,255,255,0.4); padding: 28px 0 4px; }

/* Noch nicht verlinkte Lösungen im Footer: bewusst dezent, kein Statusfarbsystem wie im Header */
#siteFooter .sf-nav-link.sf-link-soon { cursor: default; }
#siteFooter .sf-nav-link.sf-link-soon .sf-link-title { color: rgba(255,255,255,0.4); font-weight: 400; }
#siteFooter .sf-nav-link.sf-link-soon:hover .sf-link-title { color: rgba(255,255,255,0.4); }
#siteFooter .sf-nav-link.sf-link-soon svg { color: rgba(255,255,255,0.25); }
#siteFooter .sf-soon-tag { display: inline; font-size: 0.68rem; font-weight: 400; color: rgba(255,255,255,0.3); margin-left: 6px; }

/* Plattform links, Demnächst rechts */
#siteFooter .sf-nav-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 0 56px; }
#siteFooter .sf-nav-flat.sf-nav-plattform { grid-template-columns: 1fr; gap: 0; }
#siteFooter .sf-nav-flat.sf-nav-bald { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }

@media (max-width: 1080px) {
    #siteFooter .sf-nav-split { grid-template-columns: 1fr; }
    #siteFooter .sf-nav-flat.sf-nav-plattform { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; padding-bottom: 12px; }
}
@media (max-width: 560px) {
    #siteFooter .sf-nav-flat.sf-nav-plattform, #siteFooter .sf-nav-flat.sf-nav-bald { grid-template-columns: 1fr; gap: 0; }
}

/* Hauptbereich: Marke / Kontakt / CTA / Vertrauen */
#siteFooter .sf-main-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; padding: 48px 0; align-items: start; }

#siteFooter .sf-logo { display: inline-block; }
#siteFooter .sf-logo img { display: block; width: 168px; height: auto; }
#siteFooter .sf-slogan { font-family: 'Roboto Serif', serif; font-style: italic; font-weight: 300; font-size: 0.88rem; color: rgba(255,255,255,0.4); margin: 4px 0 28px; }

#siteFooter .sf-contact-heading { font-family: 'Roboto Serif', serif; font-weight: 600; font-size: 1.1rem; color: #ffffff; margin-bottom: 14px; }
#siteFooter .sf-contact-link { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; color: rgba(255,255,255,0.75); margin-bottom: 10px; transition: color 0.2s; }
#siteFooter .sf-contact-link:hover { color: #6bb6ff; }
#siteFooter .sf-contact-link svg { width: 17px; height: 17px; color: #6bb6ff; flex-shrink: 0; }
#siteFooter .sf-contact-note { font-size: 0.82rem; color: rgba(255,255,255,0.4); margin-top: 14px; }
#siteFooter .sf-contact-more { display: inline-flex; align-items: center; gap: 5px; font-size: 0.85rem; color: #6bb6ff; margin-top: 10px; font-weight: 500; }
#siteFooter .sf-contact-more svg { width: 14px; height: 14px; }
#siteFooter .sf-contact-more:hover { color: #ffffff; }

#siteFooter .sf-cta-block { display: flex; flex-direction: column; gap: 14px; }
#siteFooter .sf-cta-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 18px 20px; }
#siteFooter .sf-cta-card strong { display: block; font-family: 'Roboto Serif', serif; font-size: 0.98rem; color: #ffffff; font-weight: 600; margin-bottom: 2px; }
#siteFooter .sf-cta-card span { display: block; font-size: 0.82rem; color: rgba(255,255,255,0.5); margin-bottom: 12px; }
#siteFooter .sf-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; border-radius: 50px; font-size: 0.85rem; font-weight: 500; transition: all 0.25s ease; }
#siteFooter .sf-btn.sf-btn-primary { background: #006FCF; color: #ffffff; }
#siteFooter .sf-btn.sf-btn-primary:hover { background: #0082f5; box-shadow: 0 8px 22px rgba(0,111,207,0.3); }
#siteFooter .sf-btn.sf-btn-outline { background: transparent; border: 1.5px solid rgba(255,255,255,0.25); color: #ffffff; }
#siteFooter .sf-btn.sf-btn-outline:hover { border-color: #6bb6ff; color: #6bb6ff; }
#siteFooter .sf-btn.sf-active { background: #34c759; color: #ffffff; }

#siteFooter .sf-trust-block { display: flex; flex-direction: column; gap: 20px; }
#siteFooter .sf-trust-item { display: flex; align-items: flex-start; gap: 13px; }
#siteFooter .sf-trust-item .sf-trust-icon { width: 40px; height: 40px; border-radius: 11px; background: rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
#siteFooter .sf-trust-item .sf-trust-icon svg { width: 19px; height: 19px; color: #6bb6ff; }
#siteFooter .sf-trust-item strong { display: block; font-size: 0.9rem; color: #ffffff; font-weight: 500; margin-bottom: 2px; }
#siteFooter .sf-trust-item span { font-size: 0.8rem; color: rgba(255,255,255,0.45); line-height: 1.5; }

#siteFooter .sf-payment-icons { display: flex; flex-wrap: wrap;  gap:10px;   margin-top: 10px; }
#siteFooter .sf-payment-icons img { height: 33px;  width: auto; object-fit: contain;  border-radius: 4px; }

/* Untere Leiste */
#siteFooter .sf-bottom { padding: 28px 0 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; font-size: 0.82rem; }
#siteFooter .sf-legal-links, #siteFooter .sf-social-links { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0; padding: 0; }
#siteFooter .sf-legal-links li:not(:last-child)::after, #siteFooter .sf-social-links li:not(:last-child)::after { content: "·"; margin: 0 10px; color: rgba(255,255,255,0.2); }
#siteFooter .sf-legal-links a, #siteFooter .sf-social-links a { color: rgba(255,255,255,0.5); transition: color 0.2s; }
#siteFooter .sf-legal-links a:hover, #siteFooter .sf-social-links a:hover { color: #ffffff; }
#siteFooter .sf-cookie-trigger { cursor: pointer; }
#siteFooter .sf-copyright { color: rgba(255,255,255,0.35); width: 100%; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.06); margin-top: 8px; }
#siteFooter .sf-copyright a { color: rgba(255,255,255,0.35); }

/* Responsive */
@media (max-width: 1024px) {
    #siteFooter .sf-main-grid { grid-template-columns: 1fr 1fr; }
    #siteFooter .sf-trust-block { grid-column: span 2; flex-direction: row; flex-wrap: wrap; }
    #siteFooter .sf-trust-item { flex: 1; min-width: 220px; }
}
@media (max-width: 760px) {
    #siteFooter { padding-top: 56px; }
    #siteFooter .sf-main-grid { grid-template-columns: 1fr; padding: 36px 0; gap: 32px; }
    #siteFooter .sf-trust-block { grid-column: span 1; flex-direction: column; }
    #siteFooter .sf-bottom { flex-direction: column; align-items: flex-start; }
}

/* Nach oben */
.hy-top { position: fixed; right: 22px; bottom: calc(22px + var(--hy-unten, 0px)); z-index: 990; width: 48px; height: 48px; border-radius: 50%; background: #006FCF; color: #fff; display: flex; align-items: center; justify-content: center; text-decoration: none;
          box-shadow: 0 10px 28px rgba(0,111,207,0.35), 0 0 0 1px rgba(255,255,255,0.25) inset; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .3s ease, transform .3s ease, visibility .3s, background .2s; }
.hy-top.on { opacity: 1; visibility: visible; transform: none; }
.hy-top:hover { background: #0082f5; transform: translateY(-2px); }
.hy-top:focus-visible { outline: 3px solid #6bb6ff; outline-offset: 3px; }
.hy-top svg { width: 22px; height: 22px; display: block; }
@media (max-width: 680px) { .hy-top { right: 14px; bottom: calc(14px + var(--hy-unten, 0px)); width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) { .hy-top { transition: none; } }
@media print { .hy-top { display: none; } }

/* =================================================================
   7. FAQ
   Akzentfarbe je Seite über --faq-akzent (Standard #006FCF).
   ================================================================= */
#container .faq-list { max-width: 820px; margin: 0 auto; }
#container .faq-item { border-bottom: 1px solid #e2e8f0; }
#container .faq-question { display: flex; justify-content: space-between; align-items: center; gap: 20px; width: 100%; padding: 22px 4px; cursor: pointer; font: inherit; font-weight: 500; font-size: 1.02rem; color: #1d1d1f; background: none; border: 0; text-align: left; user-select: none; transition: color 0.2s ease; }
#container .faq-question:hover { color: var(--faq-akzent, #006FCF); }
#container .faq-icon { font-size: 1.4rem; line-height: 1; flex-shrink: 0; color: var(--faq-akzent, #006FCF); transition: transform 0.3s ease; }
#container .faq-item.open .faq-icon { transform: rotate(45deg); }
#container .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
#container .faq-item.open .faq-answer { max-height: 600px; }
#container .faq-answer-inner { padding: 0 4px 22px; color: #6e6e73; font-size: 0.96rem; line-height: 1.7; }

/* =================================================================
   8. SEITENRAHMEN UND FORMULARLAYOUT
   ================================================================= */

/* Hero-Buttons (Startseite und Lösungsseiten) auf kleinen Tablets und
   Smartphones ausblenden. Die Seite beginnt so direkt mit dem Inhalt,
   Kontakt und Demo bleiben über Header, Unternavigation und den
   Abschluss der Seite erreichbar. */
@media (max-width: 820px) {
    #container .hero-buttons { display: none !important; }
}
/* FIX CONTENT */
#container section { width:100%; min-height: 80vh; }
#container section #abfrageErg { width:auto; padding: 20px 10px 0px 10px; min-height: 60px; margin:0px auto; max-width: 800px; text-align: center; }
#container section #rechtliche { width:100%; margin: 60px auto; max-width: 1200px; }
#container section #rechtliche h1 { text-align: left; padding: 15px 15px; }
#container section #rechtliche dl { padding: 15px 20px; }
#container section #rechtliche dl h2 { text-align: left; padding:65px 0px 10px 0px; }
#container section #rechtliche dl dt { font-size: 19px; font-family: 'Roboto Serif', Georgia, serif; font-weight: 400; padding: 35px 0px 7px 0px; }
#container section #rechtliche dl dd { font-size: 15px; }

#container section #contFormPage { width:100%; margin:0px auto; max-width: 1230px; padding: 60px 0px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-evenly; align-items: center; align-content:center; }
#container section #contFormPage .CFP-child { width:100%; padding:0px 15px; flex: 1 1 45%; }
#container section #contFormPage .CFP-child .CFP_image { width: 80%; max-width:400px; margin:0px auto; text-align: center; }
#container section #contFormPage .CFP-child .CFP_image img { object-fit: cover; width: 100%; height: 100%; }

.formContent { list-style: none; margin: 0; padding: 0; }
.formContent li { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: flex-start; align-content: center; gap: 0 14px; width:100%; margin: 0px auto; padding:0px; }
.formContent li .submit, .formContent li .submitBlack, .formContent li .submitLightBlue,
.formContent li .submitBlue, .formContent li .submitBlueBig, .formContent li .submitGreenBig,
.formContent li .submitYellowBig, .formContent li .submitRed, .formContent li .submitYellow { margin-top:20px; }
.formContent li > * { width: 100%; min-width: 0; padding: 0; }
.formContent li .inputBesch { padding: 3px 3px; color: #666; font-size: 13px; font-family: 'Roboto', Arial, sans-serif; font-weight: 300; }
.formContent li .pflichtfeld { font-size: 12px; color: #666; font-family: 'Roboto', Arial, sans-serif; font-weight: 300; }

@media only screen and (max-width:540px) {
    .formContent li { flex-direction: column; width: 100%; margin: 0; }
    .formContent li div:nth-of-type(2) { margin-top: 0; }
}

@media only screen and (max-width:1020px) {
    #container section #contFormPage { flex-direction: column; flex-wrap: wrap; }
    #container section #contFormPage .CFP-child { width:auto; margin: 0px auto; }
    #container section #contFormPage .CFP-child:first-of-type { margin-bottom: 70px; }
}

/* =================================================================
   9. ALTBESTAND
   Bausteine der früheren Produktseiten (Slider, Funktionsblöcke, altes FAQ).
   Neue Seiten nutzen sie nicht. Sobald pakete.php, login.php, basket.php,
   downloads.php und die Seiten unter /legal/ geprüft sind, kann dieser Block
   komplett entfallen.
   ================================================================= */
.scroll-indicator { margin: 10px auto; width: 27px; height: 50px; border-radius: 15px; background: transparent; border: 1px solid #006bde; position: relative; cursor: pointer; }
.scroll-line { width: 8px; height: 13px; background-color: #006bde; border-radius: 40%; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); animation: scroll-animation 3.5s ease-in-out infinite; }
@keyframes scroll-animation { 0%, 100% { top: 10px; } 50% { top: 30px; } }
.faqContainer { padding: 80px 0px; margin-left: 8%; margin-right: 8%; max-width: 1600px; }
.faqContainer h3 { text-align: center; color: var(--primary); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 10px; }
.faqContainer h2 { text-align: center; font-size: var(--text-h2); margin-bottom: 50px; }
.faq ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 30px; padding: 0; list-style: none; max-width: 100%; margin: 0 auto; }
.faq ul li { background: transparent; padding: 0 15px; border-left: 2px solid var(--border-light); transition: border-color 0.3s; }
.faq ul li:hover { border-left-color: var(--primary); }
.faq ul li .FAQ-titel { font-family: var(--font-headline); font-size: 1.05rem; font-weight: 600; margin-bottom: 8px; color: var(--text-main); }
.faq ul li .FAQ-besch { font-size: 0.9rem; color: var(--text-muted); line-height: 1.6; }
.TextGrauWeis { color: #86868a; }
.TextWeis { color: #f5f5f7; }
.functional_description { color:#000; min-height: 100vh; padding: 15px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around; align-items: center; align-content: space-between; }
.functional_description .FD_imagebox { width: 100%; max-width:600px; margin-bottom: 30px; text-align: center; }
.functional_description .FD_textBox { width: 100%; max-width:500px; margin-bottom: 30px; }
.functional_description .FD_textBox .FD_titel { font-family: 'Roboto Serif', Georgia, serif; font-weight: 600; font-size: 18px; padding: 5px 20px; }
.functional_description .FD_textBox .FD_titelBig { font-family: 'Roboto Serif', Georgia, serif; font-weight: 600; font-size: 38px; padding: 5px 20px; line-height: normal; margin-bottom: 30px; }
.functional_description .FD_textBox .FD_text { font-size: 16px; line-height: 21px; padding: 0px 20px; font-family: 'Roboto', Arial, sans-serif; font-weight: 300; text-align: left; }

.zweiArtikeln { color:#000; min-height:50vh; padding: 7px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around; align-items: stretch; align-content: space-between; margin: 0px auto; }
.zweiArtikeln .ZA_artikel { width: 100%; margin: 7px; padding: 20px 15px 40px 15px; background-color: #f3f4f8; }
.zweiArtikeln .ZA_artikel .FD_titelBig { font-family: 'Roboto Serif', Georgia, serif; font-weight: 600; font-size: 34px; text-align: center; padding: 20px 0px 0px 0px; }
.zweiArtikeln .ZA_artikel .FD_titel { font-family: 'Roboto Serif', Georgia, serif; font-weight: 600; font-size: 18px; text-align: center; padding:20px; }
.zweiArtikeln .ZA_artikel .FD_titel_zwei { font-family: 'Roboto', Arial, sans-serif; font-weight: 300; font-size:17px; text-align: center; padding:20px; }
.zweiArtikeln .ZA_artikel .FD_text { font-size: 16px; line-height: 21px; padding: 20px 20px 0px 20px; font-family: 'Roboto', Arial, sans-serif; font-weight: 300; text-align: left; max-width: 600px; margin: 0px auto; }
.zweiArtikeln .ZA_artikel .FD_image { width: 80%; max-width:400px; margin:0px auto; text-align: center; }
.zweiArtikeln .ZA_artikel .FD_image img { object-fit: cover; width: 100%; height: 100%; }

.dreierArtikeln { color:#000; min-height:50vh; padding: 7px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around; align-items: stretch; align-content: space-between; margin: 0px auto; }
.dreierArtikeln .ZA_artikel { width: 100%; margin: 7px; padding: 20px 15px 40px 15px; background-color:#f3f4f8; }
.dreierArtikeln .ZA_artikel .FD_titelBig { font-family: 'Roboto Serif', Georgia, serif; font-weight: 600; font-size: 32px; text-align: center; padding: 20px 0px 0px 0px; }
.dreierArtikeln .ZA_artikel .FD_titel { font-family: 'Roboto Serif', Georgia, serif; font-weight: 600; font-size: 16px; text-align: center; padding:20px 20px 50px 20px; }
.dreierArtikeln .ZA_artikel .FD_text { font-size: 15px; line-height: 21px; padding: 40px 20px 0px 20px; font-family: 'Roboto', Arial, sans-serif; font-weight: 300; text-align: left; max-width: 600px; margin: 0px auto; color: #000; }
.dreierArtikeln .ZA_artikel .FD_image { width: 80%; max-width:300px; margin:0px auto; text-align: center; }
.dreierArtikeln .ZA_artikel .FD_image img { object-fit: cover; width: 90%; height: 100%; }

.fullpage_descript { color:#000; min-height: 100vh; padding: 15px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
.fullpage_descript .PF_titelBig { font-family: 'Roboto Serif', Georgia, serif; font-weight: 600; font-size: 38px; padding: 50px 20px; line-height: normal; text-align: center; }
.fullpage_descript .PF_imagebox { width: 100%; margin: 20px auto; text-align: center; }
.fullpage_descript .PF_textBig { margin: 0px auto; font-size:20px; font-family: 'Roboto', Arial, sans-serif; font-weight: 300; text-align:center; color:#000; max-width: 780px; padding: 50px 20px; }
.fullpage_descript .PF_textBoxFlex { width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around; align-content: space-between; align-items: center; padding:20px 0px 10px 0px; }
.fullpage_descript .PF_textBoxFlex .PF_image { width: 100%; max-width:600px; margin:0px auto; text-align: center; }
.fullpage_descript .PF_textBoxFlex .PF_image img { object-fit: cover; width: 100%; height: 100%; }
.fullpage_descript .PF_textBoxFlex .PF_text { font-size: 16px; line-height: 21px; padding: 40px 0px; font-family: 'Roboto', Arial, sans-serif; font-weight: 300; text-align: left; width:95%; max-width: 500px; margin: 0px auto; }
.fullpage_descript .PF_textBoxFlex .PF_text .PF_titel { font-family: 'Roboto Serif', Georgia, serif; font-weight: 600; font-size: 18px; padding: 5px 20px; }

@media only screen and (max-width:880px) {
    .functional_description { flex-direction: column; }
    .fullpage_descript .PF_textBoxFlex { flex-direction: column; }
    .dreierArtikeln .ZA_artikel .FD_titelBig { font-size: 28px; }
    .zweiArtikeln .ZA_artikel .FD_titelBig { font-size:28px; }
}

@media only screen and (max-width:620px) {
    .dreierArtikeln { padding: 15px; flex-direction: column-reverse; }
    .dreierArtikeln .ZA_artikel { width: 100%; margin: 0px; padding: 20px 0px 40px 0px; background-color: #f5f5f7; }
    .dreierArtikeln .ZA_artikel:nth-of-type(2) { margin-bottom: 15px; }
    .zweiArtikeln { flex-direction: column; padding: 15px; }
    .zweiArtikeln .ZA_artikel { width: 100%; margin: 0px; padding: 20px 0px 40px 0px; background-color: #f5f5f7; }
    .zweiArtikeln .ZA_artikel:first-of-type { margin-bottom: 15px; }
    .functional_description .FD_textBox .FD_titelBig { font-size: 32px; }
}
@media only screen and (max-width:1020px) {
    .zweiArtikeln .ZA_artikel .FD_titelBig { font-size:32px; }
}
/* SLIDER */
.slider-wrapper { width:100%; display:flex; justify-content:center; padding:10px 0; }
.slider-wrapper .slider-container { position:relative; width:95%; max-width:1720px; padding:40px 0; }
.slider-wrapper .slider { display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; align-items:stretch; scrollbar-width:none; -ms-overflow-style:none; }
.slider-wrapper .slider::-webkit-scrollbar { display:none; }
.slider-wrapper .slide { background:#f5f5f7; border-radius:18px; padding:28px; display:flex; flex-direction:column; margin-top:10px; box-shadow:0 3px 3px rgba(0,0,0,.02); scroll-snap-align:center; transition:transform .2s ease-in-out; min-height:400px; }
.slider-wrapper .slide:hover { transform:translateY(-5px); }
[class*="slider--width-"] .slide { flex:0 0 var(--slide-width,400px); }
[class*="slider--width-"] { padding:0 calc((100% - var(--slide-width,400px))/2); }
.slider--width-800px { --slide-width:800px; }
.slider--width-600px { --slide-width:600px; }