/* ===========================================================================
   Markenfarben "KI im Ofenbau" - die eine Quelle
   Angelegt 25.08.2026.

   Diese Datei wird von ZWEI Projekten gelesen:
     1. der Website hier (alle Seiten binden sie vor ihrem eigenen <style> ein)
     2. dem Prompt-Baukasten unter ki-im-ofenbau/visualisierung/, der seine
        Tailwind-Tokens zur Laufzeit auf diese Variablen umbiegt

   ⚠️ DIE NAMEN SIND EINE SCHNITTSTELLE. Wer eine Variable umbenennt, weglaesst
   oder umsortiert, bricht die Visualisierung STILL - ohne Fehlermeldung, es
   greifen dort nur wieder die alten fest eingebauten Werte. Neue Farben duerfen
   dazukommen, bestehende nicht verschwinden.

   Farbe aendern: NUR hier. Beide Projekte ziehen nach, ohne neuen Build.
   Auf dem Server liegt die Datei unter ki-im-ofenbau/design.css.
   =========================================================================== */

/* Die Schriften gehoeren zur Designsprache genauso wie die Farben, deshalb
   stehen sie gleich mit hier drin. Wer design.css einbindet, bekommt beides
   und braucht keinen zweiten Link.

   Vorher hielt jedes Projekt seine eigenen zwoelf Schriftdateien; ein Wechsel
   der Hausschrift haette drei Stellen gebraucht und waere garantiert an einer
   vergessen worden. Die lokalen Kopien duerfen bleiben, sie werden fuer die
   Entwicklung ohne Server gebraucht - auf dem Server zaehlt diese hier.

   Die Schriften stehen DIREKT hier, nicht als @import.
   Ein @import haengt eine zweite, SERIELLE Anfrage an: der Browser muss erst
   design.css laden, sie lesen, und holt danach fonts.css. Bis dahin steht der
   Text in der Systemschrift und springt, sobald die Hausschrift eintrifft.
   Am 26.08.2026 hatte ich es zuerst als @import gebaut und damit die Ladekette
   gegenueber vorher VERLAENGERT - eingebettet ist es eine Anfrage weniger als
   im urspruenglichen Zustand.
   Die Pfade zeigen auf fonts/, weil diese Datei eine Ebene darueber liegt.
   Quelle bleibt _website/fonts/fonts.css; wer sie aendert, baut design.css neu. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuOKfMZg.ttf) format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfMZg.ttf) format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuI6fMZg.ttf) format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuGKYMZg.ttf) format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuFuYMZg.ttf) format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuDyYMZg.ttf) format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(fonts/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuBWYMZg.ttf) format('truetype');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/V8mQoQDjQSkFtoMM3T6r8E7mF71Q-gOoraIAEj62UUsj.ttf) format('truetype');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/V8mQoQDjQSkFtoMM3T6r8E7mF71Q-gOoraIAEj7oUUsj.ttf) format('truetype');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/V8mQoQDjQSkFtoMM3T6r8E7mF71Q-gOoraIAEj7aUUsj.ttf) format('truetype');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/V8mQoQDjQSkFtoMM3T6r8E7mF71Q-gOoraIAEj42Vksj.ttf) format('truetype');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/V8mQoQDjQSkFtoMM3T6r8E7mF71Q-gOoraIAEj4PVksj.ttf) format('truetype');
}

:root {
    /* --- Grundfarben, seit April 2026 unveraendert --- */
    --black: #0E0E0E;        /* Seitenhintergrund */
    --graphite: #252525;     /* Kacheln, Karten, Eingabefelder */
    --off-white: #EEE7DC;    /* Schrift */
    --ember: #C8732B;        /* Hinweise, "kommt noch", Zaehler */
    --cyan: #37C8E8;         /* Marke, Fokus, "verfuegbar" */

    /* --- Bisher nur in der Visualisierung, hier der Vollstaendigkeit halber ---
       Die Website benutzt diese vier heute nicht. Sie stehen trotzdem hier,
       sonst waere "eine Quelle" nur die halbe Wahrheit. */
    --surface: #1C1C1C;      /* Kartenhintergrund */
    --danger: #E05E5E;       /* Loeschen, Fehler */
    --ember-light: #D98438;  /* Ember-Hover hell */
    --ember-dark: #B3652A;   /* Ember-Hover dunkel */

    /* Aufhellung von --danger fuer KLEINEN Text auf Graphit. Gemessen
       27.08.2026 im Browser: --danger auf --graphite ergibt 4,33:1 und reisst
       damit die 4,5:1 fuer normalen Text; dieser Wert kommt auf 6,36:1.
       Auf Schwarz bleibt --danger richtig (5,45:1) - die Aufhellung gilt der
       helleren Kachelflaeche, nicht der Farbe an sich. */
    --danger-light: #F08A8A;

    /* Reinweiss, ausdruecklich benannt. Gleicher Wert wie der Rueckfall in der
       Visualisierung, aendert also heute nichts - macht aber sichtbar, dass es
       eine bewusste Entscheidung ist und keine Luecke. */
    --white: #FFFFFF;

    /* --- Abgeleitet ---
       color-mix mit transparent ergibt dieselbe Farbe bei 40 % Deckkraft, wie
       sie vorher in jeder Seite als rgba(200,115,43,0.4) bzw.
       rgba(55,200,232,0.4) stand. Der Vorteil: aendert sich --ember oder
       --cyan, zieht der Schein automatisch mit. */
    --ember-glow: color-mix(in srgb, var(--ember) 40%, transparent);
    --cyan-glow: color-mix(in srgb, var(--cyan) 40%, transparent);
}


/* ===========================================================================
   DER EINHEITLICHE KOPF DER UNTERBEREICHE (27.08.2026, Vorgabe Tobias)

   Jede Seite unterhalb des Teilnehmerbereichs traegt DENSELBEN Kopf:
     links  das KI-im-Ofenbau-Logo mit den Sternen, daneben der Name des
            Bereichs (Space Grotesk, 15px - die Groesse stammt vom
            Angebots-Assistenten und ist die Referenz),
     rechts Name und Firma des Angemeldeten, ein Zurueck-Link in den
            Teilnehmerbereich und Abmelden.
   KEIN Gruppenchat-Icon (das gehoert nur auf die Hauptseite), KEINE
   app-eigenen Knoepfe (Historie, Neues Projekt o.ae. stehen DARUNTER),
   KEIN Untertitel im Kopf (auch darunter).

   Die Klassen heissen kio-*, damit sie mit keinem App-CSS kollidieren
   (der Angebots-Assistent fuehrt z.B. selbst eine .marke).
   =========================================================================== */
.kio-kopf { background: var(--black); border-bottom: 1px solid rgba(238,231,220,0.06);
            font-family: 'Inter', -apple-system, sans-serif; }
.kio-kopf-innen { max-width: 1100px; margin: 0 auto; padding: 18px 24px;
                  display: flex; align-items: center; justify-content: space-between;
                  gap: 16px; flex-wrap: wrap; }
.kio-links { display: flex; align-items: baseline; gap: 18px; min-width: 0; }
.kio-marke { font-family: 'Space Grotesk', sans-serif; font-weight: 700;
             letter-spacing: 0.12em; font-size: 0.95rem; color: var(--off-white);
             white-space: nowrap; text-decoration: none; }
.kio-marke .kio-ki { color: var(--cyan); position: relative; }
.kio-stars { position: absolute; top: -0.52em; right: -0.62em; width: 0.85em;
             height: 0.85em; pointer-events: none; }
.kio-stars svg { width: 100%; height: 100%; display: block; }
.kio-star-a { animation: kioSparkle1 2.5s ease-in-out infinite; }
.kio-star-b { animation: kioSparkle2 2.5s ease-in-out infinite 0.4s; }
.kio-star-c { animation: kioSparkle3 2.5s ease-in-out infinite 0.8s; }
@keyframes kioSparkle1 { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
@keyframes kioSparkle2 { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.9; } }
@keyframes kioSparkle3 { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.8; } }
.kio-bereich { font-family: 'Space Grotesk', sans-serif; font-size: 15px;
               font-weight: 600; color: var(--off-white); white-space: nowrap;
               overflow: hidden; text-overflow: ellipsis; }
.kio-rechts { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
              justify-content: flex-end; }
.kio-wer { font-size: 0.78rem; color: rgba(238,231,220,0.45); white-space: nowrap;
           overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
.kio-wer .kio-firma { color: rgba(238,231,220,0.3); }
/* Der Zurueck-Weg ist ein KNOPF, kein Textlink (Vorgabe Tobias, 27.08.2026):
   der blasse Link fiel nicht auf, und wer nicht weiss, wo es zurueckgeht, ist
   verloren. Stil wie der Gruppenchat-Pill der Hauptseite, Rahmen auf 0.40 -
   dieselbe Deckkraft wie bei den Formularfeldern, gemessen 3.2:1. */
.kio-zurueck { display: inline-flex; align-items: center; gap: 7px;
               padding: 7px 14px; border-radius: 999px;
               border: 1px solid rgba(238,231,220,0.40);
               font-family: 'Space Grotesk', sans-serif; font-size: 0.8rem;
               font-weight: 600; color: rgba(238,231,220,0.85);
               text-decoration: none; white-space: nowrap;
               transition: border-color 0.2s, color 0.2s; }
.kio-zurueck:hover { border-color: var(--cyan); color: var(--cyan); }
/* Abmelden ist ein SYMBOL, kein Text (Vorgabe Tobias, 27.08.2026: zu viel
   Text ueberall). title + aria-label stehen im Markup, damit Tooltip und
   Vorlesesoftware wissen, was es tut. */
.kio-abmelden { display: inline-flex; align-items: center;
                color: rgba(238,231,220,0.45); text-decoration: none; }
.kio-abmelden svg { width: 18px; height: 18px; }
.kio-abmelden:hover { color: var(--cyan); }
.kio-zurueck:focus-visible, .kio-abmelden:focus-visible,
.kio-marke:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
@media (max-width: 640px) {
  .kio-kopf-innen { padding: 13px 16px; }
  .kio-links { gap: 12px; }
  .kio-bereich { font-size: 13px; }
  .kio-wer { display: none; }   /* am Handy zaehlt der Platz: Logo, Bereich, Zurueck, Abmelden */
}
@media (prefers-reduced-motion: reduce) {
  .kio-star-a, .kio-star-b, .kio-star-c { animation: none; }
}

/* Die Fusszeile der Unterbereiche: nur Impressum und Datenschutz, wie auf der
   Hauptseite des Teilnehmerbereichs. KEIN Teilnehmerbereich-Link - man IST ja
   schon dort, der Rueckweg ist der Knopf im Kopf (Vorgabe Tobias, 27.08.2026). */
.kio-fuss { margin-top: 64px; padding: 30px 24px; border-top: 1px solid rgba(238,231,220,0.05);
            text-align: center; font-family: 'Inter', -apple-system, sans-serif; }
.kio-fuss a { color: rgba(238,231,220,0.3); text-decoration: none; font-size: 0.8rem; }
.kio-fuss a:hover { color: rgba(238,231,220,0.6); }


/* ===========================================================================
   DIE GEMEINSAME SCHRIFT- UND KNOPFSKALA DER UNTERBEREICHE (27.08.2026)

   Bis heute standen Farben, Schriften und der Kopf hier - die GROESSEN aber
   hat jedes Projekt fuer sich festgelegt. Ergebnis: der Angebots-Assistent
   kam auf 34px Ueberschrift und Knoepfe mit 19px Schrift und 18px
   Innenabstand, der Fachfragen-Assistent auf 32px und 12,8px/11px. Nebeneinander
   sah das aus wie zwei verschiedene Produkte, und genau das war der Anlass.

   Die Werte unten stammen 1:1 aus fachassistent.php, der Referenzseite.
   Wer eine Groesse aendern will, aendert sie HIER. Nicht im Projekt.

   ⚠️ AUCH DIESE NAMEN SIND EINE SCHNITTSTELLE, wie die Farben darueber.
   Umbenennen bricht die Apps STILL: sie fallen dann auf ihre eingebauten
   Rueckfallwerte zurueck, ohne Fehlermeldung.

   Bewusst ALLES mit .kio- praefixiert und KEIN einziger Element-Selektor:
   neun Website-Seiten binden diese Datei ein und bringen ihre eigenen
   <style>-Bloecke mit. Ein blankes "h1 { }" hier haette sie alle umgefaerbt.
   =========================================================================== */

/* -- Flaeche und Ueberschriften -- */
.kio-inhalt { max-width: 860px; margin: 0 auto; padding: 0 24px; }
.kio-label { font-family: 'Space Grotesk', sans-serif; font-size: 0.72rem; font-weight: 600;
             letter-spacing: 0.28em; text-transform: uppercase; color: var(--cyan); }
.kio-h1 { font-family: 'Space Grotesk', sans-serif; font-size: 2rem; font-weight: 700;
          line-height: 1.15; margin: 12px 0 14px; }
.kio-h2 { font-family: 'Space Grotesk', sans-serif; font-size: 1.15rem; font-weight: 600;
          margin: 0; }
.kio-intro { color: rgba(238,231,220,0.6); max-width: 620px; margin: 0; }
.kio-text { color: rgba(238,231,220,0.7); font-size: 0.94rem; margin: 0 0 10px; }
.kio-klein { color: rgba(238,231,220,0.5); font-size: 0.82rem; }

/* -- Schritte -- */
.kio-schritt { margin-top: 46px; }
.kio-schritt-kopf { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; }
.kio-nr { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid;
          place-items: center; font-family: 'Space Grotesk', sans-serif;
          font-size: 0.82rem; font-weight: 700;
          background: rgba(55,200,232,0.16); color: var(--cyan); }
.kio-liste { list-style: none; margin: 10px 0 0; padding: 0; }
.kio-liste li { color: rgba(238,231,220,0.7); font-size: 0.92rem; padding-left: 18px;
                position: relative; line-height: 1.9; }
.kio-liste li::before { content: '·'; position: absolute; left: 4px; color: var(--ember); }

/* -- Eingabefelder --
   Nur fuer freistehende Felder gedacht. Felder INNERHALB einer Tabelle
   (Preiszeilen) bleiben randlos und behalten ihren eigenen Stil - deshalb
   traegt dort keines diese Klasse. */
.kio-feld { background: rgba(14,14,14,0.6); color: var(--off-white); color-scheme: dark;
            border: 1px solid rgba(238,231,220,0.40); border-radius: 9px;
            padding: 12px 14px; font-family: 'Inter', sans-serif; font-size: 0.95rem;
            width: 100%; }
.kio-feld:focus { outline: none; border-color: rgba(55,200,232,0.7);
                  box-shadow: 0 0 0 2px rgba(55,200,232,0.25); }
.kio-feld::placeholder { color: rgba(238,231,220,0.34); }

/* -- Knoepfe --
   Der Regelfall ist der RANDKNOPF. Die gefuellte Fassung ist fuer den einen
   Hauptknopf eines Schrittes da, nicht fuer jeden Knopf; Schrift und
   Innenabstand sind bei beiden identisch, damit sie nebeneinander passen.
   Beschriftung auf Ember ist schwarz: Off-White auf Ember kaeme nur auf
   2,8:1, Schwarz auf Ember misst 5,45:1. */
.kio-knopf { display: inline-flex; align-items: center; gap: 8px;
             padding: 11px 20px; background: transparent;
             border: 1px solid rgba(238,231,220,0.40); border-radius: 9px;
             color: var(--off-white); font-family: 'Space Grotesk', sans-serif;
             font-size: 0.8rem; font-weight: 500; letter-spacing: 0.06em;
             text-transform: uppercase; text-decoration: none; cursor: pointer;
             transition: border-color 0.25s, color 0.25s, background 0.25s; }
.kio-knopf:hover { border-color: var(--cyan); color: var(--cyan); }
.kio-knopf:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.kio-knopf--ember { background: var(--ember); border-color: var(--ember); color: var(--black);
                    font-weight: 600; }
.kio-knopf--ember:hover { background: var(--ember-light); border-color: var(--ember-light);
                          color: var(--black); }
.kio-knopf--cyan { background: var(--cyan); border-color: var(--cyan); color: var(--black);
                   font-weight: 600; }
.kio-knopf--cyan:hover { background: #5AD4EE; border-color: #5AD4EE; color: var(--black); }
/* Der Fokusring ist sonst cyan auf cyan. Formal genuegt das (er liegt 2px
   ausserhalb, also auf dem Seitenhintergrund, 9,73:1) - erkennbar ist er so
   aber kaum. Off-White misst dort 15,72:1 und hebt sich auch von der Fuellung
   ab. Gemessen im Browser am 27.08.2026. */
.kio-knopf--cyan:focus-visible { outline-color: var(--off-white); }
.kio-knopf:disabled { opacity: 0.45; cursor: not-allowed; }
.kio-knopf:disabled:hover { border-color: rgba(238,231,220,0.40); color: var(--off-white); }
.kio-knopf--ember:disabled:hover { background: var(--ember); border-color: var(--ember);
                                   color: var(--black); }
.kio-knopf--cyan:disabled:hover { background: var(--cyan); border-color: var(--cyan);
                                  color: var(--black); }

/* -- Der Kasten mit dem Text zum Kopieren -- */
.kio-kasten { margin-top: 16px; border: 1px solid rgba(238,231,220,0.12);
              border-radius: 14px; overflow: hidden; background: var(--graphite); }
.kio-kasten-kopf { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
                   padding: 13px 18px; border-bottom: 1px solid rgba(238,231,220,0.09); }
.kio-kasten-titel { font-family: 'Space Grotesk', sans-serif; font-size: 0.9rem;
                    font-weight: 600; }
.kio-zaehler { margin-left: auto; font-size: 0.8rem; color: rgba(238,231,220,0.55);
               font-variant-numeric: tabular-nums; }
/* Beide Warnfarben sind AUFGEHELLT, weil der Zaehler auf der Graphit-Kachel
   sitzt und nur 12,8px gross ist. Gemessen 27.08.2026: --ember dort 4,34:1 und
   --danger 4,33:1 - beide unter den 4,5:1 fuer normalen Text. Mit den hellen
   Fassungen sind es 5,33:1 und 6,36:1. Der Zustand ist kein Sonderfall: bei
   Tobias' echter Konfiguration steht der Zaehler bei 7.601 von 8.000 und ist
   damit dauerhaft "knapp". */
.kio-zaehler.kio-knapp { color: var(--ember-light); }
.kio-zaehler.kio-drueber { color: var(--danger-light); font-weight: 600; }
.kio-textfeld { display: block; width: 100%; min-height: 420px; padding: 18px;
                background: rgba(14,14,14,0.55); border: none; color: rgba(238,231,220,0.88);
                font-family: ui-monospace, 'Consolas', monospace; font-size: 0.83rem;
                line-height: 1.65; resize: vertical; }
.kio-textfeld:focus { outline: none; box-shadow: inset 0 0 0 2px rgba(55,200,232,0.35); }
.kio-kasten-fuss { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
                   padding: 13px 18px; border-top: 1px solid rgba(238,231,220,0.09); }

/* -- Hinweiskasten -- */
.kio-warnung { margin-top: 44px; padding: 20px 24px; border-left: 2px solid var(--ember);
               background: rgba(200,115,43,0.07); font-size: 0.9rem;
               color: rgba(238,231,220,0.75); }
.kio-warnung strong { color: var(--off-white); }

/* -- Aufklappbares -- */
.kio-aufklapp { margin-top: 24px; border: 1px solid rgba(238,231,220,0.16);
                border-radius: 12px; overflow: hidden; }
.kio-aufklapp > summary { padding: 15px 20px; cursor: pointer;
                          font-family: 'Space Grotesk', sans-serif; font-weight: 600;
                          font-size: 0.9rem; list-style: none; }
.kio-aufklapp > summary::-webkit-details-marker { display: none; }
.kio-aufklapp > summary::before { content: '▸ '; color: var(--cyan); }
.kio-aufklapp[open] > summary::before { content: '▾ '; }
.kio-aufklapp > summary:hover { background: rgba(238,231,220,0.04); }
.kio-aufklapp > summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
.kio-aufklapp-inhalt { padding: 16px 20px 20px; border-top: 1px solid rgba(238,231,220,0.16); }

@media (max-width: 640px) {
  .kio-h1 { font-size: 1.6rem; }
  .kio-schritt { margin-top: 36px; }
  .kio-textfeld { min-height: 300px; }
}