/* /chatbots/ auf gltools.de (02.11.2026): setzt auf wegweiser.css auf (dunkles System aus ui-ux-pro-max: Grund #0B0B10, Schrift #F8FAFC,
 * Akzent #3B82F6, Space Grotesk und DM Sans lokal; Kopf, Knoepfe, Fuss, Fragen und Fuchs kommen von dort). Hier steht nur, was diese Seite
 * zusaetzlich braucht. Haus-Regeln bleiben: keine Linien, keine Schatten in Ruhe, Tonflaechen statt Karten mit Rahmen, gleiche Aussenraender,
 * Bewegung nur transform/opacity. Die Umschalter der Bildschirmfotos sind Optionsfelder (reines CSS), ohne Skript funktioniert alles. */

/* ------------------------------------------------------------------------------------------------ Hero */
.chatbots .c-plakat{grid-area:h1;margin:0;max-width:none;font-family:var(--w-kopf);font-size:clamp(38px,9.4vw,60px);line-height:1;letter-spacing:-.035em;font-weight:700;text-wrap:balance;hyphens:none}
@media(min-width:720px){.chatbots .c-plakat{font-size:clamp(52px,6.2vw,76px)}}
@media(min-width:900px){.chatbots .c-plakat{font-size:clamp(56px,4.9vw,72px);max-width:none}}
.chatbots .w-hero-gitter{grid-template-areas:"h1 h1" "satz buehne" "aktion buehne" "vertrauen vertrauen" "kacheln kacheln"}
@media(min-width:900px){.chatbots .w-hero-gitter{grid-template-areas:"h1 buehne" "text buehne" "kacheln buehne"}}
.c-kacheln{grid-area:kacheln;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.c-kachel{min-height:76px;padding:12px 14px;gap:8px}
@media(min-width:900px){.c-kacheln{grid-template-columns:repeat(4,1fr)}.c-kachel{min-height:84px;padding:14px 16px}}
.c-kachel .w-tuer-zeile{font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------------------------------------------ ein Bot */
.c-bot-gitter{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,5vw,64px);align-items:start}
@media(min-width:960px){.c-bot-gitter{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}.c-schau{position:sticky;top:84px}}
.c-bot-titel{margin:0;max-width:none;font-size:var(--w-titel);line-height:1.08;letter-spacing:-.03em;font-weight:700;text-wrap:balance}
.c-preis{margin:14px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.c-preis span{font-family:var(--w-kopf);font-size:var(--w-satz);line-height:1.1;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.c-preis small{font-size:var(--w-klein);color:var(--grau)}
.c-claim{margin:18px 0 0;max-width:30em;font-size:var(--w-lead);line-height:1.45;font-weight:600;color:var(--tinte)}
.c-fuer{margin:10px 0 0;max-width:32em;font-size:var(--w-text);line-height:1.55;color:var(--grau)}
.c-klein{margin:28px 0 10px;font-size:var(--w-klein);line-height:1.3;font-weight:700;letter-spacing:.01em;color:var(--grau)}
.c-funk{list-style:none;margin:0;padding:0;display:grid;gap:10px;max-width:34em}
.c-funk li{position:relative;padding-left:22px;font-size:var(--w-text);line-height:1.5}
.c-funk li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;background:var(--akzent)}
.c-lauf,.c-nicht{margin:18px 0 0;max-width:34em;font-size:var(--w-klein);line-height:1.55;color:var(--grau)}
.c-lauf span,.c-nicht span{color:var(--tinte);font-weight:640}
.c-knoepfe{margin:28px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.c-kauf,.c-einrichten,.c-nichtkaufbar{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 22px;font-size:var(--w-text);font-weight:640;white-space:nowrap}
.c-nichtkaufbar{background:var(--feld);color:var(--grau)}
@media(max-width:519px){.c-knoepfe .knopf{flex:1 1 100%}}
.c-einr-hinweis{margin:12px 0 0;max-width:34em;font-size:var(--w-klein);line-height:1.5;color:var(--grau)}

/* Bildschirmfotos mit Umschalter */
.c-schau{position:relative;min-width:0;padding:12px;background:var(--feld)}
.c-tab-in{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.c-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.c-tabs label{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;background:var(--feld2);color:var(--tinte);font-size:var(--w-klein);font-weight:600;cursor:pointer;transition:background .25s,color .25s,transform .35s var(--w-weich)}
@media(hover:hover){.c-tabs label:hover{background:#34343d}}
.c-tabs label:active{transform:scale(.97)}
.c-bilder{min-width:0}
.c-bild{display:none;margin:0;background:var(--grund)}
.c-bild img{display:block;width:100%;height:auto}
.c-bild-chat-mobile{max-width:320px;margin:0 auto}
.c-tab-in:nth-of-type(1):checked ~ .c-tabs label:nth-child(1),
.c-tab-in:nth-of-type(2):checked ~ .c-tabs label:nth-child(2),
.c-tab-in:nth-of-type(3):checked ~ .c-tabs label:nth-child(3){background:var(--akzent);color:var(--akzent-text)}
.c-tab-in:nth-of-type(1):checked ~ .c-bilder .c-bild:nth-child(1),
.c-tab-in:nth-of-type(2):checked ~ .c-bilder .c-bild:nth-child(2),
.c-tab-in:nth-of-type(3):checked ~ .c-bilder .c-bild:nth-child(3){display:block}
.c-tab-in:nth-of-type(1):focus-visible ~ .c-tabs label:nth-child(1),
.c-tab-in:nth-of-type(2):focus-visible ~ .c-tabs label:nth-child(2),
.c-tab-in:nth-of-type(3):focus-visible ~ .c-tabs label:nth-child(3){outline:2px solid var(--tinte);outline-offset:2px}
.c-bildhinweis{margin:12px 0 0;font-size:var(--w-klein);line-height:1.5;color:var(--grau)}

/* ------------------------------------------------------------------------------------------------ Vergleich */
.c-vergleich .w-lead{max-width:44em}
.c-vergleich .w-lead b{color:var(--tinte)}
.c-gruppe{margin-top:clamp(36px,5vw,64px)}
.c-gruppentitel{margin:0 0 12px;font-size:var(--w-lead);line-height:1.25;font-weight:700;letter-spacing:-.01em}
.c-tabellenrahmen{overflow-x:auto;overflow-y:hidden;contain:paint;-webkit-overflow-scrolling:touch;background:var(--grund)}
.c-tabellenrahmen:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
.c-tabelle{width:100%;min-width:840px;border-collapse:separate;border-spacing:0;font-size:var(--w-klein);line-height:1.35}
.c-tabelle th,.c-tabelle td{padding:12px 10px;text-align:center;vertical-align:middle;background:var(--grund)}
.c-tabelle tbody tr:nth-child(even) th,.c-tabelle tbody tr:nth-child(even) td{background:#121218}
.c-tabelle thead th{background:var(--feld);font-family:var(--w-kopf);font-weight:700;vertical-align:bottom}
.c-tabelle thead th span{display:block;margin-top:2px;font-family:var(--w-text-schrift);font-weight:400;color:var(--grau);font-variant-numeric:tabular-nums}
.c-tabelle thead th:first-child,.c-tabelle tbody th{position:sticky;left:0;z-index:1;width:16em;min-width:150px;max-width:16em;text-align:left;font-weight:500;color:var(--tinte)}
.c-tabelle thead th:first-child{font-family:var(--w-text-schrift);font-weight:600;color:var(--grau);z-index:2}
.c-tabelle td,.c-tabelle thead th:not(:first-child){font-variant-numeric:tabular-nums;white-space:nowrap}
.c-z-nein{color:#6B7280}
.c-z-ja,.c-z-ui,.c-z-zahl{color:var(--tinte);font-weight:600}
.c-z-ui{color:var(--akzent)}
.c-tabellenhinweis{margin:18px 0 0;font-size:var(--w-klein);color:var(--grau)}
@media(min-width:1000px){
  .c-tabellenrahmen{overflow:visible;contain:none}
  .c-tabelle{min-width:0}
  .c-tabelle thead th:first-child,.c-tabelle tbody th{position:static}
  .c-tabellenhinweis{display:none}
}

/* ------------------------------------------------------------------------------------------------ Voraussetzungen, Einrichtung */
.c-zwei{display:grid;gap:clamp(36px,5vw,64px);margin-top:clamp(28px,4vw,48px)}
@media(min-width:900px){.c-zwei{grid-template-columns:1fr 1fr}}
.c-posten{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.c-posten-zeile{display:grid;gap:4px;padding:16px 18px;background:var(--feld)}
.c-posten-zeile b{font-family:var(--w-kopf);font-size:var(--w-lead);line-height:1.25;font-weight:700;letter-spacing:-.01em}
.c-posten-zeile span{font-size:var(--w-text);line-height:1.5;color:var(--grau);max-width:40em}
.c-einr-gitter{display:grid;gap:28px;align-items:start}
@media(min-width:900px){.c-einr-gitter{grid-template-columns:5fr 7fr;gap:64px}}
.c-einr-gitter .w-lead{margin-top:0;max-width:34em}
.c-einr-gitter .w-aktion{margin:24px 0 0}