/* onfyr.de — ONFYR-Eigenes der Dialog-Bühne (Erst-Umstellung auf den Kern 26.09.2026). Der Kern (css/dialog.css, css/consent.css)
   bleibt unberührt; Farben und Schrift kommen über css/dialog-tokens.css. Hier steht nur, was ONFYR zusätzlich braucht:
   (1) Marken-Typografie (Minion für H1/H2, Outfit für alles andere — CD v2.1; Hero nicht in Versalien) und die durchscheinende Bühne für die Glut,
   (2) die ONFYR-Bausteine aus js/dialog-bausteine.js: Ankommen mit Flammenraum + Siegel, Herausforderungs-Karten, Lösungs-Paare mit
       Nachfrage, Förderrechner, Vertrauen, Antragsweg, Expedition, Anfrage-Notiz, Fenster (Team mit Rolle, Expedition).
   NACH dialog.css, consent.css und dialog-tokens.css laden. */

/* ---- (1) Marke: Serifen-Überschriften wie die Wortmarke, Hero dünn · gold ---- */
.dlg__titel,.dlg__hinweis h2,.dlg__blatt h2{font-family:var(--font-display);font-weight:400;font-style:normal}   /* H1/H2 Minion Regular (CD v2.1) */
.dlg__paar h3,.dlg__schritte h3,.dlg__formular h3,.dlg__antwortkarte h3,.dlg__fenster-text b,
.dlg__zahlen b,.dlg__rechner b,.dlg__angebot h3,.dlg__preis b,.dlg__antragsweg li b{font-family:var(--font);font-weight:500}   /* alles andere Outfit Medium */
.dlg__titel--hero{text-transform:none;letter-spacing:-.01em;line-height:.98}
.dlg__duenn{font-style:normal;font-weight:400;color:var(--c-warm)}
.dlg__licht{text-shadow:0 0 50px rgba(202,158,103,.3)}
.dlg__nr{font-family:var(--font);font-weight:500}
.dlg .dlg__info{font:500 1rem/1 var(--font);font-style:normal}
/* Bühnengrund durchscheinend (.62): darunter liegt nur der Tiefgrün-Grund der Seite und der Glut-Canvas — die Logo-Flamme soll leuchten */
.dlg{background:radial-gradient(ellipse 70% 55% at 12% 100%,rgba(202,158,103,.10),rgba(27,58,63,.16) 45%,transparent 72%),color-mix(in srgb, var(--dlg-grund) 62%, transparent)}
.dlg .dlg__knopf--haupt,.dlg .dlg__senden,.dlg__wort--jetzt,.dlg__blase-mehr,.dlg__etikett{color:var(--c-dunkel-text)}
/* Seit Kern 1.0.11 trägt der Kern die hidden-Regel des Anrede-Schalters und den Dock-Grund (Token --dlg-dock-hintergrund in dialog-tokens.css) selbst */

/* ---- (2a) Ankommen (Baustein ankommenOnfyr): Aussage links, rechts der freie Raum für die Logo-Flamme ---- */
.dlg__einstieg{align-items:flex-start}
.dlg__einstieg p{max-width:60ch}
.dlg__inhalt--ankommenOnfyr{justify-content:center}
.dlg__spalten--ankommen{align-items:stretch}
.dlg__ankommen-links{display:flex;flex-direction:column;justify-content:center;gap:clamp(1rem,3vh,2rem)}
.dlg__flammenraum{display:none;min-height:60vh}
/* Vertrauenssiegel: drei Embleme (BAFA-Berater, KI-Manager, German Web Award), hochkant, nie hochskaliert (Quelle 320 px breit) */
.dlg__siegel{display:flex;flex-wrap:wrap;gap:.9rem;list-style:none;margin:.4rem 0 0;padding:0;align-items:flex-start}
.dlg__siegel li{margin:0}
.dlg__siegel img{display:block;width:auto;height:clamp(72px,9vh,104px);filter:drop-shadow(0 6px 16px rgba(0,0,0,.45))}
.dlg__siegel--gross img{height:clamp(88px,11vh,124px)}
.dlg__siegel-block{display:flex;flex-direction:column;gap:.4rem}

/* ---- (2b) Herausforderungen, Nachfrage, Lösung ---- */
.dlg__karte b{font-weight:600}
.dlg__karte--frage b{font-family:var(--font);font-weight:500;font-size:1.15rem;line-height:1.25}
.dlg__paar-links{display:flex;flex-direction:column;gap:.45rem}
.dlg__paar-vertieft{margin:.4rem 0 0;padding:.6rem .8rem;border-radius:10px;background:rgba(202,158,103,.1);border:1px solid rgba(202,158,103,.35);color:var(--dlg-text);font-size:.94rem}
.dlg__kicker--frage{margin-top:.4rem;color:var(--dlg-text);text-transform:none;letter-spacing:0;font-family:var(--font);font-weight:500;font-size:1.25rem}

/* ---- (2c) Förderung: Rechner, Vertrauen, Antragsweg, Voraussetzungen ---- */
.dlg__rechner{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr));gap:.6rem}
.dlg__rechner li{padding:1rem .9rem;border-radius:var(--dlg-radius);background:color-mix(in srgb, var(--dlg-glas) 74%, transparent);border:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;gap:.25rem}
.dlg__rechner b{font-weight:600;font-size:clamp(1.9rem,4.6vw,2.8rem);line-height:1;color:var(--dlg-text)}
.dlg__rechner li.dlg__rechner--gold{border-color:rgba(202,158,103,.6);background:rgba(202,158,103,.1)}
.dlg__rechner li.dlg__rechner--gold b{color:var(--dlg-akzent)}
.dlg__rechner span{font-size:.86rem;color:var(--dlg-text-2)}
.dlg__voraus{margin:0;padding-left:1.1rem;color:var(--dlg-text);display:grid;gap:.3rem;font-size:.96rem}
.dlg__zwei{display:grid;gap:1rem}
@media (min-width:900px){.dlg__zwei{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:start}}
.dlg__vertrauen{grid-template-columns:repeat(auto-fit,minmax(min(100%,9.5rem),1fr))}
.dlg__vertrauen b{font-size:clamp(1.4rem,3.4vw,2rem)}
.dlg__antragsweg{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11.5rem),1fr));gap:.6rem}
.dlg__antragsweg li{display:flex;flex-direction:column;gap:.3rem;padding:.9rem 1rem;border-radius:var(--dlg-radius);background:color-mix(in srgb, var(--dlg-glas) 74%, transparent);border:1px solid rgba(255,255,255,.12)}
.dlg__antragsweg li b{font-weight:600;font-size:1.15rem}
.dlg__antragsweg li span{color:var(--dlg-text-2);font-size:.92rem}
.dlg__antragsweg .dlg__nr{margin-bottom:.2rem}
.dlg__inhalt--rein .dlg__angebot,.dlg__inhalt--rein .dlg__rechner li,.dlg__inhalt--rein .dlg__antragsweg li{animation:dlg-rein .6s var(--dlg-kurve) both;animation-delay:calc(.12s + var(--nr,0)*.11s)}

/* ---- (2d) Expedition: die Einladung — Karten mit Bild (Malediven zuerst), auch im Fenster ---- */
.dlg__angebote{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:.8rem;align-items:stretch}
.dlg__angebot{display:flex;flex-direction:column;text-align:left;padding:0;overflow:hidden;border-radius:var(--dlg-radius);background:color-mix(in srgb, var(--dlg-glas) 74%, transparent);border:1px solid rgba(255,255,255,.12)}
.dlg__angebot img,.dlg__fenster-inhalt .dlg__angebot img{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;margin:0}
.dlg__angebot-innen{display:flex;flex-direction:column;gap:.5rem;padding:.9rem 1rem 1rem}
.dlg__etikett{align-self:flex-start;padding:.2rem .6rem;border-radius:999px;font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:var(--dlg-akzent)}
.dlg__angebot h3{margin:0;font-weight:600;font-size:1.45rem;line-height:1.1}
.dlg__angebot ul{margin:0;padding-left:1.05rem;color:var(--dlg-text-2);font-size:.9rem;display:grid;gap:.2rem}
.dlg__preis{margin:.2rem 0 0;display:flex;flex-direction:column}
.dlg__preis b{font-weight:600;font-size:1.3rem}
.dlg__preis span,.dlg__termin{font-size:.84rem;color:var(--dlg-text-2)}
.dlg__angebote--fenster{grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}

/* ---- (2e) Anfrage-Notiz und Fenster-Inhalte ---- */
.dlg__notiz ul{font-size:.94rem}
.dlg__team li{max-width:11rem;text-align:center}
.dlg__team li small{font-weight:400;font-size:.8rem;color:var(--dlg-text-2);line-height:1.3}
.dlg__fenster-inhalt .dlg__team img{margin:0}
.dlg__fenster-text ul{margin:.2rem 0 0;padding-left:1.1rem;display:grid;gap:.3rem;color:var(--dlg-text)}

/* ---- Handy hochkant: die Einladung steht VOR der Aussage (wie die Kern-Regel für die Kern-Art „ankommen“) ---- */
@media (max-width:699px){
  .dlg__inhalt--ankommenOnfyr{justify-content:flex-start}
  .dlg__inhalt--ankommenOnfyr .dlg__spalten{gap:.7rem}
  .dlg__inhalt--ankommenOnfyr .dlg__ankommen-links{gap:.7rem}
  .dlg__inhalt--ankommenOnfyr .dlg__hinweis{order:-1;padding:.9rem 1rem;gap:.6rem}
  .dlg__inhalt--ankommenOnfyr .dlg__hinweis p{font-size:.95rem}
  .dlg__inhalt--ankommenOnfyr .dlg__kicker{text-align:center;margin-top:.5rem}
  .dlg__inhalt--ankommenOnfyr .dlg__titel{text-align:center}
  .dlg__inhalt--ankommenOnfyr .dlg__text{text-align:center;margin:0 auto}
  .dlg__inhalt--ankommenOnfyr .dlg__chips{justify-content:center}
  .dlg__inhalt--ankommenOnfyr .dlg__siegel{justify-content:center}
  .dlg__siegel img{height:64px}
  .dlg__inhalt--ankommenOnfyr .dlg__titel--gross{font-size:clamp(2rem,9.5vw,2.8rem)}
}
/* ---- ab Tablet: Paare zweispaltig wie im Kern ---- */
@media (min-width:700px){
  .dlg__paar{grid-template-columns:minmax(0,14rem) minmax(0,1fr)}
}
/* ---- breit (Desktop, iPad quer): Flammenraum sichtbar, Aussage links ---- */
@media (min-width:1024px) and (min-height:600px){
  .dlg__spalten--ankommen{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
  .dlg__flammenraum{display:block}
}
/* ---- Handy quer: Einstiegs-Karte vor der Überschrift und kompakt (Kern-Regel 1.0.2 für die ONFYR-Art) ---- */
@media (orientation:landscape) and (max-height:599px){
  .dlg__inhalt--ankommenOnfyr{justify-content:flex-start}
  .dlg__inhalt--ankommenOnfyr .dlg__spalten,.dlg__inhalt--ankommenOnfyr .dlg__ankommen-links{gap:.6rem}
  .dlg__inhalt--ankommenOnfyr .dlg__hinweis{order:-1;padding:.65rem .9rem;gap:.45rem}
  .dlg__inhalt--ankommenOnfyr .dlg__hinweis h2{font-size:1.05rem}
  .dlg__inhalt--ankommenOnfyr .dlg__hinweis p{font-size:.88rem;line-height:1.35}
  .dlg__inhalt--ankommenOnfyr .dlg__hinweis .dlg__reihe{gap:.4rem}
  .dlg__inhalt--ankommenOnfyr .dlg__knopf{min-height:44px;padding:.45rem 1rem}
  .dlg__inhalt--ankommenOnfyr .dlg__siegel img{height:56px}
}
/* ---- Ruhe ---- */
@media (prefers-reduced-motion:reduce){
  .dlg__inhalt--rein .dlg__angebot,.dlg__inhalt--rein .dlg__rechner li,.dlg__inhalt--rein .dlg__antragsweg li{animation:none !important}
}