/* ============================================================================
   COFFEE FESTIVAL EUROPE — die Seitenthemen
   ----------------------------------------------------------------------------
   Die Rueckmeldung war: "jede Seite sieht gleich aus". Die naheliegende Antwort
   waere gewesen, jeder Seite eine eigene Farbe zu geben — und damit die Marke
   aufzuloesen. Deshalb hier die getrennte Ordnung:

     · Ember bleibt die Markenfarbe. Navigation, Handlungsaufforderungen,
       Zeiger, Logo, Fuss — die traegt ueberall dasselbe Orange.
     · Daneben bekommt jede Seitengruppe einen Zweitton (--pt) und eine eigene
       Signatur: die kleine Marke, die links vor jeder Abschnittsvorzeile
       steht. Sie unterscheidet sich in Geometrie, nicht nur in Farbe, weil
       eine reine Farbverschiebung bei den kleinen Flaechen kaum auffaellt.
     · Und der Satz aendert seinen Ton mit: die Presseseiten laufen schmaler
       und enger, die Ausstellerseiten breiter und fester, die Zugangsseiten
       offener. Das ist der Unterschied, den man merkt, bevor man ihn sieht.

   Fuenf Groessen pro Thema, mehr nicht — jede weitere Stellschraube macht die
   Seiten unterschiedlich, ohne sie unterscheidbar zu machen.
   ========================================================================= */

body{
  --pt:var(--ember);
  --pt-lo:var(--ember-lo);
  /* Der Zweitton fuer HELLE Abschnitte. Die Themenfarben sind gegen Ink
     gewaehlt und liegen dort bei 8,2 bis 10,4 — auf Elfenbein fallen sie auf
     1,66 bis 2,11 und sind praktisch unsichtbar. Gemessen auf
     barrierefreiheit-vor-ort.html: die Vorzeile „Companions" stand mit 1,66
     hellblau auf hell. Jedes Thema bekommt daher eine abgedunkelte Fassung
     mit mindestens 4,6 auf Elfenbein; der Farbton bleibt derselbe.        */
  --pt-dk:#BC4213;
  --pt-glow:var(--ember-glow);
  --pt-wash:transparent;
  --pt-stretch:108%;
  --pt-track:-.025em;
}

/* ---- Die Themen ---------------------------------------------------------
   Der Zweitton ist in jedem Fall gegen Ink geprueft: alle liegen ueber 4.5:1,
   damit die Vorzeilen auch dann lesbar bleiben, wenn jemand sie als Text und
   nicht als Zierrat liest.                                                */

/* Herkunft, Handwerk, Geschichte — geroestetes Gold */
body[data-pt="roast"]{--pt:#D79A4E;--pt-dk:#935F1D;--pt-lo:#EBC188;--pt-glow:rgba(215,154,78,.30);
  --pt-wash:radial-gradient(120% 60% at 12% 0%,rgba(215,154,78,.09),transparent 62%)}
/* Stadt, Anfahrt, Gelaende — Ruhrgebietsstahl */
body[data-pt="civic"]{--pt:#8FB0C9;--pt-dk:#436F91;--pt-lo:#BBD2E3;--pt-glow:rgba(143,176,201,.28);
  --pt-wash:radial-gradient(120% 60% at 88% 0%,rgba(143,176,201,.10),transparent 60%)}
/* Nachhaltigkeit — Moos, nicht Signalgruen */
body[data-pt="grove"]{--pt:#9DBB7C;--pt-dk:#587339;--pt-lo:#C4D8AC;--pt-glow:rgba(157,187,124,.28);
  --pt-wash:radial-gradient(130% 62% at 20% 0%,rgba(157,187,124,.10),transparent 60%)}
/* Barrierefreiheit und Fragen — klar und kuehl, hoher Kontrast */
body[data-pt="clear"]{--pt:#7EC6D6;--pt-dk:#277586;--pt-lo:#B2E0EA;--pt-glow:rgba(126,198,214,.28);
  --pt-wash:radial-gradient(120% 58% at 50% 0%,rgba(126,198,214,.09),transparent 62%);
  --pt-stretch:104%;--pt-track:-.012em}
/* Programm, Erlebnisse, Buehne — Abendlicht */
body[data-pt="stage"]{--pt:#CE7FAE;--pt-dk:#B24083;--pt-lo:#E6B4D2;--pt-glow:rgba(206,127,174,.28);
  --pt-wash:radial-gradient(120% 64% at 78% 0%,rgba(206,127,174,.10),transparent 60%)}
/* Aussteller — Messinggold, fester Satz */
body[data-pt="trade"]{--pt:#E0B457;--pt-dk:#896415;--pt-lo:#F2D699;--pt-glow:rgba(224,180,87,.28);
  --pt-wash:radial-gradient(120% 58% at 8% 0%,rgba(224,180,87,.09),transparent 60%);
  --pt-stretch:113%;--pt-track:-.032em}
/* Presse, Medien, Journal — Zeitungspapier, schmal und eng */
body[data-pt="press"]{--pt:#C3B8A8;--pt-dk:#796951;--pt-lo:#DED5C7;--pt-glow:rgba(195,184,168,.24);
  --pt-wash:radial-gradient(120% 55% at 50% 0%,rgba(195,184,168,.07),transparent 58%);
  --pt-stretch:100%;--pt-track:-.034em}
/* Besuch und Kontakt — warmes Terrakotta, nah am Ember, aber weicher */
body[data-pt="visit"]{--pt:#E8916A;--pt-dk:#B64817;--pt-lo:#F5BFA4;--pt-glow:rgba(232,145,106,.28);
  --pt-wash:radial-gradient(120% 60% at 26% 0%,rgba(232,145,106,.09),transparent 60%)}
/* Rechtliches — kein Zweitton, nur Ruhe */
body[data-pt="legal"]{--pt:#A79B8D;--pt-dk:#76695A;--pt-lo:#C6BCB0;--pt-glow:rgba(167,155,141,.18);
  --pt-wash:none;--pt-stretch:102%;--pt-track:-.018em}

/* ---- 1 · Die Vorzeile traegt den Zweitton -------------------------------
   Nur die Abschnittsvorzeilen, nicht die Marken- und Handlungsflaechen: eine
   Schaltflaeche in Moosgruen waere keine Themenfarbe mehr, sondern ein
   zweiter Markenauftritt.                                                  */
body[data-pt] main .label--ember,
body[data-pt] .cine__k,body[data-pt] .stick__k,
body[data-pt] .jrn__k,body[data-pt] .hist__k{color:var(--pt)}
/* Heller Abschnitt: dieselbe Variable, tieferer Ton. Damit greift die
   Umstellung fuer alle zwoelf Stellen, die var(--pt) benutzen — Vorzeilen,
   Marken, duenne Linien und Fuellungen —, ohne sie einzeln anzufassen. */
/* Diese Liste war unvollstaendig, und das ist der teuerste Fehler dieser
   Art: der helle Grund kommt nicht nur von `.section--light`. `.stick`,
   `.cities` und `.xp` setzen ihn selbst — dort blieb der HELLE Thementon
   auf hellem Grund stehen. Gemessen auf ueber-uns.html, Vorzeile „Haltung"
   im Abschnitt `.stick`: #D79A4E auf #F4EEE4 = 2,11 : 1. Das Pruefwerkzeug
   hatte diese Stelle nicht gemeldet — der Abschnitt ist angeheftet und war
   beim Pruefen verdeckt.

   Regel dahinter: wer eine Bedingung an einer Stelle aendert, muss jede
   Stelle mitnehmen, die dieselbe Sache beschreibt. */
.section--light,.psec--light,
.stick:not(.stick--dark),.cities,.xp{--pt:var(--pt-dk)}
/* Ausgenommen bleibt, was Marke ist und nicht Thema: Handlungsflaechen, der
   Fussabschnitt und der Zustimmungsdialog tragen weiter Ember. */
body[data-pt] .cta .label--ember,
body[data-pt] .footer .label--ember,
body[data-pt] .b2b .label--ember,
body[data-pt] .consent .label--ember,
body[data-pt] .phead .label--ember,
body[data-pt] .btn .label--ember{color:var(--ember)}

/* ---- 2 · Die Signatur ---------------------------------------------------
   Links vor jeder Abschnittsvorzeile steht eine kleine Marke. Sie ist pro
   Thema anders gebaut — Ringe, Raster, Balken, Punkte, Striche, Strahlen —
   und das ist der Teil, der beim Blaettern haengen bleibt.                */
.psec__head{position:relative}
.psec__head::before{content:'';position:absolute;left:calc(-1 * clamp(14px,1.5vw,26px));
  top:.25em;width:clamp(6px,.7vw,9px);height:clamp(6px,.7vw,9px);
  background:var(--pt);opacity:0;transform:scale(.4);
  transition:opacity .6s var(--e-out-cubic),transform .7s var(--e-out-expo)}
.psec__head.is-in::before,.psec__head.mk-in::before{opacity:.9;transform:none}

body[data-pt="roast"] .psec__head::before{border-radius:50%;background:none;
  box-shadow:0 0 0 1.5px var(--pt) inset,0 0 0 4px var(--pt-glow)}
body[data-pt="civic"] .psec__head::before{border-radius:0;background:none;
  border-left:1.5px solid var(--pt);border-top:1.5px solid var(--pt);
  width:clamp(9px,1vw,13px);height:clamp(9px,1vw,13px)}
body[data-pt="grove"] .psec__head::before{border-radius:60% 0 60% 0;
  width:clamp(8px,.9vw,12px);height:clamp(8px,.9vw,12px)}
body[data-pt="clear"] .psec__head::before{border-radius:1px;
  width:clamp(3px,.34vw,4px);height:clamp(14px,1.5vw,20px)}
body[data-pt="stage"] .psec__head::before{border-radius:50% 50% 50% 0;
  transform-origin:0 100%;width:clamp(8px,.9vw,12px);height:clamp(8px,.9vw,12px)}
body[data-pt="trade"] .psec__head::before{border-radius:0;
  width:clamp(10px,1.1vw,15px);height:2px;box-shadow:0 5px 0 -.5px var(--pt)}
body[data-pt="press"] .psec__head::before{border-radius:0;background:none;
  width:clamp(11px,1.2vw,16px);height:clamp(9px,1vw,12px);
  border-top:1px solid var(--pt);border-bottom:1px solid var(--pt)}
body[data-pt="visit"] .psec__head::before{border-radius:50%;
  box-shadow:0 0 0 3px var(--pt-glow)}
body[data-pt="legal"] .psec__head::before{opacity:0!important}

@media (max-width:900px){.psec__head::before{display:none}}

/* ---- 2b · Jede Signatur kommt anders herein ----------------------------- */
@media (prefers-reduced-motion:no-preference){
  body[data-pt="roast"] .psec__head.mk-in::before{
    animation:sigRing .9s var(--e-out-expo) both}
  body[data-pt="civic"] .psec__head.mk-in::before{
    animation:sigWinkel .8s var(--e-out-expo) both}
  body[data-pt="grove"] .psec__head.mk-in::before{
    animation:sigBlatt 1s var(--e-out-expo) both}
  body[data-pt="clear"] .psec__head.mk-in::before{
    animation:sigBalken .7s var(--e-out-expo) both}
  body[data-pt="stage"] .psec__head.mk-in::before{
    animation:sigTropfen .85s cubic-bezier(.34,1.56,.64,1) both}
  body[data-pt="trade"] .psec__head.mk-in::before{
    animation:sigStrich .7s var(--e-out-expo) both}
  body[data-pt="press"] .psec__head.mk-in::before{
    animation:sigZeilen .8s var(--e-out-cubic) both}
  body[data-pt="visit"] .psec__head.mk-in::before{
    animation:sigPunkt 1.1s var(--e-out-cubic) both}
}
@keyframes sigRing{from{opacity:0;transform:rotate(-140deg) scale(.3)}
                   to{opacity:.9;transform:none}}
@keyframes sigWinkel{from{opacity:0;transform:translate3d(-6px,-6px,0)}
                     to{opacity:.9;transform:none}}
@keyframes sigBlatt{from{opacity:0;transform:rotate(-55deg) scale(.2)}
                    to{opacity:.9;transform:none}}
@keyframes sigBalken{from{opacity:0;transform:scaleY(0)}
                     to{opacity:.9;transform:none}}
@keyframes sigTropfen{from{opacity:0;transform:translate3d(0,-14px,0) scale(.5)}
                      to{opacity:.9;transform:none}}
@keyframes sigStrich{from{opacity:0;transform:scaleX(0)}
                     to{opacity:.9;transform:none}}
@keyframes sigZeilen{from{opacity:0;transform:scaleY(.15)}
                     to{opacity:.9;transform:none}}
@keyframes sigPunkt{from{opacity:0;box-shadow:0 0 0 0 var(--pt-glow);transform:scale(.4)}
                    60%{opacity:.9;box-shadow:0 0 0 9px transparent}
                    to{opacity:.9;box-shadow:0 0 0 3px var(--pt-glow);transform:none}}

/* ---- 2c · Die Linie unter der Vorzeile ---------------------------------
   Zieht beim Hereinkommen auf. Ihre Laenge und ihr Tempo gehoeren zum Thema:
   presse laeuft weit und schnell wie eine Zeile im Satz, trade kurz und
   fest, legal gar nicht.                                                  */
body[data-pt] .psec__head .label{position:relative}
body[data-pt] .psec__head .label::after{content:'';position:absolute;
  left:0;bottom:-.75em;height:1px;
  width:var(--pt-line,120px);max-width:60vw;
  background:linear-gradient(90deg,var(--pt),transparent);
  transform-origin:0 50%;transform:scaleX(0);opacity:.75;pointer-events:none}
body[data-pt="roast"]{--pt-line:120px} body[data-pt="civic"]{--pt-line:150px}
body[data-pt="grove"]{--pt-line:110px} body[data-pt="clear"]{--pt-line:90px}
body[data-pt="stage"]{--pt-line:170px} body[data-pt="trade"]{--pt-line:96px}
body[data-pt="press"]{--pt-line:210px} body[data-pt="visit"]{--pt-line:130px}
body[data-pt="legal"] .psec__head .label::after{display:none}
body:not([data-pt]) .psec__head .label::after{display:none}
@media (prefers-reduced-motion:no-preference){
  body[data-pt] .psec__head.mk-in .label::after{
    transition:transform .9s var(--e-out-expo) .12s;transform:scaleX(1)}
  body[data-pt="press"] .psec__head.mk-in .label::after{transition-duration:.55s}
  body[data-pt="trade"] .psec__head.mk-in .label::after{transition-duration:1.1s}
}
@media (prefers-reduced-motion:reduce){body[data-pt] .psec__head .label::after{transform:scaleX(1)}}
.a11y-rm body[data-pt] .psec__head .label::after,
body[data-pt].a11y-rm .psec__head .label::after{transition:none;transform:scaleX(1)}
.a11y-rm .psec__head::before{animation:none!important}
@media (max-width:900px){.psec__head .label::after{display:none}}

/* ---- 3 · Der Satz aendert den Ton --------------------------------------- */
.psec__title{font-stretch:var(--pt-stretch);letter-spacing:var(--pt-track)}

/* ---- 4 · Der Seitenhauch ------------------------------------------------
   Ein sehr flacher Verlauf am oberen Rand des Inhalts. Er faellt nicht auf,
   solange man ihn sucht — aber zwei Seiten nebeneinander sehen dadurch
   verschieden aus, und genau darum geht es.                               */
body[data-pt] main{position:relative}
body[data-pt] main::before{content:'';position:absolute;inset:0 0 auto 0;
  height:min(72vh,900px);pointer-events:none;z-index:0;background:var(--pt-wash)}
body[data-pt] main > *{position:relative;z-index:1}

/* ---- 5 · Was den Zweitton sonst noch aufnimmt --------------------------- */
.card:hover::after{background:radial-gradient(circle,var(--pt-glow),transparent 68%)}
.mq__i--ember{color:var(--pt)}
.mq__d{background:var(--pt)}
.mprog{background:linear-gradient(90deg,var(--ember),var(--pt),var(--pt-lo))}
.kpi__n{color:var(--pt)}
.vs__fill::after{background:var(--pt)}

/* Ruhe im Rechtlichen: dort soll nichts glimmen. */
body[data-pt="legal"] main::before{display:none}

@media (prefers-reduced-motion:reduce){
  .psec__head::before{transition:none;opacity:.9;transform:none}
}
.a11y-rm .psec__head::before{transition:none;opacity:.9;transform:none}
/* Bei hohem Kontrast zaehlt Lesbarkeit, nicht Nuance. */
.a11y-contrast .psec__head .label--ember,
.a11y-contrast .cine__k,.a11y-contrast .stick__k{color:var(--ember)}
.a11y-contrast main::before{display:none}