/* ==================================================================
   Steuerkanzlei Karsten Wagner – Basis-Stylesheet
   Statische Website, keine Laufzeit-Bibliotheken.
   Aufbau:  1 Grundlagen · 2 Schalter · 3 Hover/Fokus · 4 Mobil
   ================================================================== */

/* ---- 1. Grundlagen ---------------------------------------------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Source Sans 3', system-ui, -apple-system, Segoe UI, sans-serif;
  color: #1a2236;
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: #1e2b4d; text-decoration: none; }
a:hover { color: #a9803f; }
img, iframe { max-width: 100%; }
img { height: auto; }
button { font-family: inherit; }

/* Sprungmarken nicht unter der festen Kopfzeile verstecken */
[id] { scroll-margin-top: 92px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---- 2. Schalter (ersetzen die frueheren sc-if-Zweige) ---------- */
.kw-host { display: contents; }
.kw-if { display: contents; }
.kw-if[hidden] { display: none !important; }

.kw-desktop { display: contents; }
.kw-mobile  { display: none; }
@media (max-width: 879px) {
  .kw-desktop { display: none; }
  .kw-mobile  { display: contents; }
}

/* Skip-Link fuer Tastatur- und Screenreader-Nutzung */
.kw-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: #ffffff; color: #1e2b4d; font-weight: 600;
  padding: 12px 20px; border: 2px solid #a9803f;
}
.kw-skip:focus { left: 8px; top: 8px; }

/* ---- 3. Hover- und Fokus-Zustaende ------------------------------ */
.hvrhnicr:hover { color: rgb(255, 255, 255); }
.hv1ivi19b:hover { background: rgba(255, 255, 255, 0.14); border-color: rgb(255, 255, 255); color: rgb(255, 255, 255); }
.hv80ez3m:hover { background: rgb(239, 230, 214); color: rgb(30, 43, 77); }
.hv1ybexy5:hover { color: rgb(198, 154, 91); }
.hvrzx07q:hover { border-color: rgb(169, 128, 63); box-shadow: rgba(20, 33, 60, 0.1) 0px 10px 26px; }
.hv1cnziez:hover { color: rgb(169, 128, 63); }
.hv1a1ngs4:hover { background: rgb(22, 33, 60); color: rgb(255, 255, 255); }
.hvpnr9vb:hover { background: rgb(30, 43, 77); border-color: rgb(30, 43, 77); color: rgb(255, 255, 255); }
.hv8gj6ai:hover { background: rgb(244, 245, 247); color: rgb(30, 43, 77); }
.hv1vll1qt:hover { opacity: 0.82; }
.hvapbpj:hover { box-shadow: rgba(20, 33, 60, 0.12) 0px 14px 30px; border-top-color: rgb(169, 128, 63); }
.hv5lpj5d:hover { box-shadow: rgba(20, 33, 60, 0.14) 0px 14px 32px; border-color: rgb(230, 217, 191); }
.hv9qhxev:hover { box-shadow: rgba(0, 0, 0, 0.22) 0px 14px 34px; }
.hv1ggd5af:focus { border-color: rgb(169, 128, 63); outline: none; }
.hv11a4bl4:hover { background: rgb(22, 33, 60); }
.hvo14xd6:hover { border-color: rgb(30, 43, 77); color: rgb(30, 43, 77); }
.hv14azv2y:hover { border-color: rgb(30, 43, 77); }

/* Sichtbarer Fokusring fuer Tastaturbedienung */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #a9803f;
  outline-offset: 2px;
}
input:focus-visible, textarea:focus-visible { outline-offset: 0; }

/* Fehlermeldungen in Formularen */
.kw-err:empty { display: none !important; }

/* Fussleiste: "Design & Umsetzung" / "Gaertner-Marketing" neben dem Logo.
   Am Desktop rechtsbuendig an das Logo geschoben, auf dem Handy
   linksbuendig wie die Zeilen darueber. */
.kw-credit { align-items: flex-end; }
@media (max-width: 879px) { .kw-credit { align-items: flex-start; } }

/* Zustand "wird gesendet" */
button[disabled] { opacity: .6; cursor: default; }

/* ---- 4. Mobile Darstellung -------------------------------------- */

/* Touch-Ziele: Kopfzeilen-Links und Schaltflaechen gross genug */
@media (max-width: 879px) {

  /* Inhaltsspalten: schmalere Seitenraender */
  .kw-wrap { padding-left: 18px !important; padding-right: 18px !important; }

  /* Grosse Abstaende oben/unten kuerzen */
  .kw-pad { padding-top: 52px !important; padding-bottom: 52px !important; }

  /* Zweispaltige Fixraster (z. B. Eckdaten der Stellen) einspaltig */
  .kw-grid2 { grid-template-columns: 1fr !important; gap: 2px 0 !important; }
  .kw-grid2 > :nth-child(odd) { font-weight: 600; }

  /* Grosse Spaltenabstaende reduzieren */
  .kw-gap { gap: 26px !important; }

  /* Flex-Spalten mit grosser Wunschbreite duerfen schrumpfen */
  .kw-flexshrink { min-width: 0 !important; }

  /* Kein mitlaufendes Bild im Fliesstext */
  .kw-sticky { position: static !important; top: auto !important; }

  /* Hohe Bilder und Karten kuerzen */
  .kw-tall { height: 250px !important; }
  .kw-minh { min-height: 360px !important; }

  /* Hero-Verlauf senkrecht, damit die Schrift lesbar bleibt */
  .kw-heroveil {
    background: linear-gradient(180deg, rgba(18,27,48,.90) 0%, rgba(18,27,48,.78) 55%, rgba(18,27,48,.92) 100%) !important;
  }

  /* Kachelreihe, die auf dem Desktop eingerueckt steht */
  .kw-w75 { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }

  /* Handlungsaufforderungen: Schaltflaechen links und nebeneinander */
  .kw-cta { justify-content: flex-start !important; gap: 10px !important; }
  .kw-cta > a {
    flex: 1 1 0 !important; min-width: 0 !important;
    justify-content: center !important; white-space: nowrap !important;
    padding-left: 12px !important; padding-right: 12px !important;
    font-size: 14px !important; gap: 8px !important;
  }

  /* Schaltflaechen duerfen umbrechen statt zu ueberlaufen */
  .kw-btn { max-width: 100%; white-space: normal; }

  /* iOS zoomt bei Schriftgroessen unter 16px in Formularfelder */
  input, textarea, select { font-size: 16px !important; }
  button { font-size: 15px; }

  /* Formularfelder und Knoepfe mit ausreichender Hoehe */
  input:not([type=checkbox]), textarea, select { min-height: 46px; }
  button { min-height: 44px; }

  /* Schrittanzeige der Bewerbung: Beschriftungen ausblenden,
     damit die drei Kreise nebeneinander passen */
  [data-step-label] { display: none !important; }
}

/* Sehr schmale Geraete (iPhone SE und aehnlich) */
@media (max-width: 400px) {
  .kw-wrap { padding-left: 14px !important; padding-right: 14px !important; }
  .kw-cta > a svg { display: none !important; }
  .kw-cta > a { font-size: 13.5px !important; padding-left: 10px !important; padding-right: 10px !important; }
}

/* Druckansicht: Kopf-/Fusszeile und Bedienelemente weglassen */
@media print {
  header, footer, .kw-mobile, [data-act] { display: none !important; }
  body { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; }
}

/* Abschlusskorrekturen: Lesbarkeit, mobile Fusszeile und Formularzustände */
main h1, main h2, main h3 { overflow-wrap: break-word; }
main p, footer a { overflow-wrap: anywhere; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: #b23b3b !important; }
.kw-honeypot { display: none !important; }
.kw-noscript { max-width: 820px; margin: 24px auto; padding: 20px 24px; background: #f8f6f1; line-height: 1.7; }
.kw-noscript a { text-decoration: underline; }
#mobile-menu > div { max-height: calc(100dvh - 74px); overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 600px) {
  .kw-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 30px 24px !important; }
  .kw-footer-grid > :nth-child(1), .kw-footer-grid > :nth-child(2), .kw-footer-grid > :nth-child(5) { grid-column: 1 / -1; }
  .kw-footer-grid > div { min-width: 0 !important; }
  .kw-hero-actions > a { min-height: 48px; }
}

/* Lange Leistungs- und Stellenbezeichnungen auf kleinen Handys */
[data-act^="toggle"] > span:first-child,
[data-act^="toggle"] > span:first-child > span:last-child,
.kw-job-card > div { min-width: 0; }
[data-act^="toggle"] > span:first-child > span:last-child,
.kw-job-card h3 { overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 400px) {
  .kw-job-card { gap: 12px !important; padding-left: 20px !important; padding-right: 20px !important; }
}

main h1, main h2, main h3 { hyphens: auto; }