/* ========= Base ========= */
:root{ --rc-border:#e5e7eb; --rc-bg:#a8a8a8; --rc-text:#111827; --rc-muted:#6b7280; }
*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--rc-text);
  background:var(--rc-bg);
}

/* Header */
.rc-header{
  display:flex; align-items:center; gap:16px;
  padding:12px 16px; border-bottom:1px solid var(--rc-border);
  background:#fff;
}
.rc-header .logo{
  height:100px;         /* Logo fix verkleinern */
  width:auto;
  object-fit:contain;
}
.rc-header .nav-buttons{ margin-left:auto; display:flex; gap:16px; }
.rc-header .nav-buttons a{ font-weight:600; text-decoration:none; color:var(--rc-text); }

/* Language switch */
.lang-switch{ position:relative; display:inline-block; }
.lang-switch__btn{
  display:flex; align-items:center; gap:.35rem; cursor:pointer; font-weight:600;
  border:none; background:transparent; padding:6px 8px; border-radius:6px;
}
.lang-switch__btn:hover{ background:#f3f4f6; }
.lang-switch__btn .flag{ font-size:1.1rem; }
.lang-switch__menu{
  position:absolute; right:0; top:100%; margin-top:.4rem; background:#fff;
  border:1px solid #ddd; border-radius:.5rem; box-shadow:0 6px 24px rgba(0,0,0,.12);
  min-width:12rem; padding:.25rem; display:none; z-index:30;
}
.lang-switch__menu.is-open{ display:block; }
.lang-switch__item{
  display:flex; align-items:center; gap:.5rem; padding:.5rem .6rem;
  border-radius:.35rem; cursor:pointer;
}
.lang-switch__item:hover{ background:#f2f4f7; }

/* ========= Layout ========= */
.container{
  display:flex;
  min-height:calc(100vh - 64px);
  position:relative;
  background:var(--rc-bg);
}
.sidebar{
  width:280px; min-width:280px;
  background:#a7a7a7; border-right:1px solid var(--rc-border);
  padding:14px 12px;
  transition: width .25s ease, min-width .25s ease, padding .25s ease;
  position:relative;
  overflow:visible; /* wichtig für Flyouts */
  z-index:10;
}
.main-content{ flex:1; padding:16px; transition: padding .25s ease; }

/* ========= Sidebar Box ========= */
.box{
  border:1px solid var(--rc-border);
  border-radius:10px;
  padding:10px;
  margin-bottom:12px;
  background:#fff;
  position:relative;
}
.box-header{
  display:flex; align-items:center; gap:.6rem;
  font-weight:700; margin-bottom:8px; line-height:1.2;
}
.box-title{ display:flex; align-items:center; gap:.6rem; flex:1; min-width:0; }
.label{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.icon{ width:20px; height:20px; display:inline-flex; }

/* Links & Gruppen */
.box .menu-group h3{
  margin:.25rem 0 .25rem; font-size:.9rem; color:var(--rc-muted); font-weight:600;
}
.box a{
  display:block; padding:6px 8px; border-radius:8px;
  color:var(--rc-text); text-decoration:none; font-weight:500;
}
.box a:hover{ background:#f3f4f6; }
.menu-group .has-submenu{ cursor:pointer; }
.submenu{ display:none; padding-left:8px; }
.menu-group.open .submenu{ display:block; }

/* Collapse handle */
.collapse-handle{
  position:absolute; top:50%; right:-14px; transform:translateY(-50%);
  width:28px; height:44px; border-radius:22px;
  border:1px solid var(--rc-border); background:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,.08);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; user-select:none; transition:transform .2s ease; z-index:5;
}
.collapse-handle:active{ transform:translateY(-50%) scale(.98); }

/* ========= Collapsed State ========= */
.container.is-collapsed .sidebar{
  width:72px; min-width:72px; padding:12px 8px;
}
.container.is-collapsed .box{ padding:10px 6px; }
.container.is-collapsed .box-header{ justify-content:center; margin-bottom:0; }

/* Nur Label ausblenden, nicht das Icon */
.container.is-collapsed .label{ display:none !important; }

/* *** Icon-Sichtbarkeit/Reset (Fix) *** */
.container.is-collapsed .box-header .icon{
  display:inline-flex !important;
  width:20px; height:20px;
  color:var(--rc-text);
}
.container.is-collapsed svg.icon path{ stroke: currentColor; }

/* Tooltip bei collapsed */
.box-header[title]{ position:relative; }
.container.is-collapsed .box-header:hover::after,
.container.is-collapsed .box-header:focus-within::after{
  content:attr(title);
  position:absolute; left:60px; top:50%; transform:translateY(-50%);
  background:#111827; color:#fff; font-size:.78rem; padding:4px 8px; border-radius:6px;
  white-space:nowrap; box-shadow:0 6px 20px rgba(0,0,0,.15); pointer-events:none;
}

.container.is-collapsed .collapse-handle .arrow{ transform:rotate(180deg); }

/* ========= iFrame ========= */
.form-container iframe{
  width:100%;
  height:calc(100vh - 120px);
  border:0;
  background:#fff;
  border-radius:10px;
  box-shadow:0 4px 16px rgba(0,0,0,.05);
}

/* ========= Pin-Button ========= */
.pin-btn{
  appearance:none; border:1px solid transparent; background:transparent;
  width:28px; height:28px; border-radius:6px;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .15s ease, border-color .15s ease, transform .05s ease;
}
.pin-btn:hover{ background:#f3f4f6; border-color:var(--rc-border); }
.pin-btn:active{ transform:scale(.98); }
.pin-btn svg{ width:16px; height:16px; }
.pin-btn[aria-pressed="true"]{ background:#eef2ff; border-color:#c7d2fe; }
.pin-btn[aria-pressed="true"] svg{ color:#4338ca; }

.container.is-collapsed .pin-btn{ display:none; }

/* ========= Flyout (Hover) ========= */
.box-body{ margin-top:8px; }

.container.is-collapsed .box-body{
  position:absolute; left:72px; top:8px;       /* Fix: bündig zur Sidebar */
  min-width:280px; max-height:70vh; overflow:auto;
  background:#fff; border:1px solid var(--rc-border); border-radius:10px; padding:10px;
  box-shadow:0 12px 30px rgba(0,0,0,.12);
  display:none; z-index:1000;                 /* höheres Z für Sicherheit */
}
.container.is-collapsed .box:hover .box-body,
.container.is-collapsed .box:focus-within .box-body{ display:block; }

/* kleine Pfeilspitze am Flyout */
.container.is-collapsed .box-body::before{
  content:""; position:absolute; left:-8px; top:14px;
  width:0; height:0;
  border-top:8px solid transparent; border-bottom:8px solid transparent; border-right:8px solid var(--rc-border);
}
.container.is-collapsed .box-body::after{
  content:""; position:absolute; left:-7px; top:14px;
  width:0; height:0;
  border-top:7px solid transparent; border-bottom:7px solid transparent; border-right:7px solid #fff;
}

/* ========= Sticky Pin Logik ========= */
.container.is-collapsed .box[data-pinned="true"] .box-body{ display:block; }
.container.is-collapsed .box[data-pinned="true"] .box-body{
  border-color:#c7d2fe; box-shadow:0 12px 30px rgba(67,56,202,.2);
}

/* ========= Hover-Gap Fix ========= */
/* Unsichtbarer Hover-Steg zwischen Sidebar und Flyout */
.container.is-collapsed .box{
  position:relative;
}
.container.is-collapsed .box::after{
  content:"";
  position:absolute;
  left:72px; top:0;
  width:12px; height:100%;
  background:transparent;
  pointer-events:auto;
  z-index:999;
}