/* === Zentralisierte Styles für ChatBOT Seiten === */
:root{
  --muted:#BA212E; /*#9aa3b2 #d2d8e3*/
  --text: #f5f7fa; /*#f5f7fa #ffffff*/
  --brand:#D62E36;
  --brand-2:#213D49;
  --panel:#4F4F4F;
  --shadow:0 10px 30px rgba(0,0,0,.40);
  --radius:16px;
  --header-h:60px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html, body{
  height:100%;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color:var(--text);
  background:#999999;
}
p, li {
  margin-bottom: 1em;
}

body{ display:flex; flex-direction:column; overflow:hidden; }

/* Header + Navigation */
header{
  height:var(--header-h);
  background:#4F4F4F;
  border-bottom:1px solid rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 20px; position:relative;
}

/* Navigation mittig zentrieren */
header nav { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size:120%; margin-top: 8px;}
header nav ul{ display:flex; gap:20px; list-style:none; margin:0; padding:0; }
header nav a{ color:var(--text); text-decoration:none; font-weight:500; }
header nav a:hover{ color:var(--muted); }

/* Grundlayout */
.main-layout{
  flex:1; display:grid; grid-template-columns:300px 1fr;
  height:calc(100dvh - var(--header-h)); min-height:0;
}
aside{
  background-color:#4F4F4F;
  border-right:1px solid rgba(255,255,255,0.1);
  padding:20px;
  display:flex; flex-direction:column;
  min-height:0; overflow:auto;
}
/* Titel/Fließtext im Aside */
aside h4{ margin-bottom:6px;
          margin-top:20px;
        }
aside p { color:var(--text); }
/* Linklisten im Aside */
aside ul{
  list-style:none; margin:0; padding:0;
  display:grid; gap:6px;
}
aside ul li a:hover{ color:var(--text); }
/* Blöcke nach unten schieben */
aside div:nth-of-type(2){ margin-top:5%; }
aside div:nth-of-type(3){ margin-top:5%; margin-bottom:5%; }

aside ul li a{
  color:var(--text);
  text-decoration:none;
  font-weight:500;
  padding:4px 0;
  display:block;
  margin-top:-1%;
  margin-bottom:-5%;
}

/* Main */
main{ padding:20px; min-height:0; position:relative; overflow:auto; display:flex; justify-content:center; }

.content{
  width: clamp(700px, 80vw, 1200px);
  /* min-height:2000px;  <-- entfernen */
  background:#4F4F4F;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow);
  padding:28px;
  /* wichtig bei Flex-Eltern: nicht strecken */
  align-self: flex-start;
}

.content *{ color:var(--text); }

/* Typografie im Content */
.content p{ line-height:1.7; margin-bottom:1.2em; text-align:center; }
.content h1{
  margin-top:0.5em; margin-bottom:1.5em;
  border-bottom:2px solid rgba(255,255,255,0.4);
  padding-bottom:0.5em; text-align:center;
}
.content h2{
  margin-top:2.5em; margin-bottom:0.8em;
  padding-bottom:0.3em; border-bottom:1px solid rgba(255,255,255,0.2);
  text-align:center;
}

/* Overlay & Modal (Startseite) */
.blocked-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; text-align:center; padding:24px; z-index:3; }
.blocked-card{ background:rgba(34,39,51,.96); border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:20px; max-width:520px; }
.is-blocked{ pointer-events:none; user-select:none; filter:blur(2px) grayscale(.2); opacity:.8; }

/* Chat-Wrapper (Startseite) */
.chatwrap{
  width:clamp(700px,80vw,1200px);
  height:100%;
  background:rgba(34,39,51,.92);
  border-radius:16px; border:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 30px rgba(0,0,0,.4);
  display:flex; overflow:hidden;
  --widget-h:100%;
  position:relative;
}
flowise-fullchatbot{ flex:1; display:block; width:100%; height:100%; min-height:0; }

/* Modal */
.modal-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; z-index:1000; }
.modal{ width:min(680px,92vw); background:#4F4F4F; border:1px solid rgba(255,255,255,.12); border-radius:20px; box-shadow:0 20px 60px rgba(0,0,0,.5); padding:24px; }
.modal header{ display:flex; text-align:center; gap:12px; height:auto; padding:0; background:transparent; border:none; position:static; margin-bottom:8px; }
.modal-content{ color:var(--text); max-height:min(50vh,420px); overflow:auto; }
.modal footer{ display:flex; gap:12px; justify-content:flex-end; margin-top:18px; }
.btn{ padding:10px 14px; border-radius:12px; font-weight:600; cursor:pointer; }
.btn-secondary{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:var(--text); }
.btn-primary{ background:var(--brand); color:#fff; border:none; }
.btn:hover{ filter:brightness(1.05); }
.modal-content a{ color:var(--text); max-height:min(50vh,420px); overflow:auto; font-weight:600;}
.modal-content a:hover {color:var(--muted);}

/* Responsive */
@media(max-width:900px){
  .main-layout{ grid-template-columns:1fr; grid-auto-rows:auto 1fr; }
  aside{ order:2; }
  main{ order:1; }
  .content, .chatwrap{ width:min(100%,1200px); }
}
.sidebar-logo {
  display: block;
  max-width: 70%;
  height: auto;
  margin: 20px auto 30px auto;
}

.sr-only{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);
}

.visually-hidden{
  position:absolute !important;
  width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  overflow:hidden; clip:rect(0 0 0 0);
  clip-path: inset(50%);
  white-space:nowrap;
}