/* Schriften vom eigenen Server.
   Vorher kamen sie von fonts.googleapis.com und fonts.gstatic.com — damit
   ging bei jedem Seitenaufruf die IP jedes Besuchers an Google in die USA.
   Das widersprach dem Satz auf dieser Seite, dass nichts in die USA geht.
   unicode-range trennt die Zeichensaetze: Wer nur deutsche Umlaute
   braucht, laedt die kleinere latin-Datei. */
@font-face{font-family:"Newsreader";font-style:normal;font-weight:300 600;font-display:swap;
  src:url(/schriften/newsreader-normal-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:300 600;font-display:swap;
  src:url(/schriften/newsreader-normal-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:300 600;font-display:swap;
  src:url(/schriften/newsreader-italic-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:300 600;font-display:swap;
  src:url(/schriften/newsreader-italic-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Karla";font-style:normal;font-weight:300 600;font-display:swap;
  src:url(/schriften/karla-normal-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Karla";font-style:normal;font-weight:300 600;font-display:swap;
  src:url(/schriften/karla-normal-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --linen:#F7EBE4;
  --linen-2:#F0DDD3;
  --card:#FFF8F3;
  --ink:#3A2229;
  --soft:#71545A;
  --plum:#8E3F4F;
  --stone:#7E5A50;
  --line:#EBD5C9;
  --measure:33rem;
  --gut:clamp(1.3rem,5vw,2.6rem);
  --r:0.7rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--linen);color:var(--ink);
  font-family:"Karla",system-ui,sans-serif;
  font-size:clamp(1.03rem,1rem + 0.25vw,1.13rem);
  line-height:1.68;font-weight:400;
}
/* text-wrap:balance verteilt die Zeilen gleichmässig — sonst bleibt bei
   mehrzeiligen Überschriften ein einzelnes Wort auf der Schlusszeile
   stehen ("… laut / sagst."). Ältere Browser ignorieren es und
   brechen wie bisher um. */
h1,h2,h3{font-family:"Newsreader","Georgia",serif;font-weight:400;line-height:1.1;letter-spacing:-0.01em;margin:0;text-wrap:balance}
.eyebrow{font-family:"Karla",sans-serif;font-size:0.76rem;letter-spacing:0.17em;text-transform:uppercase;font-weight:600;color:var(--plum)}
p{margin:0 0 1.05em}p:last-child{margin-bottom:0}
a{color:var(--plum)}
.wrap{max-width:58rem;margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:var(--measure)}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--plum);outline-offset:3px}

/* header — bleibt stehen und gibt Orientierung.
   Auf 24 Bildschirmen weiss sonst niemand, wo er ist. */
.kopf{position:sticky;top:0;z-index:50;background:rgba(247,235,228,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.kopf .innen{max-width:58rem;margin:0 auto;padding:0.55rem var(--gut);
  display:flex;align-items:center;gap:0.6rem}
.kopf .mark{font-size:1.05rem;gap:0.45rem;flex:none;color:var(--ink);text-decoration:none}
.kopf .mark .ico{width:1.4rem;height:1.4rem}
.kopf nav{margin-left:auto;display:flex;gap:0.1rem;overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch}
.kopf nav::-webkit-scrollbar{display:none}
.kopf nav a{font-size:0.8rem;color:var(--soft);text-decoration:none;white-space:nowrap;
  padding:0.3rem 0.55rem;border-radius:2rem}
.kopf nav a:hover{background:var(--card);color:var(--plum)}
/* Sprungziele nicht unter die Leiste rutschen lassen */
:target,section[id]{scroll-margin-top:3.6rem}
.top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.5rem 0 0}
.mark{font-family:"Newsreader",serif;font-weight:500;font-size:1.32rem;letter-spacing:-0.01em;display:flex;align-items:center;gap:0.5rem}
/* Signet: vier Punkte an den Ecken eines N, geschlossen ist nur die
   Diagonale. Die Grundfläche steckt in der SVG-Datei selbst. */
.mark .ico{width:1.75rem;height:1.75rem;display:block;flex:none}
.top small{font-family:"Karla";font-size:0.78rem;color:var(--soft);letter-spacing:0.02em}

/* hero */
/* Nur vertikal setzen — die Kurzform würde das seitliche Gutter von .wrap überschreiben. */
.hero{padding-top:clamp(2.6rem,10vw,5rem);padding-bottom:clamp(2rem,6vw,3rem)}
.hello{font-family:"Karla",sans-serif;font-size:1.02rem;color:var(--soft);margin-bottom:1.1rem}
.hello b{color:var(--ink);font-weight:600}
.hero h1{font-size:clamp(2.4rem,8.4vw,4.4rem);font-weight:300;max-width:13ch}
.hero h1 em{font-style:italic;color:var(--plum);font-weight:400}

/* SIGNATURE — die Wunschzeile.
   Das Feld hatte weder Rahmen noch Hintergrund und trug die
   Ueberschriften-Serife mit einem langen, wechselnden Prosa-Platzhalter.
   Es sah aus wie ein animiertes Zitat, nicht wie ein Eingabefeld — und
   wer nicht erkennt, dass er antworten kann, sieht nur eine Textwand. */
.wish{margin-top:2.2rem;max-width:40rem}
.eingabe{
  display:flex;align-items:center;gap:0.5rem;
  background:var(--card);border:1.5px solid var(--plum);border-radius:2rem;
  padding:0.35rem 0.35rem 0.35rem 1.1rem;
}
.eingabe input{
  flex:1;min-width:0;border:0;background:none;outline:none;
  font-family:"Karla",system-ui,sans-serif;font-size:1rem;
  color:var(--ink);padding:0.5rem 0;
}
.eingabe input::placeholder{color:var(--stone);opacity:.85}
.wishbtn{
  flex:none;background:var(--plum);color:var(--card);border:0;border-radius:2rem;
  font-size:0.92rem;font-weight:600;padding:0.6rem 1.15rem;cursor:pointer;transition:opacity .18s;
}
.wishbtn:hover{opacity:.88}
.wishbtn:disabled{background:var(--stone);cursor:default}
.lesen{margin-top:0.8rem;font-size:0.87rem;color:var(--soft)}
.wishfoot{margin-top:0.75rem;font-size:0.87rem;color:var(--soft);line-height:1.55}
.reply{
  margin-top:1.2rem;background:var(--card);border:1px solid var(--line);border-left:2px solid var(--plum);
  border-radius:0.5rem;padding:1rem 1.2rem;font-size:0.97rem;color:var(--soft);
  display:none;
}
.reply.on{display:block;animation:rise .45s ease both}
.reply b{color:var(--ink);font-weight:600}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.lede{margin-top:2.4rem;max-width:var(--measure);color:var(--soft)}
.lede strong{color:var(--ink);font-weight:600}

/* skala — jede Art aufklappbar, ohne JavaScript */
.scale{display:flex;flex-wrap:wrap;gap:0.4rem;align-items:flex-start;padding:0.2rem 0;max-width:44rem}
.scale details{flex:none;min-width:0}
.scale details[open]{flex:1 0 100%}
.scale summary{
  font-size:0.86rem;font-weight:500;color:var(--soft);
  background:var(--card);border:1px solid var(--line);
  padding:0.4rem 0.85rem;border-radius:2rem;white-space:nowrap;
  cursor:pointer;display:inline-block;list-style:none;transition:background .18s,color .18s;
}
.scale summary::-webkit-details-marker{display:none}
.scale summary::after{content:" +";color:var(--plum);font-weight:600}
.scale details:first-child summary,.scale details:last-child summary{border-color:var(--plum);color:var(--plum)}
.scale details[open] summary{background:var(--plum);border-color:var(--plum);color:var(--card)}
.scale details[open] summary::after{content:" −";color:var(--card)}
.art{
  background:var(--card);border:1px solid var(--line);border-left:2px solid var(--plum);
  border-radius:0.5rem;padding:1rem 1.2rem;margin-top:0.5rem;
  font-size:0.95rem;color:var(--soft);max-width:36rem;
}
.art q{display:block;quotes:none;font-family:"Newsreader",serif;font-style:italic;
  font-size:1.06rem;line-height:1.4;color:var(--ink);margin-bottom:0.7rem}
.art p{margin:0 0 0.6rem}
.art p:last-child{margin-bottom:0}
.art b{color:var(--ink);font-weight:600}

/* says */
.says{max-width:38rem;display:grid;gap:1.15rem}
.says p{margin:0;color:var(--soft);font-size:1rem;padding-left:1.1rem;border-left:2px solid var(--line)}
.says p b{color:var(--ink);font-weight:600}
.says .nojudge{border-left-color:var(--plum);color:var(--ink);font-family:"Newsreader",serif;font-size:1.18rem;line-height:1.4;padding-top:0.1rem}

/* message card */
.msgsec{padding-top:clamp(2rem,6vw,3.4rem);padding-bottom:clamp(3rem,8vw,4.6rem)}
.msgcard{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.5rem,4.5vw,2.4rem);max-width:36rem;
  box-shadow:0 1px 0 rgba(58,34,41,.05),0 18px 40px -24px rgba(58,34,41,.42);
}
.msgcard .who{display:flex;align-items:center;gap:0.65rem;margin-bottom:1.4rem}
.dot{width:1.9rem;height:1.9rem;border-radius:50%;background:var(--plum);flex:none;display:grid;place-items:center}
.dot img{width:72%;height:72%;display:block}
.who b{font-weight:600;font-size:0.94rem}
.who i{font-style:normal;color:var(--stone);font-size:0.82rem;margin-left:auto}
.line{opacity:0;transform:translateY(6px);transition:opacity .5s ease,transform .5s ease}
.reveal .line{opacity:1;transform:none}
.line + .line{margin-top:0.85rem}
.msgcard .big{font-family:"Newsreader",serif;font-size:1.32rem;line-height:1.35;font-weight:400}
.msgcard ul{list-style:none;padding:0;margin:0.4rem 0 0}
.msgcard li{padding-left:1.35rem;position:relative;margin-bottom:0.4rem;font-size:0.98rem}
.msgcard li::before{content:"·";position:absolute;left:0.35rem;color:var(--plum);font-weight:700}
.msgcard .caveat{background:var(--linen-2);border-radius:0.45rem;padding:0.8rem 1rem;font-size:0.95rem}
.msgcard .actions{display:flex;gap:0.6rem;margin-top:1.5rem;flex-wrap:wrap}
.ghost{border:1px solid var(--line);background:none;color:var(--soft);padding:0.55rem 1.15rem;border-radius:2rem;font-size:0.92rem;font-weight:500;cursor:default}
.ghost.yes{background:var(--plum);border-color:var(--plum);color:var(--card)}
.msgnote{margin-top:1.5rem;max-width:var(--measure);color:var(--soft);font-size:0.95rem}

/* sections */
.sec{padding:clamp(2.8rem,8vw,4.4rem) 0;border-top:1px solid var(--line)}
.sec > .eyebrow{display:block;margin-bottom:1rem}
.sec h2{font-size:clamp(1.6rem,4.4vw,2.25rem);font-weight:300;margin-bottom:1.5rem;max-width:20ch}
.sec h2 em{font-style:italic;color:var(--plum)}

.cards{display:grid;gap:1rem}
@media(min-width:46rem){.cards.three{grid-template-columns:repeat(3,1fr)}.cards.two{grid-template-columns:repeat(2,1fr)}}
.c{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.3rem 1.4rem}
.c h3{font-size:1.1rem;font-weight:500;margin-bottom:0.45rem}
.c p{color:var(--soft);font-size:0.96rem;margin:0}

/* steps */
.steps{max-width:40rem;counter-reset:s}
.step{display:grid;grid-template-columns:1.9rem 1fr;gap:0 1rem;padding:1.15rem 0;border-bottom:1px solid var(--line);counter-increment:s}
.step:first-child{border-top:1px solid var(--line)}
.step::before{content:counter(s);font-family:"Newsreader",serif;color:var(--plum);font-size:1.05rem;padding-top:0.1rem}
.step h3{font-size:1.06rem;font-weight:500;margin-bottom:0.2rem;font-family:"Karla",sans-serif}
.step p{color:var(--soft);font-size:0.96rem;margin:0}
.step p + p{margin-top:0.55rem}

/* prices */
.prices{max-width:38rem;margin-bottom:1.4rem}
.price{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:1rem;padding:0.95rem 0;border-bottom:1px solid var(--line)}
.price:first-child{border-top:1px solid var(--line)}
.price span{color:var(--soft);font-size:0.97rem}
/* Nur der Preis selbst bleibt ungebrochen — nicht ausgezeichneter Text im Beschreibungstext. */
.price > b{font-family:"Newsreader",serif;font-weight:500;font-size:1.16rem;white-space:nowrap}
.price span b{font-weight:600;color:var(--ink)}
.note{background:var(--linen-2);border-radius:var(--r);padding:1.1rem 1.3rem;max-width:var(--measure);font-size:0.97rem}
.note + .note{margin-top:1rem}
.note b{font-weight:600}

/* log + nots */
.log{list-style:none;padding:0;margin:0 0 1.4rem;max-width:40rem}
.log li{display:grid;grid-template-columns:1fr;gap:0.2rem 1.5rem;padding:1rem 0;border-bottom:1px solid var(--line)}
.log li:first-child{border-top:1px solid var(--line)}
.log .when{font-size:0.79rem;letter-spacing:0.12em;text-transform:uppercase;font-weight:600;color:var(--plum);padding-top:0.15rem}
.log .what{color:var(--soft);font-size:0.98rem}
@media(min-width:44rem){.log li{grid-template-columns:9.5rem 1fr;align-items:baseline}}

.nots{list-style:none;padding:0;margin:0;max-width:var(--measure)}
.nots li{padding:0.6rem 0 0.6rem 1.5rem;border-bottom:1px solid var(--line);color:var(--soft);position:relative;font-size:0.97rem}
.nots li::before{content:"×";position:absolute;left:0;color:var(--stone)}

/* signup */
.signup{padding:clamp(3rem,8vw,4.6rem) 0 clamp(3.5rem,9vw,5rem);border-top:1px solid var(--line)}
.field{margin-bottom:1.5rem;max-width:27rem}
.field.wide{max-width:40rem}
.field > span{display:block;font-size:0.78rem;letter-spacing:0.14em;text-transform:uppercase;font-weight:600;color:var(--soft);margin-bottom:0.6rem}
.opts{display:flex;gap:0.5rem;flex-wrap:wrap}
.opt{font-size:0.95rem;font-weight:500;background:var(--card);border:1px solid var(--line);color:var(--soft);padding:0.58rem 1.1rem;border-radius:2rem;cursor:pointer;transition:all .18s}
.opt[aria-pressed="true"]{background:var(--plum);border-color:var(--plum);color:var(--card)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
input[type=email]{width:100%;font-family:"Karla",sans-serif;font-size:1rem;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:0.5rem;padding:0.75rem 0.9rem}
input[type=email]::placeholder,textarea::placeholder{color:var(--stone)}
textarea{
  width:100%;font-family:"Karla",sans-serif;font-size:1rem;line-height:1.55;color:var(--ink);
  background:var(--card);border:1px solid var(--line);border-radius:0.5rem;
  padding:0.75rem 0.9rem;resize:vertical;min-height:6rem;
}
.hint{margin-top:0.55rem;font-size:0.85rem;color:var(--soft);line-height:1.5}
.submit{font-family:"Karla";font-size:1rem;font-weight:600;background:var(--ink);color:var(--linen);border:0;border-radius:2rem;padding:0.85rem 1.7rem;cursor:pointer;transition:background .2s}
.submit:hover{background:var(--plum)}
.submit:disabled{background:var(--stone);cursor:default}
.msg{margin-top:0.9rem;font-size:0.95rem;color:var(--plum);min-height:1.4em}
.fine{margin-top:2rem;max-width:var(--measure);color:var(--soft);font-size:0.87rem;line-height:1.6}
.share{margin-top:2.6rem;padding-top:2rem;border-top:1px solid var(--line);max-width:var(--measure)}
.share p{color:var(--soft);font-size:0.97rem}
.share p b{color:var(--ink);font-weight:600}
.sharebtns{display:flex;gap:0.6rem;flex-wrap:wrap;margin-top:1.1rem}
.sharebtn{
  font-family:"Karla",sans-serif;font-size:0.95rem;font-weight:600;
  background:var(--plum);color:var(--card);border:1px solid var(--plum);
  border-radius:2rem;padding:0.62rem 1.3rem;cursor:pointer;transition:opacity .18s;
}
.sharebtn:hover{opacity:.88}
.sharebtn.ghostbtn{background:transparent;color:var(--plum)}

footer{padding:1.4rem 0 2.4rem;border-top:1px solid var(--line)}
footer small{color:var(--stone);font-size:0.78rem}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .line{opacity:1;transform:none}
}

/* Einstiegsseiten je Wunschart */
a.mark{color:var(--ink);text-decoration:none}
a.submit{display:inline-block;text-decoration:none}
.hero > .eyebrow{display:block;margin-bottom:0.9rem}

/* Vorschau-Bot in der Wunschzeile */
.chips{display:flex;flex-wrap:wrap;gap:0.45rem;margin-top:0.85rem}
.chips button{
  font-family:inherit;font-size:0.83rem;font-weight:500;color:var(--soft);text-align:left;
  background:var(--card);border:1px solid var(--line);border-radius:2rem;
  padding:0.4rem 0.9rem;cursor:pointer;transition:border-color .18s,color .18s;
}
.chips button:hover{border-color:var(--plum);color:var(--plum)}
.verlauf{margin-top:1.2rem;display:grid;gap:0.9rem;max-width:40rem}
.verlauf:empty{margin-top:0}
.sagt{
  background:var(--card);border:1px solid var(--line);border-radius:0.6rem;
  padding:0.85rem 1.1rem;font-size:0.97rem;line-height:1.6;color:var(--soft);
  animation:rise .35s ease both;
}
.sagt.ich{background:var(--linen-2);border-color:transparent;color:var(--ink);justify-self:end;max-width:85%}
.sagt.sie{border-left:2px solid var(--plum)}
.sagt .wer{display:block;font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase;
  font-weight:600;color:var(--plum);margin-bottom:0.4rem}
.sagt p{margin:0 0 0.6rem}
.sagt p:last-child{margin-bottom:0}
.denkt{color:var(--stone);font-style:italic}
@media (prefers-reduced-motion:reduce){.sagt{animation:none}}

/* Schwebendes Chatfenster */
.chatknopf{
  position:fixed;right:1.1rem;bottom:1.1rem;z-index:60;
  display:flex;align-items:center;gap:0.5rem;
  background:var(--plum);color:var(--card);border:0;border-radius:2rem;
  padding:0.7rem 1.1rem;font-size:0.92rem;font-weight:600;cursor:pointer;
  box-shadow:0 6px 24px -8px rgba(58,34,41,.5);
  transition:opacity .25s,transform .25s;
}
.chatknopf img{display:block}
.chatknopf.versteckt{opacity:0;transform:translateY(8px);pointer-events:none}
.chatknopf.zu span{display:none}
/* Muss nach der display-Regel stehen und mindestens gleich stark sein:
   ein blosses [hidden] aus dem Browser-Stylesheet verliert gegen
   .chatfenster{display:flex}. Genau daran war das Fenster immer offen. */
.chatfenster[hidden]{display:none}
.chatfenster{
  position:fixed;right:1.1rem;bottom:4.6rem;z-index:61;
  width:min(24rem,calc(100vw - 2.2rem));max-height:min(32rem,calc(100vh - 7rem));
  display:flex;flex-direction:column;
  background:var(--linen);border:1px solid var(--line);border-radius:0.9rem;
  box-shadow:0 18px 50px -20px rgba(58,34,41,.45);overflow:hidden;
  animation:rise .25s ease both;
}
.chatkopf{display:flex;align-items:center;justify-content:space-between;
  padding:0.7rem 0.9rem;border-bottom:1px solid var(--line);background:var(--card)}
.chatname{display:flex;align-items:center;gap:0.5rem;font-family:"Newsreader",serif;
  font-size:1.02rem;color:var(--ink)}
.chatname img{background:var(--plum);border-radius:0.35rem;padding:0.14rem;display:block}
.chatzu{background:none;border:0;font-size:1.4rem;line-height:1;color:var(--soft);
  cursor:pointer;padding:0 0.2rem}
.chatlauf{flex:1;overflow-y:auto;padding:0.9rem;display:grid;gap:0.6rem;align-content:start}
.chatsagt{border-radius:0.55rem;padding:0.6rem 0.8rem;font-size:0.92rem;line-height:1.55}
.chatsagt.sie{background:var(--card);border:1px solid var(--line);
  border-left:2px solid var(--plum);color:var(--soft)}
.chatsagt.ich{background:var(--linen-2);color:var(--ink);justify-self:end;max-width:88%}
.chatsagt.denkt{color:var(--stone);font-style:italic}
.chatsagt p{margin:0 0 0.45rem}
.chatsagt p:last-child{margin-bottom:0}
.chatzeile{display:flex;gap:0.4rem;padding:0.7rem 0.9rem 0;border-top:1px solid var(--line)}
.chatzeile input{flex:1;min-width:0;font-family:inherit;font-size:0.92rem;color:var(--ink);
  background:var(--card);border:1px solid var(--line);border-radius:2rem;padding:0.5rem 0.85rem}
.chatzeile input:focus{outline:none;border-color:var(--plum)}
.chatzeile button{flex:none;background:var(--plum);color:var(--card);border:0;
  border-radius:50%;width:2.1rem;height:2.1rem;font-size:1rem;cursor:pointer}
.chatfuss{margin:0;padding:0.5rem 0.9rem 0.8rem;font-size:0.74rem;color:var(--stone);line-height:1.4}
@media (prefers-reduced-motion:reduce){.chatfenster{animation:none}.chatknopf{transition:none}}