/* Ikonenschmiede /ikonenschmiede-kartei/ -- gebaut aus dem eingefrorenen Prototyp
   _work/bau-p2/prototyp-stand/_assets/seite.css + kartei.css (Runde 2, R2-6.3).
   Gestrichen gegenueber dem Prototyp: .s-outline und ihre Reduced-Motion-Regel in beiden
   Quelldateien -- der Zweitbutton ist jetzt .ik-btn.ik-btn--outline (SPEC 5 Ergaenzung Phase 2).
   Streichliste im RESULT. */

/* Gemeinsame Seitenbausteine fuer /angebote/ und /ikonenschmiede-kartei/.
   Nur Brand-Tokens aus tokens.css. Grund immer Weiss, keine getoenten Flaechen.
   Typo: Ueberschriften Cabinet Grotesk ueber --ik-h1/h2/h3-weight (live heute 300/300/500,
   Brand-Guide 3.0 setzt 500; die Seiten folgen dem Token), Fliesstext Switzer 400.
   Rot in den Details (Runde 2, Niko 23.09.): Piktogramme, Rauten als Listenpunkte, rote
   Linie und roter Pfeil an Textlinks, roter Rand an der Outline. Absaetze nie rot. */

.s-wrap { max-width: var(--ik-content-max); margin: 0 auto; padding: 0 24px; }

/* Seitenkopf */
.s-kopf { padding: 72px 0 72px; max-width: 880px; }
.s-eyebrow {
  font-family: var(--ik-font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--ik-text-secondary);
  margin-bottom: 16px;
}
.s-h1 {
  font-family: var(--ik-font-heading);
  font-weight: var(--ik-h1-weight);
  font-size: clamp(40px, 5vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--ik-black);
  max-width: 15em;
  text-wrap: balance;
}
.s-lead {
  font-size: 18px;
  line-height: 1.6;
  margin-top: var(--ik-vspace-h1-to-body);
  max-width: 36em;
}
.s-hinweis {
  font-size: 13px;
  color: var(--ik-text-secondary);
  margin-top: 12px;
}
.s-h2 {
  font-family: var(--ik-font-heading);
  font-weight: var(--ik-h2-weight);
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ik-black);
  text-wrap: balance;
}
.s-h3, .a1-name, .k-h3, .a1-stufe__name { text-wrap: balance; }
.s-h3 {
  font-family: var(--ik-font-heading);
  font-weight: var(--ik-h3-weight);
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.s-meta {
  font-family: var(--ik-font-body);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ik-text-secondary);
}

/* Rote Linien-Piktogramme (Brand-Guide §12). SVG byte-gleich zu /akademie/ (piktogramme.css der
   Akademie-Akte): Farbe ueber currentColor, Strich je Anzeigegroesse ~1,7 px (--sw = 1.7 * 48 / Groesse),
   zweiter Strich 55 %. Handy 48 px, ab 769 px 56 px. */
.s-picto { display: block; width: 48px; height: 48px; color: var(--ik-red); --sw: 1.7; flex-shrink: 0; }
.s-picto svg { display: block; width: 100%; height: 100%; }
.s-picto svg path { stroke-width: var(--sw); }
.s-picto svg path.h2 { stroke-width: calc(var(--sw) * .55); }
@media (min-width: 769px) {
  .s-picto { width: 56px; height: 56px; --sw: 1.46; }
}

/* Aufzaehlung: Raute in Venetian Red als Listenpunkt (wie /akademie/), 5 x 5 px gedreht */
.s-punkte { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.s-punkte li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.55; }
.s-punkte li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 5px;
  height: 5px;
  background: var(--ik-red);
  transform: rotate(45deg);
}

/* Preis: immer Schwarz, nie Rot */
.s-preis { display: flex; flex-direction: column; gap: 2px; }
.s-preis__betrag {
  font-family: var(--ik-font-body);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  color: var(--ik-black);
}
.s-preis__zusatz { font-size: 13px; line-height: 1.45; color: var(--ik-text-secondary); }
/* Satzregel (CONWAY, Sichtprüfung Runde 2): kurze Bindestrich-Wörter nie trennen, gesetzt von e() in seiten_angebote.py */
.s-nobr { white-space: nowrap; }

/* Textlink mit Pfeil (Seiten-CTA, nie solide): Wort schwarz, Linie und Pfeil in Venetian Red */
.s-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-family: var(--ik-font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.3;
  color: var(--ik-black);
  text-decoration: none;
  transition: opacity 300ms var(--ik-ease-default);
}
.s-link__text {
  text-decoration: underline;
  text-decoration-color: var(--ik-red);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.s-link__pfeil { color: var(--ik-red); }
.s-link:hover { opacity: 0.6; }


@media (prefers-reduced-motion: reduce) {
  .s-link { transition: none; }
}

@media (max-width: 768px) {
  .s-wrap { padding: 0 20px; }
  .s-kopf { padding: 40px 0 48px; }
}
@media (max-width: 480px) {
  .s-lead { font-size: 18px; }
  .s-punkte li { font-size: 16px; }
  .s-meta { font-size: 14px; }
}

/* Kartei-Seite /ikonenschmiede-kartei/. Baut auf seite.css auf.
   Runde 2 (Niko 23.09.: mehr Rot in den Details): Status-Label, Kalender-Status und Schritt-Ziffern in
   Venetian Red (Brand-Guide 3.0 §9: Labels und Ziffern in jeder Groesse), Piktogramme in „Was du
   bekommst“, rote Linie und roter Pfeil an Textlinks (seite.css). Absaetze bleiben schwarz oder grau.
   Zustaende: main[data-zustand] = offen | zu | dezember; Elemente mit data-nur="..." erscheinen
   nur im genannten Zustand. In PHP gibt der Fensterkalender nur den passenden Block aus. */

.kartei { padding-bottom: 96px; }

/* Zustands-Weiche */
.kartei [data-nur] { display: none; }
.kartei[data-zustand="offen"] [data-nur~="offen"],
.kartei[data-zustand="zu"] [data-nur~="zu"],
.kartei[data-zustand="dezember"] [data-nur~="dezember"] { display: block; }
.kartei[data-zustand="offen"] .k-status__zeile[data-nur~="offen"],
.kartei[data-zustand="zu"] .k-status__zeile[data-nur~="zu"],
.kartei[data-zustand="dezember"] .k-status__zeile[data-nur~="dezember"] { display: grid; }

/* Rueckmeldeband (wie /kwait/) */
.k-band { background: var(--ik-black); color: #FFFFFF; padding: 16px 0; font-size: 16px; line-height: 1.5; }
.k-band[hidden] { display: none; }
.k-band p { display: none; }
.k-band p.is-an { display: block; }
.k-band strong { font-weight: 500; }
.k-band a { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
.k-band a:focus-visible { outline-color: #FFFFFF; }

/* Kopf mit Status */
.k-kopf { padding-bottom: 88px; }
.k-status { margin-top: 48px; border-top: 1px solid var(--ik-black); max-width: 720px; }
.k-status__zeile {
  grid-template-columns: minmax(0, 1fr);
  padding-top: 20px;
}
.k-status__label {
  font-weight: 500; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ik-text-secondary);
}
.k-status__zeile > .k-status__label:first-child { color: var(--ik-red); }
.k-status__datum {
  font-family: var(--ik-font-heading);
  font-weight: var(--ik-h2-weight);
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-top: 8px;
}
.k-status__satz { font-size: 16px; margin-top: 8px; }
.k-status__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 24px; }

/* Abschnitte */
.k-abschnitt { border-top: 1px solid var(--ik-black); padding: 28px 0 88px; scroll-margin-top: 100px; }
.k-abschnitt > .s-h2 { max-width: 20em; }
.k-abschnitt--zwei {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: 48px;
}
.k-abschnitt--zwei > .s-h2 { margin-bottom: 0; }
.k-text p { font-size: 18px; line-height: 1.6; max-width: 34em; }
.k-text p + p { margin-top: 16px; }
.k-intro { font-size: 16px; color: var(--ik-text-secondary); margin-top: 12px; max-width: 36em; }
.k-intro a, .k-klein a {
  color: var(--ik-black);
  text-decoration: underline;
  text-decoration-color: var(--ik-red);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.k-intro a + span[aria-hidden="true"], .k-klein a + span[aria-hidden="true"] { color: var(--ik-red); }
.k-h3 {
  font-family: var(--ik-font-heading);
  font-weight: var(--ik-h3-weight);
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* Was du bekommst: Piktogramm links neben Ueberschrift und Text, 2 Spalten (wie die Module auf /akademie/
   und wie die Zeilen der Angebotsseite; bewusst kein Raster aus 4 gleichen Icon-Kacheln) */
.k-leistungen {
  list-style: none; margin: 32px 0 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 48px;
}
.k-leistungen li {
  border-top: 0.5px solid var(--ik-gray-border);
  padding: 24px 0 28px;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: 24px;
  align-content: start;
}
.k-leistungen .s-picto { grid-row: 1 / span 2; }
.k-leistungen li > .k-h3, .k-leistungen li > p { grid-column: 2; }
.k-leistungen .k-h3 { padding-top: 2px; }
.k-leistungen p { font-size: 15px; line-height: 1.55; margin-top: 8px; color: var(--ik-text-secondary); max-width: 30em; }

/* Zwei Wege */
.k-wege { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; margin-top: 32px; }
.k-weg { border-top: 0.5px solid var(--ik-gray-border); padding-top: 18px; }
.k-weg .s-eyebrow { margin-bottom: 8px; }
.k-weg > p:not(.s-eyebrow):not(.k-weg__aktion) { font-size: 16px; line-height: 1.6; margin-top: 10px; max-width: 32em; }
.k-weg__aktion { margin-top: 8px; }
.k-weg__info { font-size: 15px; color: var(--ik-text-secondary); padding: 12px 0; }

/* Kalender der Bewerbungsphasen */
.k-kalender {
  list-style: none; margin: 32px 0 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.k-monat { position: relative; display: flex; flex-direction: column; padding-top: 18px; border-top: 0.5px solid var(--ik-gray-border); }
.k-monat__linie {
  position: absolute; left: 0; right: 0; top: -1px;
  height: 2px;
  background: var(--ik-red);
  transform: scaleX(0);
  transform-origin: left center;
}
.k-monat.is-markiert .k-monat__linie { transform: scaleX(1); transition: transform 700ms var(--ik-ease-default) 200ms; }
.k-monat__name {
  font-family: var(--ik-font-heading);
  font-weight: var(--ik-h2-weight);
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.k-monat__tage { font-size: 15px; margin-top: 6px; font-variant-numeric: tabular-nums; }
.k-monat__status {
  min-height: 1.4em;
  margin-top: 10px;
  font-weight: 500; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ik-red);
}
.k-monat__notiz { font-size: 13px; line-height: 1.45; color: var(--ik-text-secondary); margin-top: 4px; }

/* Ablauf */
.k-schritte {
  list-style: none; margin: 32px 0 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.k-schritte li { border-top: 0.5px solid var(--ik-gray-border); padding-top: 18px; }
.k-schritt__nr {
  display: block;
  font-family: var(--ik-font-heading);
  font-weight: var(--ik-h2-weight);
  color: var(--ik-red);
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.k-schritte p { font-size: 15px; line-height: 1.55; margin-top: 10px; color: var(--ik-text-secondary); }

/* Regeln */
.k-regeln { margin-top: 0; gap: 10px; }
.k-regeln li { font-size: 17px; }

/* Warteliste */
.k-warteliste { padding-bottom: 32px; }
.k-form-karte { max-width: 520px; }
.k-feld { margin-bottom: 20px; }
.k-feld label { display: block; font-weight: 500; font-size: 13px; line-height: 1.4; margin-bottom: 8px; color: var(--ik-black); }
.k-optional { font-weight: 400; color: var(--ik-text-secondary); }
.k-pflicht { color: var(--ik-red); }
.k-feld input:not([type="submit"]):not([type="radio"]) {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--ik-gray-border);
  border-radius: 0;
  box-shadow: none;
  background: #FFFFFF;
  font-family: var(--ik-font-body);
  font-size: 16px;
  color: var(--ik-black);
  -webkit-appearance: none;
  appearance: none;
}
.k-feld input:not([type="submit"]):not([type="radio"]):focus { border-color: var(--ik-black); outline: none; }
.k-feld input:not([type="submit"]):not([type="radio"]):focus-visible { outline: 1.5px solid var(--ik-red); outline-offset: 2px; }
.k-feld input:not([type="submit"]):not([type="radio"])[aria-invalid="true"] { border-color: var(--ik-red); }
.k-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Absendeknopf: Brand-Guide §7.11 (Filled, Liquid Shine), der einzige gefuellte Knopf der Seite */
.k-senden {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  font-family: var(--ik-font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: var(--ik-red-metal-flow);
  background-size: 200% 200%;
  animation: ik-liquid-flow 4s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(181, 69, 58, 0);
  transition: box-shadow 350ms ease;
}
.k-senden:hover { box-shadow: 0 0 16px rgba(216, 91, 79, 0.38), 0 0 36px rgba(181, 69, 58, 0.15); }
.k-senden:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.k-klein { font-size: 13px; line-height: 1.55; color: var(--ik-text-secondary); margin-top: 12px; }
.k-klein a { color: var(--ik-black); text-decoration: underline; text-underline-offset: 3px; }
.k-meldung { display: none; margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--ik-red); }
.k-meldung.is-an { display: block; }
.k-geschafft { border-top: 1px solid var(--ik-black); padding-top: 18px; }
.k-geschafft[hidden] { display: none; }
.k-geschafft p { font-size: 16px; margin-top: 10px; color: var(--ik-text-secondary); }

@media (prefers-reduced-motion: reduce) {
  .k-monat.is-markiert .k-monat__linie { transition: none; }
  .k-senden { animation: none; background-position: 50% 50%; }
}

/* Breakpoints */
@media (max-width: 1000px) {
  .k-leistungen { column-gap: 32px; }
}
@media (max-width: 760px) {
  .k-leistungen { grid-template-columns: 1fr; }
  .k-leistungen li { grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; padding: 20px 0 24px; }
  .k-abschnitt--zwei { grid-template-columns: 1fr; row-gap: 24px; }
  .k-wege { grid-template-columns: 1fr; gap: 36px; }
  .k-schritte { grid-template-columns: 1fr; gap: 28px; }
  .k-kalender { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .k-abschnitt { padding-bottom: 64px; }
  .k-kopf { padding-bottom: 64px; }
}
@media (max-width: 480px) {
  .k-feld input:not([type="submit"]):not([type="radio"]) { font-size: 18px; }
  .k-senden { width: 100%; }
  .k-text p { font-size: 18px; }
  .k-leistungen p, .k-schritte p { font-size: 16px; }
}

/* CONWAY 23.09.: Anrede fuer Neue unter dem Knopf im Status-Kopf, Abstand zum Knopf */
.k-status__ctas + .k-status__label { margin-top: 28px; }

/* CARMACK Phase 2: scroll-padding-top gegen Sprungziele/Tastaturfokus unter dem klebenden
   Kopf (WCAG 2.2, 2.4.11; R2-6.3 Punkt 5). Noch nicht in seite.css/kartei.css enthalten. */
html { scroll-padding-top: 104px; }

/* Zweitbutton SPEC 5 "Ergaenzung Phase 2": Markup ist jetzt .ik-btn.ik-btn--outline (globale
   Komponente, Farbe/Rand/Hover aus assets/brand/components.css). .ik-btn ist dort noch auf dem
   Vor-Guide-3.0-Stand (13px, keine Versalien, padding 10px 22px, line-height 1). Diese EINE
   kontextgebundene Regel (kein neues Klassen-Selektor) setzt Groesse und Versalien fuer den
   Zweitbutton dieser Seite nach Guide 3.0 §7.1 / R2-6.3: 14px, +0.04em, Versalien, line-height
   1.6, padding 12px 24px, min-height 48px. Farbe, Rand und Hover kommen unveraendert aus der
   Komponente (kein Opacity-Override, Entscheid CONWAY, R2-8 offene Frage 4 aufgeloest). */
.k-status__ctas .ik-btn--outline {
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 12px 24px;
  min-height: 48px;
}