/* addons.css — strikt entkoppelte Ergänzungen (berühren bestehende Styles nicht) */

/* A11y: Skip-Link (nur sichtbar, wenn fokussiert) */
.skip-link{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip-link:focus{
  left:12px;top:8px;width:auto;height:auto;padding:8px 10px;border-radius:8px;
  background:var(--card, #fff);border:1px solid var(--br, #e5e7eb);
  box-shadow:0 6px 18px rgba(0,0,0,.12);z-index:10001;
}

/* Overlay-Tooltip fürs Jahresdiagramm (Zinsrechner) */
.chart-tooltip{
  position:absolute;display:none;pointer-events:none;z-index:10000;
  min-width:140px;padding:8px 10px;border-radius:8px;border:1px solid var(--br, #e5e7eb);
  background:var(--card, #fff);box-shadow:0 6px 24px rgba(0,0,0,.15);
  font-size:12px;line-height:1.4;
}
.chart-tooltip .num{ float:right; text-align:right; font-variant-numeric:tabular-nums; }
.chart-tooltip .row{ display:flex; justify-content:space-between; gap:16px; }
.chart-tooltip .label{ opacity:.8; }


/* Orange Linkfarbe in Inhaltsbereichen (keine Auswirkungen auf Header/Brand/Buttons) */
main a:not(.btn):not(.brand),
main a:not(.btn):not(.brand):visited{
  color:#ff6b00;
}
main a:not(.btn):not(.brand):hover{
  color:#ff6b00;
  text-decoration:underline;
}

/* Spezifischer Override für Kachel-Links (hatten Lila) */
main .tiles .tile a,
main .tiles .tile a:visited{
  color:#ff6b00;
}
main .tiles .tile a:hover{
  color:#ff6b00;
  text-decoration:underline;
}


/* Bearbeiten-Schaltflächen (Light Theme) — sichtbare Icon-Kapsel, Radio unsichtbar */
:root:not([data-theme="dark"]) .calc-label input[type="radio"]{
  position:absolute !important;
  opacity:0 !important;
  width:1px !important;
  height:1px !important;
  pointer-events:none !important;
}

:root:not([data-theme="dark"]) .calc-label .calc-ico{
  width:44px; height:44px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:9999px;
  background:#fff;
  border:2px solid #ff6b00;
  color:#ff6b00; /* Icon-Farbe */
  transition:all .2s ease;
}

:root:not([data-theme="dark"]) .calc-label .calc-ico svg{
  width:20px; height:20px;
}

:root:not([data-theme="dark"]) .calc-label input[type="radio"]:checked + .calc-ico{
  background:#ff6b00;
  color:#ffffff; /* Icon schwarz/dunkel */
  border-color:#ff6b00;
  box-shadow:0 8px 24px rgba(255,107,0,.25);
}


/* Permalink-Icon immer Orange (unabhängig vom Theme) */
#permalinkBtn svg, #permalinkBtn .icon, #permalinkBtn .ico{
  color:#ff6b00 !important;
  fill:#ff6b00 !important;
  stroke:#ff6b00 !important;
}


/* Permalink-Icon immer Orange – unabhängig von Button-Textfarbe/Theme */
#permalinkBtn .btn-icon,
#permalinkBtn .btn-icon svg,
#permalinkBtn .btn-icon svg *{
  color:#ff6b00 !important;
  stroke:#ff6b00 !important;
  fill:#ff6b00 !important;
}


/* === Permalink Button: einheitliches Aussehen über alle Seiten === */
#permalinkBtn, #w_permalink{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:36px;
  padding:6px 12px;
  border-radius:10px;
}

/* Icon im Light-Theme immer orange, Text bleibt unverändert */
:root:not([data-theme="dark"]) #permalinkBtn .btn-icon,
:root:not([data-theme="dark"]) #permalinkBtn .btn-icon svg,
:root:not([data-theme="dark"]) #permalinkBtn .btn-icon svg *,
:root:not([data-theme="dark"]) #permalinkBtn svg,
:root:not([data-theme="dark"]) #w_permalink .btn-icon,
:root:not([data-theme="dark"]) #w_permalink .btn-icon svg,
:root:not([data-theme="dark"]) #w_permalink .btn-icon svg *,
:root:not([data-theme="dark"]) #w_permalink svg{
  color:#ff6b00 !important;
  stroke:#ff6b00 !important;
  fill:#ff6b00 !important;
}


/* === Permalink Button: runder Icon-Button, identisch auf allen Seiten === */
#permalinkBtn, #w_permalink{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  padding:0;
  border-radius:9999px; /* rund */
  line-height:0;
}

/* Label im Button visuell ausblenden (Aria-Label bleibt lesbar) */
#permalinkBtn .btn-label, #w_permalink .btn-label{
  position:absolute !important;
  width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important;
  overflow:hidden !important; clip:rect(0 0 0 0) !important;
  white-space:nowrap !important; border:0 !important;
}

/* Icon korrekt zentrieren */
#permalinkBtn .btn-icon, #w_permalink .btn-icon{
  margin:0 !important;
  display:inline-flex; align-items:center; justify-content:center;
}

/* Icon-Farbe: im hellen Design stets Orange */
:root:not([data-theme="dark"]) #permalinkBtn .btn-icon svg,
:root:not([data-theme="dark"]) #permalinkBtn .btn-icon svg *,
:root:not([data-theme="dark"]) #w_permalink .btn-icon svg,
:root:not([data-theme="dark"]) #w_permalink .btn-icon svg *{
  color:#ff6b00 !important;
  stroke:#ff6b00 !important;
  fill:#ff6b00 !important;
}


/* Force Permalink icon color to orange in Light theme by setting button color as well */
:root:not([data-theme="dark"]) #permalinkBtn,
:root:not([data-theme="dark"]) #w_permalink{
  color:#ff6b00 !important; /* affects emoji/icons/currentColor SVG */
}
:root:not([data-theme="dark"]) #permalinkBtn svg,
:root:not([data-theme="dark"]) #permalinkBtn svg *,
:root:not([data-theme="dark"]) #w_permalink svg,
:root:not([data-theme="dark"]) #w_permalink svg *{
  color:#ff6b00 !important;
  stroke:#ff6b00 !important;
  fill:#ff6b00 !important;
}


/* Force orange chain icon via CSS pseudo-element in Light theme */
:root:not([data-theme="dark"]) #permalinkBtn .btn-icon,
:root:not([data-theme="dark"]) #w_permalink .btn-icon{
  color:transparent !important; /* hide emoji/text */
  position:relative;
}
:root:not([data-theme="dark"]) #permalinkBtn .btn-icon::before,
:root:not([data-theme="dark"]) #w_permalink .btn-icon::before{
  content:"";
  display:block;
  width:18px; height:18px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='none' stroke='%23ff6b00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10 13a5 5 0 0 1 0-7l1.5-1.5a5 5 0 0 1 7 7L17 12'/><path d='M14 11a5 5 0 0 1 0 7L12.5 19.5a5 5 0 1 1-7-7L7 8'/></svg>");
  background-repeat:no-repeat;
  background-size:18px 18px;
  background-position:center;
}


/* === Permalink: robust orange icon in Light theme, independent of inner markup === */
:root:not([data-theme="dark"]) #permalinkBtn,
:root:not([data-theme="dark"]) #w_permalink{
  position:relative;
  color:transparent !important; /* hide emoji/text glyph color */
}

/* Hide any inner SVG/glyph so our ::before icon is the only visible mark */
:root:not([data-theme="dark"]) #permalinkBtn > svg,
:root:not([data-theme="dark"]) #permalinkBtn svg,
:root:not([data-theme="dark"]) #permalinkBtn .btn-icon,
:root:not([data-theme="dark"]) #w_permalink > svg,
:root:not([data-theme="dark"]) #w_permalink svg,
:root:not([data-theme="dark"]) #w_permalink .btn-icon{
  opacity:0 !important;
}

/* Draw orange chain icon centered via ::before */
:root:not([data-theme="dark"]) #permalinkBtn::before,
:root:not([data-theme="dark"]) #w_permalink::before{
  content:"";
  position:absolute;
  left:50%; top:50%; transform:translate(-50%,-50%);
  width:18px; height:18px;
  background-repeat:no-repeat;
  background-size:18px 18px;
  background-position:center;
  /* inline SVG with orange stroke */
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='none' stroke='%23ff6b00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10 13a5 5 0 0 1 0-7l1.5-1.5a5 5 0 0 1 7 7L17 12'/><path d='M14 11a5 5 0 0 1 0 7L12.5 19.5a5 5 0 1 1-7-7L7 8'/></svg>");
}


/* === Entnahmeplan Permalink: exakt wie Zinsrechner (Light Theme) === */
:root:not([data-theme="dark"]) #w_permalink,
:root:not([data-theme="dark"]) #permalinkBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px !important;
  height:44px !important;
  padding:0 !important;
  border-radius:9999px !important;
  background:#ffffff !important;
  border:2px solid #ff6b00 !important;
  box-shadow:0 8px 20px rgba(255,107,0,.15) !important;
  position:relative;
  color:transparent !important; /* hide glyph/emoji */
}

/* Label unsichtbar halten (Screenreader bleibt) */
:root:not([data-theme="dark"]) #w_permalink .btn-label,
:root:not([data-theme="dark"]) #permalinkBtn .btn-label{
  position:absolute !important;
  width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important;
  overflow:hidden !important; clip:rect(0 0 0 0) !important;
  white-space:nowrap !important; border:0 !important;
}

/* Inneren Icon-Container verbergen, da wir ::before nutzen */
:root:not([data-theme="dark"]) #w_permalink .btn-icon,
:root:not([data-theme="dark"]) #w_permalink svg,
:root:not([data-theme="dark"]) #permalinkBtn .btn-icon,
:root:not([data-theme="dark"]) #permalinkBtn svg{
  opacity:0 !important;
}

/* Orange Kette als ::before einblenden (immer sichtbar) */
:root:not([data-theme="dark"]) #w_permalink::before,
:root:not([data-theme="dark"]) #permalinkBtn::before{
  content:"";
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:18px; height:18px;
  background-repeat:no-repeat;
  background-size:18px 18px;
  background-position:center;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='none' stroke='%23ff6b00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10 13a5 5 0 0 1 0-7l1.5-1.5a5 5 0 0 1 7 7L17 12'/><path d='M14 11a5 5 0 0 1 0 7L12.5 19.5a5 5 0 1 1-7-7L7 8'/></svg>");
}

/* Hover: leichter Orange-Glow */
:root:not([data-theme="dark"]) #w_permalink:hover,
:root:not([data-theme="dark"]) #permalinkBtn:hover{
  box-shadow:0 10px 24px rgba(255,107,0,.22) !important;
}