@charset "UTF-8";

/* ============================================================
   style8_build.css – Zusammengeführte Build-Datei (Development)
   Projekt  : Starboxx (starboxx.ch)
   Autor    : Vitali Smancer – IT-Intern
   Erstellt : Juni 2026
   Phase    : 3 · Aufgabe 3.10
   Beschreibung:
     Automatisch generiert durch Zusammenführung aller neun Module
     in ITCSS-Ladereihenfolge. Nicht manuell bearbeiten – Änderungen
     gehen bei der nächsten Build-Generierung verloren.
     Quelle: modules/*.css (siehe main.css für Ladereihenfolge)

     HINWEIS: Modulübergreifende body.darkmode-/.darkmode-Duplikate
     (siehe Qualitätsanforderung 01) wurden aus navigation.css,
     layout.css, forms.css und components.css entfernt, da sie
     bereits vollständig in darkmode.css (Modul 8) enthalten sind.
     Die unter modules/ ausgelieferten Dateien sind bereits die
     bereinigten Versionen.
   ============================================================ */


/* ============================================================
   Quelle: modules/variables.css
   ============================================================ */

/* ============================================================
   variables.css – Modul 0: CSS Custom Properties
   Projekt  : Starboxx (starboxx.ch)
   Autor    : Vitali Smancer – IT-Intern
   Erstellt : Mai 2025
   Phase    : 3 · Aufgabe 3.1
   Beschreibung:
     Enthält alle globalen CSS-Variablen (:root-Block).
     Wird als erstes Modul importiert – Basis für alle anderen Module.
     Keine Selektoren, keine Layout-Regeln – nur Custom Properties.
   ============================================================ */

:root {

    /* === Starboxx Brand Colors === */
    --color-brand-red:      #D51616;   /* Hauptrot (Hover, Links)         – 14× */
    --color-brand-red-dark: #BC0600;   /* Dunkelrot (Dekorationselemente) –  8× */
    --color-brand-navy:     #00297C;   /* Marineblau (Headings)           –  2× */

    /* === Text Colors === */
    --color-text:           #333333;   /* Haupttext                       – 38× */
    --color-text-muted:     #999999;   /* Gedämpfter Text                 –  7× */
    --color-black:          #000000;   /* Reines Schwarz                  – 43× */

    /* === Background Colors === */
    --color-white:          #FFFFFF;   /* Weißer Hintergrund              – 37× */
    --color-bg-light:       #F7F7F7;   /* Heller Hintergrund              – 10× */
    --color-bg-subtle:      #E9E7EF;   /* Subtiler Hintergrund            –  6× */
    --color-bg-input:       #F8FAFC;   /* Input-Felder Hintergrund        –  4× */

    /* === Border / Divider Colors === */
    --color-border:         #CCCCCC;   /* Standard-Border                 – 12× */
    --color-border-light:   #EDEDED;   /* Heller Border                   –  6× */

}


/* ============================================================
   Quelle: modules/reset.css
   ============================================================ */

/* ============================================================
   reset.css – Modul 1: Reset, Normalisierung & @font-face
   Projekt  : Starboxx (starboxx.ch)
   Autor    : Vitali Smancer – IT-Intern
   Erstellt : Mai 2025
   Phase    : 3 · Aufgabe 3.2
   Beschreibung:
     Enthält box-sizing-Reset, Margin/Padding-Normalisierung,
     HTML5-Semantik-Korrekturen, @font-face-Deklarationen,
     Basis-Hilfsklasen (.hidden, .vh, .ir) sowie
     Clearfix-Regeln und ARIA-Utilities.
     Keine Farben als Hex-Werte – nur CSS-Variablen aus variables.css.
   ============================================================ */


/* === @font-face – Schriftarten (aus fonts.css) === */

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(https://www.starboxx.ch/fonts/Roboto-Light.ttf);
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://www.starboxx.ch/fonts/Roboto-Regular.ttf);
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://www.starboxx.ch/fonts/Roboto-Bold.ttf);
}
@font-face {
    font-family: 'Conthrax-sb';
    src: url('https://www.starboxx.ch/fonts/conthrax-sb.ttf');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}


/* === Box-Sizing Reset === */

*,
*::before,
*::after {
    box-sizing: border-box;
}


/* === HTML5-Semantik / Display-Normalisierung === */

[hidden],
template {
    display: none;
}


/* === Basis-Elemente: html & body === */

html {
    box-sizing: border-box;
    font-size: 17px;
    font-family: Roboto, Verdana, Geneva, sans-serif;
    font-weight: 400;
    height: 100%;
    line-height: 1.5;
    background-color: var(--color-white);
    color: var(--color-text);
    overflow-x: hidden;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1);
}

@media (min-width: 48em) { /* Tablet */
    html { font-size: 17.5px; }
}

@media (min-width: 80em) { /* Desktop */
    html { font-size: 18px; }
}

@media only screen and (orientation: landscape), (orientation: portrait) {
    html {
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
    }
}

body {
    margin: 0;
    height: 100%;
    overflow-x: hidden;
    line-height: 1.6;
}


/* === Links === */

a {
    color: var(--color-black);
    background-color: transparent;
    -webkit-tap-highlight-color: rgba(230, 0, 0, 0.3);
    text-decoration-color: var(--color-brand-red-dark);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3.5px;
}

a:visited {
    color: var(--color-brand-red);
}

a:hover {
    color: #FF4817;
}

a:focus {
    color: #FF4817;
}

a:active {
    color: var(--color-text);
}

a:hover, a:active {
    outline: 0;
}

a[href^="tel"] {
    color: var(--color-text);
}


/* === Überschriften === */

h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a {
    color: var(--color-brand-red);
    font-size: 1em;
    text-decoration: none;
}

h1 {
    font-family: Roboto, Verdana, Geneva, sans-serif;
    margin-top: 1.2em;
    margin-bottom: 0.6em;
    line-height: 1.2;
    color: var(--color-brand-navy);
    font-size: 1.75rem;
    font-weight: bold;
}

h2 {
    font-family: Roboto, Verdana, Geneva, sans-serif;
    margin-top: 1.4em;
    margin-bottom: 0.5em;
    line-height: 1.2;
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--color-text);
}

h3 {
    font-family: Roboto, Verdana, Geneva, sans-serif;
    margin-top: 1.2em;
    margin-bottom: 0.4em;
    line-height: 1.3;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text);
}

h4 {
    font-family: Roboto, Verdana, Geneva, sans-serif;
    margin-top: 1.1em;
    margin-bottom: 0.25em;
    line-height: 1.3;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-text);
}

h5 {
    font-family: Roboto, Verdana, Geneva, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-text);
    margin-bottom: .25em;
}

h6 {
    font-family: Roboto, Verdana, Geneva, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-text);
}

@media (max-width: 48em) {
    h1 { font-size: 1.5rem; margin-top: 1em; margin-bottom: 0.5em;}
    h2 { font-size: 1.25rem; margin-top: 1.2em; margin-bottom: 0.45em; }
    h3 { font-size: 1rem; margin-top: 1em; margin-bottom: 0.35em; }
}


/* === Text-Elemente === */

abbr[title] {
    text-decoration: none;
    border-bottom: none;
}

b,
strong {
    font-weight: bold;
}

hr {
    box-sizing: content-box;
    height: 0;
}

mark {
    background: yellow;
    color: black;
}

p,
pre {
    margin: 0 0 1em;
}

p:last-child,
pre:last-child {
    margin-bottom: 0;
}

pre,
code {
    font-family: monospace, serif;
    font-size: 1em;
}

pre {
    overflow: auto;
    white-space: pre-wrap;
}

q {
    quotes: "\201C" "\201D" "\2018" "\2019";
}

small {
    font-size: 80%;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}


/* === Listen === */

dl,
menu,
ol,
ul {
    margin: 0 0 1em;
}

dl:last-child,
menu:last-child,
ol:last-child,
ul:last-child {
    margin-bottom: 0;
}

dd {
    margin: 0 0 0 2.5em;
}

nav ul,
nav ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul ul,
ol ol {
    margin-top: 0;
    margin-bottom: 0;
    list-style-type: disc;
}

ol ol {
    list-style-type: inherit;
}


/* === Medien: img, svg === */

img {
    border: 0;
    margin: 0;
    vertical-align: bottom;
    max-width: 100%;
    width: auto;
    height: auto;
}

svg {
    overflow: visible;
    vertical-align: bottom;
}

svg:not(:root) {
    overflow: hidden;
}

svg path, svg rect, svg circle, svg line {
    fill: inherit;
}

path {
    vector-effect: non-scaling-stroke;
}

figure {
    margin: 0;
}

figure > img {
    display: block;
    margin: 0 auto;
}

figcaption {
    font-size: 0.875em;
    line-height: 1.5;
    margin: 1em 0;
}


/* === Selektion === */

::-moz-selection {
    background: var(--color-text);
    color: white;
}

::selection {
    background: var(--color-text);
    color: white;
}


/* === Formular-Basis (Reset-Ebene) === */

fieldset {
    border: none;
    margin: 0;
    padding: 0;
}

legend {
    border: 0;
    padding: 0;
}

button,
input,
optgroup,
select,
textarea {
    color: inherit;
    font: inherit;
    margin: 0;
}

button {
    overflow: visible;
}

button,
select {
    text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    cursor: pointer;
    -webkit-appearance: button;
    border-radius: 0;
    background-image: none;
}

button[disabled],
html input[disabled] {
    cursor: default;
}

input {
    line-height: normal;
}

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

input[type="search"] {
    -webkit-appearance: textfield;
    box-sizing: content-box;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

input[type="radio"] {
    vertical-align: text-bottom;
}

input[type="checkbox"] {
    vertical-align: bottom;
}

textarea {
    overflow: auto;
}

optgroup {
    font-weight: bold;
}


/* === Tabellen === */

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

td,
th {
    padding: 0;
}

caption {
    caption-side: bottom;
}

caption:before,
caption:after {
    content: "\0020\2014\0020";
}

th, td {
    padding: 0.25em 0;
    text-align: left;
    vertical-align: top;
}

th {
    border-bottom: 1px solid #d7dde2;
}

table ul {
    margin: 0;
    padding-left: 1em;
}


/* === Hilfsklassen (Visibility / Accessibility) === */

.browsehappy {
    margin: 0.2em 0;
    background: var(--color-border);
    color: var(--color-black);
    padding: 0.2em 0;
}

.ir {
    display: block;
    border: 0;
    text-indent: -999em;
    overflow: hidden;
    background-color: transparent;
    background-repeat: no-repeat;
    text-align: left;
    direction: ltr;
}

.ir br {
    display: none;
}

.hidden,
.is-hidden {
    display: none !important;
    visibility: hidden;
}

.vh {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.vh.focusable:active, .vh.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.highlight {
    color: var(--color-brand-red);
}


/* === ARIA / Interaction Utilities === */

a[href], button {
    touch-action: manipulation;
}

[tabindex="-1"]:focus {
    outline: none !important;
}

[role="button"] {
    cursor: pointer;
}

[aria-hidden="false"] {
    display: block;
}

[aria-hidden="true"] {
    display: none;
}

[role="button"] > *,
button > * {
    pointer-events: none;
}


/* === Navigation Basis === */

nav a {
    display: block;
    text-decoration: none;
}


/* === Sonstiges === */

address {
    font-style: normal;
}

hr {
    border-style: solid;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid var(--color-text-muted);
    width: 100%;
    margin: 1em auto;
}

label, label .label {
    cursor: pointer;
}

textarea {
    resize: vertical;
}


/* === Clearfix (Micro-Clearfix) === */

.container:before, .container:after,
.formfields > li:before,
.formfields .two-options:before,
.formfields .formFieldCheckboxMulti > div:before,
[role="banner"]:before,
[role="main"]:before,
[role="complementary"]:before,
[role="navigation"]:before,
[role="contentinfo"]:before,
.content:before,
.person-overview .person-overview__item:before,
.formfields > li:after,
.formfields .two-options:after,
.formfields .formFieldCheckboxMulti > div:after,
[role="banner"]:after,
[role="main"]:after,
[role="complementary"]:after,
[role="navigation"]:after,
[role="contentinfo"]:after,
.content:after,
.person-overview .person-overview__item:after {
    content: "";
    display: table;
}

.container:after,
.formfields > li:after,
.formfields .two-options:after,
.formfields .formFieldCheckboxMulti > div:after,
[role="banner"]:after,
[role="main"]:after,
[role="complementary"]:after,
[role="navigation"]:after,
[role="contentinfo"]:after,
.content:after,
.person-overview .person-overview__item:after {
    clear: both;
}


/* === Slider / Layer Buttons (Text-Indent-Trick) === */

.layer .slider-btn-prev,
.layer .slider-btn-next,
.layer .layer-close {
    text-indent: 110%;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
}


/* === Listen-Reset für Navigationen und Formular-Listen === */

.formfields,
.nav-main, .nav-sub, .footer-nav, .gallery-view__list,
.client-list,
.person-overview {
    list-style-type: none;
    margin: 0;
    padding: 0;
}


/* === Hamburger-Icon Positionierung === */

.tcon {
    position: absolute;
    left: 4.17%;
    top: 50%;
    transform: translateY(-50%);
}


/* ============================================================
   Quelle: modules/typography.css
   ============================================================ */

/* ============================================================
   typography.css – Modul 2: Typografie & Schrift
   Projekt  : Starboxx (starboxx.ch)
   Autor    : Vitali Smancer – IT-Intern
   Erstellt : Mai 2025
   Phase    : 3 · Aufgabe 3.3
   Beschreibung:
     Enthält alle typografischen Basis-Regeln: html/body
     Schriftgrößen, h1–h6, Fließtext (p, a, ul, ol) sowie
     Mobile Media-Query-Overrides.

     HINWEIS – Konsolidierung mit reset.css:
     Im Zuge von Aufgabe 3.2 wurden html, body, h1–h6, Links
     und Listen bereits in reset.css (Modul 1) aufgenommen,
     da sie eng mit der Normalisierungsebene verknüpft sind.
     Dieses Modul dokumentiert diese Entscheidung und enthält
     ergänzende typografische Regeln, die nicht zum Reset
     gehören. Bei Aufgabe 3.10 (Build) wird geprüft, ob eine
     Zusammenführung von reset.css und typography.css sinnvoll
     ist.
   ============================================================ */


/* === Bereits in reset.css (Modul 1) enthalten === */

/*
   Die folgenden Selektoren wurden in Aufgabe 3.2 in
   modules/reset.css aufgenommen und sind NICHT doppelt
   zu definieren:

   html        → Schriftgröße, font-family, line-height,
                 overflow-x, background-color, color
                 + @media Tablet (17.5px) / Desktop (18px)

   body        → margin: 0, height: 100%, overflow-x, line-height

   h1–h6       → font-family, font-size, font-weight,
                 margin-top/bottom, line-height, color
                 + @media (max-width: 48em) Mobile-Overrides

   a           → color, text-decoration, tap-highlight
   a:visited   → color: var(--color-brand-red)
   a:hover     → color: #FF4817
   a:focus     → color: #FF4817
   a:active    → color: var(--color-text)

   p, pre      → margin: 0 0 1em
   ul, ol, dl  → margin: 0 0 1em
   nav ul/ol   → margin: 0, padding: 0, list-style: none
*/


/* === Ergänzende Typografie-Regeln === */

/* Kursiv / Zitate */
blockquote {
    margin: 1.5em 0 1.5em 1.5em;
    padding-left: 1em;
    border-left: 3px solid var(--color-border);
    color: var(--color-text-muted);
    font-style: italic;
}

/* Inline-Code */
code {
    font-family: monospace, serif;
    font-size: 0.9em;
    background-color: var(--color-bg-light);
    padding: 0.1em 0.3em;
    border-radius: 2px;
}

/* Abkürzungen */
abbr[title] {
    cursor: help;
    text-decoration: underline dotted;
}

/* Fließtext-Links im Content-Bereich */
.content a,
[role="main"] a {
    color: var(--color-brand-red);
    text-decoration: underline;
}

.content a:hover,
[role="main"] a:hover {
    color: var(--color-brand-red-dark);
}


/* === Responsive Schriftgrößen-Skala === */

/*
   Basis-Schriftgröße wird in reset.css (html-Regel) gesetzt:
   Mobil  : 17px
   Tablet : 17.5px  @media (min-width: 48em)
   Desktop: 18px    @media (min-width: 80em)

   Alle Größen im Stylesheet verwenden rem-Einheiten relativ
   zu diesen Basiswerten.
*/


/* ============================================================
   Quelle: modules/forms.css
   ============================================================ */

/* ============================================================
   forms.css – Modul 3: Formulare & Formular-Layouts
   Projekt  : Starboxx (starboxx.ch)
   Autor    : Vitali Smancer – IT-Intern
   Erstellt : Mai 2025
   Phase    : 3 · Aufgabe 3.4
   Beschreibung:
     Enthält alle Starboxx-spezifischen Formular-Styles:
     Kontaktformular-Layout, Social-Profile-Widget (.sbx),
     Kontakt-Banner (.contact-us) sowie Dark-Mode-Overrides
     für Formularelemente.
     Formular-Reset (fieldset, input, button, select, textarea)
     befindet sich in reset.css (Modul 1).
   ============================================================ */

/* === Formular Fehlermeldungen === */

div.errormessage {
    background-color: #f7f7f7;
    border: 1px solid #cccccc;
    padding: 0.3em 0.5em 0.3em 0.5em;
    margin: 1em 0 1em 0;
}

body.darkmode div.errormessage {
    background-color: #000000;
}

/* === Kontaktformular-Layout === */

.contact-social-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

@media (min-width: 64em) {
    .contact-social-wrapper {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }

    .contact-form,
    .social-form {
        flex: 1;
        min-width: 0;
    }

    .contact-form {
        margin-right: 2rem;
    }
}

/* spacing below the social form */
.social-form { margin-top: 2rem; }


/* === Suchanfragen-Widget (.sbx) === */

/* ---------- LIGHT THEME TOKENS ---------- */
.sbx {
    --surface-1:     var(--color-white);
    --surface-2:     var(--color-bg-light);
    --border:        var(--color-border);
    --focus:         var(--color-brand-red);
    --input-text:    #111827;
    --muted:         var(--color-bg-input);
    --title:         var(--color-bg-input);
}

/* Hinweis: .darkmode .sbx Theme-Tokens wurden nach modules/darkmode.css */
/* (Modul 8, Abschnitt 4 - Formular-Overrides) verschoben.            */

/* ---------- CARD ---------- */
.sbx * { box-sizing: border-box; }

.sbx .card {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: visible;
    font-family: Roboto, Helvetica, Arial, sans-serif;
}

.sbx .card-header {
    padding: 16px 24px 0;
}

.sbx .card-title  { font: 700 26px/1.2 Roboto,Helvetica,Arial,sans-serif; color: var(--title); }
.sbx .card-desc   { color: var(--muted); font: 400 17px/1.4 Roboto,Helvetica,Arial,sans-serif; margin-top: 6px; }
.sbx .card-body   { padding: 16px 24px; }

/* ---------- ROWS ---------- */
.sbx .row {
    display: grid;
    grid-template-columns: 40% 45% 20%;
    gap: 14px;
    align-items: center;
    margin-bottom: 14px;
}

/* ---------- FIELDS ---------- */
.sbx .field, .sbx .select-btn, .sbx .icon-btn {
    height: 48px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface-1);
}

.sbx .field {
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 8px;
}

.sbx .field input {
    border: none;
    background: transparent;
    color: var(--input-text);
    font: 400 16px/1 Roboto,Helvetica,Arial,sans-serif;
    width: 100%;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.sbx .field input::placeholder    { color: var(--muted); }
.sbx .field input:focus            { border-color: var(--focus); }
.sbx .field input.error-input      { border: 1px solid #ef4444; }

/* Error message */
.sbx .error-popup {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #b91c1c;
    font-size: 13px;
    padding: 6px 10px;
    border-radius: 6px;
    white-space: nowrap;
    z-index: 10;
}

/* ---------- DROPDOWN ---------- */
.sbx .select { position: relative; }

.sbx .select-btn {
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 8px;
    cursor: pointer;
    font: 400 15px/1 Roboto,Helvetica,Arial,sans-serif;
    color: var(--input-text);
    width: 100%;
}

.sbx .select-btn:focus          { border-color: var(--focus); }
.sbx .select-value              { display: flex; align-items: center; gap: 12px; min-width: 0; }

.sbx .dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    z-index: 50;
    overflow-y: auto;
    max-height: 260px;
}

.sbx .dropdown.open              { display: block; }
.sbx .dropdown.drop-up           { top: auto; bottom: 60px; }

.sbx .option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    font: 400 15px/1.4 Roboto,Helvetica,Arial,sans-serif;
    color: var(--input-text);
}

.sbx .option:hover               { background: var(--surface-2); }

/* ---------- ICONS ---------- */
.sbx .icon {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    display: inline-grid;
    place-items: center;
    fill: white;
}

.sbx .icon svg    { width: 18px; height: 18px; display: block; color: var(--color-white); }
.sbx .fb          { background: #1877F2; }
.sbx .ig          { background: #E4405F; }
.sbx .x           { background: var(--color-black); }
.sbx .tt          { background: #010101; }
.sbx .in          { background: #0A66C2; }
.sbx .delete { background:#E4405F; }
.sbx .delete { width:32px; height:32px;  display:inline-grid; place-items:center; }
.sbx .delete svg { width:24px; height:24px; }

.sbx .label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- ACTION BUTTONS ---------- */
.sbx .icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: var(--surface-1);
    color: var(--input-text);
    padding: 0 8px;
    min-width: 44px;
}

.sbx .icon-btn:hover  { background: var(--color-border-light); border: 1px solid var(--color-text); }
.sbx .icon-btn:focus  { border-color: var(--focus); outline: 2px solid var(--focus); outline-offset: 2px; }

.sbx .row .icon-btn svg {
    width: 20px;
    height: 20px;
    display: block;
}

/* UPDATED BUTTON STYLE (square + Roboto bold) */
.sbx .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 48px;
    padding: 0 20px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--color-brand-red);
    color: var(--color-white);
    font: 700 15px/1 Roboto,Helvetica,Arial,sans-serif;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.sbx .btn:hover { background: var(--color-brand-red-dark); }

/* ---------- MESSAGE BOX ---------- */
.sbx .message-box {
    padding: 12px 16px;
    border-radius: 8px;
    margin-top: 8px;
    font-size: 14px;
}

/* ---------- MOBILE LAYOUT ---------- */
@media (max-width: 720px) {
    .sbx .card          { border-radius: 0; border-left: 0; border-right: 0; }
    .sbx .card-body     { padding: 12px; }
    .sbx .row           { grid-template-columns: 1fr; gap: 10px; margin-bottom: 10px; }
    .sbx .icon-btn      { width: 100%; height: 44px; }
    .sbx .actions       { flex-wrap: wrap; gap: 10px; }
    .sbx .btn           { flex: 1 1 140px; justify-content: center; }
    .sbx .dropdown      { left: 0; right: 0; max-height: 50vh; }

    #add {
        width: 44px;
        height: 44px;
        padding: 0;
        font-size: 22px;
        text-indent: -999px;
        position: relative;
    }

    #add::before {
        content: "＋";
        text-indent: 0;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}

/* On desktop: side by side */
@media (min-width: 64em) {
    .contact-social-wrapper {
        flex-direction: row;
        align-items: flex-start;
    }
}


/* === Kontakt-Banner (.contact-us) === */

.contact-us {
    display: block;
}

@media (min-width: 37.5em) {
    .contact-us {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex: 0 0 100% !important;
    }
}

.contact-us p {
    font-size: 40px;
    font-family: 'Conthrax-sb';
    color: var(--color-white);
    text-transform: uppercase;
    line-height: 1.2;
    margin-bottom: 0;
    text-align: center;
}

@media (min-width: 64em) {
    .contact-us p { font-size: 50px; }
}

.contact-us a {
    width: max-content;
    background-color: var(--color-brand-red);
    border: none;
    font-size: 20px;
    font-family: 'Roboto';
    color: var(--color-white);
    font-weight: bold;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 17px 40px;
    text-decoration: none;
    white-space: nowrap;
    margin-left: 20px;
}

.contact-us a:hover {
    background-color: var(--color-brand-red-dark);
}

@media (max-width: 37.5em) {
    .contact-us a {
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-top: 30px;
    }
}


/* ============================================================
   Hinweis: body.darkmode-/.darkmode-Overrides (Formulare) wurden
   in Aufgabe 3.10 (Build) nach modules/darkmode.css (Modul 8,
   Abschnitt 4 - Formular-Overrides) konsolidiert und hier
   entfernt, um modulübergreifende Duplikate zu vermeiden.
   ============================================================ */


/* ============================================================
   Quelle: modules/navigation.css
   ============================================================ */

/* ============================================================
   navigation.css – Modul 4: Navigation
   Projekt  : Starboxx (starboxx.ch)
   Autor    : Vitali Smancer – IT-Intern
   Erstellt : Mai 2025
   Phase    : 3 · Aufgabe 3.5
   Beschreibung:
     Enthält alle Navigations-Styles: responsive-nav.js Regeln,
     Hamburger-Icon (.tcon), Haupt-Navigation (.nav-main),
     Dropdown, Mobile-Collapse (.nav-collapse), Sub-Navigation
     (.nav-sub), Footer-Navigation (.footer-nav),
     Sprachauswahl (.nav-language) sowie Dark-Mode-Overrides
     für alle Navigations-Komponenten.
   ============================================================ */


/* Navigations
 * ===================================================================
 */
/*! responsive-nav.js 1.0.40 by @viljamis */
.js .nav-collapse,
.js .nav-collapse .dropdown ul {
    clip: rect(0 0 0 0);
    max-height: 0;
    position: absolute;
    display: block;
    overflow: hidden;
}

.nav-collapse.opened,
.nav-collapse .dropdown.opened ul {
    max-height: 9999px;
}

.nav-collapse .dropdown.opened > ul,
.nav-collapse .dropdown .dropdown.opened > ul {
    position: relative;
}

.nav-toggle,
.dropdown-toggle {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.nav-toggle {
    position: absolute;
    top: 1em;
    right: 1em;
}

@media (min-width: 64em) {
    .js .nav-collapse {
        position: relative;
    }
    .js .nav-collapse.closed,
    .js .nav-collapse.closed .dropdown ul {
        max-height: none;
        overflow: visible;
        padding-top: 1.625em;
        padding-bottom: 1.625em;
        position: sticky!important;
        background: var(--color-bg-subtle);
        top: 0;
        z-index: 100;
    }
    .nav-toggle {
        display: none;
    }
    .js .nav-collapse:before {
        position: absolute;
        top: 0;
        left: -50%;
        bottom: 0;
        background: var(--color-bg-subtle);
        right: 0;
        width: 200%;
        height: 100%;
        z-index: -1;
        display: block;
    }
}

.tcon {
    appearance: none;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 25px;
    transition: 0.3s;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: 25px;
    background: transparent;
    outline: none;
    border-radius: 5px;
    padding: 0;
    box-sizing: content-box;
}

@media (min-width: 64em) {
    .tcon {
        display: none;
    }
}

.tcon > * {
    display: block;
}

.tcon:hover, .tcon:focus {
    outline: none;
}

.tcon::-moz-focus-inner {
    border: 0;
}

.tcon-menu__lines {
    display: inline-block;
    height: 3px;
    width: 24px;
    border-radius: 0;
    transition: 0.3s;
    background: var(--color-text);
    position: relative;
}

.tcon-menu__lines::before, .tcon-menu__lines::after {
    display: inline-block;
    height: 3px;
    width: 24px;
    border-radius: 0;
    transition: 0.3s;
    background: var(--color-text);
    content: '';
    position: absolute;
    left: 0;
    transform-origin: 1.7142857143px center;
    width: 100%;
}

.tcon-menu__lines::before {
    top: 6px;
}

.tcon-menu__lines::after {
    top: -6px;
}

.active .tcon-menu__lines {
    transform: scale3d(0.6, 0.6, 0.6);
}

.tcon-menu--xbutterfly .tcon-menu__lines::before, .tcon-menu--xbutterfly .tcon-menu__lines::after {
    transform-origin: 50% 50%;
    transition: top .3s .6s ease, transform .3s ease;
}

.tcon-menu--xbutterfly.active .tcon-menu__lines {
    background: transparent;
    margin-right: 1px;
}

.tcon-menu--xbutterfly.active .tcon-menu__lines::before, .tcon-menu--xbutterfly.active .tcon-menu__lines::after {
    background-color: #3a383d;
    top: 0;
    transition: top .3s ease, transform .3s .5s ease;
    width: 25px;
}

.tcon-menu--xbutterfly.active .tcon-menu__lines::before {
    transform: rotate3d(0, 0, 1, 45deg);
}

.tcon-menu--xbutterfly.active .tcon-menu__lines::after {
    transform: rotate3d(0, 0, 1, -45deg);
}

.tcon-visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.tcon-visuallyhidden:active, .tcon-visuallyhidden:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.nav-main {
    padding-bottom: 1px;
    padding-top: 20px;
    background: var(--color-bg-subtle);
}

@media (min-width: 64em) {
    .nav-main {
        padding-bottom: 0;
        margin-bottom: -1px;
        vertical-align: middle;
        padding-top: 0;
        background: none;
        display: flex;
        /*   gap: 60px; */
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }
}

.nav-main__item {
    position: relative;
    margin: 1.3em calc(4.17% + 12px) 1em calc(4.17% + 12px);
    border-bottom: 1px solid #d2cdda;
    text-transform: uppercase;
}

.nav-main__item > a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1px;
    width: 0;
    height: 3px;
    background: var(--color-black);
    transition: width 0.15s ease-in-out, left 0.15s ease-in-out;
}

.nav-main__item > a:hover::after {
    width: 100%;
    left: 0;
}

.nav-main__item .is-active > a::before{ content:none; }
.nav-main__item .is-active > a::after{
    background:var(--color-brand-red-dark);
    width:100%;
    left:0;
    transition:none;
}

.nav-main__item.is-active > a:hover::after {
    content: none !important;
}


@media (min-width: 64em) {
    .nav-main__item {
        display: inline-block;
        margin: 0;
        border-bottom: none;
        vertical-align: bottom;
    }
}

.nav-main__item > a,
.nav-main__item > h3 {
    color: var(--color-black);
    font-size: 1em;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 10px;
    border-radius: 5px;
}

@media (min-width: 64em) {
    .nav-main__item > a,
    .nav-main__item > h3 {
        border-radius: 5px 5px 0 0;
        padding: 0.25em 0;
        margin: 0;
        color: var(--color-black);
    }
    .nav-main__item:nth-child(1) a{
        margin-left: 0;
    }
}

.nav-main__item.has-dropdown > h3 {
    display: none;
}

@media (min-width: 64em) {
    .nav-main__item.has-dropdown > h3 {
        border-radius: 5px 5px 0 0;
        cursor: default;
        display: block;
    }
    .nav-main__item.has-dropdown:hover .dropdown {
        display: block;
    }
}

.nav-main__item.has-dropdown:hover .dropdown {
    left: auto;
}

.nav-main__item .is-visible + .dropdown {
    left: auto;
}

.nav-sub {
    border-top-width: 0;
    border-radius: 0 0 5px 5px;
    display: none;
}

@media (min-width: 64em) {
    .nav-sub {
        position: absolute;
        left: -999em;
        top: 103%;
        min-width: 11em;
        z-index: 2;
        background-color: var(--color-bg-subtle);
        border: 1px solid #C0CFD7;
    }
}

@media (min-width: 64em) {
    .nav-sub__item {
        border-top: 1px solid #d2cdda;
    }
}

.nav-sub__item:first-child {
    border-top: none;
}

.nav-sub__item:last-child a {
    border-radius: 0 0 5px 5px;
}

.nav-sub__item > a {
    color: #383838;
    padding: 0.75em 0;
    margin-left: 0.75em;
}

@media (min-width: 64em) {
    .nav-sub__item > a {
        color: var(--color-black);
        padding: 0.25em 0;
        margin-left: 0.75em;
        background: var(--color-bg-subtle);
    }
}

.nav-sub__item:last-child {
    padding-bottom: 0.75em;
}

@media (min-width: 64em) {
    .nav-sub__item:last-child {
        padding-bottom: 0;
    }
    .nav-sub__item > a:focus, .nav-sub__item > a:hover {
        background-color: #fbfae4;
        color: var(--color-brand-red-dark);
    }
}

.nav-sub__item > a:focus, .nav-sub__item > a:hover {
    background-color: unset;
    color: var(--color-brand-red);
}

.is-active > a,
.is-active > h3 {
    font-weight: bold;
    position: relative;
    width: -moz-fit-content;
    width: fit-content;
}

.is-active > a::before{
    position: absolute;
    bottom: -11px;
    left: 0;
    content: " ";
    width: 100%;
    height: 3px;
    background: var(--color-brand-red-dark);
    z-index: 0;
}

@media (max-width: 64em) {
    .nav-sub .is-active > a::before{
        position: absolute;
        bottom: 1px;
        left: 0;
        content: " ";
        width: 100%;
        height: 3px;
        background: var(--color-brand-red-dark);
        z-index: 0;
    }
    .nav-main__item.is-active > a:hover::after {
        content: none !important;
    }
    .is-active .toggle-container > h3{
        position: relative;
    }
    .is-active .toggle-container > h3::before{
        position: absolute;
        bottom: -11px;
        left: 0;
        content: " ";
        width: 100%;
        height: 3px;
        background: var(--color-brand-red-dark);
        z-index: 0;
    }
}

@media (min-width: 64em) {
    .is-active > a::before,
    .is-active > h3::before{
        position: absolute;
        bottom: -1px;
        left: 0;
        content: " ";
        width: 100%;
        height: 3px;
        background: var(--color-brand-red-dark);
        z-index: 0;
    }
}

.nav-language {
    margin: 1em 0 1em calc(4.17% + 12px);
}

@media (min-width: 64em) {
    .nav-language {
        display: inline-block;
        margin: 0.25em;
        margin-left: 1.25em;
        vertical-align: middle;
    }
}

@media (min-width: 80em) {
    .nav-language {
        margin-left: 2.25em;
    }
}

.nav-language > span {
    color: var(--color-text-muted);
}

.nav-language > a {
    border-left: 1px solid var(--color-text-muted);
    display: inline;
    margin-left: 0.25em;
    padding: 0 0.5em;
}

.nav-language > a:first-of-type {
    border-left: none;
    margin-right: -0.5em;
}

.touch .footer-nav {
    margin-top: -0.5em;
}

.footer-nav > li {
    position: relative;
}

.footer-nav > li:before {
    content: "\00BB";
    position: absolute;
    top: 0;
    left: 0;
}

.footer-nav > li > a {
    display: block;
    margin-left: 1em;
}


@media (max-width: 63.95em) {

    .nav-language,
    #darkmode-pic {
        display: inline-flex;        /* inline, not full-width blocks */
        align-items: center;
        vertical-align: middle;
        margin: 1em calc(4.17% + 12px) 0; /* match your mobile margins */
        border-bottom: 0;            /* avoid a divider between them */
        white-space: nowrap;
        margin-bottom: 2em;
    }

    /* a bit of space between them */
    #darkmode-pic { margin-left: .75em; }
}



#darkmode-pic {
    display: inline-flex;
    align-items: center;
}

#darkmode-toggle {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    cursor: pointer;
}

#darkmode-toggle img {
    height: 1.1em; /* etwas größer als Text */
    width: auto;
    display: inline-block;
}

#logo {
    background-image: url('./img/starboxx.svg');
    width: 444px;
    height: 111px;
    background-size: contain;
    background-repeat: no-repeat;
}
/* Darkmode-Logo als Hintergrundbild */


/* Für Browser-Kompatibilität wird src gesetzt, aber unsichtbar gemacht */

/* Darkmode-Logo */

#darkmode-icon-mond {
    transition: all 0.3s ease;
}
/* (Optional) avoid overlap “flash” at center during transition */
.tcon-menu--xbutterfly .tcon-menu__lines::before,
.tcon-menu--xbutterfly .tcon-menu__lines::after {
    transition: top .3s ease, transform .3s ease; /* remove the .6s delay */
}

/* Icon-Farbe invertieren  */


/* === Zusätzliche Mobile-Nav-Overrides === */

.nav-collapse.opened {
    position: fixed !important;
    top: 53px;
    left: 0;
    width: 100%;
    background: rgb(255, 255, 255);
    overflow: auto;
    clip: inherit;
    z-index: 1000;
}

@media (min-width: 37.5em) {
    .nav-collapse.opened {
        position: fixed !important;
        top: 53px;
        left: 0;
        width: 100%;
        background: rgb(255, 255, 255);
        overflow: auto;
        clip: inherit;
        z-index: 1000;
    }
}

body .nav-collapse.opened {
    height: 100%;
    max-height: none !important;
}

.tcon.active {
    border: 1px solid #b0b1bd;
    padding: 0;
    box-sizing: border-box;
}

/* ============================================================
   Hinweis: body.darkmode-/.darkmode-Theme-Overrides wurden in
   Aufgabe 3.10 (Build) nach modules/darkmode.css (Modul 8,
   Abschnitt 1 und 3) konsolidiert und hier entfernt, um
   modulübergreifende Duplikate zu vermeiden. UI-Elemente des
   Dark-Mode-Toggles (#darkmode-pic, #darkmode-toggle, #logo,
   #darkmode-icon-mond) bleiben hier, da sie zur Navigations-
   Komponente gehören, nicht zum Theme-Override-System.
   ============================================================ */


/* ============================================================
   Quelle: modules/layout.css
   ============================================================ */

/* ============================================================
   layout.css – Modul 5: Seitenstruktur & Layout
   Projekt  : Starboxx (starboxx.ch)
   Autor    : Vitali Smancer – IT-Intern
   Erstellt : Mai 2025
   Phase    : 3 · Aufgabe 3.6
   Beschreibung:
     Enthält die gesamte Seitenstruktur: .container, Grid,
     Spalten-Layout, Header ([role=banner]), Main ([role=main]),
     Aside ([role=complementary]), Footer ([role=contentinfo]),
     .content, .logo sowie Slideshow-Keyframes.
     Dark-Mode-Overrides für Layout-Elemente am Ende.
   ============================================================ */


/* Layout
 * ===================================================================
 */
.container {
    min-height: 100%;
    max-width: 1400px;
    margin: 0 auto;
    /*overflow-x: hidden;*/
    position: relative;
}

@media (min-width: 48em) {
    .custom-class{
        max-width: 100%;
        display: flex;
        flex-direction: column;
    }
}

@media (min-width: 48em) {
    .container-desktop{
        max-width: 1320px;
        margin-left: auto!important;
        margin-right: auto!important;
    }
    .content-desktop{
        width: 100%!important;
        margin-right: 0!important;
        /*display: flex;*/
        /*flex-direction: column;*/
    }
}

[role="banner"] {
    width: 100%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
    display: flex;
    position: fixed;
    top: 0;
    z-index: 100;
    background-image: -webkit-linear-gradient(top, var(--color-bg-subtle) 85%, #d5d2dd 100%);
}

@media (min-width: 37.5em) {
    [role="banner"] {
        width: 100%;
        float: right;
        margin-left: 0;
        margin-right: 0;
        clear: none;
        display: flex;
    }
}


[role="main"] {
    width: 91.6666666667%;
    float: right;
    margin-left: 0;
    margin-right: 4.1666666667%;
    clear: none;
    margin-bottom: 2em;
}

@media (min-width: 37.5em) {
    [role="main"] {
        width: 91.6666666667%;
        float: right;
        margin-left: 0;
        margin-right: 4.1666666667%;
        clear: none;
    }
}

@media (min-width: 48em) {
    [role="main"] {
        width: 94.4444444444%;
        float: right;
        margin-left: 0;
        margin-right: 2.7777777778%;
        clear: none;
    }
}

@media (min-width: 37.5em) {
    .layout-twocols [role="main"] {
        width: 91.6666666667%;
        float: right;
        margin-left: 0;
        margin-right: 4.1666666667%;
        clear: none;
    }
}


@media (min-width: 64em) {
    .layout-twocols [role="main"] {
        width: 61.1111111111%;
        float: left;
        /* margin-right: -100%; */
        margin-left: 2.7777777778%;
        clear: both;
        margin-bottom: 0;
    }
}

[role="complementary"] {
    width: 91.6666666667%;
    float: right;
    margin-left: 0;
    margin-right: 4.1666666667%;
    clear: none;
}

@media (min-width: 37.5em) {
    .layout-twocols [role="complementary"] {
        width: 91.6666666667%;
        float: right;
        margin-left: 0;
        margin-right: 4.1666666667%;
        clear: none;
    }
}

@media (min-width: 64em) {
    .layout-twocols [role="complementary"] {
        width: 27.7777777778%;
        float: right;
        margin-left: 0;
        margin-right: 2.7777777778%;
        clear: none;
    }
}

[role="navigation"] {
    width: 91.6666666667%;
    float: right;
    margin-left: 0;
    margin-right: 4.1666666667%;
    clear: none;
}

@media (min-width: 37.5em) {
    [role="navigation"] {
        width: 91.6666666667%;
        float: right;
        margin-left: 0;
        margin-right: 4.1666666667%;
        clear: none;
    }
}

@media (min-width: 48em) {
    [role="navigation"] {
        width: 94.4444444444%;
        float: right;
        margin-left: 0;
        margin-right: 2.7777777778%;
        clear: none;
    }
}

[role="contentinfo"] {
    width: 100%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    background-color: black;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    clear: both;
    margin-top: 0;
    margin-bottom: 0;
    padding-bottom: 10px;
}

[role="contentinfo"] > div {
    width: 91.6666666667%;
    clear: right;
    float: right;
    margin-left: 0;
    margin-right: 4.1666666667%;
    padding: 1.5em 0;
    color: lightgrey;
}

[role="contentinfo"] > div:nth-child(2) {
    padding-top: 0.5em;
}

[role="contentinfo"] a {
    color: #e6e6e6;
    text-decoration-color: #e6e6e6;
}

@media (min-width: 37.5em) {
    [role="contentinfo"] {
        width: 100%;
        float: right;
        margin-left: 0;
        margin-right: 0;
        clear: none;
    }
    [role="contentinfo"] > div {
        width: 91.6666666667%;
        clear: right;
        float: right;
        margin-left: 0;
        margin-right: 4.1666666667%;
    }
}

@media (min-width: 48em) {
    [role="contentinfo"] {
        width: 94.4444444444%;
        float: right;
        margin-left: 0;
        margin-right: 2.7777777778%;
        clear: none;
        background: black!important;
        border: 1px solid #B7B7B7;
        border-radius: 5px;
        padding-bottom: 0;
        position: relative;
        z-index: 0;
    }
    [role="contentinfo"]:before {
        position: absolute;
        content: "";
        top: 0;
        left: -50%;
        bottom: 0;
        background: black;
        right: 0;
        width: 200%;
        height: 100%;
        z-index: -1;
        display: block;
    }
}

@media (min-width: 64em) {
    [role="contentinfo"] {
        width: 94.4444444444%;
        float: right;
        margin-left: 0;
        margin-right: 2.7777777778%;
        clear: both;
        display: flex;
        flex-wrap: wrap;
    }
    [role="contentinfo"] > div {
        flex: 1 0 27.7777777778%;
        margin: 0;
        padding: 2em 2.0833333333%;
    }
    [role="contentinfo"] > div:nth-child(2) {
        flex: 0 0 100%;
        padding-bottom: 0;
    }
    [role="contentinfo"] > div:first-of-type {
        border-left: none;
    }
    [role="contentinfo"] > div:last-of-type {
        border-right: none;
    }
    [role="contentinfo"] > div:nth-child(3) {
        padding-top: 2em;
    }
}

.content {
    width: 100%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    padding-top: 53px;
    padding-bottom: 1em;
    background-color: var(--color-white);
    clear: both;
}

@media (min-width: 37.5em) {
    .content {
        width: 100%;
        float: right;
        margin-left: 0;
        margin-right: 0;
        clear: none;
        padding-top: 53px;
    }
}

@media (min-width: 48em) {
    .content {
        width: 94.4444444444%;
        float: right;
        margin-left: 0;
        margin-right: 2.7777777778%;
        clear: both;
        padding-top: 53px;
        background: var(--color-white);
    }
}

@media (min-width: 64em) {
    .content {
        padding-top: 2em;
        padding-bottom: 5em;
        /*  margin-left: 2em; */ /* i commented this line out in to reorder the content on the Agentur page back to normal since it was shifted to the right */
    }
}

.logo {
    float: left;
    margin-right: auto;
    margin-left:auto;
    clear: none;
    position: relative;
    height: 0;
    padding-top: 20px;
    width: 58.3333333333%;
    margin-top: 15px;
    margin-bottom: 18px;
    max-width: 222px;
    max-height: 55px;
}

.logo img {
    display: block;
    position: absolute;
    width: 100% !important;
    height: 100% !important;
    top: 0;
    margin: 0;
    padding: 0;
}

@media (min-width: 37.5em) {
    .logo {
        float: left;
        margin-right: auto;
        margin-left:auto;
        clear: none;
        position: relative;
        height: 0;
        padding-top: 20px;
        width: 41.6666666667%;
        margin-top: 15px;
        margin-bottom: 18px;
    }
    .logo img {
        display: block;
        position: absolute;
        width: 100% !important;
        height: 100% !important;
        top: 0;
        margin: 0;
        padding: 0;
    }
}

@media (min-width: 64em) {
    .logo {
        float: left;
        clear: none;
        position: relative;
        height: 0;
        padding-top: 6.9444444444%;
        width: 22.7777777778%;
        margin-top: 1em;
        margin-bottom: 1em;
        max-width: 100%;
        display: none;
    }
    .logo img {
        display: block;
        position: absolute;
        width: 100% !important;
        height: 100% !important;
        top: 0;
        margin: 0;
        padding: 0;
    }
}

.logo > img {
    max-height: 100%;
}

.client-name {
    display: block;
    color: #e6e6e6;
    font-weight: bold;
    font-size: 1em;
    margin-top: 0;
    margin-bottom: 0;
}

.client-name > em {
    display: block;
    color: var(--color-text);
    font-style: normal;
}

@media (min-width: 37.5em) {
    .btn-toggle-menu {
        display: none;
    }
}

/* ============================================================
   Hinweis: body.darkmode-Overrides für Layout-Elemente wurden
   in Aufgabe 3.10 (Build) nach modules/darkmode.css (Modul 8,
   Abschnitt 2 - Layout-Overrides) konsolidiert und hier entfernt,
   um modulübergreifende Duplikate zu vermeiden.
   ============================================================ */


/* ============================================================
   Quelle: modules/components.css
   ============================================================ */

/* ============================================================
   components.css – Modul 6: UI-Komponenten
   Projekt  : Starboxx (starboxx.ch)
   Autor    : Vitali Smancer – IT-Intern
   Erstellt : Juni 2025
   Phase    : 3 · Aufgabe 3.7
   Beschreibung:
     Enthält alle UI-Komponentenstyles: Slideshow/Keyframes,
     Testimonials-Slider (.sx-scope), Personen-Übersicht
     (.person-overview, .person-list), Galerie (.gallery-view,
     .overflow-gallery), PhotoSwipe (.pswp), Swiper.js
     (.swiper-container), Sedcard (.sedcard), FAQ (.faq__item,
     .faq__title, .faq__content), Layer/Overlay (.layer,
     .layer-content), Buttons (.gallery-view__btn), Autocomplete
     (.ownAutocomplete), Footer-Komponenten, Utilities.
     Dark-Mode-Overrides für Komponenten am Ende.
   ============================================================ */


/* ===== Slideshow – Keyframes & Wrapper ===== */

@keyframes slideShow {
    0% {
        opacity: 0;
        transform: scale(1);
    }
    5% {
        opacity: 1;
    }
    25% {
        opacity: 1;
    }
    30% {
        opacity: 0;
        transform: scale(1.1);
    }
    100% {
        opacity: 0;
        transform: scale(1);
    }
}

/* Homepage picture*/

@keyframes slideShow {
    0% {
        opacity: 0;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    5% {
        opacity: 1;
    }
    25% {
        opacity: 1;
    }
    30% {
        opacity: 0;
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.slideshow-wrapper {
    overflow: hidden;
    position: relative;
    padding-top: 42.8571428571%;
    margin-bottom: 2em;
    margin-top: -1px;
}

@media (min-width: 48em) {
    .slideshow-wrapper {
        margin-top: -1em;
    }
}

@media (min-width: 64em) {
    .slideshow-wrapper {
        margin-top: -3em;
    }
}

@media (max-width: 63.95em) {
    .slideshow-wrapper {
        margin-bottom: 0;
    }
}

.slideshow-wrapper > figure {
    -webkit-animation: slideShow 48s linear 1 0s;
    animation: slideShow 48s linear 1 0s;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    will-change: opacity, transform;
}

.slideshow-wrapper > figure > img {
    min-width: 100%;
    height: 100%;
    object-fit: cover;
}

figure:nth-child(1) {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}

figure:nth-child(2) {
    -webkit-animation-delay: 6s;
    animation-delay: 6s;
}

figure:nth-child(3) {
    -webkit-animation-delay: 13s;
    animation-delay: 13s;
}

figure:nth-child(4) {
    -webkit-animation-delay: 20s;
    animation-delay: 20s;
}

figure:nth-child(5) {
    -webkit-animation-delay: 27s;
    animation-delay: 27s;
}

figure:nth-child(6) {
    -webkit-animation-delay: 34s;
    animation-delay: 34s;
}

figure:nth-child(7) {
    -webkit-animation-delay: 41s;
    animation-delay: 41s;
}

figure:nth-child(1) {
    opacity: 1;
}


/* ===== Client-Liste ===== */

@media (min-width: 48em) {
    .client-list {
        -moz-columns: 2;
        columns: 2;
        -moz-column-gap: 3em;
        column-gap: 3em;
    }
}

@media (min-width: 64em) {
    .client-list {
        -moz-columns: 3;
        columns: 3;
        -moz-column-gap: 3em;
        column-gap: 3em;
    }
}

@media (min-width: 80em) {
    .client-list {
        -moz-columns: 4;
        columns: 4;
        -moz-column-gap: 3em;
        column-gap: 3em;
    }
}

.client-list > li {
    padding-left: 0;
    page-break-inside: avoid;
    break-inside: avoid;
}

.client-list > li:before {
    content: none;
}

.client-list > li:first-child h3 {
    margin-top: 0;
}


/* ===== Testimonials-Slider (.sx-scope) ===== */

/* Begin success stories */
.sx-scope *{box-sizing:border-box;}
.sx-scope img{max-width:100%;height:auto;}

.sx-scope.sx-testimonials{
    margin:12px 0 24px;
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    color:#111;
}

/* frame must NOT clip buttons */
.sx-scope .sx-carousel{
    position:relative;
    overflow:visible;
    border-radius:5px;
}
.sx-scope .sx-slides{position:relative;min-height:236px;}

/* slide transitions */
.sx-scope .sx-slide{
    position:absolute; inset:0; opacity:0; pointer-events:none;
    transform:translateX(28px);
    transition:opacity .7s ease, transform .7s ease;
}
.sx-scope .sx-slide.is-active{opacity:1; transform:translateX(0); pointer-events:auto;}
.sx-scope .sx-slide.is-leaving{opacity:0; transform:translateX(-28px);}

/* card */
.sx-scope .sx-quote{
    position:relative;
    background:var(--sx-card-bg,var(--color-white));
    color:var(--sx-fg,#111);
    border:1px solid var(--sx-border,rgba(0,0,0,.05));
    border-radius:5px;
    padding:20px 22px 56px;  /* bottom space for buttons */
    box-shadow:0 0 4px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
    min-height:210px;
}
.sx-scope .sx-quote-mark{
    position:absolute; top:10px; left:18px;
    font-size:34px; font-weight:800; color:var(--color-brand-red);
}

/* typography (match site) */
.sx-scope .sx-testimonials h2{
    all:unset; display:block; margin:0 0 12px;
    color:#334; font-weight:700; font-size:clamp(22px,2.4vw,28px); line-height:1.2;
}
.sx-scope .sx-quote h3{
    all:unset; display:block; margin:0 0 6px 34px;
    color:var(--sx-fg,var(--color-black));
    font-family:var(--sx-body-font,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif);
    font-weight:800; font-size:clamp(18px,2vw,22px); line-height:1.28;
}
.sx-scope .sx-quote p{
    all:unset; display:block; margin:6px 0 14px 34px;
    color:var(--sx-fg,var(--color-black));
    font-family:var(--sx-body-font,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif);
    font-size:clamp(15px,1.6vw,18px); line-height:1.55;
}
.sx-scope .sx-person{display:flex; gap:12px; align-items:center; margin-left:34px;}
.sx-scope .sx-person img{width:48px; height:48px; border-radius:50%; object-fit:cover; border:3px solid #e9e9e9;}
.sx-scope .sx-person strong{
    display:block; color:var(--sx-fg,var(--color-black));
    font-family:var(--sx-headline-font,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif);
    font-weight:800; font-size:1rem;
}
.sx-scope .sx-person span{
    display:block; color:var(--sx-fg,var(--color-black));
    font-family:var(--sx-body-font,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif);
    font-size:14px;
}

.sx-prev::before,
.sx-next::before{
    display:none;
}

/* === BUTTONS anchored to card (half in / half out) === */
.sx-scope .sx-quote .sx-nav{
    position:absolute; z-index:3;
    width:44px; height:44px; border-radius:50%;

    /* Geometric centering that ignores font baselines */
    /* display:grid; */
    place-items:center;

    /* Keep ALL your existing visuals */
    background:#d9d9d9; color:#111;
    font-weight:700; cursor:pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9),
             0 2px 4px rgba(0,0,0,.08),
             0 8px 16px rgba(0,0,0,.06);
    bottom:-22px;        /* cuts through the circle center */
    right:12px;
    transition: transform .12s ease, background .2s ease, box-shadow .2s ease;

    /* Kill baseline/leading so the original button text can't move the glyph */
    font-size:0;       /* hides the literal '‹' / '›' text node without layout shift */
    line-height:0;     /* removes font leading from the container */

    /* Controls for the arrow glyph we draw via ::before */
    --sx-icon-size: 32px;  /* your desired size */
    --sx-icon-scale: 1;    /* optional optical scale (e.g. 1.06) */
    --sx-nudge-y: -0.9px;     /* tiny vertical nudge (e.g. -0.5px) if your font sits low */
}

/* Draw the arrow via pseudo-element so we can center/nudge independently */
.sx-scope .sx-quote .sx-nav::before{
    display:block;
    line-height:1;                 /* neutral leading around the glyph itself */
    font-size:var(--sx-icon-size); /* 32px by default */
    transform: translateY(var(--sx-nudge-y)) scale(var(--sx-icon-scale));
    transform-origin:center;       /* scaling stays pinned to geometric center */
}

/* Provide the arrow characters per button type */
.sx-scope .sx-quote .sx-prev::before{ content:''; }
.sx-scope .sx-quote .sx-next::before{ content:''; }


.sx-scope .sx-quote .sx-prev{ right:60px; }
.sx-scope .sx-quote .sx-nav:hover{
    background:#d2d2d2;
    box-shadow:
               inset 0 1px 0 rgba(255,255,255,.95),
               0 3px 6px rgba(0,0,0,.10),
               0 10px 18px rgba(0,0,0,.08);
}
.sx-scope .sx-quote .sx-nav:active,
.sx-scope .sx-quote .sx-nav.is-pressing{ transform:scale(.985) }
.sx-scope .sx-quote .sx-nav{border: none;}

/* mobile tweaks */
@media (max-width:700px){
    .sx-scope .sx-wrap{max-width:92vw}
    .sx-scope .sx-quote{ padding:16px 16px 50px; }
    .sx-scope .sx-quote-mark{ left:14px }
    .sx-scope .sx-quote h3{ margin-left:30px; font-size:20px }
    .sx-scope .sx-quote p{ margin-left:30px }
    .sx-scope .sx-person{ margin-left:30px }

    .sx-scope .sx-quote .sx-nav{
        width:40px; height:40px; font-size:16px;bottom:-20px;
    }
    .sx-scope .sx-quote .sx-prev{ right:56px; }
}
/* End success stories */


/* ===== Overflow-Galerie ===== */

.overflow-gallery {
    width: auto !important;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    font-size: 0;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    padding: 0.5rem 0 0;
}

.overflow-gallery figure {
    display: inline-block;
}

.overflow-gallery img {
    max-width: none;
}


/* ===== Personen-Übersicht ===== */

.person-overview {
    font-size: 0.8125rem;
    max-width: 100%;
    min-width: 100%;
    clear: left;
}

@media (min-width: 80em) {
    .person-overview {
        font-size: 1rem;
    }
}

.person-overview .person-overview__item {
    background-color: white;
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0.5em 0;
    position: relative;
}

.person-overview .person-overview__item .overflow-gallery {
    display: none;
}

.person-overview .person-overview__item:before {
    display: none;
}

.js .person-overview {
    display: none;
}

.js .person-overview.is-open {
    display: block;
}

.person-list__toggle,
.person-overview__toggle {
    background: none;
    border: none;
    min-width: 32px;
    min-height: 48px;
    padding: 0;
    width: auto;
}

.person-list__toggle svg,
.person-overview__toggle svg {
    transition: transform 200ms ease-out;
    transform-origin: 50%;
}

.person-list__toggle > span,
.person-overview__toggle > span {
    display: flex;
    align-items: center;
    pointer-events: none;
}

.person-list__toggle[aria-pressed="true"] svg,
.person-overview__toggle[aria-pressed="true"] svg {
    transform: rotate(180deg);
}

.person-list__toggle[aria-pressed="true"] ~ .person-overview__toggle--all,
.person-overview__toggle[aria-pressed="true"] ~ .person-overview__toggle--all {
    display: block;
}

.person-list__toggle:focus,
.person-overview__toggle:focus {
    outline: none;
}

.person-overview__toggle--all {
    display: none;
    background-color: white;
    border: none;
    border-top: 1px solid var(--color-border);
    font-size: 0.875rem;
    padding: 0.5em 0;
    text-align: left;
}

.person-overview__toggle--all:focus {
    outline: none;
}

.person-overview__toggle--all[aria-pressed="true"] > svg {
    transform: rotate(180deg);
}

.person-overview__toggle--all > svg {
    box-sizing: content-box;
    padding: 0.25em;
    display: inline-block;
    vertical-align: middle;
    transition: transform 200ms ease-out;
    transform-origin: 50%;
}

.person-fav,
.person-note {
    color: var(--color-text);
    min-width: 38px;
    min-height: 38px;
    padding: 0.5em;
    text-align: right;
    display: inline-block;
    vertical-align: top;
}

.person-fav > svg,
.person-note > svg {
    pointer-events: none;
}

.person-fav.is-faved > svg {
    color: #FFE043;
    fill: #FFE043;
}

.person-note {
    display: none;
    background: none;
    border: none;
    width: auto;
    position: relative;
}

@media (min-width: 37.5em) {
    .person-note {
        display: inline-block;
    }
}

.person-notes {
    display: none;
    min-width: 100%;
    padding-left: 1.5rem;
}

.person-notes button {
    width: auto;
    margin-top: 1em;
}

.person-overview__item.notes-open .person-notes {
    display: block;
}

.person-overview__item.is-open .person-overview__toggle svg {
    transform: rotate(180deg);
    transform-origin: 50%;
}

.person-overview__item.is-open .overflow-gallery {
    display: block;
    min-width: 100%;
}

@media (max-width: 37.4375em) {
    .person-overview .person-overview__item.is-open {
        align-items: flex-start;
    }
    .person-overview__item.is-open .person-note {
        display: inline-block;
    }
}


/* ===== Galerie-Ansicht (.gallery-view) ===== */

.gallery-view__list {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -0.5em;
}

.gallery-view__item {
    flex: 0 0 auto;
    padding: 0.5em;
    min-width: 50%;
}

@media (min-width: 37.5em) {
    .gallery-view__item {
        min-width: 33.3333333333%;
    }
}

@media (min-width: 48em) {
    .gallery-view__item {
        min-width: 25%;
    }
}

.gallery-view__imgwrap {
    display: block;
    height: 0;
    padding-top: 100%;
    overflow: hidden;
    position: relative;
}

.gallery-view__imgwrap > img {
    width: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    will-change: transform;
    transition: transform 300ms ease-in;
}

.gallery-view__link {
    display: block;
}

.gallery-view__link:focus img, .gallery-view__link:hover img {
    transform: scale(1.1);
}

.gallery-view__link:focus .gallery-view__name, .gallery-view__link:hover .gallery-view__name {
    transform: translateY(0);
}

.gallery-view__name {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    font-size: 0.875rem;
    line-height: 1.214285714;
    padding: 0.25em;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    text-align: center;
}

@media (min-width: 80em) {
    .gallery-view__name {
        font-weight: bold;
        font-size: 1.3125rem;
        will-change: transform;
        transition: transform 100ms ease-out;
    }
}

.gallery-view__btn {
    appearance: button;
    background-color: var(--color-bg-light);
    color: var(--color-text);
    display: block;
    max-width: 200px;
    min-width: 200px; /* trying to reajjust the size of the "mehr" button on models page */
    margin: 1em auto;
    border: 1px solid var(--color-border);
    padding: 0.5em 2em 0.5em 2em;
}

.gallery-view__btn:hover {
    background-color: var(--color-border-light); /* Dunklere Hintergrundfarbe beim Hover */
    border: 1px solid var(--color-text); /* Dunklere Umrandung beim Hover */
}

.gallery-view__btn:focus {
    background-color: var(--color-border-light);
    border: 1px solid var(--color-text);
    outline: none;
}


/* ===== PhotoSwipe (.pswp) ===== */

/*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */
/*
	Styles for basic PhotoSwipe functionality (sliding area, open/close transitions)
*/
/* pswp = photoswipe */
.pswp {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    overflow: hidden;
    touch-action: none;
    z-index: 1500;
    -webkit-text-size-adjust: 100%;
    /* create separate layer, to avoid paint on window.onscroll in webkit/blink */
    -webkit-backface-visibility: hidden;
    outline: none;
}

.pswp * {
    box-sizing: border-box;
}

.pswp img {
    max-width: none;
}

/* style is added when JS option showHideOpacity is set to true */
.pswp--animate_opacity {
    /* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */
    opacity: 0.001;
    will-change: opacity;
    /* for open/close transition */
    transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
}

.pswp--open {
    display: block;
}

.pswp--zoom-allowed .pswp__img {
    /* autoprefixer: off */
    cursor: zoom-in;
}

.pswp--zoomed-in .pswp__img {
    /* autoprefixer: off */
    cursor: grab;
}

.pswp--dragging .pswp__img {
    /* autoprefixer: off */
    cursor: grabbing;
}

/*
	Background is added as a separate element.
	As animating opacity is much faster than animating rgba() background-color.
*/
.pswp__bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--color-black);
    opacity: 0;
    -webkit-backface-visibility: hidden;
    will-change: opacity;
}

.pswp__scroll-wrap {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.pswp__container,
.pswp__zoom-wrap {
    touch-action: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

/* Prevent selection and tap highlights */
.pswp__container,
.pswp__img {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

.pswp__zoom-wrap {
    position: absolute;
    width: 100%;
    transform-origin: left top;
    /* for open/close transition */
    transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
}

.pswp__bg {
    will-change: opacity;
    /* for open/close transition */
    transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
}

.pswp--animated-in .pswp__bg,
.pswp--animated-in .pswp__zoom-wrap {
    transition: none;
}

.pswp__container,
.pswp__zoom-wrap {
    -webkit-backface-visibility: hidden;
    will-change: transform;
}

.pswp__item {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
}

.pswp__img {
    position: absolute;
    width: auto;
    height: auto;
    top: 0;
    left: 0;
}

/*
	stretched thumbnail or div placeholder element (see below)
	style is added to avoid flickering in webkit/blink when layers overlap
*/
.pswp__img--placeholder {
    -webkit-backface-visibility: hidden;
}

/*
	div element that matches size of large image
	large image loads on top of it
*/
.pswp__img--placeholder--blank {
    background: #222;
}

.pswp--ie .pswp__img {
    width: 100% !important;
    height: auto !important;
    left: 0;
    top: 0;
}

/*
	Error message appears when image is not loaded
	(JS option errorMsg controls markup)
*/
.pswp__error-msg {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    text-align: center;
    font-size: 14px;
    line-height: 16px;
    margin-top: -8px;
    color: var(--color-border);
}

.pswp__error-msg a {
    color: var(--color-border);
    text-decoration: underline;
}

/*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */
/* <button> css reset */
.pswp__button {
    width: 44px;
    height: 44px;
    position: relative;
    background: none;
    cursor: pointer;
    overflow: visible;
    -webkit-appearance: none;
    display: block;
    border: 0;
    padding: 0;
    margin: 0;
    float: right;
    opacity: 0.75;
    transition: opacity 0.2s;
    box-shadow: none;
}

.pswp__button:focus, .pswp__button:hover {
    opacity: 1;
}

.pswp__button:active {
    outline: none;
    opacity: 0.9;
}

.pswp__button::-moz-focus-inner {
    padding: 0;
    border: 0;
}

/* pswp__ui--over-close class it added when mouse is over element that should close gallery */
.pswp__ui--over-close .pswp__button--close {
    opacity: 1;
}

.pswp__button,
.pswp__button--arrow--left:before,
.pswp__button--arrow--right:before {
    background: url(../img/default-skin.png) 0 0 no-repeat;
    background-size: 264px 88px;
    width: 44px;
    height: 44px;
}

@media (min-resolution: 105dpi), (min-resolution: 1.1dppx) {
    /* Serve SVG sprite if browser supports SVG and resolution is more than 105dpi */
    .pswp--svg .pswp__button,
    .pswp--svg .pswp__button--arrow--left:before,
    .pswp--svg .pswp__button--arrow--right:before {
        background-image: url(../img/default-skin.svg);
    }
    .pswp--svg .pswp__button--arrow--left,
    .pswp--svg .pswp__button--arrow--right {
        background: none;
    }
}

.pswp__button--close {
    background-position: 0 -44px;
}

.pswp__button--share {
    background-position: -44px -44px;
}

.pswp__button--fs {
    display: none;
}

.pswp--supports-fs .pswp__button--fs {
    display: block;
}

.pswp--fs .pswp__button--fs {
    background-position: -44px 0;
}

.pswp__button--zoom {
    display: none;
    background-position: -88px 0;
}

.pswp--zoom-allowed .pswp__button--zoom {
    display: block;
}

.pswp--zoomed-in .pswp__button--zoom {
    background-position: -132px 0;
}

/* no arrows on touch screens */
.pswp--touch .pswp__button--arrow--left,
.pswp--touch .pswp__button--arrow--right {
    visibility: hidden;
}

/*
	Arrow buttons hit area
	(icon is added to :before pseudo-element)
*/
.pswp__button--arrow--left,
.pswp__button--arrow--right {
    background: none;
    top: 50%;
    margin-top: -50px;
    width: 70px;
    height: 100px;
    position: absolute;
}

.pswp__button--arrow--left {
    left: 0;
}

.pswp__button--arrow--right {
    right: 0;
}

.pswp__button--arrow--left:before,
.pswp__button--arrow--right:before {
    content: '';
    top: 35px;
    background-color: rgba(0, 0, 0, 0.3);
    height: 30px;
    width: 32px;
    position: absolute;
}

.pswp__button--arrow--left:before {
    left: 6px;
    background-position: -138px -44px;
}

.pswp__button--arrow--right:before {
    right: 6px;
    background-position: -94px -44px;
}

/*

	2. Share modal/popup and links

 */
.pswp__counter,
.pswp__share-modal {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.pswp__share-modal {
    display: block;
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    padding: 10px;
    position: absolute;
    z-index: 1600;
    opacity: 0;
    transition: opacity 0.25s ease-out;
    -webkit-backface-visibility: hidden;
    will-change: opacity;
}

.pswp__share-modal--hidden {
    display: none;
}

.pswp__share-tooltip {
    z-index: 1620;
    position: absolute;
    background: var(--color-white);
    top: 56px;
    border-radius: 2px;
    display: block;
    width: auto;
    right: 44px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
    transform: translateY(6px);
    transition: transform 0.25s;
    -webkit-backface-visibility: hidden;
    will-change: transform;
}

.pswp__share-tooltip a {
    display: block;
    padding: 8px 12px;
    color: var(--color-black);
    text-decoration: none;
    font-size: 14px;
    line-height: 18px;
}

.pswp__share-tooltip a:hover {
    text-decoration: none;
    color: var(--color-black);
}

.pswp__share-tooltip a:first-child {
    /* round corners on the first/last list item */
    border-radius: 2px 2px 0 0;
}

.pswp__share-tooltip a:last-child {
    border-radius: 0 0 2px 2px;
}

.pswp__share-modal--fade-in {
    opacity: 1;
}

.pswp__share-modal--fade-in .pswp__share-tooltip {
    transform: translateY(0);
}

/* increase size of share links on touch devices */
.pswp--touch .pswp__share-tooltip a {
    padding: 16px 12px;
}

/*

	3. Index indicator ("1 of X" counter)

 */
.pswp__counter {
    position: absolute;
    left: 0;
    top: 0;
    height: 44px;
    font-size: 13px;
    line-height: 44px;
    color: var(--color-white);
    opacity: 0.75;
    padding: 0 10px;
}

/*

	4. Caption

 */
.pswp__caption {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    min-height: 44px;
}

.pswp__caption small {
    font-size: 11px;
    color: #BBB;
}

.pswp__caption__center {
    text-align: left;
    max-width: 420px;
    margin: 0 auto;
    font-size: 13px;
    padding: 10px;
    line-height: 20px;
    color: var(--color-border);
}

.pswp__caption--empty {
    display: none;
}

/* Fake caption element, used to calculate height of next/prev image */
.pswp__caption--fake {
    visibility: hidden;
}

/*

	5. Loading indicator (preloader)

	You can play with it here - http://codepen.io/dimsemenov/pen/yyBWoR

 */
.pswp__preloader {
    width: 44px;
    height: 44px;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -22px;
    opacity: 0;
    transition: opacity 0.25s ease-out;
    will-change: opacity;
    direction: ltr;
}

.pswp__preloader__icn {
    width: 20px;
    height: 20px;
    margin: 12px;
}

.pswp__preloader--active {
    opacity: 1;
}

.pswp__preloader--active .pswp__preloader__icn {
    /* We use .gif in browsers that don't support CSS animation */
    background: url(../img/preloader.gif) 0 0 no-repeat;
}

.pswp--css_animation .pswp__preloader--active {
    opacity: 1;
}

.pswp--css_animation .pswp__preloader--active .pswp__preloader__icn {
    animation: clockwise 500ms linear infinite;
}

.pswp--css_animation .pswp__preloader--active .pswp__preloader__donut {
    animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite;
}

.pswp--css_animation .pswp__preloader__icn {
    background: none;
    opacity: 0.75;
    width: 14px;
    height: 14px;
    position: absolute;
    left: 15px;
    top: 15px;
    margin: 0;
}

.pswp--css_animation .pswp__preloader__cut {
    /*
              The idea of animating inner circle is based on Polymer ("material") loading indicator
               by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html
          */
    position: relative;
    width: 7px;
    height: 14px;
    overflow: hidden;
}

.pswp--css_animation .pswp__preloader__donut {
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    border: 2px solid var(--color-white);
    border-radius: 50%;
    border-left-color: transparent;
    border-bottom-color: transparent;
    position: absolute;
    top: 0;
    left: 0;
    background: none;
    margin: 0;
}

@media screen and (max-width: 1024px) {
    .pswp__preloader {
        position: relative;
        left: auto;
        top: auto;
        margin: 0;
        float: right;
    }
}

@keyframes clockwise {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes donut-rotate {
    0% {
        transform: rotate(0);
    }
    50% {
        transform: rotate(-140deg);
    }
    100% {
        transform: rotate(0);
    }
}

/*

	6. Additional styles

 */
/* root element of UI */
.pswp__ui {
    -webkit-font-smoothing: auto;
    visibility: visible;
    opacity: 1;
    z-index: 1550;
}

/* top black bar with buttons and "1 of X" indicator */
.pswp__top-bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 44px;
    width: 100%;
}

.pswp__caption,
.pswp__top-bar,
.pswp--has_mouse .pswp__button--arrow--left,
.pswp--has_mouse .pswp__button--arrow--right {
    -webkit-backface-visibility: hidden;
    will-change: opacity;
    transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
}

/* pswp--has_mouse class is added only when two subsequent mousemove events occur */
.pswp--has_mouse .pswp__button--arrow--left,
.pswp--has_mouse .pswp__button--arrow--right {
    visibility: visible;
}

.pswp__top-bar,
.pswp__caption {
    background-color: rgba(0, 0, 0, 0.5);
}

/* pswp__ui--fit class is added when main image "fits" between top bar and bottom bar (caption) */
.pswp__ui--fit .pswp__top-bar,
.pswp__ui--fit .pswp__caption {
    background-color: rgba(0, 0, 0, 0.3);
}

/* pswp__ui--hidden class is added when controls are hidden
   e.g. when user taps to toggle visibility of controls */
.pswp__ui--hidden .pswp__top-bar,
.pswp__ui--hidden .pswp__caption,
.pswp__ui--hidden .pswp__button--arrow--left,
.pswp__ui--hidden .pswp__button--arrow--right {
    /* Force paint & create composition layer for controls. */
    opacity: 0.001;
}

/* pswp__ui--one-slide class is added when there is just one item in gallery */

.pswp__element--disabled {
    display: none !important;
}


/* ===== Swiper.js ===== */

/**
 * Swiper 3.2.0
 */
.swiper-container {
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    /* Fix of Webkit flickering */
    z-index: 1;
}

.swiper-container-no-flexbox .swiper-slide {
    float: left;
}

.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    box-sizing: content-box;
}

.swiper-container-android .swiper-slide,
.swiper-wrapper {
    transform: translate3d(0px, 0, 0);
}

.swiper-container-multirow > .swiper-wrapper {
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    flex-wrap: wrap;
}

.swiper-container-free-mode > .swiper-wrapper {
    transition-timing-function: ease-out;
    margin: 0 auto;
}

.swiper-slide {
    -webkit-flex-shrink: 0;
    -ms-flex: 0 0 auto;
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
}

/* a11y */
.swiper-container .swiper-notification {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    opacity: 0;
    z-index: -1000;
}


.swiper-container {
    overflow: visible;
}

.swiper-wrapper {
    box-sizing: border-box;
}

.swiper-slide {
    background-color: white;
}


/* ===== Sedcard ===== */

.sedcard .person-fav {
    padding: 0;
    min-width: 0;
}

.sedcard .person-fav:focus > svg, .sedcard .person-fav:hover > svg, .sedcard .person-fav:active > svg {
    color: #FFE043;
    fill: #FFE043;
}

.sedcard__shortinfo > dt,
.sedcard__shortinfo > dd {
    margin: 0;
    padding: 0;
    display: inline-block;
    width: 48%;
}

@media (min-width: 64em) {
    .sedcard__shortinfo > dt,
    .sedcard__shortinfo > dd {
        display: inline-block;
        width: auto;
    }
}

@media (min-width: 64em) {
    .sedcard__shortinfo > dt {
        color: var(--color-text-muted);
        margin-left: 1em;
    }
}

.sedcard__shortinfo > dd {
    padding-left: 1em;
}

@media (min-width: 64em) {
    .sedcard__shortinfo > dd {
        padding-left: 0;
    }
}

.sedcard__shortinfo > dd:first-of-type {
    width: 100%;
    padding-left: 0;
}

@media (min-width: 64em) {
    .sedcard__shortinfo > dd:first-of-type {
        width: auto;
    }
}

.sedcard__imglist {
    -moz-columns: 3 120px;
    columns: 3 120px;
    -moz-column-gap: 1em;
    column-gap: 1em;
    white-space: normal;
    font-size: 16px;
}

.sedcard__imgwrap {
    display: block !important;
    margin-bottom: 1em;
}

.sedcard__imgwrap > a {
    display: block;
}

.sedcard__imgwrap > a > img {
    width: 100%;
}


/* ===== FAQ-Akkordeon ===== */

.faq__item {
    background-color: var(--color-bg-light);
    border-top: 1px solid var(--color-border);
    margin-bottom: 1em;
    padding: 1em;
}

.faq__title {
    font-size: 1.125rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    list-style-type: none;
    color: var(--color-text) !important;

}


.faq__title:focus {
    outline: none;
}

/* ensure any old image is disabled */
.faq__title:before {
    background-image: none !important;
}

/* chevron that inherits text color */
.faq__title:before{
    content:"";
    display:inline-block;
    width:1.2em; height:1.2em;
    margin-top: .2em;
    margin-right:.5em;
    background-color: currentColor; /* tints icon */

    /* inline SVG as mask – no backslashes/newlines */
    -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 9l6 6 6-6' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
    mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 9l6 6 6-6' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
    -webkit-mask-repeat: no-repeat;    mask-repeat: no-repeat;
    -webkit-mask-position: center;     mask-position: center;
    -webkit-mask-size: 100% 100%;      mask-size: 100% 100%;
    transition: transform .25s ease;
}

/* rotate when open */
details[open] > .faq__title:before,
.faq__title[aria-pressed="true"]:before{
    transform: rotate(180deg);
}

.faq__title[aria-pressed="true"]:before,
[open] .faq__title:before {
    content: '\25BC';
    transform: rotate(180deg);
}

.faq__title::-webkit-details-marker {
    display: none;
}

.faq__content {
    margin-left: 2.1875rem;
}

.faq__content p {
    margin-top: 1em;
    margin-bottom: 1em;
}


/* ===== Layer / Overlay ===== */

.layer-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 110;
    background-color: rgba(255, 255, 255, 0.9);
}

.layer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 111;
}

.layer[aria-hidden="true"] {
    display: none;
}

.layer[aria-hidden="true"] + .layer-overlay {
    display: none;
}

.layer .slider-btn-prev,
.layer .slider-btn-next,
.layer .layer-close {
    line-height: 1;
    color: var(--color-brand-red);
    position: absolute;
    z-index: 11;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    background: none;
    text-align: left;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: 50%;
    border-radius: 50%;
    transition: background-color 150ms ease-out;
}

.layer .slider-btn-prev:focus, .layer .slider-btn-prev:hover,
.layer .slider-btn-next:focus,
.layer .slider-btn-next:hover,
.layer .layer-close:focus,
.layer .layer-close:hover {
    background-color: rgba(0, 0, 0, 0.2);
}

.layer .layer-close {
    background-image: url("../img/icons/close.svg");
    top: -48px;
    right: 0.5%;
}

.layer .is-disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.layer .is-disabled:focus, .layer .is-disabled:hover {
    background-color: transparent;
}

.layer-content {
    min-height: 50vh;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0;
    position: relative;
    top: 5em;
    z-index: 112;
}

@media (min-width: 80em) {
    .layer-content {
        top: 6em;
    }
}

.layer-content .slider-btn-prev {
    top: -48px;
    left: 25%;
    background-image: url("../img/icons/chevron_right.svg");
    transform: scaleX(-1);
}

@media (min-width: 48em) {
    .layer-content .slider-btn-prev {
        left: 40%;
    }
}

@media (min-width: 64em) {
    .layer-content .slider-btn-prev {
        top: 0;
        left: 0.5%;
    }
}

.layer-content .slider-btn-next {
    top: -48px;
    right: 25%;
    background-image: url("../img/icons/chevron_right.svg");
}

@media (min-width: 48em) {
    .layer-content .slider-btn-next {
        right: 40%;
    }
}

@media (min-width: 64em) {
    .layer-content .slider-btn-next {
        top: 0;
        right: 0.5%;
    }
}

.layer-content .swiper-slide {
    padding: 0 4.1666666667%;
}

@media (min-width: 48em) {
    .layer-content .swiper-slide {
        padding: 0 2.7777777778%;
    }
}

.layer-content .swiper-slide .sedcard {
    opacity: 0.4;
    padding: 0 4.1666666667%;
}

@media (min-width: 48em) {
    .layer-content .swiper-slide .sedcard {
        padding: 0 2.7777777778%;
    }
}

.layer-content .swiper-slide-active .sedcard {
    opacity: 1;
}


/* ===== Responsive-Breakpoint-Debug (head font-family) ===== */

@media (min-width: 20em) {
    head {
        font-family: tiny-1;
    }
}

@media (min-width: 30em) {
    head {
        font-family: small-2;
    }
}

@media (min-width: 37.5em) {
    head {
        font-family: medium-3;
    }
}

@media (min-width: 48em) {
    head {
        font-family: large-4;
    }
}

@media (min-width: 64em) {
    head {
        font-family: xlarge-5;
    }
}

@media (min-width: 80em) {
    head {
        font-family: xxlarge-6;
    }
}

@media (min-width: 100em) {
    head {
        font-family: huge-7;
    }
}


/* ===== Footer-Komponenten ===== */

footer > hr{
    width: 200%;
    transform: translateX(-25%);
    margin: 0;
    border-bottom: 1px solid #272729;
}

@media (min-width: 64em) {
    footer > hr{
        display: none;
    }
}

.footer-logo{
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 0!important;
}

.footer-logo a{
    margin-top: 25px;
}

.footer-logo img{
    filter: brightness(0) invert(1);
}

@media (min-width: 48em) {
    .footer-logo .logo{
        display: flex;
    }
}

.toggle-container{
    display: flex;
    justify-content: space-between;
}

@media (min-width: 64em) {
    .toggle-container{
        display: none;
    }
}

.toggle-container img{
    width: 15px;
    margin-right: 0.75em;
    margin-bottom: 10px;
    cursor: pointer;
}

.sub-heading{
    color: var(--color-black);
    font-size: 1em;
    font-weight: bold;
    margin-bottom: 10px;
    margin-top: 0;
    cursor: pointer;
}

.show-submenu{
    transform: rotate(180Deg);
}

.logo-desktop{
    display: none;
}

@media (min-width: 64em) {
    .logo-desktop{
        width: 20%;
        display: flex;
        justify-content: flex-start;
        flex: 0 0 auto;
    }
}

.logo-desktop img{
    width: 270px;
    margin-bottom: 10px;
}


/* ===== Bild-Wrapper & Diverses ===== */

.image-wrap-container{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 48em) {
    .image-wrap-container{
        max-width: 100%;
        flex-wrap: nowrap;
    }
    .image-wrap-container .last-image{
        display: none;
    }
}

img.erfahrungBild {
    max-width: 120px;
    float: left;
    margin: 0.3em 0.5em 0.5em 0;
}

@media (min-width: 37.5em) {
    img.erfahrungBild {
        max-width: 240px;
    }
}


/* ===== Autocomplete (.ownAutocomplete) ===== */

div.ownAutocomplete {
    clear: both;
    transition: all 300ms ease-out;
    position: relative;
    margin: 0;
    z-index: 100;
}

@media (min-width: 20em) {
    div.ownAutocomplete {
        width: 100%;
        margin-left: 0;
        margin-top: 0.3em;
    }
}

@media (min-width: 30em) {
    div.ownAutocomplete {
        width: 100%;
        margin-left: 0;
        margin-top: 0.3em;
    }
}

@media (min-width: 37.5em) {
    div.ownAutocomplete {
        width: 100%;
        margin-left: 0;
        margin-top: 0.3em;
    }
}

@media (min-width: 48em) {
    div.ownAutocomplete {
        width: 70%;
        margin-left: 30%;
    }
}

@media (min-width: 64em) {
    div.ownAutocomplete {
        position: absolute;
        top: 0;
        left: 0;
        width: 70%;
        margin-left: 30%;
        margin-top: 2.4em;
    }
}

div.ownAutocomplete ul {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border: 1px solid var(--color-border);
    background-color: var(--color-white);
    max-height: 99em;
    overflow:auto;
}

div.ownAutocomplete li {
    padding: 0.4em;
    cursor: pointer;
}

div.ownAutocomplete li:hover {
    background-color: var(--color-bg-light);
}


/* ============================================================
   Hinweis: body.darkmode-Overrides für Komponenten (Testimonials,
   Toggle-Submenu, Slider, Swiper.js) wurden in Aufgabe 3.10 (Build)
   nach modules/darkmode.css (Modul 8, Abschnitt 5 -
   Komponenten-Overrides) konsolidiert und hier entfernt, um
   modulübergreifende Duplikate zu vermeiden.
   ============================================================ */


/* ============================================================
   Quelle: modules/utilities.css
   ============================================================ */

/* ============================================================
   utilities.css – Modul 7: Hilfsklassen & Utilities
   Projekt  : Starboxx (starboxx.ch)
   Autor    : Vitali Smancer – IT-Intern
   Erstellt : Juni 2026
   Phase    : 3 · Aufgabe 3.8
   Beschreibung:
     Enthält alle projektweiten Hilfsklassen: Display-Utilities,
     Spacing-Helpers, responsive Schriftgrößen-Skala sowie
     Print-Utilities.

     HINWEIS – Bereits in reset.css (Modul 1) enthaltene Utilities:
     .hidden / .is-hidden, .vh, .ir, .invisible, .highlight,
     .browsehappy sind in reset.css definiert und werden hier
     NICHT doppelt definiert.
   ============================================================ */


/* === Display-Utilities === */

.d-none     { display: none !important; }
.d-block    { display: block !important; }
.d-inline   { display: inline !important; }
.d-flex     { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }

/* Responsive Display-Utilities */
@media (min-width: 37.5em) {
    .d-none-mobile  { display: none !important; }
    .d-block-mobile { display: block !important; }
}

@media (min-width: 48em) {
    .d-none-tablet  { display: none !important; }
    .d-block-tablet { display: block !important; }
}

@media (min-width: 64em) {
    .d-none-desktop  { display: none !important; }
    .d-block-desktop { display: block !important; }
}


/* === Text-Utilities === */

.text-left    { text-align: left !important; }
.text-center  { text-align: center !important; }
.text-right   { text-align: right !important; }

.text-uppercase { text-transform: uppercase !important; }
.text-lowercase { text-transform: lowercase !important; }

.text-bold    { font-weight: bold !important; }
.text-normal  { font-weight: normal !important; }

.text-muted   { color: var(--color-text-muted) !important; }
.text-red     { color: var(--color-brand-red) !important; }
.text-white   { color: var(--color-white) !important; }


/* === Responsive Schriftgrößen-Skala === */

/*
   Basis-Schriftgröße (definiert in reset.css / html-Regel):
   Mobil  : 17px
   Tablet : 17.5px  @media (min-width: 48em)
   Desktop: 18px    @media (min-width: 80em)

   Alle rem-Werte beziehen sich auf diese Basiswerte.
*/

.text-sm   { font-size: 0.875rem; }   /* ~15px / ~15.75px / ~15.75px */
.text-base { font-size: 1rem; }       /* ~17px  / ~17.5px / ~18px    */
.text-lg   { font-size: 1.125rem; }   /* ~19px  / ~19.7px / ~20.25px */
.text-xl   { font-size: 1.25rem; }    /* ~21px  / ~21.9px / ~22.5px  */
.text-2xl  { font-size: 1.5rem; }     /* ~25px  / ~26.3px / ~27px    */


/* === Spacing-Utilities === */

/* Margin */
.m-0  { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-1 { margin-top: 0.5rem !important; }
.mt-2 { margin-top: 1rem !important; }
.mt-3 { margin-top: 1.5rem !important; }
.mb-1 { margin-bottom: 0.5rem !important; }
.mb-2 { margin-bottom: 1rem !important; }
.mb-3 { margin-bottom: 1.5rem !important; }

/* Padding */
.p-0  { padding: 0 !important; }
.pt-0 { padding-top: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.pt-1 { padding-top: 0.5rem !important; }
.pt-2 { padding-top: 1rem !important; }
.pb-1 { padding-bottom: 0.5rem !important; }
.pb-2 { padding-bottom: 1rem !important; }


/* === Float & Clearfix-Utilities === */

.float-left  { float: left !important; }
.float-right { float: right !important; }
.float-none  { float: none !important; }

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

.clear-both { clear: both !important; }


/* === Width-Utilities === */

.w-100 { width: 100% !important; }
.w-auto { width: auto !important; }
.mw-100 { max-width: 100% !important; }


/* === Bereits in reset.css (Modul 1) enthaltene Hilfsklassen === */

/*
   Die folgenden Klassen sind in modules/reset.css definiert
   und werden hier NICHT doppelt definiert:

   .hidden / .is-hidden  → display: none !important
   .vh                   → Visually hidden (Accessibility)
   .vh.focusable         → Fokussierbare versteckte Elemente
   .ir                   → Image replacement (Text-Indent)
   .invisible            → visibility: hidden
   .highlight            → color: var(--color-brand-red)
   .browsehappy          → Browser-Upgrade-Hinweis
*/


/* === Print-Utilities === */

@media print {
    .no-print   { display: none !important; }
    .print-only { display: block !important; }

    body {
        font-size: 12pt;
        color: #000;        /* Druckfarbe: absichtlich kein Theme-Token – Schwarz für maximalen Kontrast auf Papier */
        background: #fff;   /* Druckfarbe: absichtlich kein Theme-Token – weißer Hintergrund für alle Drucker */
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #555;        /* Druckfarbe: absichtlich kein Theme-Token – gedämpftes Grau für URL-Anhänge im Druck */
    }

    [role="banner"],
    [role="navigation"],
    [role="contentinfo"] {
        display: none !important;
    }
}


/* ============================================================
   Quelle: modules/darkmode.css
   ============================================================ */

/* ============================================================
   darkmode.css – Modul 8: Dark-Mode-Overrides
   Projekt  : Starboxx (starboxx.ch)
   Autor    : Vitali Smancer – IT-Intern
   Erstellt : Juni 2026
   Phase    : 3 · Aufgabe 3.9
   Beschreibung:
     Enthält alle body.darkmode- und .darkmode-Regeln des Projekts.
     Konsolidiert aus: navigation.css, layout.css,
     forms.css und components.css.
     Wird als letztes Modul importiert – überschreibt alle
     vorherigen Theme-Regeln (höchste Spezifität).

     Ladereihenfolge in main.css:
     @import 'modules/darkmode.css';  (8 - Dark Mode)
   ============================================================ */


/* ============================================================
   === 1 · Globale Dark-Mode-Basis ===
   Quelle: navigation.css
   ============================================================ */

body.darkmode {
    background-color: var(--color-black);
    color: white;
}

/* Fix 3 (Vitali, 26.08.2026): Standard-Links (a { color: var(--color-black) })
   hatten nie eine Darkmode-Farbe – reguläre Textlinks (z. B. „Datenschutz“,
   „Impressum“ im Footer, Links in Fließtext) waren dadurch im Darkmode
   unsichtbar. Vermutlich der eigentliche Auslöser des ursprünglich gemeldeten
   Bugs auf der Impressum-Seite. Jeder Link-Zustand wird hier explizit erneut
   gesetzt, damit :visited/:hover/:focus/:active weiterhin korrekt funktionieren
   (sonst würde eine einzelne "body.darkmode a"-Regel diese wegen höherer
   Spezifität überschreiben). */
body.darkmode a {
    color: #ffffff;
}
body.darkmode a:visited {
    color: var(--color-brand-red);
}
body.darkmode a:hover,
body.darkmode a:focus {
    color: #FF4817;
}
body.darkmode a:active {
    color: var(--color-text);
}

/* Fix 4 (Vitali, 26.08.2026) ZURÜCKGENOMMEN am 27.08.2026: Nach Vergleich mit der
   Referenzseite www.starboxx.de zeigt sich, dass dort im Darkmode ebenfalls das
   native :visited-Verhalten des Browsers durchschlägt (Datenschutz erscheint rot,
   sobald besucht, die anderen drei bleiben weiß) – es gibt dort keine erzwungene
   Einheitsfarbe. Fix 1–3 (Nav-Menü, Sub-Heading, globale Link-Farbe) entsprechen
   damit bereits exakt dem Referenzverhalten; eine zusätzliche Vereinheitlichung
   der Footer-Links wäre eine Abweichung vom Original gewesen. */

.darkmode body,
.darkmode html {
    background-color: var(--color-black);
}

.darkmode .layout-default {
    background-color: var(--color-black);
}

.darkmode .container {
    background-color: var(--color-black);
}

.darkmode .content {
    background-color: var(--color-black);
}

.darkmode .sub-heading {
    background-color: var(--color-black);
}

/* Fix 2 (Vitali, 26.08.2026): Gleicher Bug wie bei .nav-main__item, aber für den
   separaten mobilen Untermenü-Toggle (<h3 class="dropdown-toggle sub-heading">
   innerhalb von .toggle-container, z. B. "Projekte"). Wird von .nav-main__item > h3
   NICHT erfasst, da hier ein anderer, tiefer verschachtelter h3 verwendet wird.
   Basisregel .sub-heading setzt color: var(--color-black) fest; im Darkmode wurde
   bisher nur der Hintergrund verdunkelt, nie die Textfarbe. */
.darkmode .sub-heading {
    color: var(--color-white) !important;
}


/* ============================================================
   === 2 · Layout-Overrides ===
   Quelle: layout.css
   ============================================================ */

body.darkmode h1 {
    color: var(--color-white);
}

body.darkmode [role="banner"] {
    background-image: -webkit-linear-gradient(top, var(--color-black) 85%, var(--color-text) 100%);
}

/* Layer-Overlay (Hintergrund) Transparenz */
body.darkmode .layer-overlay {
    background-color: rgba(0, 0, 0, 0.85);
}


/* ============================================================
   === 3 · Navigation-Overrides ===
   Quelle: navigation.css
   ============================================================ */

.darkmode .nav-main {
    background-color: var(--color-black);
}

.darkmode .dropdown-toggle {
    background-color: var(--color-black);
}

.darkmode .nav-collapse:before {
    background-color: var(--color-black);
}

.darkmode .navSubProjekte {
    background-color: var(--color-black);
}

.darkmode .nav-main__item.has-dropdown {
    background-color: var(--color-black);
}

.darkmode .li {
    background-color: var(--color-black);
}

.darkmode .nav-sub__item {
    background-color: var(--color-black);
}

.darkmode .nav-sub.dropdown {
    background-color: var(--color-black);
    border-radius: 0 0 3px 3px;
    border: 1px solid var(--color-white);
    padding: 0.1rem 0;
}

body.darkmode .nav-sub.dropdown li a {
    background-color: var(--color-black) !important;
    color: var(--color-white) !important;
}

body.darkmode .nav-sub.dropdown li a:hover {
    background-color: var(--color-black);
    color: var(--color-brand-red) !important;
}

.darkmode #navSubProjekte {
    background-color: var(--color-black);
}

/* Navigations-Links & Unterstrich-Indikator */
.darkmode .nav-main__item > a::after {
    background: white;
}

.darkmode .nav-main__item.is-active > a::after {
    background: var(--color-brand-red-dark);
}

/* Fix (Vitali, 26.08.2026): Nav-Menü-Text (AGENTUR, MODELS, TALENTE, PROJEKTE,
   PROFIL, KONTAKT) war im Darkmode unsichtbar – schwarzer Text auf schwarzem
   Hintergrund. Ursache: .nav-main__item > a/h3 ist fest auf var(--color-black)
   gesetzt, aber es gab nie eine Darkmode-Textfarbe-Überschreibung dafür – nur
   der Hintergrund wird per .darkmode .nav-main {background-color} verdunkelt.
   Betrifft Desktop und Mobile gleichermaßen, da dieselbe Regel für beide gilt. */
.darkmode .nav-main__item > a,
.darkmode .nav-main__item > h3 {
    color: var(--color-white) !important;
}

/* Sprach-Umschalter */
.darkmode .nav-language > span,
.darkmode .nav-language > a {
    color: var(--color-bg-input);
}

.darkmode .nav-language > a {
    border-left-color: #6b7280;
}

.darkmode .nav-language > a:hover abbr,
.darkmode .nav-language > a:focus abbr {
    color: var(--color-brand-red);
    outline: none;
}

/* Hamburger-Icon */
.darkmode .tcon-menu__lines,
.darkmode .tcon-menu__lines::before,
.darkmode .tcon-menu__lines::after {
    background: #e5e7eb;
}

.darkmode .tcon-menu--xbutterfly.active .tcon-menu__lines {
    background: transparent;
}

.darkmode .tcon-menu--xbutterfly.active .tcon-menu__lines::before,
.darkmode .tcon-menu--xbutterfly.active .tcon-menu__lines::after {
    background: #e5e7eb;
}


/* ============================================================
   === 4 · Formular-Overrides ===
   Quelle: forms.css
   ============================================================ */

/* sbx-Widget Dark-Theme-Tokens */
.darkmode .sbx {
    --surface-1:  var(--color-black);
    --surface-2:  #1a1a1a;
    --border:     #374151;
    --focus:      var(--color-brand-red);
    --input-text: var(--color-white);
    --muted:      #6b7280;
    --title:      var(--color-white);
}

/* sbx Dark Mode input placeholder */
.darkmode #sbx-social-profiles #social-form .field input[data-url]::placeholder {
    color: var(--color-bg-input);
}

/* PLZ-Dropdown */
.darkmode .ownAutocomplete {
    color: black;
}

/* Checkbox Multi */
body.darkmode .formFieldCheckboxMulti {
    background-color: var(--color-black);
    border: 1px solid var(--color-black);
}

/* Hilfetext */
body.darkmode .formfields .helpText {
    background-color: var(--color-white);
    color: var(--color-black);
    border: 1px solid #444;
    border-radius: 4px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

/* Buttons */
body.darkmode .formButton:hover {
    border: 1px solid var(--color-brand-red);
    outline: none;
}

body.darkmode #buttonMore:hover {
    border: 1px solid var(--color-brand-red);
    outline: none;
}

/* Kreise und Viereck-Rahmen bei Anmeldung */
body.darkmode input[type="radio"] {
    accent-color: var(--color-white);
}

/* Checkbox – Häkchen-Farbe */
body.darkmode input[type="checkbox"]:checked + label:after,
body.darkmode label input[type="checkbox"]:checked + .label:after {
    border-bottom-color: white;
    border-left-color: white;
}

body.darkmode input[type="checkbox"]:hover + label:before,
body.darkmode input[type="checkbox"]:focus + label:before,
body.darkmode input[type="radio"]:hover + label:before,
body.darkmode input[type="radio"]:focus + label:before {
    border-color: white;
}


/* ============================================================
   === 5 · Komponenten-Overrides ===
   Quelle: components.css
   ============================================================ */

/* Testimonials-Slider */
body.darkmode #sx-testimonials {
    --sx-card-bg: var(--starboxx-bg, #121212);
    --sx-fg: #e9e9e9;
    --sx-border: rgba(255,255,255,.08);
}

body.darkmode #sx-testimonials .sx-quote .sx-nav {
    background: #3a3a3a;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08),
                0 2px 4px rgba(0,0,0,.6),
                0 8px 16px rgba(0,0,0,.5);
}

body.darkmode .sx-nav svg path {
    fill: #eaeaea;
}

/* Icon-Menü Mobile invertieren */
body.darkmode .toggle-submenu {
    filter: invert(1);
}

/* Slider-Steuerung invertieren (weiß auf schwarz) */
body.darkmode .layer .layer-close,
body.darkmode .layer .slider-btn-prev,
body.darkmode .layer .slider-btn-next {
    filter: invert(1);
}

/* Swiper.js im Dark Mode */
body.darkmode .swiper-slide {
    background-color: var(--color-black) !important;
    color: var(--color-white);
}

body.darkmode .swiper-pagination-bullet {
    background: var(--color-white);
}

/* FAQ im Dark Mode */
body.darkmode details.faq_item,
body.darkmode details.faq__item {
    background: #121212 !important;
    border-top: 1px solid #2a2a2d;
    color: #f2f2f2;
}

body.darkmode .faq__title  { color: #f2f2f2 !important; }
body.darkmode .faq__content { color: #e0e0e0 !important; }
body.darkmode .faq__content { background: transparent; }