/*
  collabatwork.ch – style.css

  Diese Datei enthält absichtlich WENIG. Fast alle Stile stehen inline im
  Markup, damit die Seiten ohne eine zweite Netzanfrage dargestellt werden.
  Hierher kommt nur, was inline nicht möglich ist:

     1. Grundlagen (Zurücksetzen, Schrift, Farben des Dokuments)
     2. das mobile Menü
     3. Zustände beim Überfahren mit der Maus
     4. Entwurfsband (derzeit unbenutzt)
     5. die Rechtsseiten (Impressum, Datenschutz, AGB)
     6. Umbrüche für schmale Geräte
     7. Aufzählungspunkte in den Angeboten
     8. Angebots-Zeitachse
     9. aufklappbare Details im Angebot
    10. Doppelspalten auf schmalen Geräten
    11. Faktenleiste über der Zeitachse

  Farben, die überall vorkommen:
    #FAF7F2  Sand, Hintergrund          #1A1917  Text und dunkle Flächen
    #3D3B36  Fliesstext                 #5C5A54  leiser Fliesstext, Wegweiser
    #8E8B84  Nebenangaben               #E2DDD4  Haarlinien
    #C4653A  Signalfarbe der Marke      #A34E29  dieselbe, dunkler für Text
    #F2E9DF  Beige, Abschnitt «Über mich»

  Es wird keine Schrift nachgeladen. Die Seite nutzt die Systemschrift des
  Geräts – San Francisco, Segoe UI oder Roboto. Das ist eine bewusste
  Entscheidung: keine Verbindung zu Google, sofortige Darstellung, und der
  Datenschutztext kommt ohne Abschnitt zu externen Schriften aus.

  Umbruchpunkte: 1000px (Faktenleiste 2 × 2), 860px (Menü), 700px (Spalten
  werden zu Zeilen, Zeitachse kompakt), 560px (Faktenleiste einspaltig).
*/

/* --- 1. Grundlagen ----------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: #FAF7F2;
  color: #1A1917;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: #1A1917; }
a:hover { color: #C4653A; }
img { display: block; max-width: 100%; }
::selection { background: #F1D9CC; }
input:focus, select:focus, textarea:focus { outline: 2px solid #C4653A; outline-offset: -2px; }
[hidden] { display: none !important; }

/* --- 2. Mobiles Menü ---------------------------------------------------
   Unter 860px verschwindet die Navigation und der Menüknopf erscheint. Der
   Sprachknopf bleibt daneben sichtbar (siehe unten, .cw-lang-mob) – er gehört
   bewusst NICHT ins Menü, weil ein Sprachwechsel auffindbar sein muss. */
.cw-mob { display: none; }
.cw-mob.open { display: flex; }
@media (max-width: 860px) {
  .cw-nav { display: none !important; }
  .cw-burger { display: flex !important; }
}

/* --- 3. Zustände beim Überfahren ---------------------------------------
   Die Auswahl über [style*="…"] sieht ungewöhnlich aus, hat aber einen Grund:
   die Elemente tragen ihre Stile inline und haben keine Klassen. Wird ein
   inline-Stil im Markup geändert, muss die entsprechende Regel hier
   mitgeändert werden – sonst greift der Hover-Zustand nicht mehr. */
header .cw-nav a:hover { color: #1A1917; }
a[style*="background:#C4653A"]:hover { background: #A9542F !important; }
a[style*="border:1px solid #D8D2C7"]:hover { border-color: #1A1917 !important; }
a[style*="border-right:1px solid #E2DDD4"]:hover,
a[style*="padding:20px 0 20px"]:hover { background: #fff; }
button[type=submit]:hover { background: #C4653A !important; }
.cw-burger:hover { border-color: #1A1917; }

/* Kontakt-Knopf im Menü (.cw-cta): wird beim Überfahren dunkles Rostrot
   (#A9542F) wie alle rostroten Knöpfe. Die Markierung des aktiven Menüpunkts setzt
   site.js, Abschnitt 4, inline. */
.cw-nav .cw-cta:hover { background: #A9542F !important; color: #fff !important; }

/* --- 4. Entwurfsband -----------------------------------------------------
   Wird derzeit nicht verwendet (die Seite ist live). Die Regeln bleiben
   stehen, falls die Seite für einen Umbau nochmals als Entwurf gekennzeichnet
   werden soll: dazu <div class="draft"><b>Entwurf</b><span>…</span></div> als
   erstes Element im <body> jeder Seite einsetzen. */
.draft {
  background: #1A1917; color: #B8B4AC;
  padding: 9px 24px; display: flex; gap: 12px; align-items: baseline;
  justify-content: center; flex-wrap: wrap; font-size: 13px; line-height: 1.5;
}
.draft b { color: #C4653A; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; font-size: 11px; }

/* --- 5. Rechtsseiten -----------------------------------------------------
   Impressum, Datenschutz, AGB und deren englische Fassungen. Diese Seiten
   nutzen als einzige echte CSS-Klassen statt inline-Stilen, weil sie viel
   Fliesstext mit immer gleicher Auszeichnung enthalten.
   Textbreite 680px (rund 70 Zeichen pro Zeile), Logo oben als Link zur
   Startseite (.brand), .nb verhindert Umbrüche in Nummern wie der UID. */
.legal { max-width: 680px; margin: 0 auto; padding: clamp(28px,5vw,44px) clamp(20px,5vw,28px) clamp(66px,11vw,100px); }
.legal .brand { display: flex; width: fit-content; align-items: center; gap: 10px; text-decoration: none; color: #1A1917; margin-bottom: clamp(36px,6vw,56px); }
.legal .brand span { font-size: 19px; font-weight: 600; letter-spacing: -.025em; }
.legal .brand span span { color: #C4653A; }
.legal h1 { font-size: clamp(2rem,5vw,3rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.08; margin: 22px 0 34px; }
.legal h2 { font-size: 1.12rem; font-weight: 700; color: #1A1917; letter-spacing: -.01em; margin-bottom: 8px; }
.legal .nb { white-space: nowrap; }
.legal section { margin-bottom: 30px; font-size: 1.02rem; line-height: 1.68; color: #3D3B36; }
.legal p { margin: 0 0 14px; }
.legal .end { font-size: .9rem; color: #6E6A63; border-top: 1px solid #E2DDD4; padding-top: 20px; }
.legal .back { font-size: .95rem; font-weight: 500; }

/* --- 6. Schmale Geräte ---------------------------------------------------
   Umbruch: senkrechte Trennlinien werden zu waagrechten, Einzüge fallen weg */
@media (max-width: 700px) {
  a[style*="border-right:1px solid #E2DDD4"],
  div[style*="border-right:1px solid #E2DDD4"] {
    border-right: none !important;
    border-bottom: 1px solid #E2DDD4 !important;
  }
  a[style*="padding:20px 0 20px"],
  div[style*="padding:28px 0 30px"] { padding-left: 0 !important; }
  a[style*="padding:20px clamp(16px,2vw,28px)"],
  div[style*="padding:28px clamp(20px,3vw,34px)"] { padding-left: 0 !important; padding-right: 0 !important; }
}

/* Sprachknopf nur auf schmalen Geräten, neben dem Menüsymbol */
.cw-lang-mob { display: none; }
@media (max-width: 860px) { .cw-lang-mob { display: inline-flex !important; } }

/* --- 7. Aufzählungen in den Angeboten -----------------------------------
   Die Listen tragen inline die Eigenschaft --dot:1 als Markierung. Sie
   bekommen dadurch einen kleinen Punkt in der Signalfarbe vor jeder Zeile,
   damit sie sich auf schmalen Geräten vom Fliesstext darüber abheben.
   Bewusst kein <ul>: die Einrückung von Listen würde die Spaltenkanten
   brechen, an denen die ganze Seite ausgerichtet ist.
   :not([style]) schliesst die Zwischentitel «Wo liegt was» und «Wer sieht was»
   aus – die tragen eigene inline-Stile und bekommen keinen Punkt. */
[style*="--dot"] > div:not([style]) {
  display: grid;
  grid-template-columns: 6px 1fr;
  gap: 11px;
  align-items: baseline;
  padding-left: 14px;
}
/* Der Einzug gilt in ALLEN Angeboten, auch wo kein Zwischentitel darüber steht –
   sonst stehen die Punktspalten der drei Angebote nicht auf einer Linie. */
/* Auf schmalen Geräten reicht ein kleinerer Einzug. */
@media (max-width: 700px) {
  [style*="--dot"] > div:not([style]) { padding-left: 10px; }
}
[style*="--dot"] > div:not([style])::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #C4653A;
  transform: translateY(-2px);
}

/* --- 8. Angebots-Zeitachse ----------------------------------------------
   Vier Stationen (Einstieg, Workshops, Schulungen, Begleitung), verbunden
   durch eine Linie mit Pfeilspitzen (.cw-arr), damit der Ablauf als Prozess
   lesbar ist. Umschalten erledigt site.js, Abschnitt 2. Die Farben der Punkte
   setzt das Script inline; hier stehen nur Hover, Fokus und die kompakte
   Anordnung auf schmalen Geräten. */
.cw-step:hover .cw-dot { border-color: #C4653A !important; }
.cw-step:hover .cw-t { color: #1A1917 !important; }
.cw-step:focus-visible { outline: 2px solid #C4653A; outline-offset: 4px; border-radius: 4px; }
/* Schmale Geräte: Zeitachse bleibt waagrecht, damit der Inhalt der gewählten
   Station direkt darunter steht. Nur Nummer und Titel, ohne Unterzeile und
   Pfeile; die Faktenleiste wird enger. */
@media (max-width: 700px) {
  .cw-col { padding-right: 4px !important; }
  .cw-step { gap: 8px !important; }
  .cw-step .cw-t { font-size: .8rem !important; letter-spacing: 0 !important; }
  .cw-step > span:last-child > span:last-child { display: none !important; }
  .cw-path .cw-arr { display: none !important; }
  .cw-facts > div { padding: 12px 0 !important; gap: 6px !important; }
}

/* --- 9. Aufklappbare Details ------------------------------------------
   «Inhalte im Detail» / «Contents in detail».
   Sichtbar bleiben Titel, Dauer und Ergebnis (für die Geschäftsleitung),
   die Aufzählung ist für die interne IT gedacht. Tastaturfokus in Markenfarbe. */
details > summary { list-style-position: inside; }
details > summary:hover { color: #C4653A; }
details > summary:focus-visible { outline: 2px solid #C4653A; outline-offset: 3px; border-radius: 3px; }

/* --- 10. Doppelspalten auf schmalen Geräten --------------------------------
   Mehrere Raster setzen einen Text mit grid-column:span 2 über zwei Spalten.
   Hat das Raster auf dem Handy nur noch eine Spalte, würde span 2 eine
   unsichtbare zweite Spalte erzwingen. Darunter darum volle Breite. */
@media (max-width: 700px) {
  [style*="grid-column:span 2"] { grid-column: 1 / -1 !important; }
}

/* --- 11. Faktenleiste ---------------------------------------------------
   Vier Hinweise über der Zeitachse (Empfehlung · Das Wichtigste · Kosten ·
   Flexibel). Bewusst ohne Nummern, damit sie nicht mit den Stationen 01–04
   verwechselt werden. Immer 4 → 2 × 2 → 1, nie 3 + 1. */
@media (max-width: 1000px) { .cw-facts { grid-template-columns: repeat(2,minmax(0,1fr)) !important; } }
@media (max-width: 560px) { .cw-facts { grid-template-columns: 1fr !important; } }

/* --- 12. Sprungziele ----------------------------------------------------
   Die Kopfzeile ist fixiert (77px). Ohne Abstand würde sie beim Klick im
   Menü den Anfang des Abschnitts verdecken. */
#warum, #wie, #angebot, #ueber, #kontakt { scroll-margin-top: 80px; }

/* --- 13. Kurzwahl-Kästchen («Das Wichtigste») --------------------------- */
.cw-chip:hover { border-color: #C4653A !important; }
.cw-chip:focus-visible { outline: 2px solid #C4653A; outline-offset: 2px; }