/* ==========================================================================
   420help.de — Patiententagebuch
   Ergänzung zu style.css. Nutzt dieselben Designtokens, setzt aber bewusst
   eine ruhigere, papierartige Optik: Notizzettel statt Informationsseite.
   ========================================================================== */

.tb-page{
  --paper:#fffdf7;
  --paper-line:#e7e1d2;
  --tape:rgba(123,63,212,.14);
  background:
    radial-gradient(1100px 460px at 12% -8%, rgba(123,63,212,.05), transparent 60%),
    radial-gradient(900px 420px at 92% 4%, rgba(44,138,97,.06), transparent 62%),
    var(--sand-050);
}

/* ---------- Kopfbereich ---------- */
.tb-hero{ padding:clamp(2.4rem,1.6rem + 3vw,4.2rem) 0 1.4rem; }
.tb-hero--sub{ padding-bottom:.6rem }
.tb-eyebrow{
  margin:0 0 .5rem; font-size:.78rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--violet-text);
}
.tb-eyebrow a{ color:inherit }
.tb-hero h1{
  margin:0 0 .7rem; font-size:clamp(1.9rem,1.35rem + 2.3vw,3rem);
  line-height:1.1; letter-spacing:-.02em;
}
.tb-lead{ margin:0; max-width:62ch; font-size:1.06rem; color:var(--text-2); line-height:1.7 }
.tb-meta-note{ margin:.9rem 0 0; font-size:.86rem; color:var(--text-3) }

/* ---------- Anordnung ---------- */
.tb-layout{ padding-bottom:clamp(2.5rem,2rem + 2vw,4rem) }

.tb-board{
  display:grid; gap:clamp(1rem,.8rem + .6vw,1.5rem);
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  align-items:start;
  margin-top:1.6rem;
}
.tb-board--preview{ grid-template-columns:minmax(0,640px) }

/* ---------- Der Notizzettel ---------- */
.tb-note{
  position:relative;
  background:var(--paper);
  border:1px solid var(--paper-line);
  border-radius:4px 4px 10px 10px;
  padding:1.5rem 1.5rem 1.3rem;
  box-shadow:0 10px 26px -18px rgba(13,26,21,.42), 0 1px 2px rgba(13,26,21,.05);
  /* feine Linien wie auf Notizpapier */
  background-image:repeating-linear-gradient(
    to bottom, transparent 0 31px, rgba(13,26,21,.045) 31px 32px);
  background-position:0 3.6rem;
}
/* Klebestreifen oben */
.tb-note::before{
  content:""; position:absolute; top:-9px; left:50%; width:76px; height:18px;
  transform:translateX(-50%) rotate(-1.4deg);
  background:var(--tape);
  border-left:1px solid rgba(255,255,255,.5); border-right:1px solid rgba(255,255,255,.5);
  border-radius:2px;
}
.tb-note:nth-child(3n)::before{ transform:translateX(-50%) rotate(1.6deg) }
.tb-note:nth-child(4n)::before{ transform:translateX(-55%) rotate(-2.4deg) }

.tb-note-head{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:.55rem }
.tb-date{
  font-size:.95rem; font-weight:700; color:var(--green-800);
  font-variant-numeric:tabular-nums; letter-spacing:.01em;
}
.tb-kind{
  font-size:.7rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  padding:.2rem .5rem; border-radius:999px;
  background:var(--sand-100); color:var(--text-3); border:1px solid var(--line);
}
.tb-kind--wird-geprueft{ background:var(--amber-bg); color:var(--amber-ink); border-color:var(--amber-line) }
.tb-kind--bestaetigt{ background:var(--green-050); color:var(--green-800); border-color:var(--green-100) }
.tb-kind--update{ background:var(--blue-bg); color:var(--blue-ink); border-color:var(--blue-line) }
.tb-kind--persoenlich,.tb-kind--gedanke{ background:var(--violet-050); color:var(--violet-text); border-color:var(--violet-line) }

.tb-note-title{ margin:.1rem 0 .6rem; font-size:1.18rem; line-height:1.3; letter-spacing:-.01em }
.tb-note-title a{ color:inherit; text-decoration:none }
.tb-note-title a:hover{ text-decoration:underline }

.tb-note-body p{ margin:0 0 .85rem; line-height:2rem; color:var(--text); font-size:1rem }
.tb-note-body p:last-child{ margin-bottom:.4rem }

.tb-sign{
  margin:.9rem 0 0; text-align:right; color:var(--text-3);
  font-size:.95rem; font-style:italic;
}
.tb-more{ margin:.7rem 0 0; font-size:.86rem }
.tb-note--empty{ text-align:center; color:var(--text-3) }

/* Einzelansicht: ruhiger, breiter, ohne Klebestreifen-Spielerei */
.tb-single{ padding:1.6rem 0 clamp(2.5rem,2rem + 2vw,4rem); max-width:760px }
.tb-note--single{ padding:2rem 1.9rem 1.7rem; border-radius:6px 6px 12px 12px }
.tb-note--single .tb-note-title{ font-size:clamp(1.4rem,1.1rem + 1.2vw,1.95rem); margin-bottom:.9rem }
.tb-note--single .tb-note-body p{ font-size:1.06rem }

.tb-nearby{ display:flex; justify-content:space-between; gap:1rem; margin:1.6rem 0 0; flex-wrap:wrap }
.tb-nearby a{ max-width:46%; font-size:.92rem; text-decoration:none; color:var(--green-800) }
.tb-nearby a:hover{ text-decoration:underline }
.tb-nearby a span{ display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--text-3) }
.tb-nearby-next{ text-align:right; margin-left:auto }
.tb-back{ margin:1.5rem 0 0; font-size:.94rem }

.tb-disclaimer{
  margin:2rem 0 0; padding:1rem 1.1rem; font-size:.88rem; line-height:1.65;
  background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius);
  color:var(--text-2);
}
.tb-disclaimer p{ margin:0 }

/* ---------- Blättern und Archiv ---------- */
.tb-pager{ display:flex; justify-content:space-between; gap:1rem; margin:2rem 0 0 }
.tb-pager a{ font-weight:600; text-decoration:none; color:var(--green-800) }
.tb-pager a:hover{ text-decoration:underline }

.tb-archive{
  margin:2.6rem 0 0; padding:1.4rem 1.5rem;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-l);
  box-shadow:var(--shadow-s);
}
.tb-archive h2{ margin:0 0 1rem; font-size:1rem; letter-spacing:.02em }
.tb-archive-year{ margin-bottom:1rem }
.tb-archive-year h3{ margin:0 0 .5rem; font-size:.82rem; color:var(--text-3); letter-spacing:.1em }
.tb-archive-year ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.45rem }
.tb-archive-year li a{
  display:inline-flex; align-items:baseline; gap:.35rem;
  padding:.32rem .65rem; border-radius:999px; text-decoration:none;
  background:var(--sand-100); color:var(--text-2); font-size:.87rem; border:1px solid transparent;
}
.tb-archive-year li a:hover{ background:var(--green-050); color:var(--green-800) }
.tb-archive-year li a span{ font-size:.74rem; color:var(--text-3) }
.tb-archive-year li.is-current a{ background:var(--green-050); border-color:var(--green-100); color:var(--green-800); font-weight:700 }

/* ==========================================================================
   Redaktionsbereich
   ========================================================================== */

.tb-admin{ background:var(--bg-soft) }
.tb-admin-wrap{ padding:2rem 0 4rem; max-width:820px }
.tb-admin-head{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap }
.tb-admin-head h1{ margin:0; font-size:1.6rem }
.tb-admin-head > div{ display:flex; gap:.5rem; align-items:center }
.tb-inline-form{ display:inline }

.tb-login{ max-width:380px; padding:3rem 0 5rem }
.tb-login h1{ font-size:1.5rem; margin-bottom:1.2rem }

.tb-form{ display:grid; gap:.45rem; margin-top:1.2rem }
.tb-form label{ font-weight:600; font-size:.9rem; margin-top:.6rem }
.tb-form label span{ font-weight:400; color:var(--text-3) }
.tb-form input[type=text],.tb-form input[type=password],.tb-form input[type=date],
.tb-form select,.tb-form textarea{
  width:100%; padding:.7rem .8rem; font:inherit; color:var(--text);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-s);
}
.tb-form textarea{ line-height:1.75; resize:vertical; min-height:14rem; font-size:1rem }
.tb-form input:focus-visible,.tb-form select:focus-visible,.tb-form textarea:focus-visible{
  outline:2px solid var(--green-600); outline-offset:1px; border-color:var(--green-600);
}
.tb-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem }
.tb-form button{ margin-top:.8rem; justify-self:start }

.tb-actions{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.3rem; align-items:center }
.tb-actions .btn{ margin-top:0 }

.tb-hint{ font-size:.84rem; color:var(--text-3); margin:.35rem 0 0 }
.tb-flash{ margin:1rem 0 0; padding:.7rem .9rem; border-radius:var(--radius-s);
  background:var(--green-050); border:1px solid var(--green-100); color:var(--green-800); font-size:.92rem }
.tb-error{ margin:1rem 0 0; padding:.7rem .9rem; border-radius:var(--radius-s);
  background:var(--red-bg); border:1px solid var(--red-line); color:var(--red-ink); font-size:.92rem }

.tb-reminder{
  margin:1.4rem 0 0; padding:1rem 1.1rem; border-radius:var(--radius);
  background:var(--amber-bg); border:1px solid var(--amber-line); color:var(--amber-ink);
}
.tb-reminder strong{ display:block; margin-bottom:.35rem }
.tb-reminder p{ margin:0 0 .3rem; font-size:.9rem; line-height:1.6 }
.tb-reminder .tb-hint{ color:var(--amber-ink); opacity:.8 }

.tb-override{
  margin:1.8rem 0 0; padding:1rem 1.1rem; border:1px dashed var(--red-line);
  border-radius:var(--radius); background:var(--surface);
}
.tb-override summary{ cursor:pointer; font-weight:700; color:var(--red-ink) }
.tb-override p{ font-size:.9rem; color:var(--text-2); line-height:1.6 }
.tb-check{ display:flex; gap:.55rem; align-items:flex-start; margin:.7rem 0; font-size:.94rem; font-weight:500 }
.tb-check input{ margin-top:.25rem; width:1.05rem; height:1.05rem; accent-color:var(--red-ink) }
.tb-confirm{ margin-top:.9rem; padding:.9rem 1rem; border-radius:var(--radius-s);
  background:var(--red-bg); border:1px solid var(--red-line) }
.tb-confirm-warn{ margin:0 0 .4rem; color:var(--red-ink); font-size:.95rem }
.btn--danger{ background:var(--red-ink); color:#fff; border:1px solid var(--red-ink) }
.btn--danger:hover:not(:disabled){ background:#7d1a1a; color:#fff }
.btn--danger:disabled{ opacity:.45; cursor:not-allowed }

.tb-delete{ margin-top:2.5rem; padding-top:1.2rem; border-top:1px solid var(--line) }

/* ---------- Liste im Adminbereich ---------- */
.tb-rows{ list-style:none; margin:1.4rem 0 0; padding:0; display:grid; gap:.8rem }
.tb-row{ background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--line);
  border-radius:var(--radius); padding:1rem 1.1rem }
.tb-row--wait{ border-left-color:var(--amber-line) }
.tb-row--ready{ border-left-color:var(--green-500) }
.tb-row--ok{ border-left-color:var(--green-700) }
.tb-row--warn{ border-left-color:var(--red-ink) }
.tb-row--muted{ border-left-color:var(--line) }
.tb-row-main{ display:flex; gap:.6rem; align-items:baseline; flex-wrap:wrap }
.tb-row-date{ margin-left:auto; font-size:.84rem; color:var(--text-3); font-variant-numeric:tabular-nums }
.tb-row-ex{ margin:.45rem 0 0; font-size:.9rem; color:var(--text-2) }
.tb-row-actions{ display:flex; gap:.5rem; margin-top:.8rem; flex-wrap:wrap }

.tb-badge{ font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:.22rem .5rem; border-radius:999px; border:1px solid var(--line); background:var(--sand-100); color:var(--text-3) }
.tb-badge--wait{ background:var(--amber-bg); color:var(--amber-ink); border-color:var(--amber-line) }
.tb-badge--ready{ background:var(--green-050); color:var(--green-800); border-color:var(--green-100) }
.tb-badge--ok{ background:var(--green-fill-700); color:#fff; border-color:var(--green-fill-700) }
.tb-badge--warn{ background:var(--red-bg); color:var(--red-ink); border-color:var(--red-line) }

.tb-countdown{ margin:.5rem 0 0; font-size:.86rem; color:var(--amber-ink); font-variant-numeric:tabular-nums }
.tb-countdown.is-ready{ color:var(--green-800); font-weight:600 }
.tb-status-line{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin:1rem 0 0 }

.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 }

@media (max-width:700px){
  .tb-board{ grid-template-columns:1fr }
  .tb-form-row{ grid-template-columns:1fr }
  .tb-nearby a{ max-width:100% }
  .tb-note{ padding:1.3rem 1.15rem 1.1rem }
}

@media (prefers-reduced-motion:reduce){
  .tb-note{ transition:none }
}

/* ---------- Ergaenzungen 20.08.2026: Abmelden, Loeschen, Adresse ---------- */

/* Kopfleiste im Redaktionsbereich: Zurueck-Link links, Abmelden rechts */
.tb-admin-bar{ display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; margin-bottom:.4rem }
.tb-admin-bar > p{ margin:0 }

/* Loeschen: erkennbar gefaehrlich, aber nicht aufdringlich */
.btn--danger-ghost{ background:transparent; border:1px solid #c9a6a2; color:#9a2f26 }
.btn--danger-ghost:hover,.btn--danger-ghost:focus-visible{ background:#fdf1f0; border-color:#9a2f26 }

.tb-confirm-row{ display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; margin-top:1.4rem }
.tb-warn{ background:#fdf1f0; border:1px solid #e7c3bf; border-radius:var(--radius);
  padding:.9rem 1.05rem; margin:1.2rem 0 }
.tb-quote{ margin:1rem 0; padding:.85rem 1.05rem; border-left:3px solid var(--line);
  background:var(--paper,#faf9f6); border-radius:0 var(--radius) var(--radius) 0;
  white-space:pre-wrap; color:var(--ink-soft,#4a4a45) }

/* Adresse eines veroeffentlichten Eintrags */
.tb-slugbox{ background:var(--paper,#faf9f6); border:1px solid var(--line);
  border-radius:var(--radius); padding:.9rem 1.05rem; margin-bottom:1.3rem }
.tb-slugbox > p:first-child{ margin-top:0 }
.tb-slugbox a{ word-break:break-all }
.tb-check{ display:flex; align-items:flex-start; gap:.55rem; margin:.6rem 0 }
.tb-check input{ margin-top:.25rem }

/* Loeschbereich unten im Editor */
.tb-delete .tb-hint{ margin:.45rem 0 0 }

@media (max-width:520px){
  .tb-admin-bar{ align-items:flex-start }
  .tb-row-actions{ display:flex; flex-wrap:wrap; gap:.45rem }
}

/* ---------- Korrektur: Knoepfe im Redaktionsbereich ----------
   .btn--ghost aus style.css ist fuer dunkle Flaechen gebaut (helle Schrift).
   Im Redaktionsbereich steht sie auf Weiss und war praktisch unsichtbar --
   „Abmelden" und „Oeffentlich ansehen" sahen aus wie deaktiviert. */
.tb-admin .btn--ghost{
  background:transparent;
  color:var(--green-800,#1d4a2c);
  border-color:var(--line,#dcdcd4);
}
.tb-admin .btn--ghost:hover,
.tb-admin .btn--ghost:focus-visible{
  background:var(--paper,#f4f4ef);
  border-color:var(--green-500,#3f8f52);
  color:var(--green-700,#256b39);
}

/* Abmelden soll sichtbar sein, aber nicht mit „Neuer Eintrag" konkurrieren */
.tb-admin-head .tb-inline-form .btn,
.tb-admin-bar .tb-inline-form .btn{ white-space:nowrap }
.tb-admin-head > div{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap }

/* Loeschen: rot, klar unterscheidbar von den anderen Aktionen */
.tb-admin .btn--danger-ghost{
  background:transparent; border:1px solid #c9a6a2; color:#9a2f26;
}
.tb-admin .btn--danger-ghost:hover,
.tb-admin .btn--danger-ghost:focus-visible{
  background:#fdf1f0; border-color:#9a2f26; color:#7d241d;
}

/* Diskreter Zugang zum Redaktionsbereich in der Fusszeile der Tagebuchseiten */
.site-footer .tb-redaktion{ opacity:.72 }
.site-footer .tb-redaktion:hover,
.site-footer .tb-redaktion:focus-visible{ opacity:1 }

/* ==========================================================================
   Fotos am Eintrag – wie mit Klebestreifen auf den Notizzettel geklebt
   ========================================================================== */

.tb-fotos{
  display:flex; flex-wrap:wrap; gap:1.5rem 1.6rem;
  margin:1.7rem 0 .4rem; padding-top:.4rem;
  align-items:flex-start;
}

.tb-foto{
  position:relative;
  margin:0;
  /* Der weiße Rand macht das Polaroid – unten breiter, wie beim Original */
  background:#fffefb;
  padding:.6rem .6rem 1.5rem;
  border:1px solid rgba(13,26,21,.08);
  box-shadow:
    0 14px 26px -16px rgba(13,26,21,.5),
    0 3px 8px -4px rgba(13,26,21,.18);
  transition:transform .18s ease, box-shadow .18s ease;
}
.tb-foto img{
  display:block; width:100%; height:auto;
  background:var(--sand-050,#f6f5ef);
}
.tb-foto figcaption{
  margin-top:.5rem; font-size:.82rem; line-height:1.45;
  color:var(--text-3,#6b6b63); text-align:center;
  /* handschriftlicher Eindruck ohne fremde Schriftart */
  font-style:italic;
}

/* Klebestreifen oben – dieselbe Farbe wie am Notizzettel */
.tb-foto::before{
  content:""; position:absolute; top:-8px; left:50%;
  width:58px; height:16px;
  transform:translateX(-50%) rotate(-2deg);
  background:var(--tape,rgba(123,63,212,.14));
  border-radius:1px;
  box-shadow:0 1px 2px rgba(13,26,21,.06);
}

/* Leichte Neigung, stabil pro Bild (aus der Bild-ID abgeleitet) */
.tb-kipp-0{ transform:rotate(-1.8deg) }
.tb-kipp-1{ transform:rotate(1.2deg) }
.tb-kipp-2{ transform:rotate(-.6deg) }
.tb-kipp-3{ transform:rotate(2deg) }
.tb-kipp-4{ transform:rotate(-1.2deg) }

/* Beim Darüberfahren gerade rücken – wirkt, als hebe man das Foto an */
.tb-foto:hover, .tb-foto:focus-within{
  transform:rotate(0deg) translateY(-2px);
  box-shadow:
    0 20px 34px -18px rgba(13,26,21,.55),
    0 4px 10px -4px rgba(13,26,21,.2);
}

/* Größen. Die Prozentangabe bezieht sich auf die Breite des Notizzettels. */
.tb-foto--s{ flex:0 1 clamp(120px, 30%, 190px) }
.tb-foto--m{ flex:0 1 clamp(180px, 46%, 320px) }
.tb-foto--l{ flex:1 1 100%; max-width:100% }

@media (prefers-reduced-motion:reduce){
  .tb-foto{ transition:none }
  .tb-foto:hover, .tb-foto:focus-within{ transform:none }
}

/* ---------- Fotos im Redaktionsbereich verwalten ---------- */
.tb-fotobox{
  margin-top:2.2rem; padding-top:1.3rem;
  border-top:1px solid var(--line,#dcdcd4);
}
.tb-fotobox h2{ margin:0 0 .3rem; font-size:1.15rem }

.tb-fotoliste{ list-style:none; margin:1.1rem 0; padding:0; display:grid; gap:1rem }
.tb-fotoreihe{
  display:grid; gap:.7rem 1rem;
  grid-template-columns:110px minmax(0,1fr);
  align-items:start;
  background:var(--paper,#fffdf7);
  border:1px solid var(--line,#dcdcd4);
  border-radius:var(--radius,10px);
  padding:.9rem 1rem;
}
.tb-fotominiatur{
  width:110px; height:110px; object-fit:cover;
  border-radius:4px; border:1px solid rgba(13,26,21,.1);
  background:var(--sand-050,#f6f5ef);
}
.tb-fotoform{ display:grid; gap:.35rem; min-width:0 }
.tb-fotoform label{ font-size:.85rem; font-weight:600 }
.tb-fotoform label span{ font-weight:400; color:var(--text-3,#6b6b63) }
.tb-fotoform input[type=text]{ width:100%; box-sizing:border-box }
.tb-fotoregler{
  display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; margin-top:.35rem;
}
.tb-fotoregler label{ margin:0 }
.tb-fotosort{ width:4.5rem }
.tb-fotoweg{ grid-column:1 / -1; justify-self:start }

.tb-fotoupload{ margin-top:1.2rem }
.tb-fotoupload label.btn{ cursor:pointer }
.tb-fotoupload [data-status]{ margin:.6rem 0 0 }

@media (max-width:560px){
  .tb-fotoreihe{ grid-template-columns:1fr }
  .tb-fotominiatur{ width:100%; height:170px }
  .tb-fotos{ gap:1.3rem }
  .tb-foto--s, .tb-foto--m{ flex:1 1 100% }
}

/* ---------- Links im Eintragstext ----------
   Vorher waren sie kaum vom Fliesstext zu unterscheiden. Ein Link muss
   auf den ersten Blick als Link erkennbar sein -- auch fuer Leser, die
   Farben schlecht unterscheiden. Deshalb: eigene Farbe UND deutliche
   Unterstreichung, nicht nur eines von beidem. */
.tb-note-body a{
  color:var(--violet-text,#4c1d95);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:.16em;
  text-decoration-thickness:.1em;
  text-decoration-color:currentColor;
  border-radius:3px;
  padding:0 .06em;
}
.tb-note-body a:hover,
.tb-note-body a:focus-visible{
  background:rgba(123,63,212,.12);
  text-decoration-thickness:.14em;
}
.tb-note-body a:focus-visible{
  outline:2px solid var(--violet-800,#4c1d95);
  outline-offset:2px;
}

/* Kleines Zeichen hinter Links, die die Seite verlassen. Damit sieht man
   vorher, dass es woanders hingeht -- ohne Symbolschrift von fremden Servern. */
.tb-note-body a[rel~="nofollow"]::after{
  content:"\2197";           /* Pfeil nach rechts oben */
  font-size:.78em;
  margin-left:.12em;
  vertical-align:.08em;
  text-decoration:none;
  display:inline-block;
}

/* ---------- Ausklappbare Hilfe zum Verlinken im Editor ---------- */
.tb-linkhilfe{
  margin:.7rem 0 0;
  border:1px solid var(--line,#dcdcd4);
  border-radius:var(--radius,10px);
  background:var(--paper,#fffdf7);
  padding:.65rem .9rem;
}
.tb-linkhilfe summary{
  cursor:pointer; font-weight:600; font-size:.9rem;
  color:var(--green-800,#154a35);
}
.tb-linkhilfe p{ margin:.6rem 0; font-size:.88rem; line-height:1.6 }
.tb-linkhilfe code{
  background:rgba(13,26,21,.06); border-radius:3px;
  padding:.1rem .35rem; font-size:.86em; word-break:break-word;
}

/* ---------- Werkzeugleiste über dem Eintragsfeld ---------- */
.tb-werkzeuge{
  display:flex; gap:.4rem; flex-wrap:wrap;
  margin:.35rem 0 .45rem;
}
.tb-werkzeuge button{
  min-width:2.4rem; min-height:2.3rem;
  padding:.3rem .65rem;
  font-size:.95rem; line-height:1;
  background:var(--surface);
  color:var(--green-800,#154a35);
  border:1px solid var(--line,#dcdcd4);
  border-radius:7px;
  cursor:pointer;
}
.tb-werkzeuge button:hover,
.tb-werkzeuge button:focus-visible{
  border-color:var(--green-500,#3f8f52);
  background:var(--paper,#fffdf7);
}
.tb-werkzeuge button:active{ transform:translateY(1px) }
.tb-werkzeuge button[data-link]{ min-width:auto }

/* Auszeichnungen im veröffentlichten Eintrag */
.tb-note-body strong{ font-weight:700 }
.tb-note-body em{ font-style:italic }
.tb-note-body u{ text-decoration:underline; text-underline-offset:.16em }

/* Auswahlliste für interne Links in der Werkzeugleiste */
.tb-werkzeuge select{
  min-height:2.3rem; padding:.3rem .5rem;
  font-size:.88rem; font-family:inherit;
  background:var(--surface); color:var(--green-800,#154a35);
  border:1px solid var(--line,#dcdcd4); border-radius:7px;
  max-width:15rem; cursor:pointer;
}
.tb-werkzeuge select:hover,
.tb-werkzeuge select:focus-visible{ border-color:var(--green-500,#3f8f52) }