/* =====================================================================
   style.css – KSK Objektservice
   Projekteigene Stile, ergaenzend zu assets/css/tw.css
   ---------------------------------------------------------------------
   Gegenueber dem bisherigen Stand entfernt:
     - .page-impressumksenergy / .page-datenschutzksenergy
       (tote Selektoren aus dem Ursprungsprojekt; die Seiten heissen im
       KSK-Projekt anders)
     - der Cookie-Banner-Ausblender fuer "rcb"-Container – KSK bindet
       keinen Cookie-Dienst ein
   ===================================================================== */

/* ---------------------------------------------------------------------
   Markenfarben – direkt aus dem Firmenlogo entnommen
   ---------------------------------------------------------------------
   Bisher nutzte die Website ein helleres Gruen (#39B54A), das nicht dem
   Logo entsprach. Es erreichte gegen Weiss nur 2.66:1 Kontrast und war
   damit fuer Linktext zu schwach (die Barrierefreiheitsrichtlinie WCAG
   verlangt 4.5:1).

   Das Logo-Gruen ist satter und kontraststaerker. Fuer Linktext wird ein
   minimal abgedunkelter Ton verwendet, der die 4.5:1 sicher erreicht –
   optisch ist der Unterschied zum Logo-Gruen nicht wahrnehmbar.
   --------------------------------------------------------------------- */
:root {
  --green-accent:      #0C8A42;  /* Logo-Gruen, fuer Flaechen und Akzente */
  --green-accent-dark: #0A7238;  /* abgedunkelt, fuer Hover-Zustaende     */
  --green-text:        #0B8140;  /* Linktext, 4.97:1 gegen Weiss          */
  --navy:              #022D5A;  /* Marineblau der Wortmarke              */
  --gear-grey:         #909497;  /* Grau des Zahnrads                     */
  --ink: #333;
}

html {
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Nutzer mit reduzierter Bewegungspraeferenz respektieren */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background-color: #fff;
  color: var(--ink);
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------------------------------------------------------------------
   Sprungmarke: nur sichtbar, wenn sie per Tastatur fokussiert wird
   --------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: #fff;
  color: var(--ink);
  font-weight: 600;
  border: 2px solid var(--green-accent);
  border-radius: 0 0 0.375rem 0;
}
.skip-link:focus {
  left: 0;
}

/* ---------------------------------------------------------------------
   Sichtbarer Fokus – Voraussetzung fuer Tastaturbedienung
   --------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--green-accent);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   Navigation
   --------------------------------------------------------------------- */
header { background-color: #fff; }

nav a { text-decoration: none; }
nav a:hover { color: var(--green-accent); }

/* Markenname im Header.
   Der Schriftzug braucht rund 230 px. Zusammen mit Menue-Button und
   Sprachumschalter passt das erst ab etwa 640 px Displaybreite. Darunter
   wird er stufenweise verkleinert und auf sehr schmalen Geraeten ganz
   ausgeblendet – das Logo bleibt als Link zur Startseite bestehen und
   traegt den Markennamen im alt-Attribut. */
.brand-name {
  font-size: 1.5rem;
  line-height: 2rem;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .brand-name { font-size: 1.125rem; line-height: 1.5rem; }
  header .max-w-7xl { padding-left: 0.75rem; padding-right: 0.75rem; }
}

@media (max-width: 460px) {
  .brand-name {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
  header img { height: 2.25rem; }
}

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.custom-btn,
.btn-green {
  background-color: var(--green-accent);
  color: #000 !important;
  display: inline-block;
  text-decoration: none;
  font-weight: 600;
  transition: background-color 0.2s ease;
  cursor: pointer;
  border: 2px solid var(--green-accent);
}
.custom-btn:hover,
.btn-green:hover {
  background-color: var(--green-accent-dark);
  border-color: var(--green-accent-dark);
}

/* Sekundaerer Button auf hellem Grund */
.btn-outline {
  display: inline-block;
  text-decoration: none;
  font-weight: 600;
  color: var(--ink);
  background-color: transparent;
  border: 2px solid var(--ink);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.btn-outline:hover {
  background-color: var(--ink);
  color: #fff;
}

/* Sekundaerer Button auf dunklem Grund */
.btn-outline-light {
  display: inline-block;
  text-decoration: none;
  font-weight: 600;
  color: #fff;
  background-color: transparent;
  border: 2px solid #fff;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.btn-outline-light:hover {
  background-color: #fff;
  color: #111;
}

.btn-white-text { color: #fff !important; }

/* ---------------------------------------------------------------------
   Akzente
   --------------------------------------------------------------------- */
.green-accent      { background-color: var(--green-accent); }
.text-green-accent { color: var(--green-text); }  /* erfuellt 4.5:1 gegen Weiss */
.border-left-accent { border-left: 3px solid var(--green-accent); }
.border-top-accent  { border-top: 2px solid #333; }

.section-title {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #004080;
}

/* ---------------------------------------------------------------------
   Seitenspezifische Abstaende
   --------------------------------------------------------------------- */
.page-index main   { padding-bottom: 0 !important; }
.page-index footer { margin-top: 0 !important; }

.page-kontaktksk main,
.page-en-kontaktksk main,
.page-impressumksk main,
.page-en-impressumksk main,
.page-datenschutzksk main,
.page-en-datenschutzksk main { padding-bottom: 4rem; }

/* ---------------------------------------------------------------------
   Formulare
   --------------------------------------------------------------------- */
/* Honeypot: fuer Menschen unsichtbar, fuer Bots im DOM vorhanden.
   Bewusst nicht display:none – manche Bots ignorieren solche Felder. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Fehlerzustand erst zeigen, NACHDEM der Nutzer das Feld bearbeitet hat.
   ':invalid' allein wuerde leere Pflichtfelder schon beim Seitenaufruf
   rot umranden – das wirkt wie ein Fehler, den niemand gemacht hat. */
input:user-invalid,
textarea:user-invalid,
select:user-invalid {
  border-color: #dc2626;
}

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

/* ---------------------------------------------------------------------
   FAQ-Akkordeon
   --------------------------------------------------------------------- */
.faq-question { cursor: pointer; }
.faq-question svg { transition: transform 0.15s ease; }

/* ---------------------------------------------------------------------
   Hero der Startseite
   ---------------------------------------------------------------------
   Das Hintergrundmotiv wird per background-size: cover beschnitten. Die
   Position ist bewusst nicht mittig, sondern etwas oberhalb: So bleibt
   bei schmalen, breiten Ausschnitten der arbeitende Mensch im Bild und
   nicht nur der Bodenbelag.

   Der Schleier daruueber ist ein Verlauf statt einer gleichmaessigen
   Flaeche – dadurch bleibt das Foto an den Raendern sichtbar, waehrend
   hinter dem Text genug Deckung fuer gute Lesbarkeit bleibt.
   --------------------------------------------------------------------- */
.ksk-hero {
  background-image: url('/Pictures/hero-ksk.webp');
  background-position: center 26%;
}

.ksk-hero-veil {
  background:
    radial-gradient(ellipse 62% 78% at 50% 48%,
      rgba(255, 255, 255, 0.90) 0%,
      rgba(255, 255, 255, 0.84) 55%,
      rgba(255, 255, 255, 0.58) 82%,
      rgba(255, 255, 255, 0.46) 100%);
}

@media (max-width: 767px) {
  /* Auf schmalen Displays deckt der Text fast die ganze Breite –
     dort braucht es einen gleichmaessigeren Schleier. */
  .ksk-hero-veil { background: rgba(255, 255, 255, 0.88); }
  .ksk-hero { background-position: center 24%; }
}

@media (max-width: 640px) {
  /* Ohne Straffung fuellt der Hero auf dem Handy den kompletten
     Bildschirm – der Besucher saehe dann keinen Hinweis darauf, dass
     darunter weitere Inhalte folgen. */
  .ksk-hero { padding-top: 2rem; padding-bottom: 2rem; }
  .ksk-hero h1 { font-size: 1.6rem; line-height: 2.05rem; }
  .ksk-hero .text-lg { font-size: 1rem; line-height: 1.55rem; }
}

/* ---------------------------------------------------------------------
   Zitat-Block (Ueber-uns-Seite)
   --------------------------------------------------------------------- */
.ksk-quote {
  margin: 0;
  padding: 1.5rem 1.75rem;
  background: #fff;
  border-left: 4px solid var(--green-accent);
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  font-style: italic;
}
.ksk-quote p { margin: 0 0 0.75rem; }
.ksk-quote footer { font-style: normal; }

/* ---------------------------------------------------------------------
   Bildpaar im Hochformat (Ueber-uns-Seite)
   ---------------------------------------------------------------------
   Die Originalaufnahmen sind hochformatig. Ohne Begrenzung wuerden zwei
   nebeneinander stehende Bilder rund 900 px Hoehe einnehmen und die
   Seite unnoetig in die Laenge ziehen. Ein festes Seitenverhaeltnis mit
   object-fit haelt das Paar kompakt und optisch gleich hoch.
   --------------------------------------------------------------------- */
.ksk-photo-pair img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}

@media (min-width: 768px) {
  .ksk-photo-pair img { aspect-ratio: 3 / 4; max-height: 30rem; }
}

/* ---------------------------------------------------------------------
   Bilder: nie ueber die Spaltenbreite hinauslaufen
   --------------------------------------------------------------------- */
img { max-width: 100%; height: auto; }

/* ---------------------------------------------------------------------
   Preloader – standardmaessig aus
   --------------------------------------------------------------------- */
#preloader { display: none; }
#preloader.is-active {
  display: block;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #fff;
  z-index: 9999;
}
.preloader-hidden { display: none !important; }

/* ---------------------------------------------------------------------
   Druckausgabe
   --------------------------------------------------------------------- */
@media print {
  header, footer, .skip-link, .btn-green, .btn-outline, .btn-outline-light { display: none !important; }
  main { padding-top: 0 !important; }
  body { background: #fff; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}

/* =====================================================================
   MODERNES KARTEN- UND SEKTIONSSYSTEM
   ---------------------------------------------------------------------
   Ausgangslage: Die Leistungsbloecke standen in grauen Kaesten mit
   hartem gruenem Balken links, scharfen Ecken und einem kraeftigen
   Schatten. Das wirkt schwer und gedraengt.

   Neue Gestaltungsregeln, abgeleitet aus der Markenbotschaft
   "moderner, frischer, offener":

     1. Weissraum statt Rahmen. Trennung entsteht durch Abstand,
        nicht durch Linien. Wo eine Karte noetig ist, traegt sie nur
        eine sehr feine Kontur und einen weichen, tiefen Schatten.
     2. Grosszuegige Radien (16 px) und Innenabstaende (32 px).
     3. Die Akzentfarbe erscheint punktuell – im Icon-Kreis, in der
        Auszeichnungszeile, im Haken der Liste – nicht als Balken.
     4. Bilder werden gleichberechtigte Inhaltstraeger: grossformatig,
        gerundet, im Wechsel links/rechts neben dem Text.

   Alle Klassen sind projekteigen. Sie sind bewusst NICHT als
   Tailwind-Utilities gebaut, weil tw.css ein statischer, bereinigter
   Build ist – neue Utilities muessten dort von Hand nachgetragen
   werden, waehrend diese Datei frei erweiterbar ist.
   ===================================================================== */

/* --- Sektionen: ruhiger Rhythmus, weiche Toenung ------------------- */
.ksk-section        { padding: 4.5rem 1rem; }
.ksk-section--tint  { background: #F5F8F6; }   /* minimal gruenstichiges Neutral */
.ksk-section--white { background: #fff; }

@media (max-width: 640px) {
  .ksk-section { padding: 3rem 1rem; }
}

.ksk-wrap       { max-width: 72rem; margin: 0 auto; }
/* Nur fuer den Leistungskatalog: drei Karten mit langen Aufzaehlungen
   brauchen mehr Zeilenlaenge, sonst bricht der Text nach vier Woertern um. */
.ksk-wrap--wide { max-width: 82rem; margin: 0 auto; }
.ksk-wrap--slim { max-width: 52rem; margin: 0 auto; }

/* Auszeichnungszeile ueber einer Ueberschrift */
.ksk-eyebrow {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-text);
  margin-bottom: 0.75rem;
}

.ksk-h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2rem);
  line-height: 1.25;
  font-weight: 700;
  color: #111827;
  margin: 0 0 1rem;
  letter-spacing: -0.01em;
}

.ksk-lede {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: #4B5563;
  margin: 0 0 2.5rem;
  max-width: 46rem;
}
.ksk-lede--center { margin-left: auto; margin-right: auto; text-align: center; }

/* --- Karte -------------------------------------------------------- */
.ksk-card {
  background: #fff;
  border: 1px solid rgba(2, 45, 90, 0.07);
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04),
              0 8px 24px -12px rgba(16, 24, 40, 0.14);
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  height: 100%;
}
/* Anhebung nur, wo die Karte tatsaechlich klickbar oder relevant ist –
   ein Hover-Effekt auf reinem Fliesstext waere Dekoration ohne Aussage. */
.ksk-card:hover {
  border-color: rgba(12, 138, 66, 0.25);
  box-shadow: 0 2px 4px rgba(16, 24, 40, 0.05),
              0 18px 40px -18px rgba(16, 24, 40, 0.22);
  transform: translateY(-2px);
}

@media (max-width: 640px) {
  .ksk-card { padding: 1.5rem; border-radius: 0.875rem; }
}

.ksk-card__title {
  font-size: 1.1875rem;
  font-weight: 650;
  line-height: 1.35;
  color: #111827;
  margin: 0 0 0.75rem;
}
.ksk-card__text  { color: #4B5563; line-height: 1.65; margin: 0 0 0.5rem; }
.ksk-card__meta  { color: #6B7280; font-size: 0.875rem; line-height: 1.6; margin: 0; }

/* Icon im getoenten Kreis – die Akzentfarbe punktuell statt flaechig */
.ksk-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  background: rgba(12, 138, 66, 0.10);
  color: var(--green-accent);
  margin-bottom: 1.25rem;
}
.ksk-card__icon svg { width: 1.375rem; height: 1.375rem; }

/* --- Raster ------------------------------------------------------- */
/* auto-fit statt fester Spaltenzahl: passt sich jeder Breite an, ohne
   dass fuer jede Stufe eine eigene Utility-Klasse noetig waere. */
.ksk-grid {
  display: grid;
  gap: 1.5rem;
  /* 16rem, damit vier Karten in eine Zeile passen (4x16 + 3x1.5 = 68.5rem).
     Bei 17rem blieb die vierte Karte allein in einer zweiten Zeile stehen. */
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.ksk-grid--wide {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
}

/* --- Haken-Liste statt Aufzaehlungspunkten ------------------------ */
.ksk-check {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ksk-check li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.625rem;
  color: #4B5563;
  line-height: 1.6;
}
.ksk-check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.75rem;
  height: 0.4rem;
  border-left: 2px solid var(--green-accent);
  border-bottom: 2px solid var(--green-accent);
  transform: rotate(-45deg);
}
.ksk-check li:last-child { margin-bottom: 0; }

/* --- Bild/Text im Wechsel ----------------------------------------- */
.ksk-split {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 900px) {
  .ksk-split { grid-template-columns: 1fr 1fr; gap: 4rem; }
  /* Jede zweite Reihe spiegeln – das Bild wandert nach rechts.
     Ohne diesen Wechsel entsteht eine monotone Kante. */
  .ksk-split--flip .ksk-split__media { order: 2; }
}
.ksk-split + .ksk-split { margin-top: 5rem; }

@media (max-width: 640px) {
  .ksk-split + .ksk-split { margin-top: 3rem; }
}

/* --- Bilder ------------------------------------------------------- */
.ksk-figure {
  margin: 0;
  border-radius: 1rem;
  overflow: hidden;
  background: #EEF2F0;
  box-shadow: 0 18px 40px -20px rgba(16, 24, 40, 0.35);
}
.ksk-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ksk-figure--4x3 img { aspect-ratio: 4 / 3; }
.ksk-figure--3x2 img { aspect-ratio: 3 / 2; }
.ksk-figure--1x1 img { aspect-ratio: 1 / 1; }

/* Zwei Aufnahmen als Paar: eine grosse, eine kleine versetzt.
   Erzeugt Bewegung, ohne dass ein zweites Motiv gleich viel Raum
   beansprucht wie das Hauptbild. */
.ksk-figure-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.ksk-figure-duo .ksk-figure:first-child { grid-column: span 2; }

/* Zwei Aufnahmen untereinander – wenn kein drittes passendes Motiv
   vorliegt. Besser als ein wiederholtes Bild aus einem anderen Abschnitt. */
.ksk-figure-stack { display: grid; gap: 1rem; }

/* Motiv, dessen Bildaussage im unteren Drittel liegt (arbeitende Person
   am Boden). Ohne Verschiebung schneidet der Ausschnitt sie weg. */
.ksk-figure--focus-low img  { object-position: center 68%; }
.ksk-figure--focus-high img { object-position: center 32%; }

/* --- Bilderstreifen ----------------------------------------------- */
.ksk-gallery {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.ksk-gallery figure { margin: 0; }
.ksk-gallery figcaption {
  font-size: 0.8125rem;
  color: #6B7280;
  margin-top: 0.5rem;
}

/* --- Feiner Trenner statt harter Linie ---------------------------- */
.ksk-rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(to right,
              rgba(2, 45, 90, 0) 0%,
              rgba(2, 45, 90, 0.14) 20%,
              rgba(2, 45, 90, 0.14) 80%,
              rgba(2, 45, 90, 0) 100%);
}

/* --- Kurzer Fakten-/Merkmalstreifen ------------------------------- */
.ksk-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
}
.ksk-pills li {
  font-size: 0.8125rem;
  color: #2F4858;
  background: rgba(12, 138, 66, 0.08);
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
}

/* --- Textlink mit Pfeil ------------------------------------------- */
.ksk-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  color: var(--green-text);
  text-decoration: none;
}
.ksk-arrow-link:hover { text-decoration: underline; }
.ksk-arrow-link::after { content: "\2192"; transition: transform 0.2s ease; }
.ksk-arrow-link:hover::after { transform: translateX(3px); }

/* --- Abschluss-Aufforderung --------------------------------------- */
.ksk-cta-band {
  background: linear-gradient(135deg, #022D5A 0%, #04406F 100%);
  border-radius: 1.25rem;
  padding: 3rem 2rem;
  text-align: center;
  color: #fff;
}
/* Lange, ungetrennte Komposita (z. B. "Verkehrssicherungspflicht") liefen auf
   schmalen Viewports sonst über den Rand der Box hinaus, weil sie kein
   natuerliches Trennzeichen enthalten. */
.ksk-cta-band h2 { color: #fff; margin-top: 0; overflow-wrap: break-word; hyphens: auto; }
.ksk-cta-band p  { color: rgba(255, 255, 255, 0.85); max-width: 40rem; margin: 0 auto 2rem; }

@media (max-width: 640px) {
  .ksk-cta-band { padding: 2.25rem 1.25rem; border-radius: 1rem; }
}

.ksk-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}