/* ---------------------------------------------------------------------------
   Messen & Events — Stylesheet.
   VOLLSTÄNDIG unter .l2w-messen gekapselt: eingebaut in die Website darf hier
   nichts nach außen wirken. Deshalb gibt es keine globalen Regeln für body,
   html oder h1 — die Grundwerte hängen an der Hülle selbst.
   Dieselbe Datei wird vom Prototyp und von TYPO3 benutzt.
--------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   Messen & Events — Entwurf B „Save the date", finale Fassung
   Marken-Token übernommen aus global.css der Live-Website (www.led2work.com)
--------------------------------------------------------------------------- */
.l2w-messen{--gruen:#99CC33;
  --gruen-dark:#608020;
  --grau:#333333;            /* Textfarbe der Website */
  --grau-mittel:#596065;     /* Nebentexte */
  --grau-hell:#efefef;
  --linie:#c5c5c5;
  --rot:#ee2222;
  --radius:8px;              /* Kästen, Bilder, Eingabefelder der Website */
  --radius-pille:40px;       /* Buttons der Website sind Pillen */
  /* Die Website arbeitet ohne Schatten und ohne Rahmen — nur Fläche und Radius. */
  --schatten:none;
  --schatten-hoch:0 6px 22px rgba(51,51,51,.10);
  --dunkel-1:#4c5357;
  --dunkel-2:#2b2f33;
  --dunkel-3:#1e2124;}
.l2w-messen, .l2w-messen *{box-sizing:border-box}
.l2w-messen{scroll-behavior:smooth}
.l2w-messen{margin:0; font-family:"Open Sans",Segoe UI,system-ui,sans-serif;
  color:var(--grau); background:#fff; line-height:1.4; font-size:18px;
  -webkit-font-smoothing:antialiased;}
/* Die Website setzt Überschriften LEICHT (Gewicht 400), nicht fett. */
.l2w-messen h1, .l2w-messen h2, .l2w-messen h3{color:var(--grau); font-weight:400; line-height:1.18; margin:0 0 .5em}
.l2w-messen h1{font-size:clamp(34px,5vw,56px)}
.l2w-messen h2{font-size:clamp(28px,3.2vw,40px)}
.l2w-messen h3{font-size:20px; font-weight:600}
.l2w-messen p{margin:0 0 1em}
.l2w-messen a{color:var(--gruen-dark)}
.l2w-messen .wrap{max-width:1180px; margin:0 auto; padding:0 24px}
.l2w-messen .sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ---------- Prototyp-Leiste (entfällt beim Livegang) ---------- */

/* ---------- Seiten-Chrome (nur angedeutet) ---------- */

/* ---------- Hero: der nächste Termin als Einladung ---------- */
.l2w-messen .hero{background:linear-gradient(135deg,var(--dunkel-1) 0%,var(--dunkel-2) 58%,var(--dunkel-3) 100%);
  color:#fff; position:relative; overflow:hidden;}
.l2w-messen .hero::after{content:""; position:absolute; right:-160px; top:-190px; width:620px; height:620px;
  background:radial-gradient(circle,rgba(153,204,51,.34) 0%,rgba(153,204,51,0) 68%); pointer-events:none;}
/* Messefoto als Hero-Fläche. Der Verlauf darüber ist keine Deko, sondern Pflicht:
   ohne ihn steht weiße Schrift auf hellen Messehallen und ist nicht mehr lesbar.
   Links dunkler (dort steht der Text), rechts durchsichtiger (dort sieht man das Foto). */
.l2w-messen .hero.mitBild::before{content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(100deg, rgba(24,27,30,.94) 0%, rgba(24,27,30,.84) 45%, rgba(24,27,30,.66) 100%),
    var(--herobild);
  background-size:cover, cover;
  background-position:center, center;}
.l2w-messen .hero.mitBild .ticket{background:rgba(18,20,22,.62); border-color:rgba(255,255,255,.22)}
/* der grüne Lichtschein konkurriert mit dem Foto — auf Fotos deutlich zurücknehmen */
.l2w-messen .hero.mitBild::after{opacity:.4}
.l2w-messen .hero .wrap{position:relative; z-index:1; padding-top:54px; padding-bottom:54px}
.l2w-messen .hero .augen{font-size:15px; letter-spacing:.3px; color:var(--gruen); font-weight:600; margin:0;}
.l2w-messen .hero h1{color:#fff; margin:10px 0 6px}
.l2w-messen .hero .ort{font-size:18px; opacity:.85; margin:0 0 28px}

.l2w-messen .ticket{display:grid; grid-template-columns:auto 1px 1fr auto; gap:0 32px; align-items:center;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.17);
  border-radius:6px; padding:24px 28px;}
.l2w-messen .ticket .zaehler{text-align:center}
.l2w-messen .ticket .zaehler b{display:block; font-size:56px; font-weight:700; line-height:1; color:var(--gruen)}
.l2w-messen .ticket .zaehler span{font-size:14px; opacity:.85}
.l2w-messen .ticket .trenn{background:rgba(255,255,255,.2); height:70px; width:1px}
.l2w-messen .ticket dl{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:18px; margin:0; min-width:0}
.l2w-messen .ticket dt{font-size:14px; color:var(--gruen); font-weight:600}
.l2w-messen .ticket dd{margin:3px 0 0; font-size:18px; font-weight:600}
.l2w-messen .ticket .knoepfe{display:flex; flex-direction:column; gap:10px}
@media (max-width:940px){
  .l2w-messen .ticket{grid-template-columns:1fr; gap:22px}
  .l2w-messen .ticket .trenn{display:none}
  .l2w-messen .ticket .zaehler{text-align:left; display:flex; align-items:baseline; gap:14px}
  .l2w-messen .ticket .zaehler b{font-size:40px}
}

/* ---------- Einleitung ---------- */
.l2w-messen .einleitung{padding:52px 0 0}
.l2w-messen .einleitung p{max-width:70ch; font-size:18px; margin:0}

/* ---------- Kachelraster ---------- */
/* Hellgraues Band unter dem Kachelraster — dieselbe Bühne, die die Website ihren
   weißen Kästen gibt. Ohne sie hätten randlose Kacheln keine Kante. */
.l2w-messen .rasterBand{background:var(--grau-hell); margin-top:56px; padding:52px 0 60px}
.l2w-messen .rasterKopf{display:flex; align-items:baseline; gap:20px; flex-wrap:wrap; margin:0}
.l2w-messen .rasterKopf h2{margin:0}
.l2w-messen .rasterKopf p{margin:0; color:var(--grau-mittel); flex:1; min-width:220px}
.l2w-messen .raster{display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:28px; margin:30px 0 0}

/* Wie die Kästen der Website: weiße Fläche, 8 px Radius, kein Rahmen, kein Schatten.
   Damit sie sich absetzen, liegt das Raster auf hellgrauem Grund. */
.l2w-messen .kachel{border:0; border-radius:var(--radius); overflow:hidden; background:#fff;
  display:flex; flex-direction:column; transition:transform .18s, box-shadow .18s, border-color .18s;}
.l2w-messen .kachel:hover{transform:translateY(-3px); box-shadow:var(--schatten-hoch)}
.l2w-messen .kachel .bild{height:152px; position:relative; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(140deg,var(--gruen) 0%,var(--gruen-dark) 100%); color:#fff; overflow:hidden;}
.l2w-messen .kachel.event .bild{background:linear-gradient(140deg,#6b7378 0%,#3c4246 100%)}
.l2w-messen .kachel.online .bild{background:linear-gradient(140deg,#8fb84a 0%,#4f6a1c 100%)}
/* Foto: formatfüllend, leicht abgedunkelt, damit die Marker lesbar bleiben */
.l2w-messen .kachel .bild.istFoto > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.l2w-messen .kachel .bild.istFoto::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.45))}
/* Logo: freigestellt mit Schutzraum auf eigener Fläche — nie beschneiden, nie verzerren.
   Die großzügige Polsterung hält Land- und Countdown-Plakette aus dem Schutzraum heraus.
   width/height 100% + contain, weil SVG-Logos ohne feste Maße sonst auf 0 zusammenfallen.  */
.l2w-messen .kachel .bild.istLogo{padding:40px 30px 42px}
.l2w-messen .kachel .bild.istLogo > img{width:100%; height:100%; object-fit:contain}
.l2w-messen .kachel .kuerzel{font-size:40px; font-weight:700; letter-spacing:2px; opacity:.96; position:relative; z-index:1}
.l2w-messen .kachel .land{position:absolute; top:12px; left:14px; z-index:2; font-size:13px; font-weight:600; background:rgba(0,0,0,.34); padding:4px 12px; border-radius:20px;}
.l2w-messen .kachel .rest{position:absolute; bottom:12px; right:14px; z-index:2; font-size:14px; font-weight:600;
  background:#fff; color:var(--gruen-dark); padding:4px 11px; border-radius:12px;}
.l2w-messen .kachel .rest.jetzt{background:var(--rot); color:#fff}
/* auf heller Logofläche braucht die weiße Restlaufzeit-Plakette eine Kante */
.l2w-messen .kachel .bild.istLogo .rest{box-shadow:0 0 0 1px rgba(51,51,51,.10)}

/* Messelogo als Signet — auf der Kachel unten links, im Hero über dem Titel.
   Immer auf eigener Fläche mit Schutzraum, nie direkt aufs Foto und nie als Hintergrund. */
.l2w-messen .signet{display:inline-flex; align-items:center; justify-content:center;
  background:#fff; border-radius:var(--radius); box-shadow:0 2px 8px rgba(0,0,0,.25);}
.l2w-messen .signet img{width:100%; height:100%; object-fit:contain; display:block}
.l2w-messen .signet.dunkel{border:1px solid rgba(255,255,255,.22)}

.l2w-messen .kachel .signet{position:absolute; left:14px; bottom:12px; z-index:2; width:118px; height:44px; padding:7px 11px}
.l2w-messen .hero .signet.gross{margin:0 0 16px; width:186px; height:66px; padding:10px 18px}
.l2w-messen .kachel .inhalt{padding:18px 20px 20px; display:flex; flex-direction:column; flex:1}
.l2w-messen .kachel h3{margin:0 0 4px; font-size:18px}
.l2w-messen .kachel .datum{color:var(--gruen-dark); font-weight:600; font-size:16px; margin:0 0 12px}
.l2w-messen .kachel dl{margin:0 0 18px; font-size:14px; display:grid; gap:9px}
.l2w-messen .kachel dt{font-size:14px; color:var(--grau-mittel); font-weight:600}
.l2w-messen .kachel dd{margin:0}
.l2w-messen .kachel .marker{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:9px}
.l2w-messen .kachel .knoepfe{margin-top:auto; display:flex; gap:8px; flex-wrap:wrap}
.l2w-messen .kachel .knoepfe .btn{flex:1}
.l2w-messen .kachel .linkzeile{margin:11px 0 0; padding-top:11px; border-top:1px solid var(--grau-hell);
  display:flex; flex-wrap:wrap; align-items:center; gap:0 6px; font-size:14px;}
.l2w-messen .kachel .linkzeile > *{background:none; border:0; padding:0; font:inherit; color:var(--gruen-dark);
  cursor:pointer; text-decoration:underline; text-underline-offset:2px;}
.l2w-messen .kachel .linkzeile > *:hover{color:var(--grau)}
.l2w-messen .kachel .linkzeile > * + *::before{content:"·"; display:inline-block; margin:0 6px 0 0; text-decoration:none; color:var(--linie);}

.l2w-messen .chip{display:inline-block; padding:4px 12px; border-radius:20px; font-size:13px; font-weight:600}
.l2w-messen .chip-messe{background:var(--gruen); color:#fff}
.l2w-messen .chip-event{background:var(--grau); color:#fff}
.l2w-messen .chip-online{background:#fff; color:var(--gruen-dark); border:1px solid var(--gruen)}
.l2w-messen .chip-laeuft{background:var(--rot); color:#fff}
.l2w-messen .chip-partner{background:var(--grau-hell); color:var(--grau); font-weight:600}
.l2w-messen .chip-distributor{background:#fff; color:var(--grau); border:1px solid var(--grau)}

/* Hinweis, wenn LED2WORK nicht selbst vor Ort ist */
.l2w-messen .kachel .fussnote{margin:0 0 16px; font-size:13px; line-height:1.5; color:var(--grau-mittel);
  border-left:3px solid var(--linie); padding-left:11px;}

.l2w-messen .leer{grid-column:1/-1; background:var(--grau-hell); padding:34px; border-radius:6px; text-align:center;}
.l2w-messen .leer h3{margin-top:0}
.l2w-messen .leer p{max-width:56ch; margin:0 auto 18px}

/* ---------- Buttons ---------- */
.l2w-messen .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-size:16px;
  padding:16px 24px; border-radius:var(--radius-pille); border:2px solid transparent;
  font-family:inherit; font-weight:600; text-decoration:none; cursor:pointer; transition:.15s; text-align:center;}
.l2w-messen .btn-primar{background:var(--gruen); color:#fff}
.l2w-messen .btn-primar:hover{background:var(--gruen-dark)}
.l2w-messen .btn-rand{background:transparent; color:var(--gruen-dark); border-color:var(--gruen)}
.l2w-messen .btn-rand:hover{background:var(--gruen); color:#fff}
.l2w-messen .btn-hell{background:#fff; color:var(--gruen-dark); border-color:#fff}
.l2w-messen .btn-hell:hover{background:var(--gruen); color:#fff; border-color:var(--gruen)}
.l2w-messen .btn-klein{padding:12px 22px; font-size:16px}

/* ---------- Abschlussband ---------- */
/* Das Abschlussband bleibt weiß, damit sich Grau und Weiß abwechseln wie sonst auf der Website */
.l2w-messen .band{background:#fff; margin-top:0; padding:56px 0 8px}
.l2w-messen .band .wrap{display:grid; grid-template-columns:1.5fr 1fr; gap:38px; align-items:center}
.l2w-messen .band h2{margin-bottom:.35em}
.l2w-messen .band p{margin:0; max-width:62ch}
.l2w-messen .band .knoepfe{display:flex; flex-direction:column; gap:12px}
@media (max-width:820px){
  .l2w-messen .band .wrap{grid-template-columns:1fr}
}

/* ---------- Terminwunsch-Dialog ---------- */
.l2w-messen dialog.termin{border:0; border-radius:6px; padding:0; width:min(560px,94vw); box-shadow:var(--schatten-hoch)}
.l2w-messen dialog.termin::backdrop{background:rgba(30,33,36,.6)}
.l2w-messen dialog.termin .kopf{background:var(--gruen); color:#fff; padding:18px 24px}
.l2w-messen dialog.termin .kopf h3{color:#fff; margin:0; font-size:20px}
.l2w-messen dialog.termin .kopf p{margin:4px 0 0; font-size:14px; opacity:.95}
.l2w-messen dialog.termin form{padding:20px 24px 24px}
.l2w-messen dialog.termin label{display:block; font-size:13px; font-weight:600; margin:12px 0 4px}
.l2w-messen dialog.termin input, .l2w-messen dialog.termin select, .l2w-messen dialog.termin textarea{width:100%; padding:14px 18px; border:1px solid var(--linie); border-radius:var(--radius); font:inherit; color:var(--grau);}
.l2w-messen dialog.termin input:focus, .l2w-messen dialog.termin select:focus, .l2w-messen dialog.termin textarea:focus{outline:2px solid var(--gruen); outline-offset:1px; border-color:var(--gruen);}
.l2w-messen dialog.termin .zeile{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.l2w-messen dialog.termin .aktionen{display:flex; gap:10px; margin-top:22px; flex-wrap:wrap}
.l2w-messen dialog.termin .hinweis{font-size:12px; color:var(--grau-mittel); margin:14px 0 0}
@media (max-width:600px){
  .l2w-messen dialog.termin .zeile{grid-template-columns:1fr}
}

/* ---------- Druck ---------- */
@media print{
  .l2w-messen .hero{background:none; color:#000}
  .l2w-messen .hero h1, .l2w-messen .hero .augen, .l2w-messen .ticket .zaehler b{color:#000}
  .l2w-messen .kachel{break-inside:avoid}
}

/* ---------- Bildnachweis ---------- */
.l2w-messen .bildnachweis{margin:22px 0 0; padding-top:14px; border-top:1px solid var(--grau-hell);
  font-size:12px; color:var(--grau-mittel);}

/* ---------- Rückblick: dieselbe Kachel, nur zurückgenommen ---------- */
.l2w-messen .kachel.vergangen{border-style:dashed}
.l2w-messen .kachel.vergangen .bild > img{filter:grayscale(.55)}
.l2w-messen .kachel.vergangen .rest{background:var(--grau-hell); color:var(--grau); border:0}
.l2w-messen .kachel.vergangen h3{color:var(--grau-mittel)}

/* ---------------------------------------------------------------------------
   Bewusste Ausnahme von der Kapselung.
   Die Seitenvorlage rendert: Stage (colPos 10) → Brotkrümel → Inhalt (colPos 20).
   Diese Seite bringt ihren eigenen Kopf mit und hat deshalb keine Stage. Ohne sie
   rutschen die Brotkrümel unter den fixierten Seitenkopf (125 px hoch, z-index 999).
   Die Regel greift nur, wenn die Brotkrümel das ERSTE Element in <main> sind —
   also genau dann, wenn eine Stage fehlt. Und messen.css wird ausschließlich auf
   dieser Seite geladen, wirkt also nirgendwo sonst.
--------------------------------------------------------------------------- */
main > .breadcrumbs:first-child{padding-top:132px}
@media (max-width:1024px){ main > .breadcrumbs:first-child{padding-top:128px} }
@media (max-width:480px){  main > .breadcrumbs:first-child{padding-top:120px} }

/* Die Website trennt Fließtext automatisch (hyphens:auto) — das ist gewollt und bleibt.
   Eigennamen, Hallen- und Standnummern dürfen aber nicht mitten im Wort brechen
   („Wag-ner GmbH"). Deshalb hier gezielt abgeschaltet. */
.l2w-messen .ticket dd,
.l2w-messen .kachel dd,
.l2w-messen .kachel h3,
.l2w-messen .kachel .datum,
.l2w-messen .hero .ort{hyphens:manual}

/* Kurze Hervorhebung des Messe-Feldes, wenn von einer Kachel dorthin gesprungen wurde.
   BEWUSST ausserhalb der Hülle .l2w-messen: das Formular gehört Powermail und liegt
   nicht in unserem Block. Deshalb auch die Farbe ausgeschrieben — die Variablen sind
   an die Hülle gebunden und würden hier nicht greifen.
   Das Formular selbst bleibt ungestaltet; es wird von den Powermail-Vorlagen der
   Website gerendert und sieht dadurch aus wie das Kontaktformular. */
.l2w-hervor{outline:2px solid #99CC33; outline-offset:2px}