/* =========================================================
   IMMOCLUB7 · Nikola Andabak
   Design-System v3, mit Tiefe

   Haltung: teuer aussehen, einfach klingen.
   Editorialer Serif für die großen Aussagen, ruhige Grotesk
   für alles andere. Warme Neutraltöne, ein einziger Bordeaux-
   Akzent, großzügige Flächen. Haltung: Mitgliedschaft,
   nicht Landingpage.

   Bewusst kein Blau (Nähe zur Versicherungsmarke).
   ========================================================= */

:root{
  /* --- Neutraltöne, durchgehend warm --- */
  --ink:        #0E0B0C;
  --ink-2:      #181214;
  --ink-3:      #28201F;
  --paper:      #F5F1EA;
  --paper-2:    #FBF8F2;
  --white:      #FFFFFF;
  --muted:      #6E6862;
  --muted-2:    #A59E97;
  --line:       #E6DFD2;
  --line-2:     #F0EBE0;
  --line-dark:  rgba(255,255,255,.11);

  /* --- Ein Akzent, mehr nicht --- */
  --forest:     #33080F;
  --signal:     #6E1428;
  --signal-up:  #A84156;
  --signal-ink: #5C1021;
  --warn:       #A8842C;
  --gold:       #D8C39A;
  --alert:      #8A7F72;   /* neutral, damit Negativ-Marker nicht mit Weinrot verschmelzen */

  --radius:     14px;
  --radius-lg:  22px;
  --radius-xl:  30px;
  --maxw:       1180px;
  --maxw-text:  720px;

  --shadow-sm:  0 1px 2px rgba(14,11,12,.04), 0 8px 22px rgba(14,11,12,.05);
  --shadow-md:  0 2px 5px rgba(14,11,12,.05), 0 28px 64px rgba(14,11,12,.09);
  --shadow-lg:  0 40px 90px rgba(14,11,12,.18);

  /* Zwei Familien tragen die Seite, nicht drei.
     Serif für Überschriften, Manrope für alles andere.
     Vorher lief zusätzlich Archivo für Knöpfe, Labels und Tabellen.
     Zwei serifenlose Schriften nebeneinander sind zu ähnlich, um als
     Gegensatz zu wirken, und zu verschieden, um sauber auszusehen.
     Archivo bleibt allein in der Wortmarke, die ist Teil des Logos. */
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans:  "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --ui:    "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --marke: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);

  /* Masken, damit Symbole ohne Bilddateien auskommen */
  --haken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
  --kreuz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 5.5l13 13M18.5 5.5l-13 13' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E") center/12px no-repeat;
  --dreh:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 12a8 8 0 1 1-2.6-5.9' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M20 3v5h-5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.72;
  font-weight:450;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}

/* ---------- Typografie ----------
   Serif nur für die großen Aussagen. Alles Kleine bleibt
   Grotesk, sonst wird es dekorativ statt lesbar.          */
.display,h1,h2{
  font-family:var(--serif);
  font-weight:400;
  letter-spacing:-.018em;
  line-height:1.04;
  margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(2.7rem,7.2vw,5.6rem)}
h2{font-size:clamp(2.05rem,4.6vw,3.5rem);line-height:1.07}
h3{
  font-family:var(--ui);font-weight:600;font-size:clamp(1.06rem,1.7vw,1.2rem);
  line-height:1.32;letter-spacing:-.014em;margin:0;
}
h4{font-family:var(--ui);font-weight:600;font-size:1rem;margin:0}
p{margin:0 0 1.28rem}
p:last-child{margin-bottom:0}

/* Kursive Hervorhebung im Serif, ersetzt jede Farbmarkierung */
.em{font-style:italic;color:var(--signal-up)}
.sec-white .em,.on-light .em{color:var(--signal-ink)}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 26px}
.wrap-narrow{width:100%;max-width:var(--maxw-text);margin:0 auto;padding:0 26px}
.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}
/* Honigtopf gegen Bots: für Menschen und Vorlesehilfen unsichtbar */
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Label / Eyebrow ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--ui);
  font-size:.67rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--signal-ink);margin-bottom:1.4rem;
}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.5;flex:none}
.sec-dark .eyebrow,.sec-forest .eyebrow,.hero .eyebrow,.cover .eyebrow,.on-dark .eyebrow{color:var(--gold)}

/* Nummeriertes Label, z. B. 01 / 02 */
.num{
  font-family:var(--ui);font-size:.68rem;font-weight:600;letter-spacing:.2em;
  color:var(--muted);display:block;margin-bottom:.9rem;
}
.sec-dark .num,.sec-forest .num{color:var(--muted-2)}

/* ---------- Logo ---------- */
.brand{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;flex:none}
.brand-mark{width:34px;height:34px;flex:none}
/* Die Wortmarke behält Archivo: sie ist Teil des Logos und muss zu den
   exportierten Logodateien passen, in denen die Schrift fest eingebrannt ist. */
.brand-word{font-family:var(--marke);font-weight:600;font-size:.98rem;letter-spacing:.16em;text-transform:uppercase;line-height:1}
/* Die 7 im Schriftzug bleibt in der Textfarbe: weiß auf Dunkel,
   Tinte auf Hell. Das Weinrot trägt allein das Siegel. */
.brand-word i{font-style:normal;color:inherit;letter-spacing:0}
.brand-word small{display:block;font-size:.51rem;letter-spacing:.28em;font-weight:500;color:var(--muted);margin-top:.32rem}
.on-dark .brand-word,.on-dark .brand-word small{color:inherit}
.on-dark .brand-word small{color:rgba(255,255,255,.55)}

/* ---------- Buttons ----------
   Primär ist schwarz auf hell und weiß auf dunkel.
   Grün bleibt Akzent und wird nie zur Buttonfläche.        */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--ui);font-weight:600;font-size:.97rem;letter-spacing:-.004em;
  padding:1.05rem 1.8rem;border-radius:100px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;line-height:1.25;text-align:center;
  transition:background .22s var(--ease), color .22s var(--ease),
             border-color .22s var(--ease), transform .18s var(--ease),
             box-shadow .22s var(--ease);
}
.btn-primary{background:var(--ink);color:var(--white)}
.btn-primary:hover{background:var(--ink-2);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn-primary:active{transform:translateY(0)}
.on-dark .btn-primary,.hero .btn-primary,.cover .btn-primary,
.sec-dark .btn-primary,.sec-forest .btn-primary,body.ui-dark .btn-primary{
  background:var(--paper-2);color:var(--ink);
}
.on-dark .btn-primary:hover,.hero .btn-primary:hover,.cover .btn-primary:hover,
.sec-dark .btn-primary:hover,.sec-forest .btn-primary:hover,body.ui-dark .btn-primary:hover{
  background:var(--white);transform:translateY(-2px);box-shadow:0 16px 40px rgba(0,0,0,.32);
}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink);background:rgba(14,11,12,.03)}
.on-dark .btn-ghost,.hero .btn-ghost,.cover .btn-ghost,
.sec-dark .btn-ghost,.sec-forest .btn-ghost,body.ui-dark .btn-ghost{
  border-color:rgba(255,255,255,.28);color:var(--white);
}
.on-dark .btn-ghost:hover,.hero .btn-ghost:hover,.cover .btn-ghost:hover,
.sec-dark .btn-ghost:hover,.sec-forest .btn-ghost:hover,body.ui-dark .btn-ghost:hover{
  border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.07);
}
.btn-lg{padding:1.2rem 2.25rem;font-size:1.02rem}
.btn-block{display:flex;width:100%}
.btn[disabled]{opacity:.4;cursor:not-allowed;pointer-events:none}
:focus-visible{outline:2px solid var(--signal-up);outline-offset:3px;border-radius:4px}

/* ---------- Trust-Zeile ---------- */
.trust{display:flex;flex-wrap:wrap;gap:.55rem 1.5rem;align-items:center;font-size:.8rem;color:var(--muted);margin-top:1.5rem}
.trust span{display:inline-flex;align-items:center;gap:.48rem}
.trust span::before{
  content:"";width:13px;height:13px;flex:none;background:var(--signal);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;
}
.on-dark .trust,.hero .trust,.cover .trust,.sec-dark .trust,.sec-forest .trust,body.ui-dark .trust{color:rgba(255,255,255,.62)}
.on-dark .trust span::before,.hero .trust span::before,.cover .trust span::before,
.sec-dark .trust span::before,.sec-forest .trust span::before,body.ui-dark .trust span::before{background:var(--signal-up)}

/* ---------- Sektionen ---------- */
section{padding:clamp(4.5rem,10vw,9rem) 0}
.sec-dark{background:var(--ink);color:var(--white)}
.sec-forest{background:var(--forest);color:var(--white)}
.sec-white{background:var(--paper-2)}
.sec-paper{background:var(--paper)}
.sec-dark h1,.sec-dark h2,.sec-dark h3,.sec-forest h1,.sec-forest h2,.sec-forest h3{color:var(--white)}
.lead{font-size:clamp(1.04rem,1.55vw,1.19rem);color:var(--muted);max-width:60ch;line-height:1.74}
.sec-dark .lead,.sec-forest .lead,.cover .lead{color:rgba(255,255,255,.74)}

/* ---------- Hintergrundbild in einer Sektion ----------
   Damit dunkle Abschnitte nicht einfach schwarz sind.     */
.has-bg{position:relative;overflow:hidden;isolation:isolate}
.secbg{position:absolute;inset:-14% 0;z-index:0;pointer-events:none;overflow:hidden}
.secbg img{width:100%;height:100%;object-fit:cover;opacity:.34;filter:blur(3px) saturate(.85)}
/* Zwei Verläufe: einer legt die Fläche ruhig, einer blendet
   die Ränder weich aus, damit keine Kante entsteht. */
.has-bg::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(14,11,12,1) 0%,rgba(14,11,12,.74) 22%,rgba(14,11,12,.74) 78%,rgba(14,11,12,1) 100%),
    linear-gradient(100deg,rgba(14,11,12,.88) 0%,rgba(14,11,12,.5) 55%,rgba(14,11,12,.72) 100%);
}
.has-bg > .wrap,.has-bg > .wrap-narrow{position:relative;z-index:1}

/* ---------- Vollbild-Bildsektion ---------- */
.cover{position:relative;color:var(--white);overflow:hidden;isolation:isolate}
.cover-bg{position:absolute;inset:-12% 0;z-index:-2;overflow:hidden}
.cover-bg img{width:100%;height:100%;object-fit:cover;object-position:center}
.cover::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg, rgba(10,14,12,.86) 0%, rgba(10,14,12,.72) 42%, rgba(10,14,12,.92) 100%);
}
.cover.soft::before{background:linear-gradient(100deg, rgba(10,14,12,.94) 0%, rgba(10,14,12,.78) 48%, rgba(10,14,12,.42) 100%)}

/* ---------- Zitat ---------- */
.pull{font-family:var(--serif);font-size:clamp(1.7rem,3.5vw,2.75rem);line-height:1.16;
  letter-spacing:-.018em;margin:0;text-wrap:balance}
.pull .em{font-style:italic}
.pull-by{font-family:var(--ui);font-size:.75rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-top:1.7rem;display:block}
/* In laufendem Fließtext etwas kleiner, sonst sprengt es den Absatzrhythmus */
.prose .pull{font-size:clamp(1.35rem,2.5vw,1.85rem);line-height:1.28}

/* ---------- Bild-Rahmen ---------- */
.figure{border-radius:var(--radius-xl);overflow:hidden;background:var(--line-2);position:relative}
.figure img{width:100%;height:100%;object-fit:cover;display:block}
.figure.tall{aspect-ratio:4/5}
.figure.wide{aspect-ratio:16/10}
.figure.square{aspect-ratio:1}
.figcap{
  position:absolute;left:16px;right:16px;bottom:16px;
  background:rgba(12,16,14,.7);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);
  padding:.8rem .95rem;color:#fff;font-size:.78rem;line-height:1.5;
}
.figcap b{font-family:var(--ui);font-weight:600;font-size:.87rem;display:block;margin-bottom:.15rem}

/* ---------- Karten ---------- */
.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:2rem 1.85rem;box-shadow:var(--shadow-sm);
}
.sec-dark .card,.sec-forest .card,.cover .card{
  background:rgba(255,255,255,.045);border-color:var(--line-dark);box-shadow:none;color:var(--white);
  backdrop-filter:blur(8px);
}
.grid{display:grid;gap:1.2rem}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ---------- Asymmetrisches Zwei-Spalten-Raster ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.duo.text-left{grid-template-columns:1.02fr .98fr}
.duo.narrow-first{grid-template-columns:.86fr 1.14fr;align-items:start}
@media(max-width:900px){.duo,.duo.text-left,.duo.narrow-first{grid-template-columns:1fr;gap:2.4rem}}

/* ---------- Icon-Fläche ---------- */
.ibub{
  width:40px;height:40px;border-radius:11px;flex:none;display:grid;place-items:center;
  margin-bottom:1.2rem;background:rgba(110,20,40,.1);color:var(--signal-ink);
}
.sec-dark .ibub,.sec-forest .ibub,.cover .ibub{background:rgba(168,65,86,.15);color:var(--signal-up)}
.ibub svg{width:19px;height:19px}

/* ---------- Nummerierte Liste, groß ---------- */
.steps{display:grid;gap:0;counter-reset:st}
.step-row{
  counter-increment:st;display:grid;grid-template-columns:auto 1fr;gap:1.6rem;
  padding:1.9rem 0;border-top:1px solid var(--line);align-items:start;
}
.step-row:last-child{border-bottom:1px solid var(--line)}
.sec-dark .step-row,.sec-forest .step-row{border-color:var(--line-dark)}
.step-row::before{
  content:"0" counter(st);font-family:var(--serif);font-size:1.9rem;line-height:1;
  color:var(--muted-2);opacity:.9;min-width:2.1rem;
}
.sec-dark .step-row::before,.sec-forest .step-row::before{color:var(--gold)}
.step-row h3{margin-bottom:.4rem}
.step-row p{color:var(--muted);font-size:.96rem;margin:0}
.sec-dark .step-row p,.sec-forest .step-row p{color:rgba(255,255,255,.66)}

/* ---------- Faktenliste ---------- */
.facts{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.facts li{display:flex;justify-content:space-between;gap:1.2rem;padding:.9rem 0;border-bottom:1px solid var(--line);font-size:.92rem}
.facts .k{color:var(--muted)}
.facts .v{font-weight:600;text-align:right}
.sec-dark .facts,.sec-dark .facts li,.cover .facts,.cover .facts li{border-color:var(--line-dark)}
.sec-dark .facts .k,.cover .facts .k{color:var(--muted-2)}

/* ---------- Platzhalter-Markierung ---------- */
.ph{
  background:linear-gradient(transparent 66%, rgba(168,132,44,.24) 0);
  border-bottom:1px dashed rgba(168,132,44,.65);padding:0 .1em;
}
body.final .ph{background:none;border-bottom:0;padding:0}

/* ---------- Entwurfs-Banner ---------- */
.draftbar{
  background:#17140E;color:#E3CE99;font-size:.78rem;line-height:1.55;
  padding:.66rem 26px;display:flex;gap:.9rem;align-items:center;justify-content:center;
  text-align:center;flex-wrap:wrap;position:relative;z-index:80;
}
.draftbar b{color:#F4E3B7;font-weight:600}
.draftbar button{
  background:transparent;border:1px solid rgba(227,206,153,.32);color:inherit;
  border-radius:100px;padding:.24rem .78rem;font-size:.72rem;cursor:pointer;transition:border-color .2s;
}
.draftbar button:hover{border-color:rgba(227,206,153,.75)}
body.final .draftbar{display:none}

/* ---------- Rechtstext ---------- */
.legal{font-size:.745rem;line-height:1.72;color:var(--muted)}
.sec-dark .legal,.sec-forest .legal,.cover .legal{color:rgba(255,255,255,.46)}
details.legal-det{margin-top:1.2rem;font-size:.78rem;color:var(--muted)}
details.legal-det summary{cursor:pointer;font-weight:600;color:var(--signal-ink);font-family:var(--ui);font-size:.79rem}
.sec-dark details.legal-det summary,.cover details.legal-det summary{color:var(--gold)}
details.legal-det p{margin-top:.7rem;line-height:1.68}

/* ---------- Footer ---------- */
footer{background:var(--ink);color:rgba(255,255,255,.56);padding:4rem 0 2.6rem;font-size:.85rem}
footer a{color:rgba(255,255,255,.82);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.18)}
footer a:hover{color:var(--gold);border-color:var(--gold)}
.foot-top{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:flex-start}
.foot-nav{display:flex;flex-wrap:wrap;gap:.55rem 1.4rem}
.foot-legal{margin-top:2.6rem;padding-top:1.8rem;border-top:1px solid var(--line-dark);font-size:.725rem;line-height:1.72;color:rgba(255,255,255,.38)}

/* ---------- Scroll-Reveal ----------
   Sichtbar ist der Normalzustand. Versteckt wird nur, wenn
   das Skript die Klasse reveal-on gesetzt hat und die
   Einblendung also auch wirklich stattfindet. Fällt JS aus,
   steht der Inhalt trotzdem da.                            */
.rv{opacity:1;transform:none;transition:opacity .85s var(--ease), transform .85s var(--ease)}
html.reveal-on .rv{opacity:0;transform:perspective(900px) translateY(26px) rotateX(7deg) scale(.985)}
html.reveal-on .rv.in{opacity:1;transform:perspective(900px) translateY(0) rotateX(0) scale(1)}
/* Flache Variante für sehr hohe Blöcke. Die 3D-Kippung wird bei großer
   Bauhöhe seitlich breiter als ihr Container und steht dann über. */
html.reveal-on .rv.rv-flach{transform:translateY(22px)}
html.reveal-on .rv.rv-flach.in{transform:translateY(0)}
.rv-d1{transition-delay:.09s}
.rv-d2{transition-delay:.18s}
.rv-d3{transition-delay:.27s}

/* =========================================================
   TIEFE
   Kippen zur Maus, Lichtreflex, Zeigerlicht, Schweben.
   Alles rein visuell und ohne Einfluss auf den Inhalt.
   ========================================================= */

/* ---------- Kippen ---------- */
.tilt{
  position:relative;transform-style:preserve-3d;will-change:transform;
  transition:transform .5s var(--ease), box-shadow .4s var(--ease);
}
.tilt.tilting{transition:transform .08s linear, box-shadow .4s var(--ease)}
.card.tilt.tilting{box-shadow:var(--shadow-lg)}
.art.tilt.tilting{box-shadow:var(--shadow-lg)}

/* Inhalt kommt beim Kippen leicht nach vorn.
   Hintergrund- und Lichtebenen bleiben ausgenommen, sonst
   loesen sich die gestapelten Flaechen voneinander. */
.tilt > *:not(.tilt-sheen):not(.glow-orb):not(.bg):not(.ibg):not(.secbg):not(.cover-bg):not(.karte-innen){transform:translateZ(20px)}
.tilt .ibub,.tilt > .tag,.tilt > h3{transform:translateZ(34px)}

.tilt-sheen{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .35s var(--ease);mix-blend-mode:soft-light;z-index:2;
}
.sec-dark .tilt-sheen,.cover .tilt-sheen,body.ui-dark .tilt-sheen{mix-blend-mode:screen}

/* ---------- Zeigerlicht auf dunklen Flächen ---------- */
[data-glow]{position:relative;overflow:hidden;isolation:isolate}
.glow-orb{
  position:absolute;width:640px;height:640px;margin:-320px 0 0 -320px;
  border-radius:50%;pointer-events:none;opacity:0;z-index:0;
  transition:opacity .5s var(--ease);
  background:radial-gradient(circle, rgba(168,65,86,.16), rgba(168,65,86,.05) 42%, transparent 68%);
}
/* Nur echte Inhaltsebenen anheben. Hintergrundebenen müssen
   absolut positioniert bleiben, sonst rutschen sie in den
   Textfluss und legen sich über den Abdunkelungs-Verlauf. */
[data-glow] > *:not(.glow-orb):not(.secbg):not(.bg):not(.ibg):not(.cover-bg){position:relative;z-index:1}

/* ---------- Schweben ---------- */
@keyframes float-soft{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}
.floaty{animation:float-soft 6s ease-in-out infinite}
.floaty-slow{animation:float-soft 9s ease-in-out infinite}

/* ---------- Tiefe für die Schrittnummern ---------- */
.step-row::before{
  transition:transform .45s var(--ease), color .45s var(--ease);
}
.step-row:hover::before{transform:translateZ(0) scale(1.16) translateX(2px)}

/* ---------- Bildrahmen bekommen Tiefe ---------- */
.figure{transform-style:preserve-3d;box-shadow:var(--shadow-md)}

@media (prefers-reduced-motion:reduce){
  .tilt,.tilt > *,.floaty,.floaty-slow{transform:none !important;animation:none !important}
  .tilt-sheen,.glow-orb{display:none}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .rv{opacity:1;transform:none}
}

/* =========================================================
   MITGLIEDSCHAFT
   Drei Metalle: Gold, Platinum, Black. Jede Karte dreht sich
   beim Darüberfahren und zeigt hinten, was drin ist.
   ========================================================= */

.karte-huelle{
  position:relative;width:100%;max-width:460px;aspect-ratio:1.586/1;
  transform-style:preserve-3d;
}
.karte-innen{
  position:absolute;inset:0;transform-style:preserve-3d;
  transition:transform .85s cubic-bezier(.2,.7,.3,1);
}
.karte-huelle:hover .karte-innen,
.karte-huelle:focus-within .karte-innen{transform:rotateY(180deg)}

.karte{
  position:absolute;inset:0;border-radius:22px;overflow:hidden;isolation:isolate;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  padding:clamp(1.25rem,3.2vw,1.75rem);
  display:flex;flex-direction:column;justify-content:space-between;
  font-family:var(--ui);
  box-shadow:0 2px 5px rgba(0,0,0,.32), 0 30px 70px rgba(30,4,10,.5);
}
.karte-rueck{transform:rotateY(180deg)}

/* Feine Prägekante innen */
.karte::after{
  content:"";position:absolute;inset:0;border-radius:22px;pointer-events:none;z-index:4;
  border:1px solid rgba(255,255,255,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42), inset 0 0 0 3.5px rgba(255,255,255,.09);
}
/* Lichtschimmer, läuft langsam durch */
.karte::before{
  content:"";position:absolute;inset:-70% -25%;z-index:1;pointer-events:none;
  background:linear-gradient(74deg, transparent 42%, rgba(255,255,255,.3) 50%, transparent 58%);
  animation:schimmer 6.5s ease-in-out infinite;
}
@keyframes schimmer{0%,100%{transform:translateX(-42%)}50%{transform:translateX(42%)}}
.karte > *{position:relative;z-index:2}

/* ---------- Die drei Metalle ---------- */
.stufe-gold{
  color:#3A2A0C;
  background:
    repeating-linear-gradient(101deg, rgba(255,255,255,.07) 0 1.5px, rgba(0,0,0,.025) 1.5px 3px),
    linear-gradient(147deg,#FBF0D2 0%,#E6CE96 20%,#C4A05C 48%,#9A7638 72%,#E3C88E 100%);
}
.stufe-platinum{
  color:#22262B;
  background:
    repeating-linear-gradient(101deg, rgba(255,255,255,.09) 0 1.5px, rgba(0,0,0,.03) 1.5px 3px),
    linear-gradient(147deg,#FAFBFC 0%,#DDE0E5 20%,#B0B6BE 48%,#848A93 74%,#D6DAE0 100%);
}
.stufe-black{
  color:#EEE2C6;
  background:
    repeating-linear-gradient(101deg, rgba(255,255,255,.035) 0 1.5px, rgba(0,0,0,.06) 1.5px 3px),
    linear-gradient(147deg,#3A3B42 0%,#1E1F25 26%,#0A0A0C 58%,#26272E 100%);
}
.stufe-black::after{
  border-color:rgba(216,195,154,.5);
  box-shadow:inset 0 1px 0 rgba(216,195,154,.3), inset 0 0 0 3.5px rgba(216,195,154,.1);
}
.stufe-black::before{background:linear-gradient(74deg, transparent 42%, rgba(216,195,154,.22) 50%, transparent 58%)}

/* ---------- Karteninhalt ---------- */
.karte-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.karte-kopf img{width:40px;height:40px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}
.karte-stufe{
  font-size:.62rem;font-weight:700;letter-spacing:.32em;text-transform:uppercase;
  text-align:right;line-height:1.5;opacity:.82;
}
.karte-chip{
  width:46px;height:34px;border-radius:6px;position:relative;
  background:linear-gradient(145deg,#F4E6C2,#C0A567 52%,#EADCB4);
  box-shadow:0 1px 2px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.4);
}
.stufe-platinum .karte-chip{background:linear-gradient(145deg,#F2F4F6,#A8AEB6 52%,#E3E6EA)}
.karte-chip::before,.karte-chip::after{
  content:"";position:absolute;left:15%;right:15%;height:1px;background:rgba(0,0,0,.28);
}
.karte-chip::before{top:36%}
.karte-chip::after{top:64%}
.karte-nr{
  font-size:clamp(.9rem,2.3vw,1.06rem);letter-spacing:.2em;font-weight:600;
  text-shadow:0 1px 0 rgba(255,255,255,.32), 0 -1px 0 rgba(0,0,0,.16);
}
.stufe-black .karte-nr{text-shadow:0 1px 0 rgba(0,0,0,.5)}
.karte-fuss{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem}
.karte-fuss small{display:block;font-size:.55rem;letter-spacing:.26em;text-transform:uppercase;opacity:.62;margin-bottom:.25rem}
.karte-fuss b{font-size:.84rem;font-weight:700;letter-spacing:.09em}

/* ---------- Rückseite ----------
   Bewusst leer bis auf das Siegel. Die Leistungen standen früher hier
   und waren nur nach einem Dreh zu sehen; wer nicht drehte, sah bei
   Black gar nichts. Sie stehen jetzt unter der Karte, wo man die
   Stufen nebeneinander vergleichen kann. */
.karte-rueck{display:flex;align-items:center;justify-content:center}
.rueck-siegel{display:grid;place-items:center;opacity:.9}
.rueck-siegel img{width:54px;height:54px;filter:drop-shadow(0 6px 18px rgba(0,0,0,.35))}

/* ---------- Stufen-Raster ---------- */
.stufen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;align-items:start}
@media(max-width:1020px){.stufen{grid-template-columns:1fr;max-width:470px;margin:0 auto}}
.stufe{display:flex;flex-direction:column;gap:1.4rem}
.stufe .karte-huelle{max-width:none}
.stufe-text h3{margin-bottom:.5rem}
.stufe-preis{font-family:var(--serif);font-size:1.95rem;line-height:1;color:var(--ink);margin:.2rem 0 .95rem}
.sec-dark .stufe-preis,.cover .stufe-preis,.on-dark .stufe-preis{color:#fff}
.stufe-preis span{font-family:var(--ui);font-size:.76rem;font-weight:500;color:var(--muted);letter-spacing:.02em}
/* Verbraucherpreise nennen den Gesamtpreis. Der Nettobetrag steht klein darunter. */
.preis-netto{font-family:var(--ui);font-size:.7rem;color:var(--muted);margin:-.75rem 0 .95rem;line-height:1.5}
.sec-dark .preis-netto,.cover .preis-netto,.on-dark .preis-netto{color:var(--muted-2)}
.sec-dark .stufe-preis span{color:var(--muted-2)}
.stufe-liste{list-style:none;margin:0 0 1.3rem;padding:0;display:grid;gap:.52rem}
.stufe-liste li{position:relative;padding-left:1.6rem;font-size:.9rem;line-height:1.55;color:var(--muted)}
.sec-dark .stufe-liste li,.on-dark .stufe-liste li{color:rgba(255,255,255,.72)}
.stufe-liste li::before{
  content:"";position:absolute;left:0;top:.46em;width:12px;height:12px;background:var(--signal);
  -webkit-mask:var(--haken);mask:var(--haken);
}
.sec-dark .stufe-liste li::before{background:var(--gold)}
/* Die Liste unter einer Stufenkarte steht enger als die grosse
   Silber-Liste, damit drei Stufen nebeneinander vergleichbar bleiben. */
.stufe-liste-karte{margin:1.05rem 0 0;gap:.44rem}
.stufe-liste-karte li{font-size:.855rem;line-height:1.5;padding-left:1.45rem}
.stufe-liste-karte li::before{width:11px;height:11px;top:.42em}


/* Die Karten-Innenebene ist oben aus der Kippen-Regel ausgenommen,
   sonst überschriebe deren translateZ die Drehung. */

@media (prefers-reduced-motion:reduce){
  .karte::before{animation:none}
  .karte-innen{transition:none}
}

/* =========================================================
   HELLE FLÄCHEN MIT LEBEN
   Ohne das wirken die Papierabschnitte flach.
   ========================================================= */
.sec-paper,.sec-white{position:relative;isolation:isolate}
.sec-paper::before,.sec-white::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(72% 58% at 10% 0%, rgba(110,20,40,.06), transparent 62%),
    radial-gradient(62% 52% at 94% 100%, rgba(216,195,154,.2), transparent 66%);
}
/* Siegel als sehr leises Wasserzeichen */
.mit-siegel::after{
  content:"";position:absolute;right:-7%;top:50%;transform:translateY(-50%);
  width:min(500px,48vw);aspect-ratio:1;z-index:-1;pointer-events:none;opacity:.035;
  background:url("logo.svg") center/contain no-repeat;
}
@media(max-width:900px){.mit-siegel::after{display:none}}

/* Zahlen, die hochlaufen */
.zaehler{font-variant-numeric:tabular-nums}

/* ---------- Zwei weitere Stufen ---------- */
.stufe-silber{
  color:#2A2C2F;
  background:
    repeating-linear-gradient(101deg, rgba(255,255,255,.08) 0 1.5px, rgba(0,0,0,.028) 1.5px 3px),
    linear-gradient(147deg,#FDFDFE 0%,#E9EBEE 22%,#CBCFD4 52%,#A9AEB5 78%,#E2E5E9 100%);
}
.stufe-standard{
  color:#F3E6DC;
  background:
    repeating-linear-gradient(101deg, rgba(255,255,255,.05) 0 1.5px, rgba(0,0,0,.05) 1.5px 3px),
    linear-gradient(147deg,#94203C 0%,#6E1428 26%,#420C18 60%,#7A1730 100%);
}
.stufe-standard::after{
  border-color:rgba(216,195,154,.46);
  box-shadow:inset 0 1px 0 rgba(216,195,154,.28), inset 0 0 0 3.5px rgba(216,195,154,.1);
}

/* Fuenf Stufen brauchen ein flexibleres Raster */
.stufen.fuenf{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem}
@media(max-width:1180px){.stufen.fuenf{grid-template-columns:repeat(2,minmax(0,1fr));max-width:820px;margin:0 auto}}
@media(max-width:680px){.stufen.fuenf{grid-template-columns:1fr;max-width:440px}}
.stufen.fuenf .stufe{gap:1.1rem}
.stufen.fuenf .stufe-preis{font-size:1.6rem}

/* Der kostenlose Einstieg steht abgesetzt darueber */
.silberblock{
  display:grid;grid-template-columns:minmax(0,340px) 1fr;gap:clamp(1.6rem,4vw,3rem);
  align-items:center;padding:clamp(1.5rem,3.5vw,2.2rem);
  border:1px solid var(--line-dark);border-radius:26px;
  background:rgba(255,255,255,.045);backdrop-filter:blur(6px);
  margin-bottom:clamp(1.6rem,3.5vw,2.4rem);
}
@media(max-width:860px){.silberblock{grid-template-columns:1fr;gap:1.6rem}}

/* Startzeitpunkt-Fahne */
.launch{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--ui);font-size:.66rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);border:1px solid rgba(216,195,154,.4);border-radius:100px;
  padding:.34rem .85rem;margin-bottom:1.2rem;
}
.launch::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold)}
.on-light .launch,.sec-paper .launch,.sec-white .launch{
  color:var(--signal-ink);border-color:rgba(110,20,40,.28);
}
.on-light .launch::before,.sec-paper .launch::before,.sec-white .launch::before{background:var(--signal)}

/* Geschwaerzte Stellen in der kostenlosen Stufe */
.geschwaerzt{
  background:currentColor;color:inherit;border-radius:3px;
  opacity:.28;user-select:none;display:inline-block;vertical-align:middle;
  height:.72em;width:var(--w,5.5em);
}

/* ---------- Hinweis zum Ablegen auf dem Homescreen ---------- */
.appbar{
  position:fixed;left:50%;bottom:16px;transform:translate(-50%,140%);
  z-index:200;display:flex;align-items:center;gap:.85rem;
  width:min(560px,calc(100vw - 24px));
  padding:.8rem .9rem .8rem 1rem;border-radius:100px;
  background:rgba(24,18,20,.94);backdrop-filter:blur(14px);
  border:1px solid rgba(216,195,154,.28);
  box-shadow:0 18px 50px rgba(0,0,0,.45);
  opacity:0;transition:transform .5s var(--ease), opacity .5s var(--ease);
}
.appbar.an{transform:translate(-50%,0);opacity:1}
.appbar img{flex:none;border-radius:50%}
.appbar-text{flex:1;font-size:.83rem;line-height:1.4;color:#F3EDE4}
.appbar-ja{
  flex:none;font-family:var(--ui);font-size:.8rem;font-weight:600;
  padding:.55rem 1.05rem;border-radius:100px;border:0;cursor:pointer;
  background:var(--gold);color:#2A1A10;
}
.appbar-zu{
  flex:none;width:30px;height:30px;border-radius:50%;cursor:pointer;
  background:transparent;border:1px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.7);font-size:1.05rem;line-height:1;
}
.appbar-zu:hover{border-color:rgba(255,255,255,.45);color:#fff}
@media(max-width:520px){
  .appbar{border-radius:18px;flex-wrap:wrap}
  .appbar-text{flex:1 1 100%;order:2}
}

/* ---------- Leistungsvergleich der Stufen ----------
   Aufbau wie bei den grossen Kartenanbietern: Zeilen sind
   Leistungen, Spalten sind Stufen, jede Zelle sagt ja oder nein.
   Auf schmalen Geraeten scrollt die Tabelle waagerecht, die erste
   Spalte bleibt stehen, sonst weiss niemand mehr, welche Zeile er
   gerade liest. */
.vgl-rahmen{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--white)}
.vgl{width:100%;border-collapse:collapse;min-width:660px;font-family:var(--ui)}
.vgl th,.vgl td{padding:1rem .9rem;text-align:center;border-bottom:1px solid var(--line-2)}
.vgl tbody tr:last-child th,.vgl tbody tr:last-child td{border-bottom:0}
.vgl thead th{
  position:sticky;top:0;z-index:2;background:var(--paper-2);
  border-bottom:1px solid var(--line);padding:1.15rem .9rem;vertical-align:bottom;
}
.vgl thead th.hervor{background:rgba(110,20,40,.055)}
.vgl-stufe{display:block;font-size:.94rem;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.vgl-preis{display:block;font-size:.72rem;font-weight:500;color:var(--muted);margin-top:.22rem}
/* Erste Spalte bleibt beim seitlichen Scrollen stehen */
.vgl th[scope="row"],.vgl thead th:first-child{
  position:sticky;left:0;z-index:1;text-align:left;background:var(--white);
  font-size:.88rem;font-weight:600;color:var(--ink);min-width:230px;
}
.vgl thead th:first-child{z-index:3;background:var(--paper-2)}
.vgl tbody tr:nth-child(even) th[scope="row"]{background:var(--paper-2)}
.vgl tbody tr:nth-child(even) td{background:rgba(240,235,224,.42)}
.vgl td.hervor{background:rgba(110,20,40,.04)}
.vgl tbody tr:nth-child(even) td.hervor{background:rgba(110,20,40,.075)}

/* Ja und Nein. Das Kreuz ist bewusst ein helles Terrakotta und nicht
   das tiefe Weinrot der Marke, sonst verschwimmen Marke und Absage. */
.vgl .ja,.vgl .nein{display:inline-block;width:19px;height:19px}
.vgl .ja{background:var(--signal);-webkit-mask:var(--haken);mask:var(--haken)}
.vgl .nein{background:#BF4B31;-webkit-mask:var(--kreuz);mask:var(--kreuz)}
.vgl .teil{
  display:inline-block;font-size:.72rem;font-weight:600;letter-spacing:.04em;
  color:var(--muted);border:1px solid var(--line);border-radius:100px;padding:.2rem .6rem;
}
.vgl .frueher{
  display:inline-flex;flex-direction:column;align-items:center;gap:.28rem;
  font-size:.68rem;font-weight:700;letter-spacing:.06em;color:var(--signal-ink);
}
.vgl-fuss{margin-top:1.2rem}

/* ---------- Logo als Praegung im Kartenmetall ----------
   Kein Bild, sondern die Siegel-Silhouette als Maske. Die Flaeche
   selbst ist eine dunkle Vertiefung, darunter sitzt eine helle
   Lichtkante. Genau so liest das Auge "in das Material gestanzt".
   Licht kommt von oben, deshalb Schatten oben, Glanz unten. */
.karte-praegung{
  width:40px;height:40px;flex:none;display:block;
  /* Der Verlauf ist die Innenwand der Vertiefung: oben liegt sie im
     Schatten, unten faengt sie das Licht. Die Maske schneidet ihn
     auf Ring und Sieben zu. */
  background:linear-gradient(180deg,
    rgba(0,0,0,.62) 0%,
    rgba(0,0,0,.40) 42%,
    rgba(0,0,0,.16) 72%,
    rgba(255,255,255,.42) 100%);
  -webkit-mask:url("siegel-maske.svg") center/contain no-repeat;
          mask:url("siegel-maske.svg") center/contain no-repeat;
  /* Die helle Kante direkt unter der Kontur ist der aufgeworfene Rand */
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,.75))
    drop-shadow(0 -1px 1px rgba(0,0,0,.34));
}
/* Auf dem schwarzen Metall traegt eine weisse Kante zu stark auf */
.karte.stufe-black .karte-praegung{
  background:linear-gradient(180deg,
    rgba(0,0,0,.85) 0%,
    rgba(0,0,0,.6) 45%,
    rgba(255,255,255,.10) 78%,
    rgba(255,255,255,.30) 100%);
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,.26))
    drop-shadow(0 -1px 1px rgba(0,0,0,.6));
}
/* Gold vertraegt einen waermeren Glanz als reines Weiss */
.karte.stufe-gold .karte-praegung{
  background:linear-gradient(180deg,
    rgba(62,40,8,.62) 0%,
    rgba(62,40,8,.38) 42%,
    rgba(120,86,28,.14) 72%,
    rgba(255,248,226,.5) 100%);
  filter:
    drop-shadow(0 1px 0 rgba(255,248,226,.8))
    drop-shadow(0 -1px 1px rgba(74,50,12,.38));
}
@media (prefers-reduced-motion: no-preference){
  .karte-huelle:hover .karte-praegung{filter:
    drop-shadow(0 1.5px 0 rgba(255,255,255,.62))
    drop-shadow(0 -1px 1.5px rgba(0,0,0,.34))}
}

/* Im Vierer-Raster sind die Karten schmaler, also muss der
   Inhalt enger sitzen, sonst rutscht die Fusszeile raus.
   Bleibt stehen, falls wieder eine vierte Stufe dazukommt. */
.stufen.fuenf .karte-praegung{width:30px;height:30px}
.stufen.fuenf .karte{padding:1rem 1.05rem;border-radius:16px}
.stufen.fuenf .karte::after{border-radius:16px}
.stufen.fuenf .karte-kopf img{width:30px;height:30px}
.stufen.fuenf .karte-stufe{font-size:.52rem;letter-spacing:.24em}
.stufen.fuenf .karte-chip{width:34px;height:25px;border-radius:5px}
.stufen.fuenf .karte-nr{font-size:.8rem;letter-spacing:.13em;margin-top:.5rem!important}
.stufen.fuenf .karte-fuss small{font-size:.46rem;letter-spacing:.2em;margin-bottom:.15rem}
.stufen.fuenf .karte-fuss b{font-size:.68rem;letter-spacing:.06em}
/* Der Silberblock bleibt gross, da ist Platz */
.silberblock .karte{padding:clamp(1.1rem,2.6vw,1.5rem)}

/* =========================================================
   DER BERATER
   Das Fragefeld unten rechts. Erscheint erst, wenn die
   Funktion dahinter wirklich antwortet, siehe berater.js.

   Haltung wie der Rest der Seite: warmes Papier, ein
   Bordeaux-Akzent, ruhige Bewegung. Kein Bot-Gefuehl, kein
   springendes Maskottchen.
   ========================================================= */

/* Bis das Skript geprueft hat, ob der Berater bereitsteht,
   ist alles unsichtbar. So blitzt nie ein toter Knopf auf. */
.brt{display:none}
.brt.bereit{display:block}

/* ---------- Der Knopf ---------- */
.brt-knopf{
  position:fixed;right:clamp(14px,3vw,26px);
  bottom:calc(clamp(14px,3vw,26px) + env(safe-area-inset-bottom,0px));
  z-index:70;
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.72rem .95rem .72rem .78rem;
  border:0;border-radius:999px;cursor:pointer;
  background:var(--ink);color:var(--paper-2);
  font-family:var(--ui);font-size:.86rem;font-weight:600;letter-spacing:.01em;
  box-shadow:var(--shadow-md);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),opacity .2s linear;
}
.brt-knopf:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.brt-knopf:active{transform:translateY(0)}
.brt-knopf:focus-visible{outline:2px solid var(--signal-up);outline-offset:3px}

/* Die Sieben im Kreis. Dasselbe Zeichen wie in der Wortmarke,
   damit der Knopf sofort zur Marke gehoert. */
.brt-mark{
  width:30px;height:30px;flex:none;border-radius:50%;
  display:grid;place-items:center;
  background:var(--signal);color:#fff;
  font-family:var(--serif);font-size:1.06rem;line-height:1;
  padding-bottom:2px;
}
.brt-wort{white-space:nowrap}

/* Ein einziger, langsamer Puls beim ersten Erscheinen.
   Danach nie wieder, sonst wird es zum Zappeln. */
.brt-knopf::after{
  content:"";position:absolute;inset:0;border-radius:999px;
  border:1px solid var(--signal-up);opacity:0;pointer-events:none;
}
.brt.frisch .brt-knopf::after{animation:brtPuls 2.6s var(--ease) .8s 2}
@keyframes brtPuls{
  0%{opacity:.55;transform:scale(1)}
  70%{opacity:0;transform:scale(1.16)}
  100%{opacity:0;transform:scale(1.16)}
}

/* Offenes Fenster: Knopf verschwindet. Ebenso, solange die
   Menuetafel offen ist, sonst liegen zwei Ebenen uebereinander. */
.brt.offen .brt-knopf,
html.menue-offen .brt-knopf{opacity:0;pointer-events:none;transform:translateY(8px)}

/* ---------- Das Fenster ---------- */
.brt-tafel{
  position:fixed;z-index:72;
  right:clamp(14px,3vw,26px);
  bottom:calc(clamp(14px,3vw,26px) + env(safe-area-inset-bottom,0px));
  width:min(396px,calc(100vw - 28px));
  height:min(628px,calc(100dvh - 120px));
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--paper-2);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.985);
  transform-origin:100% 100%;
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
}
.brt.offen .brt-tafel{opacity:1;visibility:visible;transform:translateY(0) scale(1)}

.brt-kopf{
  flex:none;display:flex;align-items:center;gap:.7rem;
  padding:.9rem 1rem;background:var(--ink);color:var(--paper-2);
}
.brt-kopf .brt-mark{width:32px;height:32px;font-size:1.1rem}
.brt-titel{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.brt-titel b{font-size:.9rem;font-weight:600;letter-spacing:.005em}
.brt-titel small{font-size:.7rem;color:rgba(255,255,255,.62)}
.brt-zu{
  margin-left:auto;flex:none;width:32px;height:32px;
  display:grid;place-items:center;cursor:pointer;
  background:transparent;border:1px solid rgba(255,255,255,.16);
  border-radius:9px;color:inherit;
  transition:background .2s linear,border-color .2s linear;
}
.brt-zu:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.3)}
.brt-zu:focus-visible{outline:2px solid var(--signal-up);outline-offset:2px}
.brt-zu svg{width:15px;height:15px}

/* ---------- Verlauf ---------- */
.brt-lauf{
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:1.05rem 1rem .4rem;
  display:flex;flex-direction:column;gap:.75rem;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
}
.brt-lauf::-webkit-scrollbar{width:7px}
.brt-lauf::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}

.brt-blase{
  max-width:88%;padding:.66rem .85rem;border-radius:14px;
  font-size:.885rem;line-height:1.62;overflow-wrap:anywhere;
}
.brt-blase.von-mir{
  align-self:flex-end;background:var(--ink);color:var(--paper-2);
  border-bottom-right-radius:5px;white-space:pre-wrap;
}
.brt-blase.von-ihm{
  align-self:flex-start;background:var(--white);border:1px solid var(--line);
  border-bottom-left-radius:5px;
}
.brt-blase.hinweis{
  align-self:stretch;max-width:100%;background:transparent;border:0;
  color:var(--muted);font-size:.78rem;line-height:1.6;padding:.2rem .1rem;
}
.brt-blase p{margin:0}
.brt-blase p + p{margin-top:.6rem}
.brt-blase b{font-weight:650}
.brt-blase a{color:var(--signal);text-decoration:underline;text-underline-offset:2px}

/* Der Punkt, der laeuft, solange noch nichts da ist. */
.brt-warte{display:inline-flex;gap:4px;align-items:center;height:1.1em}
.brt-warte i{width:5px;height:5px;border-radius:50%;background:var(--muted-2);animation:brtWarte 1.15s infinite ease-in-out}
.brt-warte i:nth-child(2){animation-delay:.16s}
.brt-warte i:nth-child(3){animation-delay:.32s}
@keyframes brtWarte{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}

/* ---------- Vorschlaege ---------- */
.brt-vorschlaege{
  flex:none;display:flex;flex-wrap:wrap;gap:.4rem;
  padding:.35rem 1rem .7rem;
}
.brt-vorschlaege:empty{display:none}
.brt-chip{
  border:1px solid var(--line);background:var(--white);color:var(--ink);
  border-radius:999px;padding:.4rem .72rem;cursor:pointer;
  font-family:var(--ui);font-size:.775rem;line-height:1.3;font-weight:500;
  text-align:left;
  transition:border-color .2s linear,background .2s linear,transform .2s var(--ease);
}
.brt-chip:hover{border-color:var(--ink);transform:translateY(-1px)}
.brt-chip:focus-visible{outline:2px solid var(--signal-up);outline-offset:2px}

/* ---------- Eingabe ---------- */
.brt-fuss{flex:none;border-top:1px solid var(--line);background:var(--paper-2);padding:.7rem .75rem .55rem}
.brt-feld{display:flex;align-items:flex-end;gap:.5rem}
.brt-feld textarea{
  flex:1;min-height:42px;max-height:132px;resize:none;
  padding:.62rem .8rem;border:1px solid var(--line);border-radius:12px;
  background:var(--white);font-family:var(--ui);font-size:.875rem;line-height:1.5;
  transition:border-color .2s linear;
}
.brt-feld textarea:focus{outline:0;border-color:var(--ink)}
.brt-feld textarea::placeholder{color:var(--muted-2)}
.brt-ab{
  flex:none;width:42px;height:42px;border:0;border-radius:12px;cursor:pointer;
  background:var(--ink);color:var(--paper-2);display:grid;place-items:center;
  transition:background .2s linear,transform .2s var(--ease),opacity .2s linear;
}
.brt-ab:hover:not([disabled]){background:var(--signal);transform:translateY(-1px)}
.brt-ab[disabled]{opacity:.3;cursor:not-allowed}
.brt-ab:focus-visible{outline:2px solid var(--signal-up);outline-offset:2px}
.brt-ab svg{width:17px;height:17px}

.brt-klein{
  margin:.5rem .15rem 0;font-size:.66rem;line-height:1.55;color:var(--muted-2);
}
.brt-klein a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* ---------- Schmale Ansicht ----------
   Auf dem Telefon ist das Fenster kein Kaertchen mehr,
   sondern eine Tafel von unten. Alles andere ist zu klein
   zum Tippen. */
@media(max-width:560px){
  .brt-tafel{
    right:0;left:0;bottom:0;
    width:100%;height:min(86dvh,660px);
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    border-left:0;border-right:0;border-bottom:0;
    padding-bottom:env(safe-area-inset-bottom,0px);
    transform-origin:50% 100%;
  }
  /* Auf dem Telefon bleibt nur die Sieben. Die Beschriftung
     hat eine eigene Klasse, sonst verschwaende hier auch das
     Zeichen im Kreis, das ebenfalls ein span ist. */
  .brt-wort{display:none}
  .brt-knopf{padding:.72rem;gap:0}
  .brt-blase{max-width:92%}
}

/* Dunkler Schleier hinter der Tafel, nur auf schmalen
   Geraeten. Am Rechner wuerde er die Seite unnoetig
   verdecken. */
.brt-schleier{
  position:fixed;inset:0;z-index:71;background:rgba(14,11,12,.42);
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s;
}
@media(max-width:560px){
  .brt.offen .brt-schleier{opacity:1;visibility:visible}
}

@media (prefers-reduced-motion:reduce){
  .brt-knopf,.brt-tafel,.brt-chip,.brt-ab,.brt-schleier{transition:none}
  .brt.frisch .brt-knopf::after{animation:none}
  .brt-warte i{animation:none;opacity:.5}
}