/* ============================================================
   STARTHAUS — dock.css
   Die rechte Werkzeugleiste: Buchen · Merkzettel · Fragen.

   Vorher schwebten drei Dinge einzeln am Rand herum. Jetzt eine
   Leiste, drei Werkzeuge, ein Ort — das ist der eigentliche Gewinn
   fürs Interface, nicht der Schatten drumherum.
   ============================================================ */

/* ---------------- Die Leiste ---------------- */
.dock{
  position:fixed;right:0;top:50%;transform:translateY(-50%);
  z-index:210;display:flex;flex-direction:column;gap:8px;
  padding:10px 0 10px 10px;
}
.dk-tab{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;
  width:52px;padding:14px 0;cursor:pointer;
  border-radius:16px 0 0 16px;border:1px solid var(--line-2);border-right:0;
  background:linear-gradient(180deg,rgba(20,31,42,.92),rgba(11,18,25,.92));
  backdrop-filter:blur(14px) saturate(1.15);
  color:var(--soft);
  box-shadow:-14px 0 44px -22px rgba(0,0,0,.9);
  transition:color .3s,transform .4s var(--ease-out),border-color .3s,background .3s,width .4s var(--ease-out);
}
.dk-tab:hover{color:var(--snow);transform:translateX(-4px);border-color:var(--line-3,rgba(196,214,230,.34))}
.dk-tab.an{
  color:var(--snow);border-color:rgba(143,211,244,.5);
  background:linear-gradient(180deg,rgba(20,44,60,.95),rgba(11,25,35,.95));
}
.dk-tab svg{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dk-tab.an svg{stroke:var(--ice)}
.dk-t{
  writing-mode:vertical-rl;text-orientation:mixed;
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.19em;
  text-transform:uppercase;
}
.dk-z{
  position:absolute;top:6px;right:6px;min-width:18px;height:18px;
  display:grid;place-items:center;border-radius:999px;
  background:var(--flut);color:#2a1602;
  font-family:var(--mono);font-size:10px;font-weight:700;
}
.dk-tab[data-leer="1"] .dk-z{display:none}

/* Die Scroll-Leiste rückt zur Seite, damit sich nichts überlagert. */
.rail{right:66px}
html.dk-offen .rail{opacity:0;pointer-events:none;transition:opacity .25s}

/* Bei offener Tafel wandern die Laschen an deren Kante — sonst liegen sie
   darunter und man kommt nicht mehr an die anderen zwei Werkzeuge. */
html.dk-offen .dock{transform:translate(calc(-1 * min(430px, 94vw)),-50%)}
.dock{transition:transform .42s var(--ease-out)}
@media (prefers-reduced-motion:reduce){.dock{transition:none}}

/* ---------------- Die Tafel ---------------- */
.dk-tafel{
  position:fixed;right:0;top:var(--nav-h);bottom:0;z-index:215;
  width:min(430px,94vw);display:flex;flex-direction:column;
  background:linear-gradient(180deg,#101a24,#0a1017);
  border-left:1px solid var(--line-2);
  box-shadow:-40px 0 120px -40px rgba(0,0,0,.94);
  transform:translateX(102%);
  transition:transform .42s var(--ease-out);
}
.dk-tafel.auf{transform:none}
@media (prefers-reduced-motion:reduce){.dk-tafel{transition:none}}

.dk-kopf{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 18px 14px;border-bottom:1px solid var(--line);flex:none;
}
.dk-kopf h2{
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;color:var(--ice);margin:0;
}
.dk-zu{
  background:none;border:1px solid var(--line);border-radius:9px;color:var(--dim);
  width:34px;height:34px;display:grid;place-items:center;cursor:pointer;font-size:17px;
  transition:color .25s,border-color .25s;
}
.dk-zu:hover{color:var(--snow);border-color:var(--line-2)}
.dk-koerper{flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(196,214,230,.2) transparent}
.dk-koerper::-webkit-scrollbar{width:6px}
.dk-koerper::-webkit-scrollbar-thumb{background:rgba(196,214,230,.2);border-radius:6px}

/* ---------------- Schnellrechner ---------------- */
.dq{padding:16px 18px 20px;display:grid;gap:16px}
.dq-block{display:grid;gap:9px}
.dq-lbl{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;color:var(--soft);
}
.dq-lbl b{font-family:var(--sans);font-size:.76rem;font-weight:500;letter-spacing:0;text-transform:none;color:var(--dim)}
.dq-chips{display:flex;flex-wrap:wrap;gap:6px}
.dq-chips button{
  flex:1 1 auto;min-width:0;cursor:pointer;text-align:center;
  padding:10px 11px;min-height:42px;border-radius:11px;
  background:rgba(255,255,255,.03);border:1px solid var(--line);color:var(--soft);
  font-size:.85rem;line-height:1.15;
  transition:border-color .25s,color .25s,background .25s,transform .25s var(--ease-out);
}
.dq-chips button small{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--dim);margin-top:3px}
.dq-chips button:hover{border-color:var(--line-2);color:var(--snow)}
.dq-chips button[aria-pressed="true"]{
  border-color:rgba(143,211,244,.55);color:var(--snow);
  background:linear-gradient(160deg,rgba(143,211,244,.16),rgba(143,211,244,.04));
}
.dq-chips button[aria-pressed="true"] small{color:var(--ice)}

.dq-zahl{display:flex;align-items:center;gap:10px}
.dq-zahl button{
  width:38px;height:38px;flex:none;border-radius:10px;cursor:pointer;
  background:rgba(255,255,255,.03);border:1px solid var(--line);color:var(--soft);
  font-size:18px;line-height:1;transition:border-color .25s,color .25s;
}
.dq-zahl button:hover{border-color:var(--line-2);color:var(--snow)}
.dq-zahl output{
  flex:1;text-align:center;font-family:var(--disp);font-weight:800;
  font-size:1.35rem;color:var(--snow);font-variant-numeric:tabular-nums;
}
.dq-zahl output span{display:block;font-family:var(--mono);font-size:9px;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-top:3px}

.dq-schalter{display:grid;gap:2px}
.dq-schalter .switch-row{padding:9px 0;min-height:auto}
.dq-schalter .switch-row .t{font-size:.86rem}

.dq-summe{
  margin:0 18px 18px;border-radius:var(--r-m,16px);overflow:hidden;
  border:1px solid rgba(255,178,92,.28);
  background:linear-gradient(160deg,rgba(255,178,92,.11),rgba(255,255,255,.014));
}
.dq-posten{list-style:none;margin:0;padding:14px 16px 10px;display:grid;gap:7px}
.dq-posten li{display:flex;justify-content:space-between;gap:12px;font-size:.85rem;color:var(--soft)}
.dq-posten li span:last-child{color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.dq-posten li.spar span{color:var(--pine)}
.dq-end{
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  padding:12px 16px 16px;border-top:1px solid rgba(255,178,92,.2);
}
.dq-end .lbl{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;color:var(--soft)}
.dq-end .lbl s{display:block;margin-top:5px;color:var(--dim);letter-spacing:.06em}
.dq-end .val{
  font-family:var(--disp);font-weight:800;font-variation-settings:'wdth' 112;
  font-size:2.1rem;line-height:1;color:var(--snow);font-variant-numeric:tabular-nums;
}
.dq-end .val em{font-style:normal;font-size:.5em;color:var(--flut);margin-left:.1em}
.dq-tun{display:grid;gap:8px;padding:0 18px 18px}
.dq-fein{padding:0 18px 22px;font-size:.74rem;color:var(--dim);line-height:1.55}

/* ---------------- Merkzettel ---------------- */
.dm{padding:14px 12px 18px}
.dm-zeile{
  display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;
  padding:11px 10px;border-radius:11px;
  transition:background .25s;
}
.dm-zeile:hover{background:rgba(255,255,255,.03)}
.dm-zeile+.dm-zeile{border-top:1px solid var(--line)}
.dm-n{min-width:0}
.dm-n b{display:block;font-size:.9rem;font-weight:600;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-n span{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim);margin-top:3px}
.dm-p{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--flut);white-space:nowrap}
.dm-zeile button{background:none;border:0;color:var(--dim);font-size:17px;cursor:pointer;
  width:32px;height:32px;border-radius:8px;transition:color .25s}
.dm-zeile button:hover{color:#ff8a80}
.dm-leer{padding:34px 22px;text-align:center;color:var(--dim);font-size:.88rem;line-height:1.6}
.dm-fuss{display:grid;gap:8px;padding:14px 18px 20px;border-top:1px solid var(--line)}
.dm-leeren{
  background:none;border:0;color:var(--dim);cursor:pointer;justify-self:center;
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;min-height:38px;transition:color .25s;
}
.dm-leeren:hover{color:var(--snow)}

/* ---------------- Assistent ---------------- */
.da{display:flex;flex-direction:column;height:100%}
.da-lauf{flex:1;overflow-y:auto;padding:16px 16px 8px;display:flex;flex-direction:column;gap:12px}
.da-b{
  max-width:88%;padding:11px 14px;border-radius:15px;font-size:.9rem;line-height:1.55;
  animation:blaseRein .32s var(--ease-out) both;
}
@keyframes blaseRein{from{opacity:0;transform:translateY(7px)}}
@media (prefers-reduced-motion:reduce){.da-b{animation:none}}
.da-b.von-haus{
  align-self:flex-start;color:var(--text);
  background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  border:1px solid var(--line);border-bottom-left-radius:5px;
}
.da-b.von-mir{
  align-self:flex-end;color:#06222f;background:var(--ice);
  border-bottom-right-radius:5px;font-weight:500;
}
.da-b b{color:var(--snow);font-weight:700}
.da-b.von-mir b{color:#06222f}
.da-b ul{margin:8px 0 0;padding-left:18px;display:grid;gap:4px}
.da-b .zahl{font-family:var(--disp);font-weight:800;font-size:1.5rem;color:var(--snow);
  display:block;margin:4px 0 2px;font-variant-numeric:tabular-nums}
.da-b .zahl em{font-style:normal;font-size:.55em;color:var(--flut)}
/* Weiterführender Link als Angebot — der Assistent springt nicht mehr
   selbst auf andere Seiten, er bietet den Weg an. */
.da-link{
  display:inline-flex;align-items:center;gap:6px;padding:7px 12px;
  border-radius:999px;border:1px solid rgba(143,211,244,.42);
  background:rgba(143,211,244,.10);color:var(--ice);
  font-size:.82rem;font-weight:600;text-decoration:none;
  transition:background .18s var(--ease-out),border-color .18s var(--ease-out),transform .18s var(--ease-out);
}
.da-link::after{content:"→";transition:transform .18s var(--ease-out)}
.da-link:hover{background:rgba(143,211,244,.19);border-color:var(--ice);transform:translateY(-1px)}
.da-link:hover::after{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.da-link,.da-link::after{transition:none}}
.da-tipp{
  align-self:flex-start;display:flex;align-items:center;gap:5px;
  padding:11px 14px;border-radius:15px 15px 15px 5px;
  background:rgba(255,255,255,.045);border:1px solid var(--line);
}
.da-tipp i{width:6px;height:6px;border-radius:50%;background:var(--soft);animation:tippen 1.2s infinite}
.da-tipp i:nth-child(2){animation-delay:.16s}
.da-tipp i:nth-child(3){animation-delay:.32s}
@keyframes tippen{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.da-schnell{display:flex;flex-wrap:wrap;gap:6px;padding:4px 16px 10px}
.da-schnell button{
  cursor:pointer;padding:8px 12px;min-height:36px;border-radius:999px;
  background:rgba(143,211,244,.08);border:1px solid rgba(143,211,244,.28);color:var(--ice);
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  transition:background .25s,border-color .25s,color .25s;
}
.da-schnell button:hover{background:rgba(143,211,244,.16);color:var(--snow)}
.da-ein{
  display:flex;gap:8px;align-items:center;padding:12px 14px;
  border-top:1px solid var(--line);flex:none;
}
.da-ein input{
  flex:1;min-width:0;background:rgba(6,10,15,.55);border:1px solid var(--line-2);
  border-radius:12px;padding:12px 14px;color:var(--snow);font-size:.92rem;
  transition:border-color .25s,box-shadow .25s;
}
.da-ein input:focus{outline:none;border-color:rgba(143,211,244,.55);box-shadow:0 0 0 4px rgba(143,211,244,.11)}
.da-ein button{
  width:44px;height:44px;flex:none;border-radius:12px;cursor:pointer;border:0;
  background:var(--ice);color:#06222f;display:grid;place-items:center;
  transition:transform .25s var(--ease-out),filter .25s;
}
.da-ein button:hover{filter:brightness(1.08)}
.da-ein button:active{transform:scale(.93)}
.da-ein button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.da-fein{padding:0 16px 14px;font-size:.72rem;color:var(--dim);line-height:1.5}

/* ---------------- Schmale Geräte ---------------- */
@media(max-width:720px){
  .dock{
    top:auto;bottom:0;left:0;right:0;transform:none;
    flex-direction:row;gap:0;padding:0;
    background:linear-gradient(180deg,rgba(10,16,23,.86),rgba(10,16,23,.97));
    backdrop-filter:blur(16px);border-top:1px solid var(--line-2);
    padding-bottom:env(safe-area-inset-bottom,0);
  }
  .dk-tab{
    flex:1;width:auto;flex-direction:row;justify-content:center;gap:8px;
    border-radius:0;border:0;border-right:1px solid var(--line);
    background:none;backdrop-filter:none;box-shadow:none;padding:13px 0;
  }
  .dk-tab:last-child{border-right:0}
  .dk-tab:hover{transform:none}
  .dk-tab.an{background:rgba(143,211,244,.1)}
  .dk-t{writing-mode:horizontal-tb;font-size:9.5px;letter-spacing:.13em}
  .dk-z{position:static;margin-left:2px}
  html.dk-offen .dock{transform:none}
  .dk-tafel{top:auto;left:0;right:0;bottom:64px;width:100%;height:min(78dvh,640px);
    border-left:0;border-top:1px solid var(--line-2);border-radius:18px 18px 0 0;
    transform:translateY(102%)}
  .dk-tafel.auf{transform:none}
  .rail{display:none}
  /* Platz für die Leiste, sonst verdeckt sie den Fußbereich */
  body{padding-bottom:64px}
}