/* ===== Reset & Basics ===== */
*,*::before,*::after { box-sizing: border-box; }
html,body { height:100%; margin:0; font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }

/* ===== Webfonts ===== */
@font-face {
  font-family: "Champagne Limousines";
  src:
    url("/assets/fonts/ChampagneLimousines.woff2") format("woff2"),
    url("/assets/fonts/ChampagneLimousines.woff")  format("woff"),
    url("/assets/fonts/ChampagneLimousines.ttf")   format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Champagne Limousines";
  src:
    url("/assets/fonts/ChampagneLimousinesBold.woff2") format("woff2"),
    url("/assets/fonts/ChampagneLimousinesBold.woff")  format("woff");
  font-weight: 700; font-style: normal; font-display: swap;
}
html { font-synthesis: none; }
body { font-family:"Champagne Limousines", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-weight:400; }

/* ===== Design-Variablen ===== */
:root{
  --vh: 1vh;
  --head-h: 56px;
  --input-h: 56px;
  --foot-h: 10px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --gap-bot: 10px; /* Abstand letzte Bubble zur Eingabeleiste */

  /* Logo-Text-Positionierung: Abstände relativ zum animierten Logo */
  --logo-text-gap-top: 60px;      /* Abstand oberhalb (berücksichtigt max Animation) */
  --logo-text-gap-bottom: 2px;    /* Abstand unterhalb (von Unterkante Logo) - sehr nah am Logo */
  --logo-animation-expand-top: 40px;    /* Wie weit wächst Logo nach oben während Animation */
  --logo-animation-expand-sides: 20px;  /* Wie weit wächst Logo zu den Seiten */
  
  /* Responsive Anpassungen für kleinere Screens */
  --logo-text-gap-top-mobile: 40px;
  --logo-text-gap-bottom-mobile: 2px;

  --c-border:#ddd; --c-muted:#666;
  --radius:14px;

  /* Bubbles */
  --bubble-bot-bg:#f7f7f7; --bubble-bot-border:#eee;
  --bubble-user-bg:#eaeaea; --bubble-user-fg:#111;

  /* Buttons */
  --btn-bg:#000; --btn-fg:#fff;
  --btn-bg-disabled:rgba(0, 0, 0, 0.15); --btn-fg-disabled:rgba(0, 0, 0, 0.4);
}

/* ===== Header / Footer ===== */
header{
  position: fixed;
  top: var(--safe-top); left:0; right:0;
  height: var(--head-h);
  display:flex; align-items:center; gap:8px; padding:0 16px;
  background:#fff; z-index:40; border-bottom:1px solid #eee;
}
footer{ position: fixed; left:0; right:0; bottom:0; height: var(--foot-h); z-index:5; }

/* ===== Chat-Rahmen ===== */
main.journey{
  position: fixed; z-index:10; left:0; right:0;
  top: calc(var(--head-h) + var(--safe-top));
  bottom: calc(var(--foot-h) + var(--input-h) + var(--safe-bottom));
  display:flex; flex-direction:column;
  overflow: hidden; /* kapselt den Scrollbereich */
  background: #fff; /* Weißer Hintergrund für Chat-Bereich */
}

/* Einziger Scroll-Container */
#messages{
  flex:1 1 auto; min-height:0; height:100%;
  /* WICHTIG: overflow-y: auto für Scrolling */
  overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-y:contain;
  padding:0;
  position: relative;
  transition: filter 0.4s ease;
  scroll-behavior: auto; /* Wird per JavaScript gesteuert */
  /* Scrollbalken standardmäßig ausblenden */
  scrollbar-width: none; /* Firefox - komplett ausblenden */
  -ms-overflow-style: none; /* IE/Edge - komplett ausblenden */
  /* WICHTIG: Hintergrund transparent, damit Logo-Hintergrund sichtbar ist */
  background: transparent;
}

/* Scrollbalken für Webkit-Browser (Chrome, Safari) komplett ausblenden */
#messages::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  background: transparent;
}

/* WICHTIG: Scrollbalken bleibt immer ausgeblendet - Scrolling funktioniert trotzdem über overflow-y: auto */

/* Logo-Hintergrund: echtes DOM-Element (wird von JavaScript erstellt) */
.logo-background {
  position: fixed;
  /* Position wird per JavaScript berechnet, damit es genau über #messages liegt */
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 300px 300px;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0; /* Hinter #stack (z-index: 1) */
  /* WICHTIG: background-image wird per JavaScript gesetzt (als data-URI) */
}

/* Stack: Einfaches Flexbox-Layout ohne Spacer */
#stack{
  display:flex; 
  flex-direction:column; 
  /* Kein justify-content: flex-end mehr - normale Reihenfolge */
  padding:12px 16px var(--gap-bot);
  position: relative;
  z-index: 1; /* Über dem Logo-Hintergrund */
  box-sizing: border-box;
}

/* Overflow-Anker deaktiviert */
#messages, #stack { overflow-anchor: none; }

/* ===== Messages/Bubbles ===== */
.msg{ 
  display:flex; 
  width:100%; 
  contain:layout paint; 
  animation: none !important;
  /* iOS Rendering-Fix: Verhindert Phantom-Stempel nach Animationen */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  
  /* CSS-Transitions für smooth Animationen */
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(6px);
  transition:
    max-height 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), /* Doppelt so langsam für sanftes Hochwandern */
    opacity 0.8s ease-out,
    transform 0.8s ease-out,
    margin-top 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    margin-bottom 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Message eingeblendet */
.msg.msg-entered {
  max-height: 2000px; /* Obergrenze - reicht für alle Nachrichten */
  opacity: 1;
  transform: translateY(0);
}
.msg + .msg{ margin-top:10px; }
/* Kleinerer Abstand zwischen Bubble und Chips */
.msg.bot + .msg-choices{ margin-top:4px; }
.msg.bot{ justify-content:flex-start; }
.msg.user{ justify-content:flex-end; }

/* ===== Slider-Wrap Animation (ähnlich wie .msg, aber ohne Layout-Styles) ===== */
.slider-wrap {
  /* CSS-Transitions für smooth Animationen (wie .msg) */
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(6px);
  transition:
    max-height 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity 0.8s ease-out,
    transform 0.8s ease-out,
    margin-top 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    margin-bottom 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Slider eingeblendet */
.slider-wrap.slider-wrap-entered {
  max-height: 500px; /* Obergrenze für Sliders */
  opacity: 1;
  transform: translateY(0);
}

/* Auch für .journey .slider-wrap (höhere Spezifität) */
.journey .slider-wrap {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(6px);
  transition:
    max-height 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity 0.8s ease-out,
    transform 0.8s ease-out,
    margin-top 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    margin-bottom 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.journey .slider-wrap.slider-wrap-entered {
  max-height: 500px;
  opacity: 1;
  transform: translateY(0);
}

.bubble{
  display:inline-block; box-sizing:border-box; max-width:min(82%, 640px);
  padding:8px 12px; border-radius:var(--radius);
  white-space:pre-line; overflow-wrap:anywhere; word-break:normal;
  min-width:0;
  animation: none !important;
}
.msg.bot .bubble{ background:var(--bubble-bot-bg); border:1px solid var(--bubble-bot-border); }
.msg.user .bubble{ background:var(--bubble-user-bg); color:var(--bubble-user-fg); border:1px solid #ddd; }
.bubble.bot.compact{ line-height:1.45; font-size:1rem; }

/* ENTFERNT: bubbleEnterSoft - wird nicht mehr verwendet (nur CSS-Transitions) */

/* Medien in Bubbles */
.bubble img, .bubble video, .bubble canvas{
  max-width:100%; height:auto; display:block; border-radius:12px;
}

/* ===== Typing-Bubble ===== */
.msg.bot .bubble.typing{
  display:inline-flex; align-items:center; gap:6px; padding:8px 12px;
}

/* Typing-Dots Container */
.bubble .typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 1;
  transition: opacity 0.2s ease-out;
}

.bubble .typing-dots.hide {
  opacity: 0;
}

.bubble .typing-dots span{
  width:.38em; height:.38em; border-radius:50%; background: currentColor;
  display:inline-block; animation: typingDots 1.4s infinite;
}
.bubble .typing-dots span:nth-child(2){ animation-delay:.18s; }
.bubble .typing-dots span:nth-child(3){ animation-delay:.36s; }
@keyframes typingDots{0%,20%{opacity:.25}40%{opacity:1}100%{opacity:.25}}

/* Bubble-Text Container (für Transformation) */
.bubble .bubble-text {
  /* Standardmäßig: sichtbar, wenn Text vorhanden */
  display: block;
  opacity: 1;
  visibility: visible;
  margin: 0;
  padding: 0;
  line-height: normal;
  min-height: auto;
  max-height: none;
  height: auto;
  overflow: visible;
}

/* WICHTIG: Nur wenn bubble-text leer ist, verstecken */
.bubble:not(.has-text) .bubble-text:empty {
  display: none;
}

.bubble.has-text .bubble-text {
  /* Wenn Text vorhanden: normaler Platz, sichtbar */
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  line-height: normal !important;
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
}

/* ===== Eingabeleiste (fix am Viewport) ===== */
.input-bar{
  position: fixed; z-index:25; left:0; right:0;
  bottom: calc(var(--foot-h) + var(--safe-bottom));
  height: var(--input-h);
  display:flex; gap:8px; align-items:center; padding:8px 12px;
  border-top:1px solid #eee; background:#fff;
}
.input-bar .menu-btn{
  width:24px; height:40px; padding:0; border-radius:8px; border:1px solid #ccc;
  background:#fff; color:#666; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
  flex-shrink:0;
}
.input-bar .menu-btn:hover:not(:disabled),
.input-bar .menu-btn:active:not(:disabled),
.input-bar .menu-btn:focus:not(:disabled){
  background:#f8f8f8; border-color:#999; box-shadow: 0 2px 4px rgba(0,0,0,.1);
}
.input-bar .menu-btn:disabled{
  opacity:.5; cursor:not-allowed; pointer-events:none;
}
.input-bar .menu-btn[aria-expanded="true"]{
  background:#f0f0f0; border-color:#0aa37f;
}
.input-bar input{
  flex:1; height:40px; padding:0 12px; border-radius:8px; border:1px solid #ccc;
  font-size:1rem; font-family:"Champagne Limousines", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight:400; color:#000; background:#fff; -webkit-text-fill-color:#000;
}
.input-bar input::placeholder{ color:#9aa3a7; opacity:.9; font-weight:400; }
.input-bar input.is-guided{ background:#fff; }
.input-bar input.guided-strong{ font-weight:700; color:#000; -webkit-text-fill-color:#000; }

.input-bar button:not(.menu-btn){
  width:44px; height:44px; border-radius:9999px; border:0; outline:none;
  background:var(--btn-bg); color:var(--btn-fg);
  display:inline-flex; align-items:center; justify-content:center;
  transition: box-shadow .2s ease, transform .12s ease;
}
.input-bar button:not(.menu-btn) svg{ width:22px; height:22px; color:var(--btn-fg); }
.input-bar button:not(.menu-btn):hover:not(:disabled),
.input-bar button:not(.menu-btn):active:not(:disabled),
.input-bar button:not(.menu-btn):focus:not(:disabled){
  box-shadow: 0 8px 22px rgba(10,163,127,.45), 0 2px 8px rgba(10,163,127,.25);
  transform: translateY(-1px);
}
.input-bar button:not(.menu-btn):disabled{
  background:var(--btn-bg-disabled); color:var(--btn-fg-disabled); box-shadow:none;
  transform: none;
  cursor: not-allowed;
  pointer-events: none;
}

/* ===== Input-Menü ===== */
.input-menu{
  position: fixed; z-index:30;
  bottom: calc(var(--input-h) + var(--foot-h) + var(--safe-bottom) + 8px);
  left: 20px;
  min-width: 180px;
  background:#fff; border:1px solid #ddd; border-radius:8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
  padding:4px;
}
.input-menu[aria-hidden="false"]{
  opacity:1; visibility:visible; transform:translateY(0);
}
.input-menu .menu-option{
  width:100%; padding:10px 14px; border:0; border-radius:6px;
  background:transparent; color:#000; text-align:left;
  font-size:.95rem; font-family:"Champagne Limousines", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight:400; cursor:pointer;
  transition: background-color .15s ease, opacity .15s ease;
}
.input-menu .menu-option:hover:not(:disabled),
.input-menu .menu-option:focus:not(:disabled){
  background:#f0f0f0; outline:none;
}
.input-menu .menu-option:active:not(:disabled){
  background:#e8e8e8;
}
.input-menu .menu-option:disabled,
.input-menu .menu-option.is-disabled{
  opacity:0.5; cursor:not-allowed; color:#999;
  pointer-events:none;
}
.input-menu .menu-option:disabled:hover,
.input-menu .menu-option.is-disabled:hover{
  background:transparent;
}

/* ===== Jump-to-latest ===== */
.jump{
  position: fixed; z-index:30;
  right:16px;
  bottom: calc(var(--input-h) + var(--gap-bot) + 8px);
  padding:8px 12px; border-radius:9999px; border:1px solid #ddd; background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.08); font-weight:700; cursor:pointer;
}
.jump.hidden{ display:none; }

/* Spezieller, reduzierter Look nur für die Stimmungs-Slider */
.journey .slider-wrap.scale-only{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin: 8px 0 0;
  padding: 10px 12px;
  border: 1px solid #eee;
  border-radius: 12px;
}

.journey .scale-row{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.journey .scale-value{
  font-variant-numeric: tabular-nums;
  min-width: 2ch;
  text-align: right;
  opacity: .9;
}

/* Legende UNTER dem Slider, klein & ruhig */
.journey .scale-caption{
  font-size: .85rem;
  opacity: .75;
  line-height: 1.3;
}

/* sanfter Erfolgspuls beim Commit */
@keyframes sliderCommitPulse{
  0%{ box-shadow: 0 0 0 0 rgba(10,163,127,.18); }
  100%{ box-shadow: 0 0 0 10px rgba(10,163,127,0); }
}
.journey .slider-wrap.scale-only.slider-success{
  animation: sliderCommitPulse .35s ease-out 1;
}

.icon-btn{
  margin-left:auto; background:transparent; border:0; font-size:18px; cursor:pointer;
}
.badge{
  margin-left:8px; padding:4px 8px; border-radius:9999px; font-weight:700; font-size:.85rem;
  background:#0aa37f; color:#fff;
}
.badge.hidden{ display:none; }

.privacy-sheet{
  position:fixed; inset:0; background:rgba(0,0,0,.28); z-index:60; display:flex; align-items:flex-end;
}
.privacy-card{
  background:#fff; width:100%; max-width:720px; margin:0 auto; border-radius:18px 18px 0 0; padding:16px; box-shadow:0 -12px 30px rgba(0,0,0,.12);
}
.privacy-card h3{ margin:0 0 8px; }
.privacy-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid #eee; }
.privacy-row small{ color:#666; display:block; margin-top:2px; }
.privacy-row--warning{ background:#fff5f5; padding:12px; border-radius:8px; margin-top:4px; border-color:#ffcccc; }
.privacy-row--warning strong{ color:#a00; }
.privacy-row--warning small{ color:#800; }
.switch{ position:relative; width:44px; height:26px; border-radius:9999px; background:#cfd4da; cursor:pointer; transition:background-color .2s ease; }
.switch input{ display:none; }
.switch .knob{ position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:left .15s ease, box-shadow .15s ease; box-shadow:0 2px 6px rgba(0,0,0,.12); }
.switch input:checked + .knob{ left:21px; }
/* Switch aktiv (grün) - wird per JavaScript gesetzt */
.switch.switch--active{ background:#0aa37f; }
.switch.switch--active .knob{ box-shadow:0 2px 8px rgba(10,163,127,.3); }
/* Switch inaktiv (grau) - bereits Standard */
.privacy-actions{ display:flex; gap:8px; margin-top:12px; }
.privacy-actions .btn{ border:1px solid #ddd; padding:8px 12px; border-radius:10px; background:#fff; }
.privacy-actions .btn.danger{ border-color:#e66; color:#a00; }
.privacy-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:10px; font-size:.9rem; color:#666; }

.brand-btn{
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  background:transparent;
  border:0;
  color:inherit;
  font: inherit;

  /* neu */
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  width:100%;
  padding:0;           /* Header hat bereits Padding */
}

.brand-btn strong{ font-weight:700; }
.brand-btn span{ color:#666; font-size:.9rem; margin-left:auto; text-align:right; }

.brand-btn:focus-visible{
  outline:2px solid #0aa37f;
  outline-offset:2px;
}
.brand-btn:active{ transform: translateY(1px); }

/* Klarer Bestätigungs-Slider */
/* Centering & Vertical Rhythm for confirm slider */
.confirm-slider{
  margin-top: 8px;
  padding: 12px;
  border: 1px solid #eee;
  border-radius: 12px;
  background:#fff;

  /* optional: konsistentes Spacing innerhalb des Widgets */
  display: grid;
  grid-template-rows: auto auto auto auto;
  row-gap: 8px;
}

.confirm-hint{
  font-size:.95rem;
  opacity:.85;
  margin: 0;             /* weg mit Top/Bottom-Drift */
  line-height: 1.2;
}

.confirm-slider .slider{
  width:100%;
  height:28px;
  accent-color:#0aa37f;
  display:block;
}

.confirm-slider .slider-pct{
  text-align:right;
  font-variant-numeric: tabular-nums;
  font-size:.9rem;
  opacity:.8;
  margin: 0;
  line-height: 1.2;
}

/* <- Das hier zentriert wirklich perfekt */
.confirm-slider .slider-tip{
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  margin: 0;             /* keine künstliche Verschiebung */
  line-height: 1.2;      /* vermeidet Baseline-„Hängen“ */
  min-height: 24px;      /* visuell stabil, auch bei 1 Zeile */
}


/* Reichere Skala (Phase 2) */
.journey .scale-rich{
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.journey .scale-rich .scale-head{
  display:flex; justify-content:space-between; align-items:baseline; width:100%;
}
.journey .scale-ticks{
  display:flex; justify-content:space-between; font-size:.8rem; opacity:.6; margin-top:2px;
}
.journey .scale-emo{
  display:flex; justify-content:space-between; font-size:1rem; opacity:.9; margin-top:-2px;
}

/* ultrakurzes Scale-Widget */
.journey .scale-thin {
  margin: 6px 0 0;
  padding: 8px 10px;
  border: 1px solid #eee;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.journey .scale-thin-row{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
}

.journey .scale-thin .scale-num{
  font-variant-numeric: tabular-nums;
  min-width: 2ch;
  text-align: right;
  opacity: .9;
}

.journey .scale-thin .slider{
  width: 100%;
  height: 6px;
  accent-color: #0aa37f;
}

.journey .scale-legend{
  display:flex;
  justify-content:space-between;
  font-size:.8rem;
  opacity:.6;
  margin-top:2px;
}

.journey .scale-legend span{
  flex: 1 1 0;
  min-width: 0;          /* erlaubt weichen Zeilenumbruch */
  white-space: normal;    /* nicht auf einer Zeile erzwingen */
}
.journey .scale-legend span:last-child{
  text-align: right;      /* rechte Beschriftung bündig rechts */
}

/* Grundkarte schlanker machen */
.consent{
  margin: 8px 0 0;
  padding: 10px 12px;
  border: 1px solid #eee;
  border-radius: 12px;
  background: #fff;
  display: grid;
  row-gap: 8px;

  /* Startzustand für Animation */
  opacity: 1;
  transform: none;
}

/* Enter → In (Smooth) */
@media (prefers-reduced-motion: no-preference) {
  .consent.consent--enter{
    opacity: 0;
    transform: translateY(6px) scale(.98);
  }
  .consent.consent--in{
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Reihen dichter */
.consent .consent-title{
  font-weight: 700;
  margin-bottom: 4px;
}
.consent label{
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 8px;
  align-items: start;
  padding: 6px 0;          /* vorher 10px+ */
}
.consent input[type="checkbox"]{
  margin-top: 2px;
}

/* Button-Zeile dichter */
.consent .consent-actions{
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 6px;
}
.consent .btn.primary{
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 0;
}

/* Kompakte Dichte (optional via density:"compact") */
.consent.consent--compact{
  padding: 8px 10px;
  row-gap: 6px;
}
.consent.consent--compact label{
  padding: 4px 0;
}
.consent.consent--compact .consent-actions{
  margin-top: 4px;
}

/* Stagger-Effekt für Zeilen (dezente Tiefe) */
@media (prefers-reduced-motion: no-preference) {
  .consent.consent--enter label,
  .consent.consent--enter .consent-actions {
    opacity: 0;
    transform: translateY(3px);
  }
  .consent.consent--in label,
  .consent.consent--in .consent-actions {
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
    opacity: 1;
    transform: none;
  }
  .consent.consent--in label:nth-of-type(1){ transition-delay: 0.1s; }
  .consent.consent--in label:nth-of-type(2){ transition-delay: 0.15s; }
  .consent.consent--in label:nth-of-type(3){ transition-delay: 0.2s; }
  .consent.consent--in .consent-actions{ transition-delay: 0.25s; }
}

/* ===== Logo-Overlay für Atemübungen ===== */
.logo-overlay {
  /* Position wird per JavaScript gesetzt, damit es exakt mit Hintergrund-Logo übereinstimmt */
  z-index: 50; /* Über Chat, unter Header/Footer */
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.95); /* Weißer Hintergrund - Logo nicht sichtbar während Animation */
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.logo-overlay.active {
  opacity: 1;
  pointer-events: auto; /* Blockiert Interaktionen während Animation */
}

.logo-overlay-content {
  width: 300px;
  height: 300px;
  max-width: 80vw;
  max-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-overlay-content svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1));
}

/* Chat-Bereich abdunkeln während Overlay aktiv */
/* ENTFERNT: Filter wird nicht mehr verwendet - Dim-Layer übernimmt die Abdunkelung */

/* Klick zum Schließen - visueller Hinweis */
.logo-overlay.active::after {
  content: 'Tippen zum Schließen';
  position: absolute;
  bottom: calc(var(--input-h) + var(--foot-h) + var(--safe-bottom) + 20px);
  font-size: 0.85rem;
  color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

/* Casual Breathing Overlay: Kein automatischer "Tippen zum Schließen" Text */
.logo-overlay.casual-breathing.active::after {
  content: none;
}

/* Willkommens-Animation: Kein "Tippen zum Schließen" Text (Animation läuft automatisch ab) */
.logo-overlay.welcome-animation.active::after {
  content: none;
}

/* Ritualanimation: Kein "Tippen zum Schließen" Text (wird durch "weiter"/"beenden" gesteuert) */
.logo-overlay.ritual-animation.active::after,
.logo-overlay.ritual-animation::after {
  content: none !important;
  display: none !important;
}

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
  .logo-overlay {
    transition: opacity 0.2s ease;
  }
  .logo-overlay-content svg {
    animation: none !important;
  }
}

/* ===== Drei-Kreise-Intro-Sequenz ===== */

/* Dim-Layer über Chat */
.chat-dim-layer {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  z-index: 49; /* Unter Overlay (50) - damit Kreise sichtbar sind */
}

.chat-dim-layer.dim-active {
  opacity: 1;
}

/* Drei-Kreise-Overlay */
.three-circles-overlay {
  opacity: 0;
  transition: opacity 0.8s ease-in-out; /* Langsamer wie Willkommensanimation */
  z-index: 50; /* Einheitlich mit anderen Logo-Overlays */
  /* Keine Größenbeschränkungen - Container kann frei skalieren */
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
}

.three-circles-overlay.active {
  opacity: 1;
}

/* Overlay sichtbar: 100% Opacity */
.three-circles-overlay[style*="opacity: 1"],
.three-circles-overlay[style*="opacity:1"] {
  opacity: 1 !important;
}

/* SVG direkt im Overlay (exakt wie Logo-Hintergrund, kein Container) */
.three-circles-overlay svg {
  width: 300px !important;
  height: 300px !important;
  min-width: 300px !important;
  min-height: 300px !important;
  max-width: 300px !important;
  max-height: 300px !important;
  display: block !important;
  box-sizing: border-box !important;
  transition: transform 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  /* Verhindere alle Skalierungen */
  transform: none !important;
}

/* Kreise: Standard (unsichtbar) */
.three-circles-overlay circle {
  opacity: 0;
  transform: scale(1);
  transition: opacity 2.5s ease-in-out, transform 1.2s cubic-bezier(0.42, 0, 0.58, 1), stroke-width 1.2s ease, stroke 2.5s ease-in-out;
}

/* State: Space - Nur Outer Circle sichtbar + pulsierend */
.three-circles-overlay.state-space .circle-outer {
  opacity: 1 !important; /* 100% sichtbar - wird langsam eingeblendet durch transition */
  transform: scale(1.03);
  transform-origin: 150px 160px; /* Exakt die cx/cy Position des äußeren Kreises */
  stroke-width: 12;
  animation: circlePulse 2s ease-in-out infinite;
  /* WICHTIG: transition wird von der Basis-Regel übernommen (1.2s ease-in) */
}

.three-circles-overlay.state-space .circle-middle,
.three-circles-overlay.state-space .circle-inner {
  opacity: 0; /* Komplett unsichtbar */
}

/* State: Ritual - Outer Circle grau (nicht transparent), Middle Circle pulsiert */
.three-circles-overlay.state-ritual .circle-outer {
  opacity: 1 !important; /* 100% sichtbar, fix - wird langsam eingeblendet durch transition */
  /* WICHTIG: transform, stroke-width werden per JavaScript gesetzt, damit Transition greift */
  /* transform: scale(1); ENTFERNT - wird per JavaScript gesetzt */
  transform-origin: 150px 160px; /* Exakt die cx/cy Position des äußeren Kreises */
  /* stroke-width: 12; ENTFERNT - wird per JavaScript gesetzt */
  animation: none; /* Keine Animation, fix */
  /* WICHTIG: stroke wird per JavaScript gesetzt, damit Transition greift */
  /* stroke: #999; ENTFERNT - wird per JavaScript gesetzt */
}

.three-circles-overlay.state-ritual .circle-middle {
  /* opacity wird per JavaScript gesetzt (von 0 zu 1), damit Transition greift */
  transform: scale(1.03);
  transform-origin: 150px 177px; /* Exakt die cx/cy Position des mittleren Kreises */
  stroke-width: 20;
  animation: none; /* WICHTIG: Animation wird erst NACH Opacity-Transition gestartet (per JavaScript) */
  /* WICHTIG: transition wird von der Basis-Regel übernommen (2.5s ease-in-out) */
}

/* Klasse für langsame Einblendung des Middle Circle */
/* ENTFERNT: fade-in Klasse - wird nicht mehr verwendet, Opacity wird per JavaScript gesetzt */

.three-circles-overlay.state-ritual .circle-inner {
  opacity: 0; /* Noch unsichtbar */
}

/* State: You - Outer und Middle fix in 100% Deckkraft (grau), Inner Circle pulsiert */
.three-circles-overlay.state-you .circle-outer {
  opacity: 1 !important; /* 100% sichtbar, fix - wird langsam eingeblendet durch transition */
  transform: scale(1);
  transform-origin: 150px 160px; /* Exakt die cx/cy Position des äußeren Kreises */
  stroke-width: 12;
  animation: none; /* Keine Animation, fix */
  /* WICHTIG: stroke wird per JavaScript gesetzt, damit Transition greift */
  /* stroke: #999; ENTFERNT - wird per JavaScript gesetzt */
}

.three-circles-overlay.state-you .circle-middle {
  /* opacity wird per JavaScript gesetzt - NICHT hier, damit Transition greift */
  transform: scale(1);
  transform-origin: 150px 177px; /* Exakt die cx/cy Position des mittleren Kreises */
  stroke-width: 20;
  animation: none; /* Keine Animation, fix */
  /* WICHTIG: stroke wird per JavaScript gesetzt, damit Transition greift */
  /* stroke: #999; ENTFERNT - wird per JavaScript gesetzt */
}

.three-circles-overlay.state-you .circle-inner {
  /* opacity wird per JavaScript gesetzt (von 0 zu 1), damit Transition greift */
  transform: scale(1.03);
  transform-origin: 150px 204px; /* Exakt die cx/cy Position des inneren Kreises */
  stroke-width: 24;
  animation: none; /* WICHTIG: Animation wird erst NACH Opacity-Transition gestartet (per JavaScript) */
  /* WICHTIG: transition wird von der Basis-Regel übernommen (2.5s ease-in-out) */
}

/* Klasse für langsame Einblendung des Inner Circle */
/* ENTFERNT: fade-in Klasse - wird nicht mehr verwendet, Opacity wird per JavaScript gesetzt */

/* State: Breathing - Alle Kreise aktiv (Atemanimation) */
.three-circles-overlay.state-breathing circle {
  opacity: 1 !important; /* 100% sichtbar */
  transform: scale(1);
}

@keyframes circlePulse {
  0%, 100% {
    transform: scale(1.03);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.9;
  }
}


/* Letzte Nachricht hervorheben - muss über Overlay (z-index: 2) und Dim-Layer liegen */
.msg.last-active {
  /* Kein spezieller z-index mehr - Nachricht bleibt im Chat, Text wird im Overlay angezeigt */
  opacity: 0.2 !important; /* Gedimmt, da Text im Overlay angezeigt wird */
  filter: blur(1.5px);
  position: relative;
}

.msg.last-active .bubble {
  background: var(--bubble-bot-bg);
  border-color: var(--bubble-bot-border);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  transition: box-shadow 0.3s ease;
  transform: scale(1.01); /* Leichte Vergrößerung für mehr Aufmerksamkeit */
}

/* CTA-Mode für Input */
.input-bar input.cta-mode {
  background: #0aa37f;
  color: #fff;
  border-color: #0aa37f;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  -webkit-text-fill-color: #fff;
}

.input-bar input.cta-mode::placeholder {
  color: rgba(255, 255, 255, 0.8);
}

.input-bar input.cta-mode:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(10, 163, 127, 0.2);
}

/* Mobile Responsive - BEHALTEN für kleinere Bildschirme, aber nur wenn wirklich nötig */
@media (max-width: 768px) {
  .three-circles-overlay svg {
    /* Auf Mobile: Gleiche Größe wie Hintergrund (300px) beibehalten */
    width: 300px !important;
    height: 300px !important;
  }
}

/* Reduzierte Bewegung für Drei-Kreise-Intro */
@media (prefers-reduced-motion: reduce) {
  .three-circles-overlay circle {
    animation: none !important;
    transition: opacity 0.2s ease;
  }
  
  .chat-dim-layer {
    transition: opacity 0.2s ease;
  }
  
  .msg.last-active .bubble {
    transition: box-shadow 0.2s ease;
  }
}