/* =================================================================
   tuned-instruments.com  ·  styles.css  ·  v1.136
   =================================================================
   Aufbau:
      1.  Variables & Base
      2.  Color Schemes (Backgrounds)
      3.  Layout Utilities
      4.  Navbar
      5.  Hero (statisch + Carousel + Overlays)
      6.  Text Block
      7.  Icons (di-*)
      8.  Gallery Item (Karten-Komponente)
      9.  News Section (Row, Header-Tile, Liste)
     10.  Black & White Image (Filter)
     11.  Testimonials
     12.  Buttons (Primary, Disabled)
     13.  About-Block
     14.  Page-Breakpoints (480 / 768 / 1024 / 1740)
     15.  Smooth Breakpoint-Transitions (kein JS)
     16.  Dark Mode Overrides
   ================================================================= */


/* =================================================================
   1. Variables & Base
   =================================================================
   Farbschema: 10 Grundtöne, ausschliesslich als RGB-Kommatripel
   (z. B. "102, 153, 48"), verwendet über rgb(var(--x)) bzw.
   rgba(var(--x), alpha). Kein Hex-/RGB-Literal ausserhalb dieses
   Blocks — alle Komponenten-Regeln im Stylesheet verweisen nur auf
   diese zehn Variablen. Für ein neues Projekt mit anderen Corporate-
   Farben müssen ausschliesslich die Werte unten angepasst werden.

   4 Sektionsarten (Hintergrund / Schrift+Link / Link-Hover):

     Header             Akzent  / SchriftAufAkzent / Hell2
                        (Light + Dark identisch — Header wechselt
                         nicht mit dem Farbschema)

     Inhaltssektion 1   Light: Hell1   / SchriftAufHell   / Akzent
     (section, .text-   Dark:  Dunkel2 / SchriftAufDunkel / Akzent
      block ohne Klasse)

     Inhaltssektion 2   Light: Hell2   / SchriftAufHell   / Akzent
     (.bg_light)        Dark:  Dunkel1 / SchriftAufDunkel / Akzent

     Footer             Light: Dunkel1 / SchriftAufDunkel / fett
     (.bg_dark)         Dark:  Dunkel3 / SchriftAufDunkel / fett
                        (Hover = font-weight, keine Farbänderung)

   Boxlinien (Rahmen/Trennlinien): Gallery-Item-Rahmen, News-Listen-
   Trennlinie und Disabled-Button-Rahmen sind KEINE eigenen Grau-
   Variablen, sondern immer rgba(SchriftAufHell, .25) im Light Mode
   bzw. rgba(SchriftAufDunkel, .25) im Dark Mode — abhängig vom
   jeweiligen Text-Ton der Sektion, in der sie liegen. Ausnahme:
   Gallery-Item-Rahmen wechselt im Dark Mode bewusst zu Akzent
   (siehe Abschnitt 16) statt der Alpha-Formel zu folgen.
   ================================================================= */

:root {
  /* Akzent */
  --akzent: 102, 153, 48;
  --akzent-hover: 84, 125, 39;
  --schrift-auf-akzent: 255, 255, 255;

  /* Hell */
  --hell1: 255, 255, 255;
  --hell2: 238, 238, 238;
  --schrift-auf-hell: 51, 51, 51;

  /* Dunkel */
  --dunkel1: 51, 51, 51;
  --dunkel2: 26, 26, 26;
  --dunkel3: 13, 13, 13;
  --schrift-auf-dunkel: 255, 255, 255;
}

@font-face {
  font-family: 'Raleway';
  src: url('/fonts/Raleway-Regular.ttf') format('truetype');
}

@font-face {
  font-family: "IcoFont";
  src: url("/fonts/icofont.woff2") format("woff2"),
       url("/fonts/icofont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'Raleway', sans-serif;
  margin: 0;
  padding: 0;
}

h3 {
  margin-top: 48px;
}

a {
  color: rgb(var(--schrift-auf-hell));
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}

a:hover {
  color: rgb(var(--akzent));
  border-bottom: 1px solid currentColor;
}


/* =================================================================
   2. Color Schemes
   ================================================================= */

/* Akzent-Hintergrund */
.bg_accent {
  background-color: rgb(var(--akzent));
  color: rgb(var(--schrift-auf-akzent));
}

.bg_accent a {
  color: rgb(var(--schrift-auf-akzent));
  border-bottom: 1px dotted currentColor;
}

.bg_dark a {
  color: rgb(var(--schrift-auf-dunkel));
  border-bottom: 1px dotted currentColor;
}

.bg_accent a:hover,
.bg_dark a:hover {
  font-weight: bold;
  border-bottom: 1px solid currentColor;
}

/* Hell-grauer Hintergrund (alternierende Sektionen) */
.bg_light {
  background-color: rgb(var(--hell2));
}

/* Modul-Überschrift der Home-Sektionen: immer Akzent, unabhängig vom
   Sektions-Hintergrund. .u-full-width tragen ausschliesslich die
   Home-Module (siehe Abschnitt 3) — h2 im Fliesstext der Detail- und
   News-Seiten bleibt davon unberührt und behält die Textfarbe. */
.bg_light h2,
.u-full-width h2 {
  color: rgb(var(--akzent));
}

/* Dunkler Hintergrund (Footer u.ä.) */
.bg_dark {
  background-color: rgb(var(--dunkel1));
  color: rgb(var(--schrift-auf-dunkel));
}


/* =================================================================
   3. Layout Utilities
   ================================================================= */

section,
.text-block {
  padding-top: 20px;
  padding-bottom: 20px;
  margin: 0;
}

.space-between {
  padding-top: 20px;
  padding-bottom: 20px;
}

.u-text-center {
  text-align: center;
}


/* =================================================================
   4. Navbar
   ================================================================= */

.navbar,
.navbar-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;            /* explizit statt nur via left/right berechnet — 
                             noetig, damit width beim 1740px-Sidebar-Wechsel
                             weich transitionieren kann (kein visueller
                             Unterschied zum bisherigen Verhalten) */
  height: 70px;
  display: flex;
}

.navbar {
  color: rgb(var(--schrift-auf-akzent));
  z-index: 1000;          /* über Hero (z-index: 3) UND navbar-bg */
  align-items: center;
}

.navbar-bg {
  z-index: 2;             /* unter navbar */
}

.navbar .container {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.nav-left {
  display: flex;
  align-items: center;
}

.navbar .company-name {
  font-size: 0.75rem;
  white-space: nowrap;
  margin-left: auto;
  text-align: right;
}

.navbar .button {
  margin-left: 10px;
  color: rgb(var(--schrift-auf-akzent));
}


/* =================================================================
   5. Hero
   =================================================================
   Statischer Hero (.hero), Carousel-Variante (.hero-carousel) und
   die Text-Overlays (.hero-text / .hero-sub / .hero-button).
   Die Animation-Keyframes werden zur Laufzeit in home.html als
   inline-<style> auf Basis der vorhandenen Slides generiert.
   ================================================================= */

.hero {
  position: relative;
  z-index: 3;
  left: 0;                /* explizit statt implizit 0 — noetig fuer */
  width: 100%;            /* weiche Transition bei 1740px (kein visueller
                             Unterschied, da bisher ohnehin volle Breite) */
  height: 100vh;
  min-width: 100%;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-text {
  position: relative;
  z-index: 2;
  color: rgb(var(--schrift-auf-dunkel));
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* neutrales Schwarz, kein Corporate-Ton */
}

/* Hero Carousel — Slides werden absolut innerhalb von .hero gestapelt.
   Crossfade läuft als CSS-only @keyframes-Animation (siehe home.html
   inline-<style>). Alle Slides starten bei opacity 1; nur die jeweils
   oberste Schicht blendet aus und gibt die darunter liegende Schicht
   frei (Reveal — kein weisses Bleed-through). */
.hero-carousel {
  position: relative;
  overflow: hidden;
}

.hero-carousel .hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 1;
  z-index: 1;
}

/* Hero-Untertitel und Hero-Button in der Slide. Gleicher
   text-shadow wie .hero-text für Lesbarkeit auf jedem Bild. */
.hero-sub {
  margin-top: 0.5rem;
  font-size: 1.6rem;
  color: rgb(var(--schrift-auf-dunkel));
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* neutrales Schwarz, kein Corporate-Ton */
}

.hero-button {
  display: inline-block;
  margin-top: 1.5rem;
  color: rgb(var(--schrift-auf-dunkel));
  border: 1px solid rgba(var(--schrift-auf-dunkel), 0.85);
  background: transparent;
  text-shadow: none;
}

.hero-button:hover,
.hero-button:focus {
  background: rgba(var(--schrift-auf-dunkel), 0.15);
  color: rgb(var(--schrift-auf-dunkel));
}


/* =================================================================
   6. Text Block
   ================================================================= */

/* Reiner Layout-Container: Mindesthöhe + vertikale Zentrierung.
   KEINE Farbgebung — der Hintergrund kommt immer von der umgebenden
   Sektion (Abschnitt 2). Bis v1.135 setzte .text-block hier selbst
   background-color: Hell1 und übermalte damit jede Sektionsfarbe. */
.text-block {
  min-height: calc(100vh - 240px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.text-block .caption {
  margin-bottom: 24px;
}

ul, ol {
  list-style-position: outside;
  padding-left: 1.25rem;
}


/* =================================================================
   7. Icons (di-*)
   =================================================================
   Werden in Markdown-Content per <span class="di-…"></span> als
   Aufzählungs-Symbole eingebunden (siehe home-pillars.md).
   ================================================================= */

.di-warning,
.di-arrow {
  float: left;
  font-size: 2em;
  line-height: 1;
  margin: 0.2em 0.3em 0 0;
  font-family: 'IcoFont';
}

.di-warning::before {
  content: "\f025";       /* icofont-warning-alt */
  color: rgb(var(--schrift-auf-hell));
}

.di-arrow::before {
  content: "\ea6d";       /* icofont-circled-right */
  color: rgb(var(--akzent));
}


/* =================================================================
   8. Gallery Item
   =================================================================
   Karten-Komponente, gemeinsam von Erfahrungs-Galerie (Home) und
   News-Vorschau (.news-row) verwendet. Gleich hohe Boxen,
   unabhängig von Textlänge:
     Desktop/Tablet:        4:3, Bild ⅔ / Text ⅓
     Mobil (≤549px):        3:2, Bild 60% / Text 40%
     iPhone-/Android-Quer:  4:3 bleibt, Bild 60% / Text 40%
   ================================================================= */

.gallery-item {
  /* Rahmen = Boxlinien-Formel, siehe Abschnitt 1 (SchriftAufHell, 25%). */
  border: 1px solid rgba(var(--schrift-auf-hell), 0.25);
  padding: 10px;
  margin-bottom: 20px;
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  text-decoration: none;
  color: inherit;
  /* Tap-Highlight in Akzentfarbe statt Browser-Default-Grau. */
  -webkit-tap-highlight-color: rgba(var(--akzent), 0.15);
}

.gallery-item img {
  width: 100%;
  height: 66%;
  object-fit: cover;
  display: block;
  margin: 0;
  flex: 0 0 66%;
}

.gallery-item .caption {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-top: 10px;
  min-height: 0;
}

/* Titel/Teaser werden auf 2 Zeilen geklammert. Das Datum
   (.caption-date) sitzt als separates Flex-Kind außerhalb
   des Clamp-Bereichs und wird nie abgeschnitten. */
.gallery-item .caption-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
  flex: 0 1 auto;
}

.gallery-item .caption-date {
  flex: 0 0 auto;
  margin-top: 0.4rem;
  font-size: 0.9em;
  opacity: 0.75;
}

/* Mobil (1-spaltig): 3:2-Format gibt der Caption genug Höhe für
   2 Zeilen, ohne dass das Bild dominant wird. Padding gestrafft. */
@media (max-width: 549px) {
  .gallery-item {
    aspect-ratio: 3 / 2;
    padding: 6px;
  }
  .gallery-item img {
    height: 60%;
    flex: 0 0 60%;
  }
  .gallery-item .caption {
    margin-top: 4px;
  }
}

/* Sonderfall iPhone-/Android-Landscape im 2-Spalten-Bereich:
   Diese Geräte fallen in den 550–1023px-Breakpoint, sind aber
   deutlich flacher als iPad/Tablet (Höhe < 600px). Aspect-Ratio
   bleibt bei 4:3, der Bildanteil wird auf 60% reduziert — so
   bleiben 40% für die Caption (statt 34%), damit zwei Textzeilen
   sicher hineinpassen. */
@media (min-width: 550px) and (max-width: 1023px)
       and (orientation: landscape)
       and (max-height: 600px) {
  .gallery-item img {
    height: 60%;
    flex: 0 0 60%;
  }
}

/* Tablet-Zwischen-Breakpoint (550–1023px): bei mittlerer Breite
   2-spaltig statt direkt von 3 auf 1 zu wechseln. */
@media (min-width: 550px) and (max-width: 1023px) {
  .gallery-item.four.columns {
    width: 48%;
    margin-left: 4%;
  }
  .gallery-item.four.columns:nth-of-type(2n+1) {
    margin-left: 0;
    clear: left;
  }
}

/* Desktop (≥1024px): nach drei Kacheln umbrechen. Skeleton setzt
   margin-left:0 nur auf :first-child — bei einer Single-Row mit
   mehr als 3 Kacheln muss jede 4./7./10. Kachel zusätzlich
   umbrechen und bündig links starten. */
@media (min-width: 1024px) {
  .gallery-item.four.columns:nth-of-type(3n+1) {
    margin-left: 0;
    clear: left;
  }
}

/* Hover (Desktop/Tastatur): Text der Karte in Akzent-Farbe.
   .gallery-item ist ein <a> mit color: inherit — Hover muss
   explizit auf alle Text-Kinder kaskadieren. */
.gallery-item:hover,
.gallery-item:hover .caption,
.gallery-item:hover .caption-text,
.gallery-item:hover .caption-date,
.gallery-item:hover strong,
.gallery-item:hover p {
  color: rgb(var(--akzent));
}

/* Touch-Geräte (kein Hover): Text dauerhaft Akzent — passend
   zum dauerhaft farbigen Bild (s. bw-image-Block weiter unten). */
@media (hover: none) {
  .gallery-item,
  .gallery-item .caption,
  .gallery-item .caption-text,
  .gallery-item .caption-date,
  .gallery-item strong,
  .gallery-item p {
    color: rgb(var(--akzent));
  }
}


/* =================================================================
   9. News Section
   =================================================================
   Home: Header-Tile + 3-spaltige Vorschau (.news-row) — die
   eigentlichen Kacheln nutzen die .gallery-item-Komponente
   (Block 8). Die News-Row hat eigene Umbruch-Regeln, weil das
   Header-Tile als <div> in Slot 1 sitzt.
   Archiv (/news/): .news-list als chronologische Liste mit
   Thumbnail rechts (Desktop/Tablet), ohne Thumbnail (Mobil).
   ================================================================= */

/* Toggle: Mobil/Tablet zeigen .news-mobile, Desktop .news-desktop. */
@media (max-width: 1023px) {
  .news-desktop { display: none !important; }
}
@media (min-width: 1024px) {
  .news-mobile  { display: none !important; }
}

/* „News"-Überschrift — Akzent wie andere Section-H2,
   leicht reduzierte Höhe damit es ins Header-Tile passt. */
.news-heading {
  color: rgb(var(--akzent));
  margin-top: 0;
  margin-bottom: 1.5rem;
}

/* Header-Tile auf Desktop: gleiche 4:3-Höhe wie eine News-Kachel,
   aber ohne Rahmen — H2 oben, Button darunter, linksbündig. */
.news-header-tile {
  aspect-ratio: 4 / 3;
  padding: 10px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  box-sizing: border-box;
}

.news-header-tile .button {
  margin-bottom: 0;
}

/* News-Row-Overrides für die Umbruch-Regeln aus Block 8:
   Das Header-Tile (<div>) zählt bei :nth-of-type nicht mit, daher
   müssen wir hier mit :nth-child arbeiten und die globale Regel
   zurücksetzen. Header-Tile = child 1; Items 4 und 7 (= child 4,7)
   brauchen clear:left. */
@media (min-width: 1024px) {
  .news-row .gallery-item.four.columns:nth-of-type(3n+1) {
    margin-left: 4%;
    clear: none;
  }
  .news-row .gallery-item.four.columns:nth-child(3n+1) {
    margin-left: 0;
    clear: left;
  }
}

@media (min-width: 550px) and (max-width: 1023px) {
  /* News-Row im Tablet-Modus: Header-Tile ist via .news-desktop
     display:none, bleibt aber als child 1 im DOM. */
  .news-row .gallery-item.four.columns:nth-of-type(2n+1) {
    margin-left: 4%;
    clear: none;
  }
  .news-row .gallery-item.four.columns:nth-child(2n) {
    margin-left: 0;
    clear: left;
  }
}

/* News-Archiv-Liste (/news/) ----------------------------------- */

/* .text-block ist im Theme vertikal-zentrierender Flex-Container
   (min-height: 100vh - Footer). Für die Archivliste docken wir
   den Inhalt oben an, damit kurze Listen nicht in der Mitte
   „schweben". Footer bleibt durch min-height weiter gepinnt. */
.text-block.news-archive {
  justify-content: flex-start;
}

.news-list {
  list-style: none;
  padding: 0;
  margin: 2rem auto 0;
  max-width: 720px;
  width: 100%;
}

.news-list-row {
  /* Trennlinie = Boxlinien-Formel, siehe Abschnitt 1 (SchriftAufHell, 25%). */
  border-bottom: 1px solid rgba(var(--schrift-auf-hell), 0.25);
}

.news-list-row:last-child {
  border-bottom: none;
}

.news-list-link {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 1.5rem 0;
  color: inherit;
  text-decoration: none;
}

/* Meta-Block links: Datum → Titel → Teaser. flex:1 + min-width:0
   erlaubt langem Text korrekten Umbruch neben dem Thumbnail. */
.news-list-meta {
  flex: 1 1 auto;
  min-width: 0;
}

.news-list-date {
  color: rgb(var(--akzent));
  font-size: 1.3rem;
  margin-bottom: 0.4rem;
  letter-spacing: 0.02em;
}

.news-list-title {
  margin: 0;
  font-size: 2.2rem;
  line-height: 1.25;
  font-weight: 300;
  transition: color 0.2s ease;
}

.news-list-teaser {
  margin: 0.4rem 0 0;
  font-size: 1.5rem;
  line-height: 1.5;
  opacity: 0.85;
}

/* Thumbnail rechts: 80×80 quadratisch, nutzt .bw-image-Standard.
   flex-shrink:0 verhindert Stauchung bei langen Titeln. */
.news-list-thumb {
  flex: 0 0 80px;
  width: 80px;
  height: 80px;
  object-fit: cover;
  display: block;
}

.news-list-link:hover .news-list-title {
  color: rgb(var(--akzent));
}

/* Mobil: Thumbnail komplett weg, damit der Text atmen kann
   und das Platzproblem aus den Kacheln nicht zurückkommt. */
@media (max-width: 549px) {
  .news-list {
    margin-top: 1.5rem;
  }
  .news-list-link {
    gap: 0;
    padding: 1.2rem 0;
  }
  .news-list-thumb {
    display: none;
  }
  .news-list-title {
    font-size: 2.0rem;
  }
}

/* Bildnachweis-Text (News-Archiv-Fußzeile). Ersetzt vormals inline
   "color: #888" in news-index.html. Naechstliegender Wert aus dem
   Farbsystem: SchriftAufHell/-Dunkel bei 60% Deckkraft trifft #888
   auf Hell1-Weiss praktisch exakt (≈ #898989) und bleibt auch auf
   Dunkel2 im Dark Mode als gedaempfter Sekundaertext lesbar. */
.photo-credit {
  color: rgba(var(--schrift-auf-hell), 0.6);
}


/* =================================================================
  10. Black & White Image (Filter)
   =================================================================
   Bilder in Galerie und News-Liste sind per Default Graustufen.
   Hover bzw. Touch entfärbt. Hover-Trigger über den gesamten
   .gallery-item-/.news-list-link-Anker — Hover auf Bild ODER
   Text aktiviert die Farbe.
   ================================================================= */

.bw-image {
  filter: grayscale(100%);
  transition: filter 0.5s ease;
}

.gallery-item:hover .bw-image,
.news-list-link:hover .bw-image {
  filter: none;
}

/* Touch-Geräte: ohne Hover gibt es kein Affordance-Signal,
   also wird der „aktivierte" Zustand zum Default. */
@media (hover: none) {
  .bw-image {
    filter: none;
  }
}


/* =================================================================
  11. Testimonials
   =================================================================
   Zitat-dominante Boxen, zweispaltig auf Desktop, einspaltig
   unter 750px. Footer (Foto + Name) bottom-aligned über
   margin-top: auto — alle Boxen enden visuell auf gleicher Höhe.
   ================================================================= */

/* Keine .testimonials-section mehr: die Sektion trägt jetzt — wie alle
   anderen Home-Module — ausschliesslich Struktur- und Farbklassen.
   Die Akzentfarbe der Überschrift kommt aus .u-full-width h2
   (Abschnitt 2). */

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.testimonial {
  display: flex;
  flex-direction: column;
  padding: 2rem 1.8rem;
  border-left: 3px solid rgb(var(--akzent));
  box-sizing: border-box;
  height: 100%;            /* füllt die Grid-Zelle komplett */
}

/* Zitatblock oben, mit Platz für das große Anführungszeichen. */
.testimonial-quote {
  position: relative;
  padding-left: 2.4rem;
  margin-bottom: 1.6rem;
}

.testimonial-mark {
  position: absolute;
  left: 0;
  top: -0.4rem;
  font-family: 'Raleway', sans-serif;
  font-size: 4.5rem;
  line-height: 1;
  color: rgb(var(--akzent));
  font-weight: 700;
}

.testimonial-text {
  font-size: 1.7rem;
  line-height: 1.45;
  margin: 0;
  font-style: italic;
}

/* Footer ans untere Ende der Box. margin-top: auto schiebt
   ihn nach unten, egal wie lang das Zitat ist. */
.testimonial-footer {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-top: auto;
  padding-left: 2.4rem;
}

.testimonial-photo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 64px;
  display: block;
  margin: 0;
}

.testimonial-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  min-width: 0;
}

.testimonial-meta strong {
  font-size: 1.5rem;
}

.testimonial-meta span {
  font-size: 1.2rem;
  opacity: 0.75;
  margin-top: 0.2rem;
}

/* Letzte Box bei ungerader Anzahl: über beide Spalten gespannt,
   mittig auf halbe Breite gehalten. */
.testimonial--solo {
  grid-column: 1 / -1;
  max-width: calc(50% - 1rem);
  justify-self: center;
}

/* Unter 750px einspaltig — ein Zitat pro Reihe. */
@media (max-width: 749px) {
  .testimonials-grid {
    grid-template-columns: 1fr;
  }
  .testimonial--solo {
    max-width: none;
    justify-self: stretch;
  }
}


/* =================================================================
  12. Buttons
   =================================================================
   .button-primary in TI-Grün statt Skeleton-Hellblau.
   .button-disabled für inaktiven Sprachumschalter im Header.
   ================================================================= */

.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
  color: rgb(var(--schrift-auf-akzent));
  background-color: rgb(var(--akzent));
  border-color: rgb(var(--akzent));
}

.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
  color: rgb(var(--schrift-auf-akzent));
  background-color: rgb(var(--akzent-hover));     /* etwas dunkler als --akzent */
  border-color: rgb(var(--akzent-hover));
}

/* Sprachumschalter, wenn keine gültige Übersetzung existiert
   (gerendert als <span class="button button-disabled"> in header.html). */
.button.button-disabled,
.button.button-disabled:hover,
.button.button-disabled:focus {
  /* Rahmen+Schrift = Boxlinien-Formel (SchriftAufHell, 25%), daher
     kein zusaetzliches opacity mehr (sonst doppelte Abschwaechung).
     Sitzt immer auf dem Akzent-gruenen Header, daher leicht gruenlicher
     Ton unabhaengig vom Farbschema — kein Dark-Mode-Sonderfall noetig. */
  cursor: not-allowed;
  pointer-events: none;
  background-color: transparent;
  border-color: rgba(var(--schrift-auf-hell), 0.25);
  color: rgba(var(--schrift-auf-hell), 0.25);
}


/* =================================================================
  13. About-Block (Homepage-Schlussbereich)
   =================================================================
   Foto + Text nebeneinander auf Desktop, gestapelt auf Mobil/Tablet.
   .about_t2 ist ein mobil verborgener Zusatz-Text-Block, der erst
   auf Desktop sichtbar wird; .about_t2copy ist die mobile Variante
   davon, die auf Desktop ausgeblendet wird (s. Page-Breakpoints).
   ================================================================= */

.about_pic {
  width: 100%;
  margin: 0;               /* Figure-Element bringt sonst Standard-Aussenabstand mit */
}

.about_pic img {
  width: 100%;
  display: block;
}

/* Caption unter dem Portraet (optional, ueber Frontmatter-Feld
   AboutPhotoCaption gesteuert). Erscheint nur, wenn das Feld gefuellt
   ist. Gleiche gedaempfte Optik wie .photo-credit. */
.about_pic_caption {
  margin-top: 0.5rem;
  font-size: 1.2rem;
  font-style: italic;
  text-align: center;
  color: rgba(var(--schrift-auf-hell), 0.6);
}

.about_t2 {
  display: none;
}

/* Basis-Zustand fuer .photo-overhang: ohne diese Zeilen existiert die
   Klasse unterhalb 768px nicht als positioniertes Element, wodurch beim
   Erreichen von 768px kein Ausgangswert fuer eine Transition vorhanden
   waere. position:relative + right:0 aendert visuell nichts. */
.photo-overhang {
  position: relative;
  right: 0;
}


/* =================================================================
  14. Page-spezifische Breakpoints
   =================================================================
   Schalter, die nicht zu einer einzelnen Komponente gehören
   (Navigation, Footer-Layout, About-Block, Sidebar ab 1740px).
   ================================================================= */

/* Altlast aus dem Original-Theme — bewusste Wirkung unklar,
   funktional unauffällig. Vor Entfernung gründlich layout-testen. */
@media (min-width: 480px) {
  .row {
    display: inline;
  }
}

@media (min-width: 768px) {
  footer .row {
    display: flex;
    align-items: flex-end;        /* nur Footer-Row, nicht alle */
  }

  .about_ti {
    display: flex;
    align-items: flex-end;        /* Foto unten bündig */
  }

  .about_ti p {
    margin: 0;
  }

  .about_t1 {
    order: 1;
  }

  .about_pic {
    order: 2;                     /* Foto rechts (nach Text1) */
    margin-left: 2rem;
  }

  .photo-overhang {
    position: relative;
    right: -60px;
  }

  .navbar .company-name {
    font-size: 2.4rem;
  }
}

@media (min-width: 1024px) {
  .hero-text {
    transform: translateY(-50%);
  }

  .navbar .company-name {
    font-size: 2.4rem;
  }

  .about_ti {
    flex: 2;
    display: flex;
  }

  .about_t2copy { display: none; }    /* Copy weg */
  .about_t2     { display: block; }   /* Original ein */
}

/* Sidebar-Layout ab 1740px: Navbar wird vertikal links angedockt,
   Footer wandert ebenfalls in die linke Sidebar. */
@media (min-width: 1740px) {
  .navbar,
  .navbar-bg {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 300px;
    height: 100vh;
    flex-direction: column;
    justify-content: flex-start;
  }

  .navbar .container {
    flex-direction: column;
    height: 34vh;
    align-items: flex-start;
    justify-content: center;           /* vertikal zentriert */
    gap: 1.5rem;
  }

  .navbar .company-name {
    order: -1;
    margin-left: 0;                    /* kein auto mehr */
    text-align: left;
  }

  .nav-left {
    order: 1;
  }

  body {
    margin-left: 300px;
  }

  .hero {
    left: -300px;
    width: calc(100% + 300px);
  }

  footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 300px;
    height: 66vh;
    z-index: 1000;
    background: transparent !important; /* überschreibt bg_dark */
    font-size: 1em;                    /* exakt Skeleton body */
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;         /* Text unten andocken */
  }

  footer .row {
    flex-direction: column;
    margin-top: auto;                  /* row ans untere Ende */
  }

  footer .container {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  footer .four.columns {
    width: 100%;
    margin-left: 0;
  }

  footer h3 {
    font-size: 1em;
    margin-bottom: 1.6em;
    text-transform: uppercase;
  }
}


/* =================================================================
  15. Smooth Breakpoint-Transitions (kein JS)
   =================================================================
   Werte, die sich an einem Breakpoint aendern, werden weich interpoliert
   statt zu springen. Rein CSS: die Transition wird auf dem Basis-Selektor
   deklariert (ausserhalb der Media Query) und greift automatisch, sobald
   eine Media Query eine der gelisteten Properties neu setzt.

   Abgedeckt (alle Zeilen aus der Vorschlags-Tabelle):
     .navbar / .navbar-bg   width, height        (1740px Sidebar-Wechsel)
     .navbar .container     height               (1740px, row->column)
     body                   margin-left           (1740px)
     .hero                  left, width           (1740px)
     .navbar .company-name  font-size             (768px)
     .about_pic             margin-left           (768px)
     .photo-overhang        right                 (768px)
     .hero-text             transform             (1024px, translateY)
     .gallery-item          aspect-ratio          (549px)
     .gallery-item img      height                (549px)

   Bewusst ausgenommen: footer (wechselt bei 1740px von position:static
   in den Dokumentfluss zu position:fixed — dieser Sprung des Layout-Modus
   ist mit reinem CSS grundsaetzlich nicht animierbar, ein Transitionieren
   von width/height allein wuerde nur ein unfertig wirkendes Zwischenbild
   erzeugen). Ebenso weiterhin hart: flex-direction- und order-Wechsel
   (.navbar .container, .about_ti, .nav-left) sowie display:none-Umschaltungen
   (.news-desktop/.news-mobile) — fuer diese Keyword-Werte kennt CSS keine
   Interpolation. z-index-Werte sind von alldem nicht betroffen.
   ================================================================= */

.navbar,
.navbar-bg,
.navbar .container,
.navbar .company-name,
.hero,
.hero-text,
.about_pic,
.photo-overhang,
.gallery-item,
.gallery-item img,
body {
  transition: width .3s ease, height .3s ease,
              left .3s ease, right .3s ease,
              margin-left .3s ease, margin-right .3s ease,
              font-size .3s ease, transform .3s ease,
              aspect-ratio .3s ease;
}

/* Barrierefreiheit: Nutzer mit Bewegungsreduktion bekommen harte Sprünge
   statt Animation (WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce) {
  .navbar,
  .navbar-bg,
  .navbar .container,
  .navbar .company-name,
  .hero,
  .hero-text,
  .about_pic,
  .photo-overhang,
  .gallery-item,
  .gallery-item img,
  body {
    transition: none;
  }
}


/* =================================================================
  16. Dark Mode Overrides
   =================================================================
   Die zehn Grundtöne aus Abschnitt 1 sind fest und werden hier NICHT
   mehr umdefiniert (anders als in früheren Versionen). Stattdessen
   verweist jede Komponente im Dark Mode explizit auf den jeweils
   richtigen Dunkel-/SchriftAufDunkel-Ton — pro Sektionsart wie in
   Abschnitt 1 dokumentiert (Inhaltssektion 1 → Dunkel2, Inhaltssektion
   2/.bg_light → Dunkel1, Footer/.bg_dark → Dunkel3). Header/.bg_accent
   hat keinen Dark-Mode-Eintrag, da er schemaunabhängig bleibt.
   Touch + Dark zusätzlich, weil farbiges Bild + grüner Rahmen + grüne
   Schrift kombiniert zu laut wirkt.
   ================================================================= */

@media (prefers-color-scheme: dark) {
  /* Ursprünglich weiße Bereiche (body, section ohne bg_*-Klasse) =
     Inhaltssektion 1 → Dunkel2. */
  body,
  section {
    background-color: rgb(var(--dunkel2));
    color: rgb(var(--schrift-auf-dunkel));
  }

  /* Früher stand hier eine .text-block-Ausnahme (background:transparent),
     weil .text-block im Light Mode selbst Hell1 setzte. Seit die Klasse
     farblos ist, ist die Ausnahme gegenstandslos — .text-block erbt
     Hintergrund und Textfarbe von seiner Sektion. */

  /* Inhaltssektion 2 (.bg_light) → Dunkel1. */
  .bg_light {
    background-color: rgb(var(--dunkel1));
    color: rgb(var(--schrift-auf-dunkel));
  }

  /* Footer (.bg_dark) → Dunkel3. */
  .bg_dark {
    background-color: rgb(var(--dunkel3));
  }

  /* Box-Rahmen im Dark Mode: TI-Grün statt der Boxlinien-Formel
     (bewusste Ausnahme, siehe Abschnitt 1). */
  .gallery-item {
    border-color: rgb(var(--akzent));
  }

  /* News-Trennlinie folgt weiterhin der Boxlinien-Formel, nur mit
     dem Dark-Mode-Text-Ton. */
  .news-list-row {
    border-bottom-color: rgba(var(--schrift-auf-dunkel), 0.25);
  }

  /* Bildnachweis-Text: gleiche 60%-Deckkraft, nur mit
     Dark-Mode-Text-Ton statt SchriftAufHell. */
  .photo-credit {
    color: rgba(var(--schrift-auf-dunkel), 0.6);
  }

  /* Portraet-Caption im About-Block: gleiche 60%-Deckkraft,
     nur mit Dark-Mode-Text-Ton statt SchriftAufHell. */
  .about_pic_caption {
    color: rgba(var(--schrift-auf-dunkel), 0.6);
  }

  /* Standard-Links: SchriftAufDunkel, Hover → Akzent. */
  a {
    color: rgb(var(--schrift-auf-dunkel));
    border-bottom-color: rgb(var(--schrift-auf-dunkel));
  }

  a:hover {
    color: rgb(var(--akzent));
    border-bottom-color: rgb(var(--akzent));
  }

  /* di-warning-Icon: Light Mode nutzt SchriftAufHell, das im Dark Mode
     kaum lesbar wäre. Hier explizit auf SchriftAufDunkel. */
  .di-warning::before {
    color: rgb(var(--schrift-auf-dunkel));
  }

  /* Testimonial-Border bleibt Akzent. */
  .testimonial {
    border-left-color: rgb(var(--akzent));
  }
}

/* Dark Mode + Touch: Bilder bleiben farbig (vom hover:none-Block),
   aber Rahmen und Schrift kehren zu Weiß zurück — sonst zu laut. */
@media (hover: none) and (prefers-color-scheme: dark) {
  .gallery-item {
    border-color: rgb(var(--schrift-auf-dunkel));
  }
  .gallery-item,
  .gallery-item .caption,
  .gallery-item .caption-text,
  .gallery-item .caption-date,
  .gallery-item strong,
  .gallery-item p {
    color: rgb(var(--schrift-auf-dunkel));
  }
}