/* ==========================================================================
   Für ALLE Seiten (wird auf jeder Seite zuerst geladen, siehe MasterPage.master)
   Inhalt: Farben (hell/dunkel), Grundlayout, Karten, Kopfzeile mit Menü und
   Logo, Hell/Dunkel-Schalter, Footer, Buttons und Formularfelder,
   Remote-Support-Knopf am rechten Rand, Icons, Einblenden beim Scrollen,
   Band «Kostenloses Erstgespräch» (Startseite und Mechanik 3000)
   Seiteneigenes CSS: Dateien/CSS/<Seitenname>.css, gemeinsame Bausteine der
   Unterseiten: Infoseite.css
   ========================================================================== */

/* ==========================================================================
   Farben
   1) Theme-Farben: je ein Wert für hell (:root) und dunkel ([data-theme="dark"]).
   2) Dark-Mode-Werte (--dark-…): existieren NUR im Dark Mode. Seiten nutzen sie als
      var(--dark-heading, #0f3258) = "im Dark Mode --dark-heading, sonst #0f3258".
   ========================================================================== */
@Import "Colors.css";

:root {
    --color-bg: var(--color-light-white);
    --color-surface: var(--color-white);
    --color-text: var(--color-dark-gray);
    --color-muted: var(--color-middle-gray);
    --color-primary: var(--color-blue);
    --color-primary-strong: var(--color-dark-blue);
    --color-border: var(--color-light-blue);
    --shadow-soft: 0 10px 30px var(--color-soft-transparent);
    --header-bg: var(--color-surface);
    --header-border: var(--color-border);
    --nav-link: var(--color-primary);
    --nav-hover: var(--color-light-blue);
    --nav-active: var(--color-middle-blue);
    --dropdown-item: var(--color-primary-strong);
    --dropdown-bg: var(--color-surface);
    --dropdown-border: var(--color-border);
    --dropdown-shadow: var(--shadow-soft);
    --dropdown-shadow-mega: 0 18px 40px rgba(15, 35, 60, 0.14);
    --dropdown-muted: #5b7088;
    --dropdown-icon-bg: var(--color-light-blue);
    --card-bg: var(--color-surface);
    --card-border: var(--color-border);
    --card-shadow: var(--shadow-soft);
    --section-bg: linear-gradient(180deg, var(--color-black) 0%, var(--color-light-white) 100%);
    --section-border: var(--color-light-blue);
    --section-shadow: 0 12px 30px rgba(18, 52, 90, 0.06);
    --footer-bg: linear-gradient(180deg, var(--color-white), var(--color-light-white));
    --footer-border: var(--color-border);
    --footer-text: var(--color-muted);
    --footer-title: var(--color-dark-gray);
    --footer-link: var(--color-blue);
    --footer-bottom-text: var(--color-middle-gray);
    --footer-bottom-border: var(--color-light-blue);
    --toggle-bg: var(--color-light-blue);
    --toggle-border: var(--color-light-blue);
    --toggle-hover: var(--color-light-blue);
    --toggle-knob: var(--color-white);
    --toggle-icon: var(--color-orange);
    --radius-md: 12px;
    /* Alle Boxen/Karten (.card, Seitenkopf, Startseite) gleich rund, Icon-Kästchen gleich rund */
    --radius-container: 20px;
    --radius-icon: 12px;
    /* Überschriften und Fliesstext im Inhalt (Dark Mode: --dark-heading / --dark-copy).
     Dunkle Boxen (Titelbild, Erstgespräch, Metall-Kopf) setzen beide auf Weiss. */
    --color-heading: var(--color-dark-blue);
    --color-copy: var(--color-blue);
    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2rem;
    --space-5: 3rem;
    --container-max: 1120px;
    --button-hover: 200ms ease;
}

/* Dark Mode: dieselben Farben in dunkel, dazu die --dark-…-Werte */
html[data-theme="dark"] {
  --color-bg:  var(--color-dark-gray);
  --color-text: var(--color-light-blue);

  --header-bg: var(--color-dark-gray);
  --header-border: var(--color-dark-gray);
  --nav-link: var(--color-white);
  --nav-hover: var(--color-blue);
  --nav-active: #7db8f0;
  --dropdown-item: var(--color-white);
  --dropdown-bg: var(--color-dark-gray);
  --dropdown-border: var(--color-middle-gray);
  --dropdown-shadow: 0 16px 30px rgba(0, 0, 0, 0.34);
  --dropdown-shadow-mega: 0 20px 44px rgba(0, 0, 0, 0.45);
  --dropdown-muted: var(--color-light-blue);
  --dropdown-icon-bg: rgba(255, 255, 255, 0.08);
  --card-bg: var(--color-dark-gray);
  --card-border: var(--color-middle-gray);
  --card-shadow: 0 12px 26px rgba(0, 0, 0, 0.28);
  --section-bg: var(--color-dark-gray);
  --section-border: var(--color-middle-gray);
  --section-shadow: 0 12px 26px rgba(0, 0, 0, 0.28);
  --footer-bg: var(--color-dark-gray);
  --footer-border: var(--color-dark-gray);
  --footer-text: var(--color-white);
  --footer-title: var(--color-white);
  --footer-link: var(--color-white);
  --footer-bottom-text: var(--color-white);
  --footer-bottom-border: var(--color-middle-gray);
  --toggle-bg: var(--color-blue);
  --toggle-border: var(--color-middle-blue);
  --toggle-hover: var(--color-blue);
  --toggle-knob: var(--color-dark-gray);
  --toggle-icon: var(--color-light-blue);

  /* nur im Dark Mode vorhanden */
  --dark-heading: var(--color-light-white);
  --dark-copy: var(--color-light-blue);
  --dark-link: var(--color-middle-blue);
  --dark-container-bg: var(--color-dark-gray);
  --dark-container-border: var(--color-middle-gray);
  --dark-container-shadow: 0 12px 26px rgba(0, 0, 0, 0.28);
  --dark-input-bg: var(--color-dark-gray);
  --dark-input-border: var(--color-dark-blue);
  --dark-input-text: var(--color-light-blue);
  --dark-placeholder: var(--color-middle-blue);
  --dark-icon-bg: var(--color-dark-blue);
  --dark-icon-color: var(--color-middle-blue);
}

/* ==========================================================================
   Grundlayout
   ========================================================================== */
* {
  box-sizing: border-box;
}

/* Browser-eigene Elemente (Scrollbalken, Auswahllisten, Formularfelder) passend zum Modus */
:root {
  color-scheme: light;
}

/* Dark Mode: Bedienelemente des Browsers (Scrollbalken, Auswahllisten) ebenfalls dunkel */
html[data-theme="dark"] {
  color-scheme: dark;
}

/* Scrollleiste immer anzeigen, damit sich das Layout zwischen kurzen und langen Seiten
   nicht seitlich verschiebt. (Früher scrollbar-gutter: der leere Streifen rechts liess
   Header und Footer abgeschnitten aussehen.) */
html {
  overflow-y: scroll;
}

/* Seite: Schrift, Hintergrund, Textfarbe */
body {
  margin: 0;
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--color-bg);
  overflow-x: clip; /* Sicherheitsnetz: nichts darf die Seite seitlich verbreitern */
}

/* Links allgemein */
a {
  color: inherit;
  text-decoration: none;
}

/* Inhaltsbreite (Kopfzeile, Hauptbereich, Footer) */
.container {
  width: min(100% - 2rem, var(--container-max));
  margin: 0 auto;
}

/* Footer immer am Seitenende: Formular füllt mindestens die Fensterhöhe, der Inhalt wächst */
#form1 {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Hauptbereich zwischen Kopfzeile und Footer */
main.content {
  flex: 1 0 auto;
}

.content {
  padding: var(--space-4) 0;
}

/* Dark Mode für Seiteninhalte ohne eigene Farbangabe (Spezifität 0, Seiten-CSS hat Vorrang) */
:where(main.content) :where(h1, h2, h3, h4) {
  color: var(--dark-heading, var(--color-heading));
}

/* Absätze im Inhalt (Seiten mit eigener Farbe, z. B. auf dunklem Grund, haben Vorrang) */
:where(main.content) :where(p) {
  color: var(--dark-copy, var(--color-copy));
}

/* Listen und Textstellen in Karten (Absätze: siehe Regel oben) */
:where(main.content) :where(.card, .text-note) :where(li, span) {
  color: var(--dark-copy, inherit);
}

/* Links in Karten */
:where(main.content) :where(.card) :where(a:not(.button)) {
  color: var(--dark-link, inherit);
}

/* Text-Link mit Pfeil («Mehr zu …», «Route planen», «Beratung anfragen» …), überall gleich.
   Auch als <span> in einer Karte, die selbst der Link ist: dann unterstreicht der Hover der Karte. */
.link-arrow {
  font-weight: 700;
  color: var(--dark-link, var(--color-primary));
}

.link-arrow::after {
  content: " \2192";
}

a.link-arrow:is(:hover, :focus-visible),
a:is(:hover, :focus-visible) .link-arrow {
  text-decoration: underline;
}

/* Dark Mode: alle Karten und Hinweis-Kästen dunkel */
html[data-theme="dark"] body :is(.card, [class$="-card"], [class*="-card "], .text-note) {
  background: var(--dark-container-bg);
  border-color: var(--dark-container-border);
  box-shadow: var(--dark-container-shadow);
}

/* ==========================================================================
   Karten
   ========================================================================== */
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-container);
  box-shadow: var(--card-shadow);
}

/* Hauptcontainer der Seiten */
.card.section {
  background: var(--section-bg);
  border: 1px solid var(--section-border);
  box-shadow: var(--section-shadow);
}

/* ==========================================================================
   Header und Navigation
   ========================================================================== */
/* Kopfzeile oben */
.site-header {
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
}

/* Menüleiste (Logo, Menüpunkte) */
.nav {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-1);
  align-items: center;
  padding: 0.35rem 0;
}

/* Menüpunkte */
.nav-items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: center;
  flex: 1;
}

/* Rechter Teil der Menüleiste (Logo) */
.nav-right {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  position: relative;
}

/* Menü-Knopf (nur auf dem Handy sichtbar) */
.nav-toggle {
  display: none;
  border: 1px solid var(--color-border);
  background: var(--color-light-white);
  color: var(--color-primary);
  border-radius: 10px;
  width: 42px;
  height: 42px;
  padding: 0;
  font-weight: 600;
  cursor: pointer;
}

/* Striche: Form in Dateien/Icons/menue.svg, Farbe über color */
.hamburger {
  width: 20px;
  height: 16px;
  overflow: visible;
  color: var(--nav-link);
}

/* Ein Menüpunkt (Produkte, Unternehmen, Support …) */
.nav-link {
  list-style: none;
  padding: 0.6rem 0.9rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 1.08rem; /* gleich gross wie die Einleitungstexte im Inhalt */
  font-weight: 600;
  color: var(--nav-link);
  cursor: pointer;
  transition:
    background-color var(--button-hover),
    color var(--button-hover);
}

.nav-link:hover,
.nav-link:focus-visible {
  background-color: var(--nav-hover);
}

/* aktiver Bereich: gerade Linie am unteren Rand der Hover-Form, die zu den Rundungen hin ausblendet.
   Eigenes Element (::after, auf dem Handy ::before, weil ::after dort der Pfeil ist), damit die Farbe
   beim Hell/Dunkel-Wechsel mit überblendet. */
.nav-link {
  position: relative;
}

/* Aktuelle Seite im Menü markieren: Desktop = Strich unter dem Menüpunkt */
@media (min-width: 900px) {
  .nav-link.is-active::after {
    content: "";
    position: absolute;
    left: 0.7rem;
    right: 0.7rem;
    bottom: 0;
    height: 2.5px;
    border-radius: 2px;
    background-color: var(--nav-active);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 22%, #000 78%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 22%, #000 78%, transparent);
  }
}

/* Handy: ebenfalls Strich darunter, über ::before (::after ist dort der Pfeil der aufklappbaren Menüs) */
@media (max-width: 899px) {
  .nav-link.is-active::before {
    content: "";
    position: absolute;
    left: 0.6rem;
    right: 0.6rem;
    bottom: 0;
    height: 2.5px;
    border-radius: 2px;
    background-color: var(--nav-active);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  }
}

/* Aktuelle Seite im aufgeklappten Menü */
.dropdown-item[aria-current="page"] {
  background: var(--nav-hover);
}

/* Aufklappbares Menü (z. B. «Produkte») */
.dropdown {
  position: relative;
}

/* unsichtbare Brücke, damit das Menü beim Runterfahren mit der Maus offen bleibt */
.dropdown::after {
  content: "";
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: 12px;
}

.dropdown > summary::-webkit-details-marker {
  display: none;
}

/* Aufgeklappte Liste der Unterseiten */
.dropdown-menu {
  display: grid;
  gap: 0.2rem;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 258px;
  padding: 0.4rem;
  z-index: 20;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-10px) scale(0.985);
  transition: opacity 280ms cubic-bezier(0.22, 1, 0.36, 1), transform 360ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0ms linear 360ms;
}

.dropdown .dropdown-menu.card {
  background: var(--dropdown-bg);
  border-color: var(--dropdown-border);
  box-shadow: var(--dropdown-shadow);
}

.dropdown[open] .dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition: opacity 280ms cubic-bezier(0.22, 1, 0.36, 1), transform 360ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0ms linear 0ms;
}

/* Eine Unterseite in der Liste */
.dropdown-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
  border-radius: 8px;
  padding: 0.45rem 0.6rem;
  color: var(--dropdown-item);
  transition: background-color var(--button-hover);
}

.dropdown-item:hover,
.dropdown-item:focus-visible {
  background: var(--nav-hover);
}

/* Icon vor der Unterseite */
.dropdown-item-icon {
  width: 1.15rem;
  display: inline-grid;
  place-items: center;
  font-size: 0.95rem;
}

/* Hell/Dunkel-Schalter im Footer rechts: Knopf gleitet nach rechts = dunkel */
/* ==========================================================================
   Hell/Dunkel-Schalter (im Footer rechts)
   ========================================================================== */
.theme-toggle {
  position: relative;
  flex: 0 0 auto;
  width: 52px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--toggle-border);
  border-radius: 999px;
  background: var(--toggle-bg);
  cursor: pointer;
  transition:
    background-color var(--button-hover),
    border-color var(--button-hover);
}

.theme-toggle:hover {
  background: var(--toggle-hover);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Runder Knopf, der hin- und hergleitet (mit Sonne bzw. Mond) */
.theme-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--toggle-knob);
  color: var(--toggle-icon);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition:
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    width 180ms ease,
    background-color 320ms ease;
}

html[data-theme="dark"] .theme-toggle-knob {
  transform: translateX(24px);
}

/* Mikro-Animation beim Drücken: Knopf streckt sich (im Dark Mode nach links) */
.theme-toggle:active .theme-toggle-knob {
  width: 28px;
}

html[data-theme="dark"] .theme-toggle:active .theme-toggle-knob {
  transform: translateX(18px);
}

/* Sonne -> Mond: Strahlen drehen sich ein, Kern wächst, ein Schatten schiebt sich zur Sichel darüber */
.theme-icon {
  width: 16px;
  height: 16px;
  overflow: visible;
}

/* Form und Startzustand in Dateien/Icons/hell-dunkel.svg; im Dark Mode setzen diese
   Variablen den Mond (die Icon-Datei liest sie, der Übergang läuft dort) */
html[data-theme="dark"] .theme-icon {
  --sonne-strahlen: rotate(-90deg) scale(0.3);
  --sonne-strahlen-deckkraft: 0;
  --sonne-kern: scale(1.25);
  --mond-schatten: translate(3.5px, -3px) scale(1.05);
  --mond-schatten-deckkraft: 1;
}

/* Wechsel Hell/Dunkel: die ganze Seite blendet auf einmal über, alle Boxen gleichzeitig
   (View Transitions, ausgelöst im Script in MasterPage.master; ältere Browser wechseln sofort) */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 450ms;
  animation-timing-function: ease-in-out;
}

/* «Bewegung reduzieren» (Einstellung im Betriebssystem): alle Übergänge und Animationen der ganzen Website aus.
   Menü- und Hell/Dunkel-Symbol animieren in ihrer Icon-Datei, daher dort über Variablen. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0s !important;
    animation: none !important;
  }

  .theme-icon,
  .hamburger {
    --hell-dunkel-uebergang: none;
    --menue-uebergang: none;
  }
}

/* Logo oben rechts */
.header-logo-link {
  display: inline-flex;
  align-items: center;
  border-radius: 10px;
}

/* Logo-Bild (Original, wird nie verändert) */
.header-logo {
  display: block;
  height: 80px;
  width: auto;
}

/* Dark Mode: Kopfzeile links dunkel (Menü), nach rechts ruhiger Verlauf in Weiss, wo das
   Original-Logo steht. --logo-zone = Abstand vom rechten Rand bis zum Inhaltsbereich. */
html[data-theme="dark"] .site-header {
  --logo-zone: max((100% - var(--container-max)) / 2, 1rem);
  /* 13 Stufen, im OKLab-Farbraum über die Blautöne var(--color-light-blue) / #8ea7c4 / #2a4566 berechnet:
     gleichmässiger Übergang ohne sichtbare Kanten */
  background: linear-gradient(to left,
    var(--color-white) 0,
    var(--color-white) calc(var(--logo-zone) + 230px),
    /*#fafcfe calc(var(--logo-zone) + 261px),
    #f2f7fc calc(var(--logo-zone) + 292px),
    var(--color-light-white) calc(var(--logo-zone) + 323px),
    #cbdaea calc(var(--logo-zone) + 353px),
    #aec2da calc(var(--logo-zone) + 384px),
    #8ea7c4 calc(var(--logo-zone) + 415px),
    #6a86a6 calc(var(--logo-zone) + 446px),
    #466284 calc(var(--logo-zone) + 477px),
    #2a4566 calc(var(--logo-zone) + 508px),
    #1b314d calc(var(--logo-zone) + 538px),
    #132239 calc(var(--logo-zone) + 569px),*/
    var(--color-dark-gray) calc(var(--logo-zone) + 600px));
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  border-top: 1px solid var(--footer-border);
  background: var(--footer-bg);
  margin-top: 0;
}

/* Drei Spalten: Firma, Kontakt, Schnellzugriff */
.footer-grid {
  padding: var(--space-4) 0 var(--space-3);
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 1rem;
  color: var(--footer-text);
  font-size: 0.95rem;
  align-items: start;
  text-align: left;
}

.footer-grid p {
  margin: 0.25rem 0;
}

/* Spaltentitel im Footer */
.footer-title {
  margin: 0 0 0.4rem 0;
  color: var(--footer-title);
  font-weight: 700;
}

/* Links im Footer (Telefon, E-Mail, Seiten) */
.footer-grid a {
  color: var(--footer-link);
}

html[data-theme="dark"] .footer-grid a:hover,
html[data-theme="dark"] .footer-grid a:focus-visible {
  text-decoration: underline;
}

/* Unterste Zeile: Copyright, Impressum/Datenschutz, Hell/Dunkel-Schalter */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--footer-bottom-border);
  padding: 0.75rem 0 1rem;
  color: var(--footer-bottom-text);
  font-size: 0.88rem;
}

.footer-bottom p {
  margin: 0;
}

/* ==========================================================================
   Buttons und Formularfelder
   Hover-Animation überall gleich: nur Farbwechsel (--button-hover).
   Ausnahme: "Termin vereinbaren" (.cta-band .cta-button) hat einen deutlicheren Hover.
   ========================================================================== */
.button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-block;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: #fff;
  padding: 0.7rem 1rem;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--button-hover), color var(--button-hover), border-color var(--button-hover);
}

/* Hover-Farbe als Ebene, die eingeblendet wird (Varianten setzen nur die Farbe) */
.button::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--color-primary-strong);
  opacity: 0;
  transition: opacity var(--button-hover);
  z-index: -1;
}

.button:hover::before,
.button:focus-visible::before {
  opacity: 1;
}

/* Tastatur-Fokus: gleicher Rahmen für alle Knöpfe */
.button:focus-visible {
  outline: 3px solid rgba(42, 111, 179, 0.45);
  outline-offset: 2px;
}

/* Grosser Knopf für die Hauptaktion einer Seite
   («Termin vereinbaren», «Anrufen», «Nachricht senden», «Zurück zur Homepage») */
.button-lg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.9rem 1.7rem;
  font-size: 1.05rem;
  font-weight: 800;
}

/* asp:Button wird als <input> gerendert: ::before wirkt dort nicht,
   daher den gleichen Farbwechsel direkt auf den Hintergrund legen. */
input.button:hover,
input.button:focus-visible {
  background: var(--color-primary-strong);
}

/* Eingabefelder allgemein (Formulare ohne eigene Gestaltung) */
.input,
.textarea,
.select {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 0.65rem 0.75rem;
  font: inherit;
}

/* Menüeinträge: Icon + Titel (+ Kurzbeschreibung im Mega-Menü) */
.dropdown-item-body {
  display: grid;
  gap: 0.1rem;
}

/* Titel der Unterseite im Menü */
.dropdown-item-title {
  font-size: 1.02rem;
  font-weight: 600;
}

/* Kurzbeschreibung unter dem Titel (nur im grossen Desktop-Menü) */
.dropdown-item-text {
  font-size: 0.88rem;
  line-height: 1.35;
  color: var(--dropdown-muted);
}

/* Desktop: Mega-Menü - breites Panel über die Inhaltsbreite, Einträge in 3 Spalten */
@media (min-width: 900px) {
  .nav {
    position: relative;
  }

  .dropdown {
    position: static;
  }

  .dropdown::after {
    display: none;
  }

  /* unsichtbare Brücke vom Menüpunkt zum Panel, damit es beim Runterfahren offen bleibt */
  .dropdown > summary {
    position: relative;
  }

  .dropdown > summary::before {
    content: "";
    position: absolute;
    left: -0.5rem;
    right: -0.5rem;
    top: 100%;
    height: 26px;
  }

  .dropdown .dropdown-menu.card {
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem 0.75rem;
    padding: 1rem;
    border-radius: 16px;
    box-shadow: var(--dropdown-shadow-mega);
    transform: translateY(-8px);
  }

  .dropdown[open] .dropdown-menu.card {
    transform: none;
  }

  .dropdown-menu .dropdown-item {
    align-items: flex-start;
    gap: 0.75rem;
    white-space: normal;
    padding: 0.7rem 0.75rem;
    border-radius: 12px;
  }

  /* Hauptprodukt über die ganze Breite, darunter eine feine Trennlinie */
  .dropdown-menu .dropdown-item-featured {
    grid-column: 1 / -1;
    margin-bottom: 0.35rem;
    box-shadow: 0 1px 0 var(--dropdown-border);
    border-radius: 12px 12px 0 0;
  }
  .dropdown-menu .dropdown-item-icon {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 10px;
    background: var(--tone-bg, var(--dropdown-icon-bg));
    font-size: 1.1rem;
  }
}

/* ==========================================================================
   Handy / Tablet
   ========================================================================== */
@media (max-width: 899px) {
  .nav {
    position: relative;
    flex-wrap: wrap;
    padding: 0.6rem 0; /* Handy: etwas höhere Kopfzeile */
  }

  .nav-right {
    margin-left: auto;
    gap: 0.3rem;
  }

  .header-logo {
    height: 42px;
  }

  html[data-theme="dark"] .site-header {
    background: linear-gradient(to left,
      var(--color-white) 0,
      var(--color-white) calc(1rem + 175px),
      #fafcfe calc(1rem + 192px),
      #f2f7fc calc(1rem + 209px),
      var(--color-light-blue) calc(1rem + 226px),
      #cbdaea calc(1rem + 243px),
      #aec2da calc(1rem + 260px),
      #8ea7c4 calc(1rem + 278px),
      #6a86a6 calc(1rem + 295px),
      #466284 calc(1rem + 312px),
      #2a4566 calc(1rem + 329px),
      #1b314d calc(1rem + 346px),
      #132239 calc(1rem + 363px),
      var(--color-dark-gray) calc(1rem + 380px));
  }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: -11px; /* Striche bündig mit dem Inhalt */
    margin-right: auto;
    width: 48px; /* gut treffbar mit dem Daumen */
    height: 48px;
    border: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
  }

  .nav-items {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 0.3rem);
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    margin-top: 0;
    padding: 0.45rem;
    border: 1px solid var(--header-border);
    border-radius: 12px;
    background: var(--header-bg);
    box-shadow: var(--dropdown-shadow);
    z-index: 30;
  }

  .nav.is-open .nav-items {
    display: flex;
  }

  .hamburger {
    width: 26px;
    height: 21px;
  }

  .dropdown-menu .dropdown-item {
    padding: 0.7rem 0.75rem;
  }

  /* offen: drei Striche werden zum X (die Icon-Datei liest diese Variablen) */
  .nav.is-open .hamburger {
    --menue-strich-1: translateY(6px) rotate(45deg);
    --menue-strich-2: 0;
    --menue-strich-3: translateY(-6px) rotate(-45deg);
  }

  .nav-link {
    width: 100%;
    border-radius: 10px;
    padding: 0.85rem 1rem; /* grössere Tippfläche */
    font-size: 1.12rem;
  }

  .dropdown {
    width: 100%;
  }

  .dropdown-item-text {
    display: none;
  }

  .dropdown::after {
    display: none;
  }

  .dropdown > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* Pfeil als gezeichneter Winkel (gut sichtbar, dreht sich beim Aufklappen) */
  .dropdown > summary::after {
    content: "";
    width: 10px;
    height: 10px;
    margin-right: 6px;
    border-right: 2.5px solid currentColor;
    border-bottom: 2.5px solid currentColor;
    border-radius: 1px;
    transform: translateY(-3px) rotate(45deg);
    opacity: 0.8;
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .dropdown[open] > summary::after {
    transform: translateY(2px) rotate(-135deg);
  }

  .dropdown-menu {
    position: static;
    min-width: 100%;
    margin-top: 0.35rem;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Remote-Support-Button: immer sichtbar am rechten Rand,
   der Text gleitet beim Darüberfahren (oder Tastatur-Fokus) heraus
   ========================================================================== */
.remote-fab {
  position: fixed;
  right: 0;
  top: 50%;
  z-index: 40;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  padding: 0.55rem 0.6rem 0.55rem 0.65rem;
  border-radius: 999px 0 0 999px;
  background: var(--color-middle-blue);
  color: var(--color-white);
  box-shadow: 0 8px 22px rgba(15, 40, 70, 0.35);
  transition: background-color var(--button-hover), padding 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Headset-Icon im Knopf */
.remote-fab-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
}

.remote-fab-icon svg {
  width: 24px;
  height: 24px;
}

/* Text «Remote-Support», der herausgleitet */
.remote-fab-label {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-weight: 700;
  font-size: 0.95rem;
  opacity: 0;
  transition: max-width 300ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease, margin 300ms ease;
}

.remote-fab:hover,
.remote-fab:focus-visible {
  background: #1e5fa0;
  padding-right: 1rem;
  outline: none;
}

.remote-fab:hover .remote-fab-label,
.remote-fab:focus-visible .remote-fab-label {
  max-width: 160px;
  margin-left: 0.5rem;
  opacity: 1;
}

/* Desktop: grösser und mit sanftem Leuchtring, der regelmässig nach aussen pulsiert */
@media (min-width: 900px) {
  .remote-fab {
    padding: 0.8rem 0.85rem 0.8rem 0.95rem;
  }

  .remote-fab-icon,
  .remote-fab-icon svg {
    width: 30px;
    height: 30px;
  }

  .remote-fab::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    animation: remote-puls 2.8s ease-out infinite;
  }
}

@keyframes remote-puls {
  0% {
    box-shadow: 0 0 0 0 rgba(42, 111, 179, 0.55);
  }

  70%,
  100% {
    box-shadow: 0 0 0 16px rgba(42, 111, 179, 0);
  }
}

@media (max-width: 899px) {
  /* Handy: unten rechts, damit der Knopf keine Inhalte (z. B. Slider-Pfeile) verdeckt */
  .remote-fab {
    top: auto;
    bottom: 1rem;
    transform: none;
    padding: 0.45rem 0.45rem 0.45rem 0.55rem;
  }

  .remote-fab-icon,
  .remote-fab-icon svg {
    width: 22px;
    height: 22px;
  }
}

/* ==========================================================================
   Linien-Icons (SVG im Stil von Feather/Lucide, Lizenzen siehe Dateien/LIZENZEN.txt).
   Sie übernehmen die Textfarbe; Icon-Kästchen setzen dafür color.
   ========================================================================== */
.ico {
  display: block;
  flex: 0 0 auto;
  width: 1.25em;
  height: 1.25em;
}

/* Gleicher Strich-Stil für alle Linien-Icons (auch in Icon-Kästchen, PDF-Listen, Remote-Support-Knopf) */
.ico,
.icon > svg,
.pdf-icon svg,
.pdf-download svg,
.remote-fab-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Liste ohne Aufzählungspunkte und Einzug (Fakten, Schritte, Link- und PDF-Listen …) */
.plain-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Raster wie auf einer technischen Zeichnung (Titelbild, «3 Schritte», Erstgespräch-Band):
   kleine Teilung 16px, alle 80px eine kräftigere Linie. Liegt als eigene Ebene zwischen
   Hintergrund und Inhalt. Farben/Ausblendung setzt die Box: --raster-major, --raster-minor, --raster-mask */
.raster {
  position: relative;
  isolation: isolate;
}

.raster::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background-image:
    linear-gradient(var(--raster-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--raster-major) 1px, transparent 1px),
    linear-gradient(var(--raster-minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--raster-minor) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px;
  background-position: -1px -1px;
  -webkit-mask-image: var(--raster-mask, none);
  mask-image: var(--raster-mask, none);
}

/* Runde Schritt-Nummer 1 / 2 / 3 (Startseite «3 Schritte», Remote-Support); Grösse über --step-size */
.step-number {
  --step-size: 40px;
  width: var(--step-size);
  height: var(--step-size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  color: var(--color-white);
  background: linear-gradient(135deg, #3383d6 0%, #1e5fa0 100%);
}

/* Icon-Kästchen (Startseite, Seitenköpfe, Listen, Kontakt, Jobs …): getönter Hintergrund,
   Icon mittig. Farbe über Klasse tone-…, Grösse über --icon-size (Icon = 55 % davon).
   Abweichende Grundfarbe ohne tone-…: --icon-bg / --icon-fg (z. B. PDF-Symbol rot). */
.icon {
  --icon-size: 42px;
  flex: 0 0 auto;
  width: var(--icon-size);
  height: var(--icon-size);
  border-radius: var(--radius-icon);
  display: grid;
  place-items: center;
  background: var(--tone-bg, var(--icon-bg, var(--dark-icon-bg, rgb(42 111 179 / 0.12))));
  color: var(--tone-fg, var(--icon-fg, var(--dark-icon-color, var(--color-middle-blue))));
}

.icon > svg {
  width: calc(var(--icon-size) * 0.55);
  height: calc(var(--icon-size) * 0.55);
}

/* Farbe der Icons im Menü */
.dropdown-item-icon {
  color: var(--tone-fg, var(--dark-icon-color, var(--color-middle-blue)));
}

/* Dezente Farbe für Icon-Kästchen: Klasse tone-… setzt Symbolfarbe (--tone-fg) und
   einen leicht getönten Hintergrund (--tone-bg). Im Dark Mode jeweils hellere Variante. */
.tone-blue { --tone-fg: rgb(42 111 179); --tone-bg: rgb(42 111 179 / 0.12); }
html[data-theme="dark"] .tone-blue { --tone-fg: rgb(130 182 240); --tone-bg: rgb(130 182 240 / 0.14); }
.tone-green { --tone-fg: rgb(22 135 92); --tone-bg: rgb(22 135 92 / 0.12); }
html[data-theme="dark"] .tone-green { --tone-fg: rgb(108 210 160); --tone-bg: rgb(108 210 160 / 0.14); }
.tone-orange { --tone-fg: rgb(206 100 20); --tone-bg: rgb(206 100 20 / 0.12); }
html[data-theme="dark"] .tone-orange { --tone-fg: rgb(246 168 96); --tone-bg: rgb(246 168 96 / 0.14); }
.tone-violet { --tone-fg: rgb(120 76 196); --tone-bg: rgb(120 76 196 / 0.12); }
html[data-theme="dark"] .tone-violet { --tone-fg: rgb(186 160 244); --tone-bg: rgb(186 160 244 / 0.14); }
.tone-red { --tone-fg: rgb(196 58 58); --tone-bg: rgb(196 58 58 / 0.12); }
html[data-theme="dark"] .tone-red { --tone-fg: rgb(244 140 140); --tone-bg: rgb(244 140 140 / 0.14); }
.tone-amber { --tone-fg: rgb(168 120 8); --tone-bg: rgb(168 120 8 / 0.12); }
html[data-theme="dark"] .tone-amber { --tone-fg: rgb(238 196 96); --tone-bg: rgb(238 196 96 / 0.14); }
.tone-teal { --tone-fg: rgb(12 130 132); --tone-bg: rgb(12 130 132 / 0.12); }
html[data-theme="dark"] .tone-teal { --tone-fg: rgb(98 206 206); --tone-bg: rgb(98 206 206 / 0.14); }
.tone-indigo { --tone-fg: rgb(68 78 196); --tone-bg: rgb(68 78 196 / 0.12); }
html[data-theme="dark"] .tone-indigo { --tone-fg: rgb(158 166 244); --tone-bg: rgb(158 166 244 / 0.14); }
.tone-slate { --tone-fg: rgb(78 98 122); --tone-bg: rgb(78 98 122 / 0.12); }
html[data-theme="dark"] .tone-slate { --tone-fg: rgb(168 184 204); --tone-bg: rgb(168 184 204 / 0.14); }

/* Einblenden beim Scrollen (Klassen setzt das Skript in MasterPage.master) */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 700ms ease,
    transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-revealed {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   Kostenloses Erstgespräch: blaues Band mit Raster (Startseite, Mechanik 3000)
   Selektoren mit .cta-band davor, damit Seiten-Regeln für h2/p sie nicht überschreiben.
   ========================================================================== */
.cta-band {
  --color-heading: var(--color-white); /* Text auf dem blauen Band weiss */
  --raster-major: rgba(255, 255, 255, 0.12);
  --raster-minor: rgba(255, 255, 255, 0.05);
  --raster-mask: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.35) 40%, #000 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 2rem 2.2rem;
  border-radius: var(--radius-container);
  background:
    radial-gradient(circle at 88% 15%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 38%),
    linear-gradient(120deg, #0b3a6e 0%, #1e5fa0 55%, #2f7bd0 100%);
  box-shadow: 0 18px 40px rgba(15, 60, 120, 0.25);
}

/* Titel «Kostenloses Erstgespräch» und Text darunter */
.cta-band .cta-copy h2 {
  margin: 0 0 0.4rem;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
}

.cta-band .cta-copy > p {
  margin: 0;
  max-width: 560px;
  color: rgba(255, 255, 255, 0.88);
}

/* Rechte Seite: Knopf «Termin vereinbaren» und Telefonnummer */
.cta-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  flex: 0 0 auto;
}

/* Knopf «Termin vereinbaren»: Hauptaktion, daher deutlicherer Hover als normale Buttons
   (hebt sich an, Leuchtrand, Pfeil rutscht nach rechts) */
.cta-band .cta-button.button {
  background: var(--color-white);
  color: var(--color-blue);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
  transition: color var(--button-hover), transform 200ms ease, box-shadow 200ms ease;
}

.cta-band .cta-button.button::before {
  background: #d3e6fb;
}

.cta-band .cta-button.button:is(:hover, :focus-visible) {
  color: #0b3a6e;
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.3), 0 0 0 4px rgba(255, 255, 255, 0.28);
}

.cta-button::after {
  content: "\2192";
  font-size: 1.15rem;
  line-height: 1;
  transition: transform 200ms ease;
}

.cta-band .cta-button.button:is(:hover, :focus-visible)::after {
  transform: translateX(4px);
}

/* Zeile «oder anrufen: …» unter dem Knopf */
.cta-band .cta-phone {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.85);
}

.cta-band .cta-phone:is(:hover, :focus-visible) {
  color: var(--color-white);
  text-decoration: underline;
}

/* Handy: Text und Knopf untereinander */
@media (max-width: 820px) {
  .cta-band {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.6rem 1.4rem;
  }

  .cta-actions {
    align-items: flex-start;
  }
}

/* Footer unten links: Copyright, daneben Impressum und Datenschutz */
.footer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.4rem;
}

/* Links «Impressum» und «Datenschutz» */
.footer-legal {
  display: flex;
  gap: 1.1rem;
}

.footer-legal a {
  color: var(--footer-bottom-text);
}

.footer-legal a:hover,
.footer-legal a:focus-visible {
  text-decoration: underline;
}