/* demo.fragdieseite.de — Sofort-Demo. Reines CSS, keine Abhängigkeiten.
   Farben und Radien wie auf der Marketingseite: Vorschau und Produkt sollen
   erkennbar dasselbe Haus sein. */

:root{
  --petrol:#09564e;
  --akzent:#0b7268;
  --akzent-hover:#09564e;
  --mint:#dff0ed;
  --dark-top:#0a4f47;
  --dark-bot:#0f6b60;
  --ink:#171633;
  --muted:#63637d;
  --line:#e6e6f0;
  --bg:#f5f5fa;
  --white:#fff;
  --radius:14px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
body{
  margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);
  line-height:1.6;-webkit-font-smoothing:antialiased;
}
h1,h2,h3{line-height:1.15;letter-spacing:-.01em;margin:0}
p{margin:0}
a{color:var(--akzent);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}

a:focus-visible,button:focus-visible,input:focus-visible{
  outline:3px solid var(--akzent);outline-offset:3px;border-radius:6px;
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}
}

.wrap{max-width:760px;margin:0 auto;padding:0 20px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Kopf ----------
   Hell mit dunklem Logo und Handlungsknopf rechts — dieselbe Zeile wie auf
   fragdieseite.de, damit die Vorschau nicht wie ein fremdes Werkzeug wirkt. */
.kopf{
  position:sticky;top:0;z-index:50;
  background:rgba(245,245,250,.88);backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--line);
}
.kopf .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:16px;max-width:1120px;height:66px}
.marke{display:flex;align-items:center}
.marke:hover{text-decoration:none}
.marke img{height:30px;width:auto;display:block}
@media (min-width:900px){ .marke img{height:36px} }
/* Auf schmalen Geräten steht das Logo neben dem Knopf — beide zusammen passen
   bei 375 px nur, wenn die Wortmarke etwas kleiner wird. */
@media (max-width:480px){ .marke img{height:26px} }
.kopf-nav{display:flex;align-items:center;gap:26px}
/* :not(.btn) ist nötig, nicht kosmetisch: `.kopf-nav a` ist spezifischer als
   `.btn` und überschrieb sonst dessen weiße Schrift — der Knopf stand mit
   dunkler Schrift auf dunkelgrünem Grund. */
.kopf-nav a:not(.btn){color:var(--ink);font-weight:600;font-size:.96rem}
.kopf-nav a:not(.btn):hover{color:var(--akzent);text-decoration:none}
/* Maße und Farbe hier gebündelt: `.btn` steht später im Stylesheet und würde
   ein alleinstehendes `.btn-klein` sonst wieder überschreiben — derselbe
   Kaskadenfehler, der schon die Schriftfarbe gekippt hat. */
.kopf-nav a.btn{color:#fff;padding:10px 18px;font-size:.94rem;box-shadow:none}
.kopf-nav a.btn:hover{color:#fff}
/* Auf dem Handy bleibt nur der Knopf — die Links stehen ohnehin auf der
   Marketingseite, und die Vorschau braucht ihren Platz. */
@media (max-width:760px){ .kopf-nav a:not(.btn){display:none} }

/* ---------- Bühne ---------- */
.buehne{
  background:linear-gradient(160deg,var(--dark-top),var(--dark-bot));
  color:#fff;padding:64px 0 76px;position:relative;overflow:hidden;
}
/* Feiner Raster-Schleier — gibt der Fläche Textur, ohne ein Bild zu laden. */
.buehne::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.14;
  background-image:radial-gradient(circle at 1px 1px,#fff 1px,transparent 0);
  background-size:22px 22px;mask-image:linear-gradient(180deg,#000,transparent 75%);
}
.buehne .wrap{position:relative;z-index:1;max-width:1120px}
.eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:#8fe3d3;margin-bottom:14px}
.buehne h1{font-size:clamp(2.1rem,6.2vw,3.4rem);font-weight:800;letter-spacing:-.02em;max-width:16ch}
.buehne .lead{margin-top:20px;font-size:1.18rem;color:rgba(255,255,255,.9);max-width:52ch}

/* ---------- Schaufenster: der Knopf, den der Besucher später bekommt ----------
   Zeigt im freien Feld neben der Überschrift, worum es geht — dieselbe Blase
   samt Ansprache wie das echte Widget. Der Puls ist wörtlich aus public/w.js
   übernommen (Keyframes, Kurve, drei Durchläufe), damit hier nichts anderes
   blinkt als auf einer Kundenseite. */
.hero-oben{display:grid;grid-template-columns:1fr;gap:34px;align-items:center}
@media (min-width:1000px){
  .hero-oben{grid-template-columns:minmax(0,1fr) 330px}
}
.schaufenster{display:none}
@media (min-width:1000px){ .schaufenster{display:block} }

/* Angedeutete Website als Träger: eine helle Karte mit Kopfleiste, Textzeilen
   und zwei Kacheln — bewusst ohne echten Inhalt, es geht nur um den Rahmen,
   in dem die Blase sitzt. Rechts und unten läuft sie aus dem Bild, damit klar
   ist: Das ist ein Ausschnitt, keine fertige Seite. */
.sf-seite{
  position:relative;background:#fff;border-radius:16px 0 0 16px;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.65);
  padding:0 0 74px;margin-right:-40px;overflow:hidden;
}
.sf-leiste{display:flex;gap:6px;align-items:center;padding:12px 16px;background:#eceef4}
.sf-leiste span{width:9px;height:9px;border-radius:50%;background:#cfd3e0}
.sf-inhalt{padding:20px 20px 0}
.sf-zeile{height:9px;border-radius:99px;background:#e9ebf2;margin-bottom:11px}
.sf-zeile.lang{width:72%;height:13px;background:#dfe2ec}
.sf-zeile.kurz{width:48%}
.sf-kacheln{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
.sf-kacheln div{height:56px;border-radius:10px;background:#f1f2f7}

/* Das Widget sitzt auf der Karte — leicht über den unteren Rand hinaus, genau
   wie ein echtes Widget am Fensterrand klebt. */
.sf-widget{position:absolute;right:18px;bottom:16px;display:flex;align-items:center;gap:12px}
.sf-ansprache{
  background:#fff;color:var(--ink);border-radius:14px;padding:10px 15px;
  font-size:.92rem;font-weight:600;white-space:nowrap;
  box-shadow:0 10px 26px -12px rgba(23,22,51,.55);
}
.sf-blase{
  position:relative;width:56px;height:56px;flex:0 0 56px;border-radius:50%;
  background:var(--akzent);color:#fff;display:grid;place-items:center;
  border:0;cursor:pointer;box-shadow:0 10px 24px -8px rgba(0,0,0,.5);
}
.sf-blase::before{
  content:"";position:absolute;inset:0;border-radius:50%;background:var(--akzent);
  opacity:0;pointer-events:none;z-index:-1;
  /* Anders als am Bildschirmrand (w.js: drei Ringe, dann Ruhe) muss der Puls
     hier dauerhaft zu sehen sein — wer die Seite später öffnet oder scrollt,
     soll ihn nicht verpasst haben. Langer Takt: Ring in den ersten zwei
     Sekunden, danach vier Sekunden Ruhe. Auffällig, ohne zu flackern. */
  animation:fdspuls 6s cubic-bezier(.16,1,.3,1) 1s infinite;
}
@keyframes fdspuls{
  0%{opacity:.5;transform:scale(1)}
  23%{opacity:0;transform:scale(1.8)}
  100%{opacity:0;transform:scale(1.8)}
}
@media (prefers-reduced-motion:reduce){ .sf-blase::before{animation:none} }
.sf-blase svg{width:26px;height:26px}
.sf-hinweis{margin-top:16px;text-align:right;color:rgba(255,255,255,.72);font-size:.84rem;padding-right:6px}

/* ---------- Eingabe ---------- */
.eingabe{margin-top:30px;display:flex;gap:10px;flex-wrap:wrap}
.eingabe input[type=url],.eingabe input[type=text]{
  flex:1 1 300px;min-width:0;font:inherit;font-size:1.05rem;padding:15px 17px;
  border:2px solid transparent;border-radius:12px;background:#fff;color:var(--ink);
}
.eingabe input::placeholder{color:#8c8ca3}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:inherit;font-weight:700;font-size:1.02rem;padding:15px 26px;border:0;
  border-radius:12px;cursor:pointer;background:var(--akzent);color:#fff;
  white-space:nowrap;   /* eine Knopfbeschriftung bricht nie um */
  transition:transform .12s ease,background .2s ease,box-shadow .2s ease;
  box-shadow:0 10px 22px -14px rgba(0,0,0,.7);
}
.btn:hover{background:var(--akzent-hover);transform:translateY(-1px);text-decoration:none}
.btn:active{transform:translateY(0)}
.btn-hell{background:#fff;color:var(--petrol)}
.btn-hell:hover{background:#eafaf7;color:var(--petrol)}
.btn-rand{background:transparent;color:var(--akzent);box-shadow:inset 0 0 0 2px var(--akzent)}
.btn-rand:hover{background:var(--mint);color:var(--petrol)}
.btn[disabled]{opacity:.6;cursor:progress;transform:none}

.merkmale{list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px;margin:24px 0 0;padding:0}
.merkmale li{display:flex;align-items:center;gap:9px;font-size:.96rem;color:rgba(255,255,255,.88)}
.merkmale svg{width:17px;height:17px;flex:none;color:#8fe3d3}

.klein{font-size:.9rem}
.hinweis-hell{margin-top:14px;color:#bcdfd9;font-size:.92rem;max-width:52ch}
.fehler{
  margin-top:18px;background:#fff2f2;color:#8c1d1d;border-left:4px solid #d34a4a;
  padding:12px 16px;border-radius:0 10px 10px 0;font-size:.96rem;
}
.buehne .fehler{background:rgba(255,255,255,.94)}

/* ---------- Karten ---------- */
.karte{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;box-shadow:0 18px 40px -34px rgba(23,22,51,.55);
}
.abschnitt{padding:44px 0}
.abschnitt h2{font-size:1.35rem;font-weight:800}

/* Drei Schritte unter dem Eingabefeld — bewusst nicht als gleichförmige
   Kachelreihe, sondern als nummerierte Spur. */
.spur{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:14px}
@media (min-width:720px){.spur{grid-template-columns:repeat(3,1fr);gap:18px}}
.spur li{display:flex;gap:12px;align-items:flex-start;color:#d5ece8;font-size:.98rem}
.spur b{
  flex:0 0 28px;height:28px;border-radius:50%;background:rgba(255,255,255,.16);
  color:#fff;display:grid;place-items:center;font-size:.85rem;font-weight:800;
}

/* ---------- Fortschritt ---------- */
.fortschritt{margin-top:22px}
.balken{height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.balken i{display:block;height:100%;width:6%;border-radius:99px;background:var(--akzent);
  transition:width .45s cubic-bezier(.16,1,.3,1)}
.schritte{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:9px}
.schritte li{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:.97rem}
.schritte li .ok{color:var(--akzent);font-weight:800}
.schritte li.laeuft{color:var(--ink);font-weight:600}
.puls{width:9px;height:9px;border-radius:50%;background:var(--akzent);flex:0 0 9px;
  animation:puls 1.1s ease-in-out infinite}
@keyframes puls{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}

/* ---------- Chat ---------- */
.chatkopf{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.chatkopf .kreis{
  width:42px;height:42px;border-radius:50%;background:var(--mint);color:var(--petrol);
  display:grid;place-items:center;font-weight:800;flex:0 0 42px;
}
.chatkopf h2{font-size:1.12rem;font-weight:800}
.chatkopf .quelle{color:var(--muted);font-size:.88rem}

/* Mitwachsend statt fest: eine kurze Unterhaltung soll keine leere Fläche
   hinterlassen, eine lange nicht die Seite sprengen. */
.verlauf{
  margin-top:18px;min-height:120px;max-height:min(60vh,460px);overflow-y:auto;
  display:flex;flex-direction:column;gap:12px;padding:4px 2px;scroll-behavior:smooth;
}
.zeile{display:flex}
.zeile.ich{justify-content:flex-end}
.blase{
  max-width:80%;padding:12px 16px;border-radius:16px;
  overflow-wrap:anywhere;font-size:.99rem;line-height:1.6;
}
/* Antworten kommen als reiner Text — das Widget rendert bewusst kein Markdown,
   sonst stünden „**Sternchen**" im Chat. Damit Aufzählungen trotzdem lesbar
   sind, setzt demo.js jede Zeile in ein eigenes <div>: nur so greift ein
   hängender Einzug, denn bei `pre-wrap` ist eine Zeile kein eigener Block und
   die Fortsetzung einer langen Listenzeile rutschte unter die Nummer. */
.blase .z{white-space:pre-wrap}
/* Der hängende Einzug muss GENAU so breit sein wie das Aufzählungszeichen samt
   Leerzeichen — sonst rückt die Fortsetzungszeile weiter ein als der Text der
   ersten Zeile. Werte im Browser nachgemessen (15,84 px Schrift): „• " ist
   11,3 px breit = .72em, „1. " ist 15,2 px = .96em. Geschätzte Werte lagen
   4,5 bzw. 11,7 px daneben — sichtbar als schiefe Kante. */
.blase .liste{padding-left:.72em;text-indent:-.72em}
.blase .liste.nr{padding-left:.96em;text-indent:-.96em}
.blase .leer{height:.5em}
.zeile.bot .blase{background:var(--mint);color:#123c37;border-bottom-left-radius:5px}
.zeile.ich .blase{background:var(--akzent);color:#fff;border-bottom-right-radius:5px}
.zeile.sys .blase{background:#fff7e6;color:#7a5300;border:1px solid #ffe1a8;
  max-width:100%;font-size:.93rem}
.tippt span{display:inline-block;width:7px;height:7px;margin-right:4px;border-radius:50%;
  background:#7fb3ab;animation:puls 1.1s ease-in-out infinite}
.tippt span:nth-child(2){animation-delay:.18s}
.tippt span:nth-child(3){animation-delay:.36s}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chip{
  font:inherit;font-size:.92rem;padding:9px 14px;border-radius:99px;cursor:pointer;
  background:#fff;color:var(--petrol);border:1.5px solid #bfe0da;transition:all .16s ease;
}
.chip:hover{background:var(--mint);border-color:var(--akzent);transform:translateY(-1px)}

.eingabezeile{display:flex;gap:9px;margin-top:16px;border-top:1px solid var(--line);padding-top:16px}
.eingabezeile input{
  flex:1;min-width:0;font:inherit;font-size:1rem;padding:12px 15px;
  border:1.5px solid var(--line);border-radius:11px;background:#fbfbfd;
}
.eingabezeile input:focus{border-color:var(--akzent);background:#fff}
.eingabezeile button{
  font:inherit;font-weight:700;padding:12px 20px;border:0;border-radius:11px;
  background:var(--akzent);color:#fff;cursor:pointer;
}
.eingabezeile button:hover{background:var(--akzent-hover)}
.eingabezeile button[disabled]{opacity:.5;cursor:not-allowed}

/* ---------- Handlungsband ---------- */
.band{
  margin-bottom:18px;background:var(--white);border:1px solid var(--line);
  border-left:4px solid var(--akzent);border-radius:0 var(--radius) var(--radius) 0;
  padding:16px 20px;display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
}
.band p{font-weight:600}
.band .klein{font-weight:400;color:var(--muted)}
.rest{display:inline-block;margin-top:4px;font-size:.86rem;color:var(--muted)}

/* ---------- Fuß ---------- */
.fuss{background:var(--petrol);color:rgba(255,255,255,.72);padding:52px 0 40px;font-size:.92rem}
.fuss .wrap{max-width:1000px}
.fuss a{color:rgba(255,255,255,.82);text-decoration:none}
.fuss a:hover{color:#fff;text-decoration:underline}
.fuss-raster{display:grid;gap:32px;grid-template-columns:1fr}
@media (min-width:820px){ .fuss-raster{grid-template-columns:1.6fr repeat(4,1fr);gap:28px} }
.fuss-marke img{height:34px;width:auto;margin-bottom:14px}
.fuss-marke p{max-width:34ch;line-height:1.6}
.fuss-spalte{display:flex;flex-direction:column;gap:11px}
.fuss-spalte h2{font-size:.78rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:#fff;margin-bottom:3px}
.fuss-schluss{margin-top:38px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.6);font-size:.86rem}
.fuss p+p{margin-top:8px}
.transparenz{
  background:#eef0f6;border-radius:12px;padding:14px 18px;color:#4c4c64;
  font-size:.88rem;line-height:1.55;
}