/* Eingebaut von scripts/einbau-navigation.mjs — Quelle dort, nicht hier. */
:root{--seitenton:var(--gelb, #ffe066)}
.navleiste{
  position:sticky;inset:auto;top:0;z-index:40;pointer-events:auto;
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  padding:.55rem clamp(.7rem,3vw,1.6rem);
  background:color-mix(in srgb, var(--seitenton, #ffe066) 90%, #fffdf8);
  border-bottom:1px solid #1c171418;
}
.navleiste .wortmarke{
  font:900 .95rem/1 var(--f-display, 'Outfit', system-ui, sans-serif);letter-spacing:-.01em;
  text-decoration:none;color:var(--tinte, #141210);margin-right:.35rem;
  display:inline-flex;align-items:center;gap:.35rem;
  padding:0;min-height:44px;background:transparent;border:0;border-radius:0;
  box-shadow:none;justify-self:start;white-space:nowrap;
}
.navleiste .wortmarke i{display:none}
.navbereiche{display:flex;gap:.25rem;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.navbereiche::-webkit-scrollbar{display:none}
.navrechts{margin-left:auto;display:flex;align-items:center;gap:.45rem}
.navpille{
  display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap;
  font:700 .74rem/1 var(--f-body, 'Karla', system-ui, sans-serif);letter-spacing:.01em;
  padding:.5rem .8rem;border-radius:999px;
  background:#1c171412;color:var(--tinte, #141210);text-decoration:none;
  border:1px solid transparent;cursor:pointer;
  transition:background .2s ease;
}
.navpille:hover{background:#1c171422}
.navpille:focus-visible{outline:2.5px solid var(--tinte, #141210);outline-offset:2px}
.navpille[aria-current="page"],.navpille[aria-current="location"]{background:var(--tinte, #141210);color:#fffdf8}
.navcta{
  background:var(--cta,#d81577);color:#fff;font-weight:800;
  font-family:var(--f-display, 'Outfit', system-ui, sans-serif);letter-spacing:-.01em;
}
.navcta:hover{background:#b30f61}
/* Die Basis steht hier und nicht in der Seite: das Vorzimmer nennt
   seinen Umschalter .langs und hat fuer .sprachen keine einzige Regel —
   die Pillen standen dort als Aufzaehlung mit blauen Links. */
.sprachwahl{position:relative}
.sprachwahl summary{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  padding:.45rem .65rem;border-radius:999px;background:#1c17140f;color:var(--tinte,#141210);
  font:700 .7rem/1 var(--f-body,'Karla',system-ui,sans-serif);cursor:pointer;list-style:none}
.sprachwahl summary::-webkit-details-marker{display:none}
.sprachwahl summary:focus-visible{outline:2.5px solid var(--tinte,#141210);outline-offset:2px}
.navleiste .sprachen{position:absolute;right:0;top:calc(100% + .4rem);z-index:4;
  display:grid;list-style:none;margin:0;min-width:9rem;align-items:center;
  background:#fffdf8;padding:.35rem;border:1px solid #1c171424;border-radius:16px;
  box-shadow:0 10px 28px #14121024;gap:.1rem}
.navleiste .sprachen li{margin:0;padding:0;list-style:none}
.navleiste .sprachen a{display:flex;align-items:center;min-height:40px;text-decoration:none;
  color:var(--tinte, #141210);border-radius:999px}
.navleiste .sprachen a:focus-visible{outline:2.5px solid var(--tinte, #141210);outline-offset:2px}
.navleiste .sprachen a{padding:.5rem .65rem;font:700 .72rem/1 var(--f-body, 'Karla', system-ui, sans-serif);background:none}
.navleiste .sprachen a[aria-current="true"]{background:#fffdf8;color:var(--tinte, #141210)}
@media (max-width:760px){
  .navleiste{gap:.35rem}
  .navbereiche{order:3;width:100%;padding-bottom:.15rem}
  .navrechts{margin-left:auto}
}
/* Auf 320 px bleiben Marke, Rechnerknopf und native Sprachwahl in der
   ersten Zeile; die vier Bereiche stehen direkt darunter. details/summary
   funktioniert auch ohne Skript. */
@media (max-width:560px){
  .navleiste{
    display:flex;flex-wrap:wrap;
    gap:.3rem .45rem;padding:.38rem .55rem .48rem;
  }
  .navleiste .wortmarke{flex:1 0 auto;min-height:44px;margin:0}
  .navrechts{display:flex;flex:0 1 auto;max-width:100%;margin-left:auto}
  .navcta{min-height:44px;padding:.55rem .8rem}
  .sprachwahl{flex:none}
  .navleiste .sprachen{position:fixed;right:.55rem;top:calc(var(--leiste-h,3.5rem) - .15rem)}
  .navbereiche{
    order:3;width:100%;padding:0;
    display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,4.25rem),1fr));overflow:visible;
  }
  .navbereiche .navpille{
    min-width:0;min-height:44px;justify-content:center;text-align:center;
    white-space:normal;text-wrap:balance;overflow-wrap:anywhere;hyphens:auto;
    padding:.45rem .35rem;font-size:.68rem;line-height:1.15;
  }
}

/* Die feste Pille rechts unten — beim Vorbild sitzt „Add to box!" dort
   und ist im ersten Bild ebenfalls noch nicht da. */
.rechnenpille{
  position:fixed;right:1.2rem;bottom:1.2rem;z-index:45;
  padding:.85rem 1.35rem;border:0;border-radius:999px;cursor:pointer;
  background:var(--cta,#d81577);color:#fff;
  font:900 .95rem/1 var(--f-display, 'Outfit', system-ui, sans-serif);letter-spacing:-.015em;
  opacity:0;translate:0 .8rem;pointer-events:none;
  transition:opacity .35s ease, translate .35s cubic-bezier(.2,.9,.25,1);
}
.rechnenpille[data-sichtbar]{opacity:1;translate:0 0;pointer-events:auto}
.rechnenpille:hover{background:#b30f61}
.rechnenpille:focus-visible{outline:3px solid var(--tinte, #141210);outline-offset:3px}
/* Auf dem Telefon ist der gut sichtbare Knopf in der Kopfleiste der Eingang.
   Die zweite feste Pille verdeckte Text, Regler und Formularfelder. */
html{scroll-padding-top:calc(var(--leiste-h, 4rem) + 1rem);scroll-padding-bottom:6rem}
@media (max-width:560px){
  .rechnenpille{display:none!important}
  html{scroll-padding-bottom:1rem}
}
@media (prefers-reduced-motion:reduce){.rechnenpille{transition:none}}

/* Die Schublade */
.rechnertafel{position:fixed;inset:0;z-index:60;display:grid;align-items:end}
/* display:grid schlaegt sonst das hidden-Attribut, und die Schublade
   steht beim Laden offen da. Genau so ist sie im ersten Bild gelandet. */
.rechnertafel[hidden]{display:none}
.rechnerschirm{position:absolute;inset:0;background:#141210;opacity:0;transition:opacity .3s ease}
.rechnertafel[data-offen] .rechnerschirm{opacity:.42}
.rechnerblatt{
  position:relative;background:#fffdf8;
  border-radius:var(--rund,32px) var(--rund,32px) 0 0;
  padding:clamp(1.1rem,3vw,2rem) clamp(1rem,4vw,2.4rem) clamp(1.4rem,4vw,2.4rem);
  translate:0 100%;transition:translate .34s cubic-bezier(.2,.9,.25,1);
  max-height:88svh;overflow-y:auto;
}
.rechnertafel[data-offen] .rechnerblatt{translate:0 0}
.rechnerkopf{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.rechnerkopf h2{margin:0;font:900 clamp(1.5rem,4vw,2.3rem)/1 var(--f-display, 'Outfit', system-ui, sans-serif);letter-spacing:-.04em;color:var(--tinte, #141210)}
.rechnerzu{
  border:0;background:#1c171412;color:var(--tinte, #141210);cursor:pointer;
  width:2.75rem;height:2.75rem;border-radius:999px;font:700 1.3rem/1 var(--f-body, 'Karla', system-ui, sans-serif);
}
.rechnerzu:hover{background:#1c171424}
.rechnerzu:focus-visible,.rechnerkarte:focus-visible{outline:3px solid var(--tinte, #141210);outline-offset:3px}
.rechnersatz{margin:.4rem 0 1.1rem;font:700 .92rem/1.45 var(--f-body, 'Karla', system-ui, sans-serif);color:#141210b8;max-width:52ch}
.rechnerkarten{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.rechnerkarte{
  display:grid;gap:.3rem;justify-items:start;text-decoration:none;color:var(--tinte, #141210);
  background:color-mix(in srgb, var(--seitenton, #ffe066) 42%, #fffdf8);
  border-radius:calc(var(--rund,32px) * .62);padding:.95rem 1rem 1.05rem;
  transition:translate .2s cubic-bezier(.32,.72,0,1);
}
.rechnerkarte:hover{translate:0 -3px}
/* 128 statt 64: bei 64 px haelt keine dieser Zeichnungen durch. Gemessen
   (dunkelstes Hundertstel nach dem Verkleinern, scripts/bild-tinte-pruefen.py):
   bei 64 das gemalte Kontobuch 0,074 und die Giesskanne 0,063, die
   Strichfassungen 0,175 und 0,214 - alles weit ueber der Grenze 0,05.
   Bei 128 sind die Strichfassungen bei 0,012 und 0,027. Das Problem ist
   aelter als die Strichrunde; es ist nur vorher nie gemessen worden. */
.rechnerkarte img{width:128px;height:128px;object-fit:contain;margin-bottom:.15rem}
.rechnerkarte strong{font:900 1.05rem/1.15 var(--f-display, 'Outfit', system-ui, sans-serif);letter-spacing:-.025em}
.rechnerkarte span{font:700 .8rem/1.4 var(--f-body, 'Karla', system-ui, sans-serif);color:#141210b0}
/* Nicht --cta: das Rosa der Marke kommt auf dem hellen Kartengrund bei
   12,5 px nur auf 4,34:1, und die Schwelle ist 4,5. Dieselbe Farbe,
   eine Stufe dunkler — die Kontrastprobe hat es gemeldet. */
.rechnerkarte em{font:800 .78rem/1 var(--f-body, 'Karla', system-ui, sans-serif);font-style:normal;color:#a30d58;margin-top:.15rem}
/* Die Schublade ist Navigation, kein Lesekapitel. Auf dem Telefon werden
   die vier Ziele als kompakte Zeilen lesbar, damit alle schnell scanbar sind. */
@media (max-width:560px){
  .rechnerblatt{
    max-height:calc(100svh - .6rem);padding:.75rem .7rem .9rem;
    border-radius:22px 22px 0 0;scroll-padding-top:4rem;
  }
  .rechnerkopf{position:sticky;top:-.75rem;z-index:2;align-items:center;
    margin:0 -.1rem;padding:.1rem .1rem .35rem;background:#fffdf8}
  .rechnerkopf h2{font-size:1.45rem}
  .rechnersatz{margin:.15rem 0 .6rem;font-size:.82rem;line-height:1.35}
  .rechnerkarten{grid-template-columns:1fr;gap:.42rem}
  .rechnerkarte{
    grid-template-columns:44px minmax(0,1fr) auto;grid-template-rows:auto auto;
    column-gap:.65rem;row-gap:.12rem;align-items:center;
    padding:.58rem .68rem .62rem;border-radius:18px;
  }
  .rechnerkarte img{grid-column:1;grid-row:1 / 3;width:44px;height:44px;margin:0}
  .rechnerkarte strong{grid-column:2;grid-row:1;font-size:.98rem}
  .rechnerkarte span{grid-column:2 / 4;grid-row:2;font-size:.75rem;line-height:1.3}
  .rechnerkarte em{grid-column:3;grid-row:1;margin:0;white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){
  .rechnerblatt,.rechnerschirm,.rechnerkarte{transition:none}
}
/* Wo die Seite ihren eigenen fixen Umschalter hat, saesse er sonst unter
   der Leiste. Er rutscht darunter — die Leiste ist eine Zeile hoch, auf
   dem Telefon zwei. */
.langs{top:calc(var(--leiste-h, 3.6rem) + .5rem)}
html.vorhang-zu .navleiste,html.vorhang-auf .navleiste{translate:0 -110%}
html.vorhang-zu .rechnenpille,html.vorhang-auf .rechnenpille{opacity:0}