/* css-lde/lde-css3.css */
:root{
  --box-width: 80vw;
  --box-max: 1100px;
  --accent-red: #c85536;
  --accent-green: #1D8BE7;
  --accent-blue: #104e8b;
  --font-stack: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
.plain {
  font-family: initial;
  font-size: initial;
  font-weight: initial;
  line-height: initial;
}
body { font-family: var(--font-stack); line-height:1.6; color:#104e8b; margin:20px; font-size: 18px; }

/* zentrierter Bereich */
.page-center { display:flex; justify-content:center; }

/* Container */
.image-wrap {
  position: relative;
  perspective: 900px;
  max-width: 100%;
}

/* Spalten-Wrapper (Säulen stets nebeneinander) */
.columns-wrap{
  display:flex;
  flex-direction: column;
  gap:14px;
  width: min(1100px, 92vw);
  overflow: visible;
}

.pillars{
  display:flex;
  gap:18px;
  align-items:flex-end;
}
/* Säulen */
.pillar{
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: clamp(180px, 28vw, 360px);
  border-radius: 12px;
  box-shadow:
    inset 0 10px 18px rgba(255,255,255,0.35),
    inset 0 -16px 22px rgba(0,0,0,0.12),
    0 14px 28px rgba(20,30,60,0.18),
    0 6px 12px rgba(20,30,60,0.10);
  transform: translateZ(0);
  overflow: visible;
}

/* 3D-Farben/Verläufe der Säulen */
.pillar--red{
  background:
    linear-gradient(135deg, rgba(255,255,255,0.25), rgba(0,0,0,0) 40%),
    linear-gradient(180deg, #c85536, #c85536);
  border: 1px solid #c85536;
}
.pillar--green{
  background:
    linear-gradient(135deg, rgba(255,255,255,0.25), rgba(0,0,0,0) 40%),
    linear-gradient(180deg, #1D8BE7, #1D8BE7);
  border: 1px solid #1D8BE7;
}
.pillar--blue{
  background:
    linear-gradient(135deg, rgba(255,255,255,0.25), rgba(0,0,0,0) 40%),
    linear-gradient(180deg, #104e8b, #104e8b);
  border: 1px solid #104e8b;
}

/* Großflächige Beschriftung */
.pillar__label{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.95);
  text-shadow:
    0 2px 6px rgba(0,0,0,0.25),
    0 1px 0 rgba(0,0,0,0.1);
  font-size: clamp(64px, 10vw, 120px);
  user-select: none;
  pointer-events: none;
}

/* Hotspots (unsichtbar, flächig) */
.hotspot {
  position: absolute;
  inset: 0;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  border-radius: inherit;
  transition: background-color 180ms ease-in-out;
}

/* Abdunklung beim Hover/Fokus über der Säule */
.pillar:hover .hotspot,
.pillar:focus-within .hotspot,
.hotspot:focus {
  background: rgba(0,0,0,0.10);
  outline: none;
}

/* Info-Bar (volle Breite) */
.info-bar{
  width: 100%;
  padding: 16px 18px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 12px 22px rgba(20,30,60,0.10), 0 4px 10px rgba(20,30,60,0.06);
  position: relative;
  min-height: 88px;
  display: none; /* erscheint erst bei Hover/Fokus */
  --bar-fg: #102;
}
.info-bar, .info-bar p, .info-bar .info-box__title { color: #104e8b; }
.info-panel{ display:none; }
.info-panel--red{ --accent: var(--accent-red); }
.info-panel--green{ --accent: var(--accent-green); }
.info-panel--blue{ --accent: var(--accent-blue); }

@keyframes infoIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Beim Hover keine globale Unterdrückung aller Panels; gezielt gepinntes Panel wird unten ausgeblendet */

/* sichtbare Info abhängig von Hover/Fokus der jeweiligen Säule. Fallback wenn :has unterstützt wird */
.pillars:has(.pillar--red:hover, .pillar--red:focus-within) ~ .info-bar{ display:block; background:#ffdab9; border-color:#c85536; --bar-fg:#1a0e0e; animation: infoIn 220ms ease-out both; }
.pillars:has(.pillar--green:hover, .pillar--green:focus-within) ~ .info-bar{ display:block; background:#b0c4de; border-color:#1D8BE7; --bar-fg:#0f1a11; animation: infoIn 220ms ease-out both; }
.pillars:has(.pillar--blue:hover, .pillar--blue:focus-within) ~ .info-bar{ display:block; background:#e6e6fa; border-color:#104e8b; --bar-fg:#0f1520; animation: infoIn 220ms ease-out both; }

.pillars:has(.pillar--red:hover, .pillar--red:focus-within) ~ .info-bar .info-panel--red,
.pillars:has(.pillar--green:hover, .pillar--green:focus-within) ~ .info-bar .info-panel--green,
.pillars:has(.pillar--blue:hover, .pillar--blue:focus-within) ~ .info-bar .info-panel--blue{ display:block; }

/* Info-Box (standardmäßig verborgen) */
.info-box {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%) translateY(-6px) rotateX(90deg);
  transform-origin: top center;
  transition: transform 360ms cubic-bezier(.2,.9,.3,1), opacity 300ms, visibility 0s linear 0.36s;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  width: var(--box-width);
  max-width: var(--box-max);
  min-width: 300px;
  padding: 18px;
  border-radius: 8px;
  box-sizing: border-box;
  z-index: 1000;
  color: #102;
  box-shadow: 0 18px 30px rgba(20,30,60,0.18), 0 6px 10px rgba(20,30,60,0.08);
  border: 1px solid rgba(0,0,0,0.08);
  background: #fff;
}

/* Pfeil */
.info-box::before{
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid rgba(0,0,0,0.06);
}

/* Farbvarianten */
.info-box--red { --accent: var(--accent-red); background: linear-gradient(180deg,#fff6f6,#fff); border-color: #c85536; }
.info-box--green { --accent: var(--accent-green); background: linear-gradient(180deg,#f6fff6,#fff); border-color: #1D8BE7; }
.info-box--blue { --accent: var(--accent-blue); background: linear-gradient(180deg,#f3f8ff,#fff); border-color: #104e8b; }

.info-box__title { display:flex; align-items:center; gap:10px; margin-bottom:8px; font-weight:700; color:rgba(0,0,0,0.85); }
.info-box__dot { width:12px; height:12px; border-radius:3px; background:var(--accent,#333); box-shadow:0 2px 6px rgba(0,0,0,0.06) inset; }
.info-bar .info-box__title{ margin-bottom:6px; }

/* Sichtbar machen: Hotspot direkt vor Info-Box im DOM */
.hotspot:focus + .info-box,
.hotspot:hover + .info-box,
.info-box:hover,
.pillar:hover .info-box,
.pillar:focus-within .info-box {
  transform: translateX(-50%) translateY(12px) rotateX(0deg);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Responsive: Box auf sehr kleinen Bildschirmen */
@media (max-width:600px){
  .info-box { width: calc(100% - 24px); left:50%; transform: translateX(-50%) translateY(-6px) rotateX(90deg); min-width:0; }
  .hotspot:focus + .info-box,
  .hotspot:hover + .info-box,
  .info-box:hover { transform: translateX(-50%) translateY(10px) rotateX(0deg); }
}

/* --- CSS-Only: Zustand via :target (breit unterstützt, kein :has nötig) --- */
.state-anchor{ position:absolute; width:0; height:0; overflow:hidden; clip:rect(0 0 0 0); }

/* Info-Bar sichtbar halten, wenn ein Zustand anvisiert ist */
#state-red:target ~ .info-bar{ display:block; background:#ffdab9; border-color:#c85536; --bar-fg:#1a0e0e; animation: infoIn 220ms ease-out both; }
#state-green:target ~ .info-bar{ display:block; background:#b0c4de; border-color:#1D8BE7; --bar-fg:#0f1a11; animation: infoIn 220ms ease-out both; }
#state-blue:target ~ .info-bar{ display:block; background:#e6e6fa; border-color:#104e8b; --bar-fg:#0f1520; animation: infoIn 220ms ease-out both; }

#state-red:target ~ .info-bar .info-panel--red{ display:block; }
#state-green:target ~ .info-bar .info-panel--green{ display:block; }
#state-blue:target ~ .info-bar .info-panel--blue{ display:block; }

/* Hover soll :target nur übersteuern, wenn eine ANDERE Säule gehovert wird */
.pillars:has(.pillar--red:hover) ~ #state-green:target ~ .info-bar .info-panel--green,
.pillars:has(.pillar--red:hover) ~ #state-blue:target ~ .info-bar .info-panel--blue,
.pillars:has(.pillar--green:hover) ~ #state-red:target ~ .info-bar .info-panel--red,
.pillars:has(.pillar--green:hover) ~ #state-blue:target ~ .info-bar .info-panel--blue,
.pillars:has(.pillar--blue:hover) ~ #state-red:target ~ .info-bar .info-panel--red,
.pillars:has(.pillar--blue:hover) ~ #state-green:target ~ .info-bar .info-panel--green{ display:none !important; }

/* Hintergrundfarbe beim Hover sicher überschreiben */
.pillars:has(.pillar--red:hover) ~ .info-bar{ background:#ffdab9 !important; border-color:#c85536 !important; }
.pillars:has(.pillar--green:hover) ~ .info-bar{ background:#b0c4de !important; border-color:#1D8BE7 !important; }
.pillars:has(.pillar--blue:hover) ~ .info-bar{ background:#e6e6fa !important; border-color:#104e8b !important; }
@media (max-width:600px){
  .pillar:hover .hotspot,
  .pillar:focus-within .hotspot,
  .hotspot:focus { pointer-events: none; }
}
/* Add at the end of lde-css2.css */
/* Append to lde-css2.css */

/* Make sure the info-box is always above and receives taps */
.info-box { z-index: 10000; pointer-events: auto; }
.info-box a, .info-box button { position: relative; z-index: 10001; touch-action: manipulation; }

/* Keep the box open on tap/focus so links can be activated */
.hotspot:focus + .info-box,
.info-box:focus,
.info-box:focus-within,
.info-box:active {
  transform: translateX(-50%) translateY(12px) rotateX(0deg);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Mobile: when the box is open, disable the hotspot so it doesn't eat the tap */
@media (max-width:600px){
  .hotspot:focus + .info-box { transform: translateX(-50%) translateY(10px) rotateX(0deg); }

  /* Requires :has support (iOS 16.4+/modern Android) */
  .pillar:has(.hotspot:focus + .info-box, .info-box:hover, .info-box:focus, .info-box:focus-within, .info-box:active) .hotspot{
    pointer-events: none;
  }
}
/* Append to lde-css2.css */

/* Ensure the info-box sits above the hotspot and receives taps */
.hotspot { z-index: 1; }
.info-box { z-index: 2; pointer-events: auto; }
.info-box a, .info-box button { pointer-events: auto; }

/* Mobile: when the info-box is open or focused, disable the hotspot so taps hit links */
@media (max-width:600px){
  .pillar:has(.hotspot:focus + .info-box, .info-box:hover, .info-box:focus, .info-box:focus-within, .info-box:active) .hotspot,
  .pillar:focus-within .hotspot {
    pointer-events: none;
  }
}