:root{--ink:#243746;--muted:#6c7a89;--brand:#0ba7a9}
*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Noto Sans,Arial}
a{color:var(--brand);text-decoration:none}a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:24px}
.nav{background:#fff;border-bottom:1px solid #e2e8f0;position:sticky;top:0;z-index:5}
.nav .wrap{display:flex;align-items:center;gap:18px;padding:14px 24px;max-width:1100px;margin:0 auto}
.brand{font-weight:800;color:var(--ink)}
.nav a{color:var(--ink);opacity:.8}.nav a.active,.nav a:hover{opacity:1}
/* Banner-Hintergrund erzwingen (ersetzt türkisen Balken) */
header.hero{border-bottom: 1px solid #e2e8f0;color: #0f172a;min-height:auto; /* damit das Bild sichtbar ist */}
.hero .wrap{max-width:1100px;margin:0 auto;padding:0px 24px}
.hero h1{font-size:34px;margin:0 0 8px}.hero p{margin:0;color:var(--muted)}
.grid{display:grid;gap:18px}.grid.cols-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:18px}
.card h3{margin:0 0 6px}.badge{display:inline-block;background:#ecfeff;border:1px solid #bae6fd;color:#0369a1;border-radius:999px;padding:4px 8px;font-size:12px}
.footer{font-size:12px;color:#64748b;border-top:1px solid #e2e8f0;padding:18px 24px;text-align:center}
.section h2{margin:16px 0 8px}ul.clean{margin:0;padding-left:18px}
.btn{display:inline-block;background:var(--ink);color:#fff;border-radius:10px;padding:10px 14px}
.btn.secondary{background:var(--brand)}
table{width:100%;border-collapse:collapse}th,td{padding:8px;border-bottom:1px solid #e2e8f0;text-align:left}
form .row{display:grid;gap:12px}@media(min-width:720px){form .row.cols-2{grid-template-columns:1fr 1fr}}
input,textarea{width:100%;padding:10px;border:1px solid #cbd5e1;border-radius:10px;font:inherit}

/* Logo in der Navigationsleiste */
.nav-logo{
  height: 80px;  /* ca. +25% gegenüber 36px */
  width: auto;
  display: block;
}
/* Person – kompaktere Button-Spalte neben dem Bild */
.btn-rail{
  display: flex;
  flex-direction: column;
  gap: 12px;              /* gleichmäßiger, enger Abstand */
  align-items: stretch;
  width: 220px;
  min-width: 220px;
}

/* Buttons bleiben gleich groß und zentriert */
.btn-rail-item{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  text-align: center;
}

/* Mobile: volle Breite, enger gestapelt */
@media (max-width: 900px){
  .btn-rail{
    width: 100%;
    min-width: 0;
    gap: 12px;
  }
}


/* Person – kompaktere Button-Spalte auch bei alten Inline-Styles */
.profile-left > div[style*="justify-content"]{
  justify-content: flex-start !important;
  gap: 12px !important;
}



/* Person – kompaktere Button-Spalte (erzwingt enge, gleichmäßige Abstände) */
.profile-left .btn-rail{
  display:flex;
  flex-direction:column;
  gap:12px;
  justify-content:flex-start;
}

.profile-left > div[style*="justify-content"],
.profile-left > div[style*="space-between"]{
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  gap:12px !important;
}

/* Fallback, falls Buttons nicht in .btn-rail liegen */
.profile-left > div > a.btn,
.profile-left > div > a.btn.secondary{
  display:flex;
  align-items:center;
  justify-content:center;
  height:52px;
}

/* Banner erscheint NACH den Headlines */


/* Für kleinere Bildschirme anpassen */
@media (max-width: 768px) {
  
}

/* Banner erscheint NACH den Headlines */
.hero::after {
  content: "";
  display: block;
  background: url('/assets/banner.webp') no-repeat center top;
  background-size: cover;
  height: 200px;       /* Standard (Desktop) */
  margin-top: 16px;
}

/* Für kleinere Bildschirme anpassen */
@media (max-width: 768px) {
  .hero::after {
    height: 140px;     /* Höhe auf Tablets/Mobil kleiner */
  }
}

/* ===== Begriff-Tooltips ===== */
.has-tip {
  position: relative;
  border-bottom: 1px dotted #0ea5a0;   /* sichtbar „es gibt Info“ */
  cursor: help;
  outline: none;
}

/* Fokus sichtbar für Tastatur-Nutzer */
.has-tip:focus-visible {
  box-shadow: 0 2px 0 0 #0ea5a0;
  border-bottom-color: transparent;
}

/* Bubble über data-tip (ohne JS) */
.has-tip::after {
  content: attr(data-tip);
  position: absolute;
  left: 0;
  bottom: calc(100% + .5rem);
  min-width: 16rem;
  max-width: 32rem;
  background: #0f172a;
  color: #fff;
  padding: .55rem .7rem;
  border-radius: .5rem;
  box-shadow: 0 8px 20px rgba(2,6,23,.25);
  font-size: .92rem;
  line-height: 1.35;
  z-index: 60;

  opacity: 0;
  transform: translateY(.25rem);
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  white-space: normal;
}

/* Fallback: wenn JS nur title setzt */
.has-tip[title]:not([data-tip])::after { content: attr(title); }


/* kleiner Pfeil */
.has-tip::before {
  content: "";
  position: absolute;
  left: .8rem;
  bottom: calc(100% + .25rem);
  border: 6px solid transparent;
  border-top-color: #0f172a;
  z-index: 61;

  opacity: 0;
  transform: translateY(.25rem);
  transition: opacity .15s ease, transform .15s ease;
}

/* anzeigen bei Hover & Fokus */
.has-tip:hover::after,
.has-tip:focus::after,
.has-tip:hover::before,
.has-tip:focus::before {
  opacity: 1;
  transform: translateY(0);
}

/* Wenn der Platz links/rechts knapp ist, nach rechts schieben */
.has-tip.tip-right::after { left: auto; right: 0; }
.has-tip.tip-right::before { left: auto; right: .8rem; }

/* In Tabellenzellen sicherstellen, dass der Tooltip darüber liegt */
table .has-tip { z-index: 1; }

/* Karten gleichhoch + saubere Vertikal-Logik */
.grid .card { display:flex; flex-direction:column; height:100%; }
.card h3 { line-height:1.25; min-height:3em; margin-bottom:.25rem; } /* reserviert 2 Zeilen */
.card .text-sm { color:#64748b; margin:0 0 .5rem; }                  /* Datum */


/* Karten-Layout stabilisieren */
.grid .card { display:flex; flex-direction:column; height:100%; }


/* Datum einheitlich, Titel reserviert */
.card h3 { line-height:1.25; min-height:3em; margin-bottom:.25rem; }
.card .text-sm { color:#64748b; margin:0 0 .5rem; }

/* Nur der Auszug bekommt Mindesthöhe */
.card-excerpt { min-height:3.75rem; margin-bottom:.25rem; }

/* Tags in eigener Zeile; kein Mindesthöhen-Zwang */
.card-tags { display:flex; flex-wrap:wrap; gap:.5rem; margin:.5rem 0 .25rem; }

/* Auszug bekommt Mindesthöhe und Abstand nach unten,
   damit die Karten gleichmäßig wirken */
.card-excerpt { min-height: 3.75rem; margin-bottom: .25rem; } /* ~2–3 Zeilen */


/* Chips in Karten dürfen (zusätzlich) unten Luft haben */
.card .chip { margin-bottom: .125rem; }

/* CTA immer ganz nach unten */
.card-cta { margin-top:auto; }

/* Karten-Layout eindeutig definieren (am Dateiende platzieren) */
.grid .card { display:flex; flex-direction:column; height:100%; }

/* Titel reserviert 2 Zeilen, Datum mit Abstand */
.card h3 { line-height:1.25; min-height:3em; margin-bottom:.25rem; }
.card .text-sm { color:#64748b; margin:0 0 .5rem; }

/* Auszug mit Mindesthöhe; Tags eigene Zeile */
.card-excerpt { min-height:3.75rem; margin-bottom:.25rem; }
.card-tags { display:flex; flex-wrap:wrap; gap:.5rem; margin:.5rem 0 .25rem; }

/* CTA sitzt immer bündig unten & links */
.card-cta { margin-top:auto; align-self:flex-start; }

/* Post-Content Tuning */
.post .content p { line-height: 1.4; margin: 0 0 0.75rem; }
.post .content h2, 
.post .content h3 { margin: 0.9rem 0 0.35rem; }
.post .content ul, 
.post .content ol { margin: 0.75rem 0 0.75rem 1.25rem; }
.post .content hr { margin: 1.25rem 0; }

/* --- Blog-Posts: kompaktere Typografie --- */
#post, .card.post { line-height: 1.4; }

#post p, .card.post p { margin: 0 0 .7rem; }

#post h2, #post h3,
.card.post h2, .card.post h3 { margin: 0.1rem 0 .45rem; line-height: 1.25; }

#post ul, #post ol,
.card.post ul, .card.post ol { margin: .6rem 0 .6rem 1.25rem; }

#post hr, .card.post hr { margin: 1rem 0; }

#post pre, .card.post pre {
  font-size: .95em;
  line-height: 1.35;
  margin: .9rem 0;
  padding: .75rem 1rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: .5rem;
}


#post hr, .card.post hr, .post .content hr { margin: 1rem 0; }
/* --- Quick fix: kompakte Zeilen im Blog-Artikel --- */
article#post, article#post * { line-height: 1.35 !important; }

/* Absatzabstände eng */
article#post p { margin: 0 0 .35rem !important; }

/* Listen & Überschriften etwas luftiger, aber kompakt */
article#post h2, article#post h3 { margin: 1.1rem 0 .45rem !important; line-height: 1.2 !important; }
article#post ul, article#post ol { margin: .6rem 0 .6rem 1.25rem !important; }

/* <hr> kompakt */
article#post hr { margin: 1rem 0 !important; }

.container h3 {
  margin-top: 1rem;
  margin-bottom: 0.4rem;
}
/* --- Abstände zwischen Überschriften und Text vereinheitlichen / verringern --- */
#post h1, #post h2, #post h3 {
  margin-top: 1.0em;   /* Abstand nach oben */
  margin-bottom: 0.25em; /* Abstand nach unten – war meist 0.8–1em */
  line-height: 1.25;
}
/* Blog: Überschrift enger an den Text */
article#post h1,
.post .content h1,
.card.post h1 {
  margin: 0 0 .25em !important;   /* nur unten etwas Luft */
  line-height: 1.15 !important;
}

/* Sicherheit: erstes Element nach der H1 nie mit großem Top-Margin */
article#post h1 + *,
.post .content h1 + *,
.card.post h1 + * {
  margin-top: .25em !important;
}

/* Optional: H2/H3 in Posts ebenfalls kompakter */
article#post h2, .post .content h2 { margin: 1em 0 .35em !important; line-height: 1.2 !important; }
article#post h3, .post .content h3 { margin: .9em 0 .35em !important; line-height: 1.2 !important; }

/* --- Blog: kompaktere Überschriftenabstände im Artikelinhalt --- */
#post .content h1,
#post .content h2,
#post .content h3,
#post .content h4 {
  margin-top: 1.1em !important;
  margin-bottom: 0.35em !important;
  line-height: 1.25 !important;
}

/* Ersten Absatz direkt unter Überschrift ohne extra Abstand */
#post .content h1 + p,
#post .content h2 + p,
#post .content h3 + p {
  margin-top: 0.25em !important;
}

/* Allgemeine Absatzabstände leicht verringern */
#post .content p {
  margin: 0 0 0.65em !important;
  line-height: 1.4;
}
/* --- Blog: Header & Inhalt kompakter --- */

/* Titel unter der Hero-H1 enger */
#post .post-title {
  margin: 0 0 .25em !important;
  line-height: 1.15 !important;
}

/* Datum/Tags dichter am Titel */
#post .meta {
  margin: .1em 0 .6em !important;
  line-height: 1.2 !important;
  color: #64748b;
}


/* Erster Absatz direkt unter der Überschrift ohne zusätzlichen Abstand */
#post.card.post .content h1 + p,
#post.card.post .content h2 + p,
#post.card.post .content h3 + p {
  margin-top: 10em !important;
}

/* Allgemeine Absatzabstände leicht verringern */
#post.card.post .content p {
  margin: 0 0 .6em !important;
  line-height: 1.4 !important;
}

/* Trennlinien (aus '---' im Markdown) schmaler */
#post.card.post .content hr {
  margin: .5rem 0 !important;      /* vorher bis 1.25rem */
}
/* FINAL override: H3-Abstand im Blog-Content verkleinern */
#post.card.post .content h3 {
  margin: 0.2rem 0 0.15rem !important;  /* oben / unten deutlich kleiner */
  line-height: 1.2 !important;
}

/* Der erste Absatz direkt unter der H3 ohne Extra-Top-Margin */
#post.card.post .content h3 + p {
  margin-top: 0 !important;
}

/* Falls die große Lücke VOR der H3 vom Trenner '---' stammt */
#post.card.post .content hr {
  margin: 0.5rem 0 !important;
}
/* --- Blog: Abstand rund um Trenner + H3 entschärfen --- */
#post.card.post .content h3{
  margin: .35rem 0 .25rem !important;  /* kleiner Top-/Bottom-Abstand */
  line-height: 1.2 !important;
}

/* HR kompakt + dezente Linie */
#post.card.post .content hr{
  margin: .35rem 0 !important;
  height: 0;
  border: 0;
  border-top: 1px solid #cbd5e1;
}

/* KEIN zusätzlicher „Doppelabstand“ zwischen HR und nächster H3 */
#post.card.post .content hr + h3{
  margin-top: .2rem !important;
}

/* Wenn vor dem HR ein Absatz/ul/ol steht: wenig Top-Margin am HR */
#post.card.post .content p + hr,
#post.card.post .content ul + hr,
#post.card.post .content ol + hr{
  margin-top: .35rem !important;
}

/* Erster Absatz direkt unter der H3 ohne Extra-Top-Margin */
#post.card.post .content h3 + p{
  margin-top: 0 !important;
}

/* ===== Rob Bot Floating Chat ===== */
.chat-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; background: var(--brand); color:#fff;
}
.chat-close{ background:none; border:none; color:#fff; font-size:18px; cursor:pointer; line-height:1; }

.chat-log{ height:390px; padding:12px; overflow:auto; background:#f7f8fa; }
.msg{ margin:8px 0; display:flex; gap:8px; }
.msg.user{ justify-content:flex-end; }
.bubble{ border-radius:10px; padding:10px 12px; max-width:85%; }
.bubble.bot{ background:#e6fffb; color:var(--ink); }   /* helles Türkis */
.bubble.user{ background:var(--brand); color:#fff; }   /* Türkis vollton */

.chat-form{ display:flex; gap:8px; padding:10px; border-top:1px solid #e6e6e6; background:#fff; }
.chat-form input{ flex:1; padding:10px 12px; border:1px solid #dcdcdc; border-radius:8px; font:inherit; }

/* Bot-hints: für SEO- & KI-Crawler sichtbar, für Besucher nahezu unsichtbar */
.bot-hints {
  position: absolute;
  left: -9999px;   /* außerhalb des Viewports platzieren */
  width: 1px;
  height: 1px;
  overflow: hidden;
  font-size: 0.01px;
  line-height: 0;
  color: transparent;
}