/* LOGOWAND-STANDARD (zentral: ~/Claude/Logowand/vorlage/logowand.css) — NIE in einer Website ändern, nur hier; dann werkzeuge/update.mjs.
   Darstellung 1:1 michael-selck.de (Ansage Michael 30.09.2026): links Text (sticky), rechts das Raster; Ruhezustand = helles Monochrom auf
   dunkler Karte (grayscale + invert OHNE brightness(0) — Bild-Logos behalten ihre Zeichnung); Hover/Fokus = Originalfarbe, Karte je Variante.
   Eingeklappt (js/logowand.js) 17 volle Reihen (mobil 12), die nächste läuft in Maske und Blur aus, darunter „Alle anzeigen“.
   Tokens je Website (in ihrer Token-Datei setzen, sonst Rückfall):
     --lw-linie      Trennlinie oben (Rückfall rgba(255,255,255,.12))
     --lw-karte      Kartengrund (Rückfall rgba(23,23,26,.72))
     --lw-akzent     Hover-Rahmen / Textkachel-Hover (Rückfall #ff4a2e)
     --lw-text       Textfarbe der Kacheln (Rückfall #f4f4f4)
     --lw-kurve      Übergangskurve (Rückfall cubic-bezier(.2,.7,.2,1))
     --lw-kopf       Höhe der Kopfzeile für das Zurückscrollen (nur JS) */
.logowand{border-top:1px solid var(--lw-linie,rgba(255,255,255,.12))}
.logowand__gitter{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.logowand__text{position:sticky;top:clamp(120px,22vh,220px)}
.logowand__wand{position:relative;min-width:0}
@media (min-width:901px){.logowand__wand{padding-top:clamp(56px,8vh,104px)}}
.logowand__fenster{position:relative}
.logowand__raster{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.wand-kachel{--tile-bg:var(--lw-karte,rgba(23,23,26,.72));--tile-border:rgba(255,255,255,.08);--logo-filter:grayscale(1) invert(1) brightness(1.05) contrast(1.05);--logo-opacity:.82;--label-color:color-mix(in srgb,var(--lw-text,#f4f4f4) 32%,transparent);
  --tile-bg-hover:rgba(255,255,255,.06);--tile-border-hover:color-mix(in srgb,var(--lw-akzent,#ff4a2e) 45%,transparent);--logo-filter-hover:none;--logo-opacity-hover:1;--label-color-hover:color-mix(in srgb,var(--lw-text,#f4f4f4) 60%,transparent);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;min-width:0;min-height:104px;padding:18px 16px;text-align:center;border:1px solid var(--tile-border);border-radius:14px;background:var(--tile-bg);
  transition:border-color .35s var(--lw-kurve,cubic-bezier(.2,.7,.2,1)),background .35s var(--lw-kurve,cubic-bezier(.2,.7,.2,1)),transform .35s var(--lw-kurve,cubic-bezier(.2,.7,.2,1)),box-shadow .35s var(--lw-kurve,cubic-bezier(.2,.7,.2,1))}
.wand-kachel--light-card{--tile-bg-hover:#fff;--tile-border-hover:rgba(20,26,38,.18);--label-color-hover:rgba(20,26,38,.78)}
.wand-kachel--dark-card{--logo-filter:grayscale(1) brightness(1.28) contrast(1.02);--logo-opacity:.88;--tile-bg-hover:rgba(4,9,18,.94);--tile-border-hover:rgba(255,255,255,.18)}
.wand-kachel--brand-card{--logo-filter:grayscale(1) invert(1) brightness(1.12) contrast(1.02);--logo-opacity:.85;--tile-bg-hover:rgba(255,255,255,.1);--tile-border-hover:rgba(201,174,133,.4)}
.wand-kachel--rostock-port{--logo-filter:grayscale(1) invert(1) brightness(1.08) contrast(1.02);--logo-opacity:.85;--tile-bg-hover:#fff;--tile-border-hover:rgba(20,26,38,.18);--label-color-hover:rgba(20,26,38,.78)}
.wand-kachel--rostock-port:hover .wand-kachel__bild,.wand-kachel--rostock-port:focus-within .wand-kachel__bild{filter:none !important;opacity:1}
.wand-kachel--zoo{--logo-filter:grayscale(1) brightness(1.15) contrast(1.02);--logo-opacity:.9;--tile-bg-hover:rgba(255,255,255,.1);--tile-border-hover:rgba(201,174,133,.4)}
.wand-kachel__bild{max-height:46px;max-width:88%;width:auto;height:auto;object-fit:contain;filter:var(--logo-filter);opacity:var(--logo-opacity);transition:opacity .4s var(--lw-kurve,cubic-bezier(.2,.7,.2,1)),filter .4s var(--lw-kurve,cubic-bezier(.2,.7,.2,1))}
.wand-kachel:hover .wand-kachel__bild,.wand-kachel:focus-within .wand-kachel__bild{filter:var(--logo-filter-hover);opacity:var(--logo-opacity-hover)}
.wand-kachel__name{font-weight:600;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;line-height:1.3;color:var(--label-color);overflow-wrap:anywhere;max-width:100%;transition:color .35s var(--lw-kurve,cubic-bezier(.2,.7,.2,1))}
.wand-kachel:hover .wand-kachel__name,.wand-kachel:focus-within .wand-kachel__name{color:var(--label-color-hover)}
.wand-kachel__text{font-weight:600;font-size:clamp(12.5px,1.05vw,15px);line-height:1.3;letter-spacing:.01em;color:color-mix(in srgb,var(--lw-text,#f4f4f4) 60%,transparent);overflow-wrap:anywhere;max-width:100%;transition:color .35s var(--lw-kurve,cubic-bezier(.2,.7,.2,1))}
.wand-kachel:hover,.wand-kachel:focus-within{border-color:var(--tile-border-hover);background:var(--tile-bg-hover);transform:translateY(-2px);box-shadow:0 14px 30px -20px rgba(0,0,0,.7),0 0 0 1px rgba(201,174,133,.18) inset}
.wand-kachel:hover .wand-kachel__text,.wand-kachel:focus-within .wand-kachel__text{color:var(--lw-akzent,#ff4a2e)}
/* Klappmechanik (js/logowand.js): eingeklappt begrenzt max-height auf volle Reihen, die nächste läuft in Maske und Blur aus */
.logowand--zu .logowand__raster{max-height:calc(18 * 118px);overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,#000 var(--wand-fest,95%),transparent 100%);mask-image:linear-gradient(to bottom,#000 var(--wand-fest,95%),transparent 100%)}
.logowand__auslauf{position:absolute;left:0;right:0;bottom:0;height:clamp(118px,15vh,150px);pointer-events:none;opacity:0;transition:opacity .45s var(--lw-kurve,cubic-bezier(.2,.7,.2,1))}
@supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){.logowand__auslauf{-webkit-backdrop-filter:blur(2.5px);backdrop-filter:blur(2.5px);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.5) 46%,#000 100%);mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.5) 46%,#000 100%)}}
.logowand--zu .logowand__auslauf{opacity:1}
.logowand__aktionen{display:flex;flex-direction:column;align-items:center;gap:15px;margin-top:clamp(30px,4vw,46px);text-align:center}
.logowand--zu .logowand__aktionen{position:absolute;left:0;right:0;bottom:clamp(16px,3vh,32px);margin-top:0;z-index:3}
.logowand__knopf{gap:.6rem}
.logowand__winkel{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .3s var(--lw-kurve,cubic-bezier(.2,.7,.2,1))}
.logowand__knopf[aria-expanded="true"] .logowand__winkel{transform:translateY(1px) rotate(-135deg)}
@media (max-width:900px){.logowand__gitter{grid-template-columns:minmax(0,1fr);gap:32px}.logowand__text{position:static}.logowand__raster{grid-template-columns:repeat(2,1fr);gap:12px}.wand-kachel{min-height:92px;padding:16px 12px}.logowand--zu .logowand__raster{max-height:calc(13 * 104px)}.logowand__auslauf{height:clamp(104px,14vh,132px)}}
@media (max-width:359px){.logowand__raster{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.wand-kachel,.wand-kachel__bild,.wand-kachel__text,.wand-kachel__name,.logowand__auslauf,.logowand__winkel{transition:none}.wand-kachel:hover,.wand-kachel:focus-within{transform:none}}