a.block-link{display:block;text-decoration:none !important;padding:0;margin:0;color:inherit}a.block-link:link,a.block-link:visited,a.block-link:hover,a.block-link:active{color:inherit}
#jCycleStackstacks_in_67 {
	display: block;
}

#jCycleStackstacks_in_67 div.jcycle img {
	border-radius: 0px;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	
}

#jCycleStackstacks_in_67 div.jcycle {
}



#stacks_in_67 {
	background-color: rgba(255, 255, 255, 1.00);
}

#stacks_in_68 {
	font-size: 50%;
}

#stacks_in_69 {
	font-size: 50%;
}
#stacks_in_27{visibility:hidden}

#stacks_in_29 {
	padding: 20px 0px 0px 0px;
}

#stacks_out_29 {
	margin-right:0;
}
/* Start Contact Form stack CSS code */

.stacks_in_30formwrap{
	margin: 0;
}

#stacks_in_30comment{
display: none;
height: 0px;
padding: 0px;
margin: 0px;
}

.stacks_in_30mail{
padding: 0;
}

.stacks_in_30fieldset{
	border: none;
	outline: none;
	float : none !important;
	text-align: left !important;
}


.stacks_in_30formail{
}

.stacks_in_30fieldset{
	padding: 0 20px 0 3px;
}



#stacks_in_30 label{
display: block;
margin: 10px 0 0 0;
padding: 0 0 5px 0;
line-height: 1.1em;
}

#stacks_in_30 label *{
display: inline;
}

#stacks_in_30 .stacks_in_30input{
padding: 3px 7px 3px 7px;
width: 100%;
font-size: 12px;
background: #FFFFFF !important;
color: #555555 !important;
margin: 0;
border: 1px solid #D8D8D8 !important;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px !important;
}

#stacks_in_30 textarea{
padding: 7px;
width: 100%;
font-size: 13px;
border: 1px solid #D8D8D8 !important;
background: #FFFFFF !important;
color: #555555 !important;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}



.stacks_in_30sendmail{
margin-top: 20px !important;
padding: 4px 7px 4px 7px !important;
display: block;
text-align: center !important;
font-size: 12px;
color: #444444 !important;
border: 1px solid #D8D8D8 !important;
background-color: #FFFFFF !important;
-moz-border-radius: 3px !important;
-webkit-border-radius: 3px !important;
border-radius: 3px;
cursor: pointer;
}


#sendmail:hover{
cursor: pointer;
}

.stacks_in_30response{
display: none;
width: 80%;
border: 1px solid #D6392B;
background: #FEF4FA;
padding: 10px;
margin: 20px auto 0 0;
color: #444444;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
min-height: 35px;
}


.stacks_in_30loader{
float: left;
width: 35px;
height: 35px;
padding: 0 15px 30px 0;
}






.stacks_in_30autoreplay{
visibility: hidden;
height: 0px;
display: none;
}




#stacks_in_30 textarea{
	color: #555555 !important;
}


/* End Contact Form stack CSS code */


#stacks_in_30 {
	padding: 40px 0px 40px 0px;
}

#stacks_in_379 {
	padding: 40px 0px 0px 20px;
}
:root {
  --multi_columns_stacks_in_435:1fr 1fr 1fr 1fr;
}
#multi_columns_stacks_in_435 {
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: var(--multi_columns_stacks_in_435);
  grid-gap: 16px;
  
  align-items: center;
  
  
  justify-content: center;
  
}
#multi_columns_stacks_in_435 > div {
  min-width: 0;
}
#multi_columns_stacks_in_435 + .deluxe-columns {
  margin-top: 16px;
}
#multi_columns_stacks_in_435 > div img {
  max-width: 100%;
}
#multi_columns_stacks_in_435 > div:not(.nav-column):not(.column-sticky) {
  position: relative;
}



@media all and (min-width: 901px) {
  #multi_columns_stacks_in_435 .hide-mobile {
    display: inherit;
  }
  #multi_columns_stacks_in_435 .hide-tablet {
    display: inherit;
  }
  #multi_columns_stacks_in_435 .hide-mobile {
    display: inherit;
  }
  #multi_columns_stacks_in_435 .hide-desktop {
    display: none;
  }
}
@media all and (max-width: 900px) and (min-width: 501px) {
  #multi_columns_stacks_in_435 .column-tablet-top {
    grid-row: 1;
  }
  #multi_columns_stacks_in_435 .hide-desktop {
    display: inherit;
  }
  #multi_columns_stacks_in_435 .hide-mobile {
    display: inherit;
  }
  #multi_columns_stacks_in_435 .hide-tablet {
    display: none;
  }
}
@media all and (max-width: 500px) {
  #multi_columns_stacks_in_435 .column-mobile-top {
    grid-row: 1;
  }
  #multi_columns_stacks_in_435 .hide-tablet {
    display: inherit;
  }
  #multi_columns_stacks_in_435 .hide-desktop {
    display: inherit;
  }
  #multi_columns_stacks_in_435 .hide-mobile {
    display: none;
  }
}

@media all and (max-width: 900px) {
  #multi_columns_stacks_in_435 {
    grid-template-columns: repeat(1, 1fr);
    
  }
  #multi_columns_stacks_in_435 + .deluxe-columns {
    
  }
  #multi_columns_stacks_in_435 > div:last-child {
    grid-column: span 1;
  }
  
  #multi_columns_stacks_in_435 > div > * {position: relative;}
  #multi_columns_stacks_in_435 > div > * > * {transform: translate(0,0);}
  
}
@media all and (max-width: 500px) {
  #multi_columns_stacks_in_435 {
    grid-template-columns: repeat(1, 1fr);
  }
  #multi_columns_stacks_in_435 > div:last-child {
    grid-column: span 1;
  }
  
  #multi_columns_stacks_in_435 > div > * {position: relative;}
  #multi_columns_stacks_in_435 > div > * > * {transform: translate(0,0);}
  
}

/* SocialDock – each.css */
/* ===== Basis & Variablen ===== */
.socialdock {
    --sd-gutter: 8px;
    --sd-radius: 8px;
    --sd-pad-y: 8px;
    --sd-pad-x: 10px;
    --sd-font: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
    position: relative;
    display: block;
    font-family: var(--sd-font);
    line-height: 1;
}



/* ===== Layout Container ===== */
.socialdock .socialdock-inner {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    gap: var(--sd-gutter);
    justify-content: flex-start; /* default */
  
}

.socialdock[data-align="center"] .socialdock-inner { justify-content: center; }
.socialdock[data-align="right"] .socialdock-inner { justify-content: flex-end; }
.socialdock[data-align="between"] .socialdock-inner { justify-content: space-between; }
.socialdock[data-align="around"] .socialdock-inner { justify-content: space-around; }
.socialdock[data-align="evenly"] .socialdock-inner { justify-content: space-evenly; }

/* ===== Stacked-Mode ===== */
.socialdock[data-stacked="true"] .socialdock-inner { flex-direction: column; }
.socialdock[data-stacked="true"][data-fullwidth="true"] .socialdock-inner { align-items: stretch; }

.socialdock[data-stacked="true"][data-fullwidth="true"] .sd-btn {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Stacked + nicht Fullwidth: horizontal per align-items */
.socialdock[data-stacked="true"]:not([data-fullwidth="true"]) .socialdock-inner { align-items: flex-start; }
.socialdock[data-stacked="true"]:not([data-fullwidth="true"])[data-align="center"] .socialdock-inner { align-items: center; }
.socialdock[data-stacked="true"]:not([data-fullwidth="true"])[data-align="right"] .socialdock-inner { align-items: flex-end; }

.socialdock[data-stacked="true"] .sd-btn { align-self: auto !important; }

/* ===== Buttons ===== */
.socialdock .sd-btn {
    width: var(--sd-btn-w, auto); /* equalWidth via JS */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
      border-width: var(--sd-border-w, 1px);
  border-style: var(--sd-border-style, solid);
  border-color: var(--sd-border-color, currentColor);
    border-radius: var(--sd-radius, var(--sr-radius, var(--sd-radius-default, 8px)));
      padding: var(--sd-pad-y, var(--sr-pad-y, var(--sd-pad-y-default, 8px))) var(--sd-pad-x, var(--sr-pad-x, var(--sd-pad-x-default, 10px)));
    transition: transform .08s ease, opacity .2s ease;
    font-weight: 600;
    white-space: nowrap;
}

.socialdock .sd-btn:focus { outline: 2px solid; outline-offset: 2px; }
.socialdock .sd-btn:hover { transform: translateY(-1px); }
.socialdock .sd-btn:active { transform: translateY(0); }

/* ===== Icons immer perfekt zentriert ===== */
.socialdock .sd-ic {
    font-size: var(--sd-icon-size, 19px); /* global steuerbar (px) */
    width: 1em;
    height: 1em;
    display: inline-flex;
    align-items: center;
    justify-content: center; /* zentriert SVG im Icon-Container */
}
.socialdock .sd-ic svg {
    width: 1em;
    height: 1em;
    display: block;
    overflow: visible; 
}
.socialdock .sd-lb {
    font-size: var(--sd-label-size, inherit);
}

/* ===== Labels & Hover-Animation ===== */
/* 1) Labels AUS (robust), wenn KEIN Hoverlabel aktiv ist */
.socialdock:not([data-labels="true"]):not([data-hoverlabel="true"]) .sd-lb { display: none !important; }
.socialdock:not([data-labels="true"]):not([data-hoverlabel="true"]) .sd-btn {
    gap: 0;           /* kein Phantomabstand */
    justify-content: center; /* Icon mittig */
}

/* 2) Hoverlabel aktiv + Labels nicht explizit an */
.socialdock[data-hoverlabel="true"]:not([data-labels="true"]) .sd-lb {
    display: inline-flex !important; /* sichtbar als Flex-Item */
    align-items: center;
    min-width: 0;      /* echtes Schrumpfen */
    max-width: 0;      /* eingefahren */
    overflow: hidden;
    opacity: 0;
    transform: translateX(-4px) scale(0.98);
    margin-left: 0;
    pointer-events: none;
    transition: max-width .25s ease, opacity .22s ease, transform .25s ease, margin-left .25s ease;
}
.socialdock[data-hoverlabel="true"]:not([data-labels="true"]) .sd-btn {
    gap: 0;           /* Platz entsteht durch margin-left beim Ausfahren */
    justify-content: center;
}
.socialdock[data-hoverlabel="true"]:not([data-labels="true"]) .sd-btn:hover .sd-lb,
.socialdock[data-hoverlabel="true"]:not([data-labels="true"]) .sd-btn:focus-visible .sd-lb {
    max-width: var(--sd-hoverlabel-max, 12ch);
    opacity: 1;
    transform: none;
    margin-left: .5em; /* wirkt wie gap */
}

/* ===== Größen ===== */
.socialdock[data-size="s"] .sd-btn {
  font-size: 12px;
  --sd-pad-y-default: 6px;
  --sd-pad-x-default: 8px;
  --sd-radius-default: 8px;
}

.socialdock[data-size="m"] .sd-btn {
  font-size: 14px;
  --sd-pad-y-default: 8px;
  --sd-pad-x-default: 10px;
  --sd-radius-default: 8px;
}

.socialdock[data-size="l"] .sd-btn {
  font-size: 16px;
  --sd-pad-y-default: 10px;
  --sd-pad-x-default: 12px;
  --sd-radius-default: 12px;
}



/* ===== Formen ===== */
.socialdock[data-shape="square"] .sd-btn { border-radius: 0px; }
.socialdock[data-shape="pill"]   .sd-btn { border-radius: 999px; }

/* optional, nur zur Klarheit – identisch zur Basis: */
.socialdock[data-shape="rounded"] .sd-btn {
  border-radius: var(--sd-radius, var(--sr-radius, var(--sd-radius-default, 8px)));
}


/* ===== Theme-Variablen (Light/Dark/Auto) – nur wenn Brand AUS ===== */
.socialdock[data-theme="light"]:not([data-brand]) .sd-btn,
.socialdock[data-theme="light"][data-brand="off"] .sd-btn {
  color: var(--sd-light-fg, #111);
  background: var(--sd-light-bg, #fff);
}
.socialdock[data-theme="dark"]:not([data-brand]) .sd-btn,
.socialdock[data-theme="dark"][data-brand="off"] .sd-btn {
  color: var(--sd-dark-fg, #eee);
  background: var(--sd-dark-bg, #111);
}
@media (prefers-color-scheme: light) {
  .socialdock[data-theme="auto"]:not([data-brand]) .sd-btn,
  .socialdock[data-theme="auto"][data-brand="off"] .sd-btn {
    color: var(--sd-light-fg, #111);
    background: var(--sd-light-bg, #fff);
  }
}
@media (prefers-color-scheme: dark) {
  .socialdock[data-theme="auto"]:not([data-brand]) .sd-btn,
  .socialdock[data-theme="auto"][data-brand="off"] .sd-btn {
    color: var(--sd-dark-fg, #eee);
    background: var(--sd-dark-bg, #111);
  }
}

/* ===== Brandfarben (pro Service) ===== */
.sd-btn.sd-x         { --sd-brand: #000000; }
.sd-btn.sd-facebook  { --sd-brand: #1877f2; }
.sd-btn.sd-linkedin  { --sd-brand: #0a66c2; }
.sd-btn.sd-whatsapp  { --sd-brand: #25d366; }
.sd-btn.sd-telegram  { --sd-brand: #24a1de; }
.sd-btn.sd-pinterest { --sd-brand: #e60023; }
.sd-btn.sd-mail      { --sd-brand: #6c757d; }
.sd-btn.sd-copy      { --sd-brand: #6c757d; }
.sd-btn.sd-print     { --sd-brand: #6c757d; }
.sd-btn.sd-webshare  { --sd-brand: #6c757d; }
.sd-btn.sd-threads   { --sd-brand: #000000; }
.sd-btn.sd-bluesky   { --sd-brand: #1185fe; }
.sd-btn.sd-reddit    { --sd-brand: #ff4500; }
.sd-btn.sd-hn        { --sd-brand: #ff6600; }
.sd-btn.sd-pocket    { --sd-brand: #ef4056; }
.sd-btn.sd-flipboard { --sd-brand: #e12828; }
.sd-btn.sd-vk        { --sd-brand: #4c75a3; }
.sd-btn.sd-line      { --sd-brand: #00c300; }
.sd-btn.sd-weibo     { --sd-brand: #e6162d; }
.sd-btn.sd-xing      { --sd-brand: #026466; }
.sd-btn.sd-mastodon  { --sd-brand: #6364ff; }
.sd-btn.sd-youtube   { --sd-brand: #ff0000; }
.sd-btn.sd-instagram { --sd-brand: #E1306C; }
.sd-btn.sd-tiktok    { --sd-brand: #000000; }
.sd-btn.sd-github    { --sd-brand: #24292e; }
.sd-btn.sd-website   { --sd-brand: #6c757d; } /* generisch */


.socialdock[data-brand="fg"] .sd-btn {
    color: var(--sd-brand, currentColor);
    border-color: var(--sd-brand, currentColor);
    background: transparent;
}
.socialdock[data-brand="bg"] .sd-btn {
    background: var(--sd-brand, #555);
    border-color: var(--sd-brand, #555);
    color: #fff;
}

/* ⬇️ NEU: Per-Button Brand-Style (überschreibt Theme) */
/* Nach deinen Theme-Regeln einfügen */
.socialdock[data-theme] .sd-btn[data-brand="bg"] {
  background: var(--sd-brand, #555);
  border-color: var(--sd-brand, #555);
  color: #fff;
}

.socialdock[data-theme] .sd-btn[data-brand="fg"] {
  color: var(--sd-brand, currentColor);
  border-color: var(--sd-brand, currentColor);
  background: transparent;
}


.socialdock[data-brand="fg"] .sd-btn:hover { opacity: .95; }
.socialdock[data-brand="fg"] .sd-btn:active { opacity: .9; }
.socialdock[data-brand="bg"] .sd-btn:hover { filter: brightness(.97); }
.socialdock[data-brand="bg"] .sd-btn:active { filter: brightness(.92); }

/* ===== Toast ===== */
.socialdock .socialdock-toast {
    position: absolute;
    margin-top: 8px;
    background: rgba(0, 0, 0, .9);
    color: #fff;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 12px;
    opacity: 0;
    transform: translateY(-4px);
    transition: all .18s ease;
}
.socialdock .socialdock-toast.show {
    opacity: 1;
    transform: translateY(0);
}

/* Basis: Icon-Größe unabhängig vom Label steuern */
.socialdock .sd-ic {
  /* skaliert NUR das Icon (SVG bleibt 1em innerhalb) */
  font-size: var(--sd-icon-size, 19px);
  width: 1em;
  height: 1em;
}

/* ===== Icon-only: kein Hintergrund, kein Rand – Labels bleiben ===== */
.socialdock[data-appearance="true"] .sd-btn {
  background: transparent !important;
  --sd-border-w: 0;
  box-shadow: none !important;
  padding: var(--sd-icon-pad, 0);   /* unsichtbare Klickfläche (0–8px) */
  gap: 8px;                         /* Abstand Icon ↔ Label */
  transform: none;
}

/* Icon im icon-only Modus größer machen */
.socialdock[data-appearance="true"] { --sd-icon-size: 26px; }
/* Optional pro Buttongröße feinabstimmen */
.socialdock[data-appearance="true"][data-size="s"] { --sd-icon-size: 17px; }
.socialdock[data-appearance="true"][data-size="m"] { --sd-icon-size: 22px; }
.socialdock[data-appearance="true"][data-size="l"] { --sd-icon-size: 29px; }

/* Fokus sichtbar (A11y) */
.socialdock[data-appearance="true"] .sd-btn:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Falls im icon-only Modus Brand-Farbe erzwungen werden soll */
.socialdock[data-appearance="true"][data-brand="fg"] .sd-btn { color: var(--sd-brand) !important; }
.socialdock[data-appearance="true"][data-brand="bg"] .sd-btn {
  background: transparent !important;
  border: 0 !important;
  /* wahlweise: color: var(--sd-brand) !important; */
}

/* 1) SVG darf über den ViewBox-Rand schauen (kein Clipping der Strokes) */
.socialdock .sd-ic svg {
  overflow: visible;        /* verhindert "angeschnittene" Kanten */
  display: block;
}

/* 2) Icon-Flexitem nicht schrumpfen lassen, immer genug Platz geben */
.socialdock .sd-ic {
  flex: 0 0 auto;           /* nicht zusammenquetschen */
  min-width: 1em;           /* nie kleiner als die Icon-Größe */
  min-height: 1em;
  padding: .08em;           /* optischer "Bleed" */
}

/* 3) Sicherheitshalber: Buttons haben wirklich kompakte Line-Box */
.socialdock .sd-btn { line-height: 1; }

/* 4) Im Icon-only Modus darf das Icon größer sein, ohne Clipping */
.socialdock[data-appearance="true"] { --sd-icon-size: 26px; }
.socialdock .sd-ic { font-size: var(--sd-icon-size, 19px); width: 1em; height: 1em; }

/* Icon-only Modus: Sicherheits-Inset */
.socialdock[data-appearance="true"]{
  --sd-edge-safety: 2px;         /* ggf. 1px–3px testen */
  padding-inline: var(--sd-edge-safety);
  overflow-x: clip;
}
@supports not (overflow-x: clip){
  .socialdock[data-appearance="true"]{ overflow-x: hidden; }
}

/* Monochrome Icons – sicher */
.socialdock .sd-ic svg,
.socialdock .sd-ic svg * {
  fill: currentColor !important;
  stroke: none !important;
}

/* Perfekte Kreise, wenn Option aktiv UND Labels komplett aus (kein Hoverlabel) */
.socialdock[data-round-icononly="true"]:not([data-labels="true"]):not([data-hoverlabel="true"]) .sd-btn {
  /* Kreisgröße: Icon + vertikales Padding */
  --sd-circle: calc(var(--sd-icon-size, 19px) + (var(--sd-pad-y) * 2));

  /* Equal-Width übersteuern: Breite = Höhe = --sd-circle */
  --sd-btn-w: var(--sd-circle);
  height: var(--sd-circle);

  /* gleiches Padding auf allen Seiten -> optisch zentriert */
  padding: var(--sd-pad-y);

  border-radius: 50%;
  gap: 0;                /* kein „Phantom“-Abstand */
  justify-content: center;
}

/* Optional: auch im icon-only Erscheinungsbild kreisrund */
.socialdock[data-appearance="true"][data-round-icononly="true"]:not([data-labels="true"]):not([data-hoverlabel="true"]) .sd-btn {
  border-radius: 50%;
}
/* Mini-Zeile: edel, freundlich, sehr kompakt */
.sd-item-mini{
  --sd-brand:#6c757d;           /* Fallback Brand */
  --sd-bg:#f6f8fc;              /* freundliches Hell */
  --sd-bd:#e6ecf5;              /* sanfte Linie */
  --sd-fg:#243449;              /* statt Schwarz: edles Slate */
  --sd-badge-bg-share:#eef3ff;  --sd-badge-fg-share:#2a5bd7;  --sd-badge-bd-share:#e2e9ff;
  --sd-badge-bg-link:#e8f7f1;   --sd-badge-fg-link:#0b7b54;   --sd-badge-bd-link:#d6f2e7;

  display:flex; align-items:center; gap:8px;
  padding:4px 8px; margin:2px 0;
  border:0px solid var(--sd-bd); border-radius:4px;
  background:var(--sd-bg); color:var(--sd-fg);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  font-size:12px; line-height:1.2; max-width:100%;
}
.sd-item-mini .sd-dot{ width:8px; height:8px; border-radius:50%; background:var(--sd-brand); flex:0 0 auto; }
.sd-item-mini .sd-badge{
  font-size:10px; font-weight:700; padding:2px 6px; border-radius:999px;
  border:1px solid var(--sd-bd);
}
.sd-item-mini.is-share .sd-badge{ background:var(--sd-badge-bg-share); color:var(--sd-badge-fg-share); border-color:var(--sd-badge-bd-share); }
.sd-item-mini.is-link  .sd-badge{ background:var(--sd-badge-bg-link);  color:var(--sd-badge-fg-link);  border-color:var(--sd-badge-bd-link);  }

.sd-item-mini .sd-text{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; min-width:0; }

/* Service-Namen hübsch anzeigen:
   - wenn kein Label gesetzt ist, erzeugen wir Text via ::after
   - Standard: capitalize
   - Ausnahmen (YouTube, Hacker News, LINE, VK, Web Share, etc.) */
.sd-item-mini .sd-svc::after{
  content: attr(data-svc);
  text-transform: capitalize;
  letter-spacing:.2px;
}

/* Ausnahmen/Mappings auf echte Markennamen */
.sd-item-mini.sd--youtube  .sd-svc::after{ content:"YouTube"; }
.sd-item-mini.sd--hn       .sd-svc::after{ content:"Hacker News"; }
.sd-item-mini.sd--line     .sd-svc::after{ content:"LINE"; }
.sd-item-mini.sd--vk       .sd-svc::after{ content:"VK"; }
.sd-item-mini.sd--xing     .sd-svc::after{ content:"XING"; }
.sd-item-mini.sd--webshare .sd-svc::after{ content:"Web Share"; }
.sd-item-mini.sd--x        .sd-svc::after{ content:"X"; }

/* Dark-Mode (freundlich, nicht pechschwarz) */
@media (prefers-color-scheme: dark){
  .sd-item-mini{
    --sd-bg:#818c9f; --sd-bd:#243449; --sd-fg:#e7ecf3;
    --sd-badge-bg-share:#11203f; --sd-badge-fg-share:#9fb6ff; --sd-badge-bd-share:#1a2a4a;
    --sd-badge-bg-link:#0f221b;  --sd-badge-fg-link:#86d6b7;  --sd-badge-bd-link:#153428;
  }
}

/* Brandfarbe nach Dienst (nur Variable setzen, dezente Dot-Farbe) */
.sd-item-mini.sd--x{--sd-brand:#111} .sd-item-mini.sd--facebook{--sd-brand:#1877f2}
.sd-item-mini.sd--linkedin{--sd-brand:#0a66c2} .sd-item-mini.sd--whatsapp{--sd-brand:#25d366}
.sd-item-mini.sd--telegram{--sd-brand:#24a1de} .sd-item-mini.sd--pinterest{--sd-brand:#e60023}
.sd-item-mini.sd--mail,.sd-item-mini.sd--copy,.sd-item-mini.sd--print,.sd-item-mini.sd--webshare{--sd-brand:#6c757d}
.sd-item-mini.sd--threads{--sd-brand:#000} .sd-item-mini.sd--bluesky{--sd-brand:#1185fe}
.sd-item-mini.sd--reddit{--sd-brand:#ff4500} .sd-item-mini.sd--hn{--sd-brand:#ff6600}
.sd-item-mini.sd--pocket{--sd-brand:#ef4056} .sd-item-mini.sd--flipboard{--sd-brand:#e12828}
.sd-item-mini.sd--vk{--sd-brand:#4c75a3} .sd-item-mini.sd--line{--sd-brand:#00c300}
.sd-item-mini.sd--weibo{--sd-brand:#e6162d} .sd-item-mini.sd--xing{--sd-brand:#026466}
.sd-item-mini.sd--mastodon{--sd-brand:#6364ff}
/* Link-Only & generisch */
.sd-item-mini.sd--instagram{--sd-brand:#E1306C} .sd-item-mini.sd--youtube{--sd-brand:#f00}
.sd-item-mini.sd--tiktok{--sd-brand:#000} .sd-item-mini.sd--github{--sd-brand:#24292e}
.sd-item-mini.sd--website,.sd-item-mini.sd--external{--sd-brand:#6c757d}


/* Auto-Label: Service-Namen hübsch darstellen, wenn kein eigenes Label gesetzt ist */
.sd-preview .sd-auto-label::after{
  content: attr(data-svc);
  text-transform: capitalize;
  letter-spacing: .2px;
}

/* Ausnahmen für Markennamen */
.sd-preview .sd-btn.sd-youtube  .sd-auto-label::after{ content: "YouTube"; }
.sd-preview .sd-btn.sd-hn       .sd-auto-label::after{ content: "Hacker News"; }
.sd-preview .sd-btn.sd-line     .sd-auto-label::after{ content: "LINE"; }
.sd-preview .sd-btn.sd-vk       .sd-auto-label::after{ content: "VK"; }
.sd-preview .sd-btn.sd-xing     .sd-auto-label::after{ content: "XING"; }
.sd-preview .sd-btn.sd-webshare .sd-auto-label::after{ content: "Web Share"; }
.sd-preview .sd-btn.sd-x        .sd-auto-label::after{ content: "X"; }

/* Kompakter machen, damit die Zeile wenig Platz braucht (ohne die Parent-Optik zu brechen) */
.sd-preview .sd-btn{
  padding: 6px 10px;       /* etwas schlanker */
  gap: 6px;                /* engerer Abstand Icon/Label */
  font-size: 13px;         /* kompakt, aber lesbar */
}
.sd-preview .sd-ic { font-size: var(--sd-icon-size, 19px); }

/* Legenden-Container kompakt lassen */
.sd-edit-inline{ display:flex; align-items:center; gap:8px; max-width:100%; }

/* Button im Editor kompakt */
.sd-preview .sd-btn{ padding:4px 8px; gap:6px; font-size:12px; }
.sd-preview .sd-ic { font-size:var(--sd-icon-size, 19px); }
.sd-preview .sd-lb { font-size: var(--sd-label-size, 14px); }

/* Kleine Legende: „Share/Link · Service“ */
.sd-edit-legend{
  --fg:#2a394d; --bd:#e6ecf5; --bg:#f6f8fc;
  --fgShare:#2a394d; /* vorher fast weiß → schlechte Lesbarkeit */
  --fgLink:#0b7b54;

  display:inline-flex; align-items:center; gap:4px;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  font-size:11px; line-height:1.1; color:var(--fg);
  padding:2px 6px; border:1px solid var(--bd); border-radius:8px; background:var(--bg);
  white-space:nowrap; max-width:100%;
}

.sd-edit-legend .sd-legend-mode{
  font-weight:700;
  /* Modus-Farbe */
}
.sd-edit-legend.is-share .sd-legend-mode{ color:var(--fgShare); }
.sd-edit-legend.is-link  .sd-legend-mode{ color:var(--fgLink); }

.sd-edit-legend .sd-legend-sep{ opacity:.5; }

/* 👉 Dienst-Name: etwas größer & fett, damit er sofort erkennbar ist */
.sd-edit-legend .sd-legend-svc{
  font-size:11px;
  font-weight:700;
  overflow:hidden; text-overflow:ellipsis; max-width:32ch;
  text-transform:capitalize; /* hübscher als alles klein */
}

/* 👉 Falls KEIN Label im HTML steht, nimm data-svc als Fallback-Text */
.sd-edit-legend .sd-legend-svc:empty::after{
  content: attr(data-svc);
  text-transform: capitalize;
  letter-spacing:.2px;
}

/* Markennamen-Sonderfälle für den Fallback-Text */
.sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="youtube"]::after,
.sd-edit-legend .sd-legend-svc[data-label=""][data-svc="youtube"]::after{ content:"YouTube"; }
.sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="hn"]::after,
.sd-edit-legend .sd-legend-svc[data-label=""][data-svc="hn"]::after{ content:"Hacker News"; }
.sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="line"]::after,
.sd-edit-legend .sd-legend-svc[data-label=""][data-svc="line"]::after{ content:"LINE"; }
.sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="vk"]::after,
.sd-edit-legend .sd-legend-svc[data-label=""][data-svc="vk"]::after{ content:"VK"; }
.sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="xing"]::after,
.sd-edit-legend .sd-legend-svc[data-label=""][data-svc="xing"]::after{ content:"XING"; }
.sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="webshare"]::after,
.sd-edit-legend .sd-legend-svc[data-label=""][data-svc="webshare"]::after{ content:"Web Share"; }
.sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="x"]::after,
.sd-edit-legend .sd-legend-svc[data-label=""][data-svc="x"]::after{ content:"X"; }
/* SocialDock – each.css */
/* ===== Basis & Variablen ===== */
.socialdock {
    --sd-gutter: 8px;
    --sd-radius: 8px;
    --sd-pad-y: 8px;
    --sd-pad-x: 10px;
    --sd-font: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
    position: relative;
    display: block;
    font-family: var(--sd-font);
    line-height: 1;
}



/* ===== Layout Container ===== */
.socialdock .socialdock-inner {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    gap: var(--sd-gutter);
    justify-content: flex-start; /* default */
  
}

.socialdock[data-align="center"] .socialdock-inner { justify-content: center; }
.socialdock[data-align="right"] .socialdock-inner { justify-content: flex-end; }
.socialdock[data-align="between"] .socialdock-inner { justify-content: space-between; }
.socialdock[data-align="around"] .socialdock-inner { justify-content: space-around; }
.socialdock[data-align="evenly"] .socialdock-inner { justify-content: space-evenly; }

/* ===== Stacked-Mode ===== */
.socialdock[data-stacked="true"] .socialdock-inner { flex-direction: column; }
.socialdock[data-stacked="true"][data-fullwidth="true"] .socialdock-inner { align-items: stretch; }

.socialdock[data-stacked="true"][data-fullwidth="true"] .sd-btn {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Stacked + nicht Fullwidth: horizontal per align-items */
.socialdock[data-stacked="true"]:not([data-fullwidth="true"]) .socialdock-inner { align-items: flex-start; }
.socialdock[data-stacked="true"]:not([data-fullwidth="true"])[data-align="center"] .socialdock-inner { align-items: center; }
.socialdock[data-stacked="true"]:not([data-fullwidth="true"])[data-align="right"] .socialdock-inner { align-items: flex-end; }

.socialdock[data-stacked="true"] .sd-btn { align-self: auto !important; }

/* ===== Buttons ===== */
.socialdock .sd-btn {
    width: var(--sd-btn-w, auto); /* equalWidth via JS */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
      border-width: var(--sd-border-w, 1px);
  border-style: var(--sd-border-style, solid);
  border-color: var(--sd-border-color, currentColor);
    border-radius: var(--sd-radius, var(--sr-radius, var(--sd-radius-default, 8px)));
      padding: var(--sd-pad-y, var(--sr-pad-y, var(--sd-pad-y-default, 8px))) var(--sd-pad-x, var(--sr-pad-x, var(--sd-pad-x-default, 10px)));
    transition: transform .08s ease, opacity .2s ease;
    font-weight: 600;
    white-space: nowrap;
}

.socialdock .sd-btn:focus { outline: 2px solid; outline-offset: 2px; }
.socialdock .sd-btn:hover { transform: translateY(-1px); }
.socialdock .sd-btn:active { transform: translateY(0); }

/* ===== Icons immer perfekt zentriert ===== */
.socialdock .sd-ic {
    font-size: var(--sd-icon-size, 19px); /* global steuerbar (px) */
    width: 1em;
    height: 1em;
    display: inline-flex;
    align-items: center;
    justify-content: center; /* zentriert SVG im Icon-Container */
}
.socialdock .sd-ic svg {
    width: 1em;
    height: 1em;
    display: block;
    overflow: visible; 
}
.socialdock .sd-lb {
    font-size: var(--sd-label-size, inherit);
}

/* ===== Labels & Hover-Animation ===== */
/* 1) Labels AUS (robust), wenn KEIN Hoverlabel aktiv ist */
.socialdock:not([data-labels="true"]):not([data-hoverlabel="true"]) .sd-lb { display: none !important; }
.socialdock:not([data-labels="true"]):not([data-hoverlabel="true"]) .sd-btn {
    gap: 0;           /* kein Phantomabstand */
    justify-content: center; /* Icon mittig */
}

/* 2) Hoverlabel aktiv + Labels nicht explizit an */
.socialdock[data-hoverlabel="true"]:not([data-labels="true"]) .sd-lb {
    display: inline-flex !important; /* sichtbar als Flex-Item */
    align-items: center;
    min-width: 0;      /* echtes Schrumpfen */
    max-width: 0;      /* eingefahren */
    overflow: hidden;
    opacity: 0;
    transform: translateX(-4px) scale(0.98);
    margin-left: 0;
    pointer-events: none;
    transition: max-width .25s ease, opacity .22s ease, transform .25s ease, margin-left .25s ease;
}
.socialdock[data-hoverlabel="true"]:not([data-labels="true"]) .sd-btn {
    gap: 0;           /* Platz entsteht durch margin-left beim Ausfahren */
    justify-content: center;
}
.socialdock[data-hoverlabel="true"]:not([data-labels="true"]) .sd-btn:hover .sd-lb,
.socialdock[data-hoverlabel="true"]:not([data-labels="true"]) .sd-btn:focus-visible .sd-lb {
    max-width: var(--sd-hoverlabel-max, 12ch);
    opacity: 1;
    transform: none;
    margin-left: .5em; /* wirkt wie gap */
}

/* ===== Größen ===== */
.socialdock[data-size="s"] .sd-btn {
  font-size: 12px;
  --sd-pad-y-default: 6px;
  --sd-pad-x-default: 8px;
  --sd-radius-default: 8px;
}

.socialdock[data-size="m"] .sd-btn {
  font-size: 14px;
  --sd-pad-y-default: 8px;
  --sd-pad-x-default: 10px;
  --sd-radius-default: 8px;
}

.socialdock[data-size="l"] .sd-btn {
  font-size: 16px;
  --sd-pad-y-default: 10px;
  --sd-pad-x-default: 12px;
  --sd-radius-default: 12px;
}



/* ===== Formen ===== */
.socialdock[data-shape="square"] .sd-btn { border-radius: 0px; }
.socialdock[data-shape="pill"]   .sd-btn { border-radius: 999px; }

/* optional, nur zur Klarheit – identisch zur Basis: */
.socialdock[data-shape="rounded"] .sd-btn {
  border-radius: var(--sd-radius, var(--sr-radius, var(--sd-radius-default, 8px)));
}


/* ===== Theme-Variablen (Light/Dark/Auto) – nur wenn Brand AUS ===== */
.socialdock[data-theme="light"]:not([data-brand]) .sd-btn,
.socialdock[data-theme="light"][data-brand="off"] .sd-btn {
  color: var(--sd-light-fg, #111);
  background: var(--sd-light-bg, #fff);
}
.socialdock[data-theme="dark"]:not([data-brand]) .sd-btn,
.socialdock[data-theme="dark"][data-brand="off"] .sd-btn {
  color: var(--sd-dark-fg, #eee);
  background: var(--sd-dark-bg, #111);
}
@media (prefers-color-scheme: light) {
  .socialdock[data-theme="auto"]:not([data-brand]) .sd-btn,
  .socialdock[data-theme="auto"][data-brand="off"] .sd-btn {
    color: var(--sd-light-fg, #111);
    background: var(--sd-light-bg, #fff);
  }
}
@media (prefers-color-scheme: dark) {
  .socialdock[data-theme="auto"]:not([data-brand]) .sd-btn,
  .socialdock[data-theme="auto"][data-brand="off"] .sd-btn {
    color: var(--sd-dark-fg, #eee);
    background: var(--sd-dark-bg, #111);
  }
}

/* ===== Brandfarben (pro Service) ===== */
.sd-btn.sd-x         { --sd-brand: #000000; }
.sd-btn.sd-facebook  { --sd-brand: #1877f2; }
.sd-btn.sd-linkedin  { --sd-brand: #0a66c2; }
.sd-btn.sd-whatsapp  { --sd-brand: #25d366; }
.sd-btn.sd-telegram  { --sd-brand: #24a1de; }
.sd-btn.sd-pinterest { --sd-brand: #e60023; }
.sd-btn.sd-mail      { --sd-brand: #6c757d; }
.sd-btn.sd-copy      { --sd-brand: #6c757d; }
.sd-btn.sd-print     { --sd-brand: #6c757d; }
.sd-btn.sd-webshare  { --sd-brand: #6c757d; }
.sd-btn.sd-threads   { --sd-brand: #000000; }
.sd-btn.sd-bluesky   { --sd-brand: #1185fe; }
.sd-btn.sd-reddit    { --sd-brand: #ff4500; }
.sd-btn.sd-hn        { --sd-brand: #ff6600; }
.sd-btn.sd-pocket    { --sd-brand: #ef4056; }
.sd-btn.sd-flipboard { --sd-brand: #e12828; }
.sd-btn.sd-vk        { --sd-brand: #4c75a3; }
.sd-btn.sd-line      { --sd-brand: #00c300; }
.sd-btn.sd-weibo     { --sd-brand: #e6162d; }
.sd-btn.sd-xing      { --sd-brand: #026466; }
.sd-btn.sd-mastodon  { --sd-brand: #6364ff; }
.sd-btn.sd-youtube   { --sd-brand: #ff0000; }
.sd-btn.sd-instagram { --sd-brand: #E1306C; }
.sd-btn.sd-tiktok    { --sd-brand: #000000; }
.sd-btn.sd-github    { --sd-brand: #24292e; }
.sd-btn.sd-website   { --sd-brand: #6c757d; } /* generisch */


.socialdock[data-brand="fg"] .sd-btn {
    color: var(--sd-brand, currentColor);
    border-color: var(--sd-brand, currentColor);
    background: transparent;
}
.socialdock[data-brand="bg"] .sd-btn {
    background: var(--sd-brand, #555);
    border-color: var(--sd-brand, #555);
    color: #fff;
}

/* ⬇️ NEU: Per-Button Brand-Style (überschreibt Theme) */
/* Nach deinen Theme-Regeln einfügen */
.socialdock[data-theme] .sd-btn[data-brand="bg"] {
  background: var(--sd-brand, #555);
  border-color: var(--sd-brand, #555);
  color: #fff;
}

.socialdock[data-theme] .sd-btn[data-brand="fg"] {
  color: var(--sd-brand, currentColor);
  border-color: var(--sd-brand, currentColor);
  background: transparent;
}


.socialdock[data-brand="fg"] .sd-btn:hover { opacity: .95; }
.socialdock[data-brand="fg"] .sd-btn:active { opacity: .9; }
.socialdock[data-brand="bg"] .sd-btn:hover { filter: brightness(.97); }
.socialdock[data-brand="bg"] .sd-btn:active { filter: brightness(.92); }

/* ===== Toast ===== */
.socialdock .socialdock-toast {
    position: absolute;
    margin-top: 8px;
    background: rgba(0, 0, 0, .9);
    color: #fff;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 12px;
    opacity: 0;
    transform: translateY(-4px);
    transition: all .18s ease;
}
.socialdock .socialdock-toast.show {
    opacity: 1;
    transform: translateY(0);
}

/* Basis: Icon-Größe unabhängig vom Label steuern */
.socialdock .sd-ic {
  /* skaliert NUR das Icon (SVG bleibt 1em innerhalb) */
  font-size: var(--sd-icon-size, 19px);
  width: 1em;
  height: 1em;
}

/* ===== Icon-only: kein Hintergrund, kein Rand – Labels bleiben ===== */
.socialdock[data-appearance="true"] .sd-btn {
  background: transparent !important;
  --sd-border-w: 0;
  box-shadow: none !important;
  padding: var(--sd-icon-pad, 0);   /* unsichtbare Klickfläche (0–8px) */
  gap: 8px;                         /* Abstand Icon ↔ Label */
  transform: none;
}

/* Icon im icon-only Modus größer machen */
.socialdock[data-appearance="true"] { --sd-icon-size: 26px; }
/* Optional pro Buttongröße feinabstimmen */
.socialdock[data-appearance="true"][data-size="s"] { --sd-icon-size: 17px; }
.socialdock[data-appearance="true"][data-size="m"] { --sd-icon-size: 22px; }
.socialdock[data-appearance="true"][data-size="l"] { --sd-icon-size: 29px; }

/* Fokus sichtbar (A11y) */
.socialdock[data-appearance="true"] .sd-btn:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Falls im icon-only Modus Brand-Farbe erzwungen werden soll */
.socialdock[data-appearance="true"][data-brand="fg"] .sd-btn { color: var(--sd-brand) !important; }
.socialdock[data-appearance="true"][data-brand="bg"] .sd-btn {
  background: transparent !important;
  border: 0 !important;
  /* wahlweise: color: var(--sd-brand) !important; */
}

/* 1) SVG darf über den ViewBox-Rand schauen (kein Clipping der Strokes) */
.socialdock .sd-ic svg {
  overflow: visible;        /* verhindert "angeschnittene" Kanten */
  display: block;
}

/* 2) Icon-Flexitem nicht schrumpfen lassen, immer genug Platz geben */
.socialdock .sd-ic {
  flex: 0 0 auto;           /* nicht zusammenquetschen */
  min-width: 1em;           /* nie kleiner als die Icon-Größe */
  min-height: 1em;
  padding: .08em;           /* optischer "Bleed" */
}

/* 3) Sicherheitshalber: Buttons haben wirklich kompakte Line-Box */
.socialdock .sd-btn { line-height: 1; }

/* 4) Im Icon-only Modus darf das Icon größer sein, ohne Clipping */
.socialdock[data-appearance="true"] { --sd-icon-size: 26px; }
.socialdock .sd-ic { font-size: var(--sd-icon-size, 19px); width: 1em; height: 1em; }

/* Icon-only Modus: Sicherheits-Inset */
.socialdock[data-appearance="true"]{
  --sd-edge-safety: 2px;         /* ggf. 1px–3px testen */
  padding-inline: var(--sd-edge-safety);
  overflow-x: clip;
}
@supports not (overflow-x: clip){
  .socialdock[data-appearance="true"]{ overflow-x: hidden; }
}

/* Monochrome Icons – sicher */
.socialdock .sd-ic svg,
.socialdock .sd-ic svg * {
  fill: currentColor !important;
  stroke: none !important;
}

/* Perfekte Kreise, wenn Option aktiv UND Labels komplett aus (kein Hoverlabel) */
.socialdock[data-round-icononly="true"]:not([data-labels="true"]):not([data-hoverlabel="true"]) .sd-btn {
  /* Kreisgröße: Icon + vertikales Padding */
  --sd-circle: calc(var(--sd-icon-size, 19px) + (var(--sd-pad-y) * 2));

  /* Equal-Width übersteuern: Breite = Höhe = --sd-circle */
  --sd-btn-w: var(--sd-circle);
  height: var(--sd-circle);

  /* gleiches Padding auf allen Seiten -> optisch zentriert */
  padding: var(--sd-pad-y);

  border-radius: 50%;
  gap: 0;                /* kein „Phantom“-Abstand */
  justify-content: center;
}

/* Optional: auch im icon-only Erscheinungsbild kreisrund */
.socialdock[data-appearance="true"][data-round-icononly="true"]:not([data-labels="true"]):not([data-hoverlabel="true"]) .sd-btn {
  border-radius: 50%;
}
/* Mini-Zeile: edel, freundlich, sehr kompakt */
.sd-item-mini{
  --sd-brand:#6c757d;           /* Fallback Brand */
  --sd-bg:#f6f8fc;              /* freundliches Hell */
  --sd-bd:#e6ecf5;              /* sanfte Linie */
  --sd-fg:#243449;              /* statt Schwarz: edles Slate */
  --sd-badge-bg-share:#eef3ff;  --sd-badge-fg-share:#2a5bd7;  --sd-badge-bd-share:#e2e9ff;
  --sd-badge-bg-link:#e8f7f1;   --sd-badge-fg-link:#0b7b54;   --sd-badge-bd-link:#d6f2e7;

  display:flex; align-items:center; gap:8px;
  padding:4px 8px; margin:2px 0;
  border:0px solid var(--sd-bd); border-radius:4px;
  background:var(--sd-bg); color:var(--sd-fg);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  font-size:12px; line-height:1.2; max-width:100%;
}
.sd-item-mini .sd-dot{ width:8px; height:8px; border-radius:50%; background:var(--sd-brand); flex:0 0 auto; }
.sd-item-mini .sd-badge{
  font-size:10px; font-weight:700; padding:2px 6px; border-radius:999px;
  border:1px solid var(--sd-bd);
}
.sd-item-mini.is-share .sd-badge{ background:var(--sd-badge-bg-share); color:var(--sd-badge-fg-share); border-color:var(--sd-badge-bd-share); }
.sd-item-mini.is-link  .sd-badge{ background:var(--sd-badge-bg-link);  color:var(--sd-badge-fg-link);  border-color:var(--sd-badge-bd-link);  }

.sd-item-mini .sd-text{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; min-width:0; }

/* Service-Namen hübsch anzeigen:
   - wenn kein Label gesetzt ist, erzeugen wir Text via ::after
   - Standard: capitalize
   - Ausnahmen (YouTube, Hacker News, LINE, VK, Web Share, etc.) */
.sd-item-mini .sd-svc::after{
  content: attr(data-svc);
  text-transform: capitalize;
  letter-spacing:.2px;
}

/* Ausnahmen/Mappings auf echte Markennamen */
.sd-item-mini.sd--youtube  .sd-svc::after{ content:"YouTube"; }
.sd-item-mini.sd--hn       .sd-svc::after{ content:"Hacker News"; }
.sd-item-mini.sd--line     .sd-svc::after{ content:"LINE"; }
.sd-item-mini.sd--vk       .sd-svc::after{ content:"VK"; }
.sd-item-mini.sd--xing     .sd-svc::after{ content:"XING"; }
.sd-item-mini.sd--webshare .sd-svc::after{ content:"Web Share"; }
.sd-item-mini.sd--x        .sd-svc::after{ content:"X"; }

/* Dark-Mode (freundlich, nicht pechschwarz) */
@media (prefers-color-scheme: dark){
  .sd-item-mini{
    --sd-bg:#818c9f; --sd-bd:#243449; --sd-fg:#e7ecf3;
    --sd-badge-bg-share:#11203f; --sd-badge-fg-share:#9fb6ff; --sd-badge-bd-share:#1a2a4a;
    --sd-badge-bg-link:#0f221b;  --sd-badge-fg-link:#86d6b7;  --sd-badge-bd-link:#153428;
  }
}

/* Brandfarbe nach Dienst (nur Variable setzen, dezente Dot-Farbe) */
.sd-item-mini.sd--x{--sd-brand:#111} .sd-item-mini.sd--facebook{--sd-brand:#1877f2}
.sd-item-mini.sd--linkedin{--sd-brand:#0a66c2} .sd-item-mini.sd--whatsapp{--sd-brand:#25d366}
.sd-item-mini.sd--telegram{--sd-brand:#24a1de} .sd-item-mini.sd--pinterest{--sd-brand:#e60023}
.sd-item-mini.sd--mail,.sd-item-mini.sd--copy,.sd-item-mini.sd--print,.sd-item-mini.sd--webshare{--sd-brand:#6c757d}
.sd-item-mini.sd--threads{--sd-brand:#000} .sd-item-mini.sd--bluesky{--sd-brand:#1185fe}
.sd-item-mini.sd--reddit{--sd-brand:#ff4500} .sd-item-mini.sd--hn{--sd-brand:#ff6600}
.sd-item-mini.sd--pocket{--sd-brand:#ef4056} .sd-item-mini.sd--flipboard{--sd-brand:#e12828}
.sd-item-mini.sd--vk{--sd-brand:#4c75a3} .sd-item-mini.sd--line{--sd-brand:#00c300}
.sd-item-mini.sd--weibo{--sd-brand:#e6162d} .sd-item-mini.sd--xing{--sd-brand:#026466}
.sd-item-mini.sd--mastodon{--sd-brand:#6364ff}
/* Link-Only & generisch */
.sd-item-mini.sd--instagram{--sd-brand:#E1306C} .sd-item-mini.sd--youtube{--sd-brand:#f00}
.sd-item-mini.sd--tiktok{--sd-brand:#000} .sd-item-mini.sd--github{--sd-brand:#24292e}
.sd-item-mini.sd--website,.sd-item-mini.sd--external{--sd-brand:#6c757d}


/* Auto-Label: Service-Namen hübsch darstellen, wenn kein eigenes Label gesetzt ist */
.sd-preview .sd-auto-label::after{
  content: attr(data-svc);
  text-transform: capitalize;
  letter-spacing: .2px;
}

/* Ausnahmen für Markennamen */
.sd-preview .sd-btn.sd-youtube  .sd-auto-label::after{ content: "YouTube"; }
.sd-preview .sd-btn.sd-hn       .sd-auto-label::after{ content: "Hacker News"; }
.sd-preview .sd-btn.sd-line     .sd-auto-label::after{ content: "LINE"; }
.sd-preview .sd-btn.sd-vk       .sd-auto-label::after{ content: "VK"; }
.sd-preview .sd-btn.sd-xing     .sd-auto-label::after{ content: "XING"; }
.sd-preview .sd-btn.sd-webshare .sd-auto-label::after{ content: "Web Share"; }
.sd-preview .sd-btn.sd-x        .sd-auto-label::after{ content: "X"; }

/* Kompakter machen, damit die Zeile wenig Platz braucht (ohne die Parent-Optik zu brechen) */
.sd-preview .sd-btn{
  padding: 6px 10px;       /* etwas schlanker */
  gap: 6px;                /* engerer Abstand Icon/Label */
  font-size: 13px;         /* kompakt, aber lesbar */
}
.sd-preview .sd-ic { font-size: var(--sd-icon-size, 19px); }

/* Legenden-Container kompakt lassen */
.sd-edit-inline{ display:flex; align-items:center; gap:8px; max-width:100%; }

/* Button im Editor kompakt */
.sd-preview .sd-btn{ padding:4px 8px; gap:6px; font-size:12px; }
.sd-preview .sd-ic { font-size:var(--sd-icon-size, 19px); }
.sd-preview .sd-lb { font-size: var(--sd-label-size, 14px); }

/* Kleine Legende: „Share/Link · Service“ */
.sd-edit-legend{
  --fg:#2a394d; --bd:#e6ecf5; --bg:#f6f8fc;
  --fgShare:#2a394d; /* vorher fast weiß → schlechte Lesbarkeit */
  --fgLink:#0b7b54;

  display:inline-flex; align-items:center; gap:4px;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  font-size:11px; line-height:1.1; color:var(--fg);
  padding:2px 6px; border:1px solid var(--bd); border-radius:8px; background:var(--bg);
  white-space:nowrap; max-width:100%;
}

.sd-edit-legend .sd-legend-mode{
  font-weight:700;
  /* Modus-Farbe */
}
.sd-edit-legend.is-share .sd-legend-mode{ color:var(--fgShare); }
.sd-edit-legend.is-link  .sd-legend-mode{ color:var(--fgLink); }

.sd-edit-legend .sd-legend-sep{ opacity:.5; }

/* 👉 Dienst-Name: etwas größer & fett, damit er sofort erkennbar ist */
.sd-edit-legend .sd-legend-svc{
  font-size:11px;
  font-weight:700;
  overflow:hidden; text-overflow:ellipsis; max-width:32ch;
  text-transform:capitalize; /* hübscher als alles klein */
}

/* 👉 Falls KEIN Label im HTML steht, nimm data-svc als Fallback-Text */
.sd-edit-legend .sd-legend-svc:empty::after{
  content: attr(data-svc);
  text-transform: capitalize;
  letter-spacing:.2px;
}

/* Markennamen-Sonderfälle für den Fallback-Text */
.sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="youtube"]::after,
.sd-edit-legend .sd-legend-svc[data-label=""][data-svc="youtube"]::after{ content:"YouTube"; }
.sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="hn"]::after,
.sd-edit-legend .sd-legend-svc[data-label=""][data-svc="hn"]::after{ content:"Hacker News"; }
.sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="line"]::after,
.sd-edit-legend .sd-legend-svc[data-label=""][data-svc="line"]::after{ content:"LINE"; }
.sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="vk"]::after,
.sd-edit-legend .sd-legend-svc[data-label=""][data-svc="vk"]::after{ content:"VK"; }
.sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="xing"]::after,
.sd-edit-legend .sd-legend-svc[data-label=""][data-svc="xing"]::after{ content:"XING"; }
.sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="webshare"]::after,
.sd-edit-legend .sd-legend-svc[data-label=""][data-svc="webshare"]::after{ content:"Web Share"; }
.sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="x"]::after,
.sd-edit-legend .sd-legend-svc[data-label=""][data-svc="x"]::after{ content:"X"; }
/* SocialDock – each.css */
/* ===== Basis & Variablen ===== */
.socialdock {
    --sd-gutter: 8px;
    --sd-radius: 8px;
    --sd-pad-y: 8px;
    --sd-pad-x: 10px;
    --sd-font: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
    position: relative;
    display: block;
    font-family: var(--sd-font);
    line-height: 1;
}



/* ===== Layout Container ===== */
.socialdock .socialdock-inner {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    gap: var(--sd-gutter);
    justify-content: flex-start; /* default */
  
}

.socialdock[data-align="center"] .socialdock-inner { justify-content: center; }
.socialdock[data-align="right"] .socialdock-inner { justify-content: flex-end; }
.socialdock[data-align="between"] .socialdock-inner { justify-content: space-between; }
.socialdock[data-align="around"] .socialdock-inner { justify-content: space-around; }
.socialdock[data-align="evenly"] .socialdock-inner { justify-content: space-evenly; }

/* ===== Stacked-Mode ===== */
.socialdock[data-stacked="true"] .socialdock-inner { flex-direction: column; }
.socialdock[data-stacked="true"][data-fullwidth="true"] .socialdock-inner { align-items: stretch; }

.socialdock[data-stacked="true"][data-fullwidth="true"] .sd-btn {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Stacked + nicht Fullwidth: horizontal per align-items */
.socialdock[data-stacked="true"]:not([data-fullwidth="true"]) .socialdock-inner { align-items: flex-start; }
.socialdock[data-stacked="true"]:not([data-fullwidth="true"])[data-align="center"] .socialdock-inner { align-items: center; }
.socialdock[data-stacked="true"]:not([data-fullwidth="true"])[data-align="right"] .socialdock-inner { align-items: flex-end; }

.socialdock[data-stacked="true"] .sd-btn { align-self: auto !important; }

/* ===== Buttons ===== */
.socialdock .sd-btn {
    width: var(--sd-btn-w, auto); /* equalWidth via JS */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
      border-width: var(--sd-border-w, 1px);
  border-style: var(--sd-border-style, solid);
  border-color: var(--sd-border-color, currentColor);
    border-radius: var(--sd-radius, var(--sr-radius, var(--sd-radius-default, 8px)));
      padding: var(--sd-pad-y, var(--sr-pad-y, var(--sd-pad-y-default, 8px))) var(--sd-pad-x, var(--sr-pad-x, var(--sd-pad-x-default, 10px)));
    transition: transform .08s ease, opacity .2s ease;
    font-weight: 600;
    white-space: nowrap;
}

.socialdock .sd-btn:focus { outline: 2px solid; outline-offset: 2px; }
.socialdock .sd-btn:hover { transform: translateY(-1px); }
.socialdock .sd-btn:active { transform: translateY(0); }

/* ===== Icons immer perfekt zentriert ===== */
.socialdock .sd-ic {
    font-size: var(--sd-icon-size, 19px); /* global steuerbar (px) */
    width: 1em;
    height: 1em;
    display: inline-flex;
    align-items: center;
    justify-content: center; /* zentriert SVG im Icon-Container */
}
.socialdock .sd-ic svg {
    width: 1em;
    height: 1em;
    display: block;
    overflow: visible; 
}
.socialdock .sd-lb {
    font-size: var(--sd-label-size, inherit);
}

/* ===== Labels & Hover-Animation ===== */
/* 1) Labels AUS (robust), wenn KEIN Hoverlabel aktiv ist */
.socialdock:not([data-labels="true"]):not([data-hoverlabel="true"]) .sd-lb { display: none !important; }
.socialdock:not([data-labels="true"]):not([data-hoverlabel="true"]) .sd-btn {
    gap: 0;           /* kein Phantomabstand */
    justify-content: center; /* Icon mittig */
}

/* 2) Hoverlabel aktiv + Labels nicht explizit an */
.socialdock[data-hoverlabel="true"]:not([data-labels="true"]) .sd-lb {
    display: inline-flex !important; /* sichtbar als Flex-Item */
    align-items: center;
    min-width: 0;      /* echtes Schrumpfen */
    max-width: 0;      /* eingefahren */
    overflow: hidden;
    opacity: 0;
    transform: translateX(-4px) scale(0.98);
    margin-left: 0;
    pointer-events: none;
    transition: max-width .25s ease, opacity .22s ease, transform .25s ease, margin-left .25s ease;
}
.socialdock[data-hoverlabel="true"]:not([data-labels="true"]) .sd-btn {
    gap: 0;           /* Platz entsteht durch margin-left beim Ausfahren */
    justify-content: center;
}
.socialdock[data-hoverlabel="true"]:not([data-labels="true"]) .sd-btn:hover .sd-lb,
.socialdock[data-hoverlabel="true"]:not([data-labels="true"]) .sd-btn:focus-visible .sd-lb {
    max-width: var(--sd-hoverlabel-max, 12ch);
    opacity: 1;
    transform: none;
    margin-left: .5em; /* wirkt wie gap */
}

/* ===== Größen ===== */
.socialdock[data-size="s"] .sd-btn {
  font-size: 12px;
  --sd-pad-y-default: 6px;
  --sd-pad-x-default: 8px;
  --sd-radius-default: 8px;
}

.socialdock[data-size="m"] .sd-btn {
  font-size: 14px;
  --sd-pad-y-default: 8px;
  --sd-pad-x-default: 10px;
  --sd-radius-default: 8px;
}

.socialdock[data-size="l"] .sd-btn {
  font-size: 16px;
  --sd-pad-y-default: 10px;
  --sd-pad-x-default: 12px;
  --sd-radius-default: 12px;
}



/* ===== Formen ===== */
.socialdock[data-shape="square"] .sd-btn { border-radius: 0px; }
.socialdock[data-shape="pill"]   .sd-btn { border-radius: 999px; }

/* optional, nur zur Klarheit – identisch zur Basis: */
.socialdock[data-shape="rounded"] .sd-btn {
  border-radius: var(--sd-radius, var(--sr-radius, var(--sd-radius-default, 8px)));
}


/* ===== Theme-Variablen (Light/Dark/Auto) – nur wenn Brand AUS ===== */
.socialdock[data-theme="light"]:not([data-brand]) .sd-btn,
.socialdock[data-theme="light"][data-brand="off"] .sd-btn {
  color: var(--sd-light-fg, #111);
  background: var(--sd-light-bg, #fff);
}
.socialdock[data-theme="dark"]:not([data-brand]) .sd-btn,
.socialdock[data-theme="dark"][data-brand="off"] .sd-btn {
  color: var(--sd-dark-fg, #eee);
  background: var(--sd-dark-bg, #111);
}
@media (prefers-color-scheme: light) {
  .socialdock[data-theme="auto"]:not([data-brand]) .sd-btn,
  .socialdock[data-theme="auto"][data-brand="off"] .sd-btn {
    color: var(--sd-light-fg, #111);
    background: var(--sd-light-bg, #fff);
  }
}
@media (prefers-color-scheme: dark) {
  .socialdock[data-theme="auto"]:not([data-brand]) .sd-btn,
  .socialdock[data-theme="auto"][data-brand="off"] .sd-btn {
    color: var(--sd-dark-fg, #eee);
    background: var(--sd-dark-bg, #111);
  }
}

/* ===== Brandfarben (pro Service) ===== */
.sd-btn.sd-x         { --sd-brand: #000000; }
.sd-btn.sd-facebook  { --sd-brand: #1877f2; }
.sd-btn.sd-linkedin  { --sd-brand: #0a66c2; }
.sd-btn.sd-whatsapp  { --sd-brand: #25d366; }
.sd-btn.sd-telegram  { --sd-brand: #24a1de; }
.sd-btn.sd-pinterest { --sd-brand: #e60023; }
.sd-btn.sd-mail      { --sd-brand: #6c757d; }
.sd-btn.sd-copy      { --sd-brand: #6c757d; }
.sd-btn.sd-print     { --sd-brand: #6c757d; }
.sd-btn.sd-webshare  { --sd-brand: #6c757d; }
.sd-btn.sd-threads   { --sd-brand: #000000; }
.sd-btn.sd-bluesky   { --sd-brand: #1185fe; }
.sd-btn.sd-reddit    { --sd-brand: #ff4500; }
.sd-btn.sd-hn        { --sd-brand: #ff6600; }
.sd-btn.sd-pocket    { --sd-brand: #ef4056; }
.sd-btn.sd-flipboard { --sd-brand: #e12828; }
.sd-btn.sd-vk        { --sd-brand: #4c75a3; }
.sd-btn.sd-line      { --sd-brand: #00c300; }
.sd-btn.sd-weibo     { --sd-brand: #e6162d; }
.sd-btn.sd-xing      { --sd-brand: #026466; }
.sd-btn.sd-mastodon  { --sd-brand: #6364ff; }
.sd-btn.sd-youtube   { --sd-brand: #ff0000; }
.sd-btn.sd-instagram { --sd-brand: #E1306C; }
.sd-btn.sd-tiktok    { --sd-brand: #000000; }
.sd-btn.sd-github    { --sd-brand: #24292e; }
.sd-btn.sd-website   { --sd-brand: #6c757d; } /* generisch */


.socialdock[data-brand="fg"] .sd-btn {
    color: var(--sd-brand, currentColor);
    border-color: var(--sd-brand, currentColor);
    background: transparent;
}
.socialdock[data-brand="bg"] .sd-btn {
    background: var(--sd-brand, #555);
    border-color: var(--sd-brand, #555);
    color: #fff;
}

/* ⬇️ NEU: Per-Button Brand-Style (überschreibt Theme) */
/* Nach deinen Theme-Regeln einfügen */
.socialdock[data-theme] .sd-btn[data-brand="bg"] {
  background: var(--sd-brand, #555);
  border-color: var(--sd-brand, #555);
  color: #fff;
}

.socialdock[data-theme] .sd-btn[data-brand="fg"] {
  color: var(--sd-brand, currentColor);
  border-color: var(--sd-brand, currentColor);
  background: transparent;
}


.socialdock[data-brand="fg"] .sd-btn:hover { opacity: .95; }
.socialdock[data-brand="fg"] .sd-btn:active { opacity: .9; }
.socialdock[data-brand="bg"] .sd-btn:hover { filter: brightness(.97); }
.socialdock[data-brand="bg"] .sd-btn:active { filter: brightness(.92); }

/* ===== Toast ===== */
.socialdock .socialdock-toast {
    position: absolute;
    margin-top: 8px;
    background: rgba(0, 0, 0, .9);
    color: #fff;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 12px;
    opacity: 0;
    transform: translateY(-4px);
    transition: all .18s ease;
}
.socialdock .socialdock-toast.show {
    opacity: 1;
    transform: translateY(0);
}

/* Basis: Icon-Größe unabhängig vom Label steuern */
.socialdock .sd-ic {
  /* skaliert NUR das Icon (SVG bleibt 1em innerhalb) */
  font-size: var(--sd-icon-size, 19px);
  width: 1em;
  height: 1em;
}

/* ===== Icon-only: kein Hintergrund, kein Rand – Labels bleiben ===== */
.socialdock[data-appearance="true"] .sd-btn {
  background: transparent !important;
  --sd-border-w: 0;
  box-shadow: none !important;
  padding: var(--sd-icon-pad, 0);   /* unsichtbare Klickfläche (0–8px) */
  gap: 8px;                         /* Abstand Icon ↔ Label */
  transform: none;
}

/* Icon im icon-only Modus größer machen */
.socialdock[data-appearance="true"] { --sd-icon-size: 26px; }
/* Optional pro Buttongröße feinabstimmen */
.socialdock[data-appearance="true"][data-size="s"] { --sd-icon-size: 17px; }
.socialdock[data-appearance="true"][data-size="m"] { --sd-icon-size: 22px; }
.socialdock[data-appearance="true"][data-size="l"] { --sd-icon-size: 29px; }

/* Fokus sichtbar (A11y) */
.socialdock[data-appearance="true"] .sd-btn:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Falls im icon-only Modus Brand-Farbe erzwungen werden soll */
.socialdock[data-appearance="true"][data-brand="fg"] .sd-btn { color: var(--sd-brand) !important; }
.socialdock[data-appearance="true"][data-brand="bg"] .sd-btn {
  background: transparent !important;
  border: 0 !important;
  /* wahlweise: color: var(--sd-brand) !important; */
}

/* 1) SVG darf über den ViewBox-Rand schauen (kein Clipping der Strokes) */
.socialdock .sd-ic svg {
  overflow: visible;        /* verhindert "angeschnittene" Kanten */
  display: block;
}

/* 2) Icon-Flexitem nicht schrumpfen lassen, immer genug Platz geben */
.socialdock .sd-ic {
  flex: 0 0 auto;           /* nicht zusammenquetschen */
  min-width: 1em;           /* nie kleiner als die Icon-Größe */
  min-height: 1em;
  padding: .08em;           /* optischer "Bleed" */
}

/* 3) Sicherheitshalber: Buttons haben wirklich kompakte Line-Box */
.socialdock .sd-btn { line-height: 1; }

/* 4) Im Icon-only Modus darf das Icon größer sein, ohne Clipping */
.socialdock[data-appearance="true"] { --sd-icon-size: 26px; }
.socialdock .sd-ic { font-size: var(--sd-icon-size, 19px); width: 1em; height: 1em; }

/* Icon-only Modus: Sicherheits-Inset */
.socialdock[data-appearance="true"]{
  --sd-edge-safety: 2px;         /* ggf. 1px–3px testen */
  padding-inline: var(--sd-edge-safety);
  overflow-x: clip;
}
@supports not (overflow-x: clip){
  .socialdock[data-appearance="true"]{ overflow-x: hidden; }
}

/* Monochrome Icons – sicher */
.socialdock .sd-ic svg,
.socialdock .sd-ic svg * {
  fill: currentColor !important;
  stroke: none !important;
}

/* Perfekte Kreise, wenn Option aktiv UND Labels komplett aus (kein Hoverlabel) */
.socialdock[data-round-icononly="true"]:not([data-labels="true"]):not([data-hoverlabel="true"]) .sd-btn {
  /* Kreisgröße: Icon + vertikales Padding */
  --sd-circle: calc(var(--sd-icon-size, 19px) + (var(--sd-pad-y) * 2));

  /* Equal-Width übersteuern: Breite = Höhe = --sd-circle */
  --sd-btn-w: var(--sd-circle);
  height: var(--sd-circle);

  /* gleiches Padding auf allen Seiten -> optisch zentriert */
  padding: var(--sd-pad-y);

  border-radius: 50%;
  gap: 0;                /* kein „Phantom“-Abstand */
  justify-content: center;
}

/* Optional: auch im icon-only Erscheinungsbild kreisrund */
.socialdock[data-appearance="true"][data-round-icononly="true"]:not([data-labels="true"]):not([data-hoverlabel="true"]) .sd-btn {
  border-radius: 50%;
}
/* Mini-Zeile: edel, freundlich, sehr kompakt */
.sd-item-mini{
  --sd-brand:#6c757d;           /* Fallback Brand */
  --sd-bg:#f6f8fc;              /* freundliches Hell */
  --sd-bd:#e6ecf5;              /* sanfte Linie */
  --sd-fg:#243449;              /* statt Schwarz: edles Slate */
  --sd-badge-bg-share:#eef3ff;  --sd-badge-fg-share:#2a5bd7;  --sd-badge-bd-share:#e2e9ff;
  --sd-badge-bg-link:#e8f7f1;   --sd-badge-fg-link:#0b7b54;   --sd-badge-bd-link:#d6f2e7;

  display:flex; align-items:center; gap:8px;
  padding:4px 8px; margin:2px 0;
  border:0px solid var(--sd-bd); border-radius:4px;
  background:var(--sd-bg); color:var(--sd-fg);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  font-size:12px; line-height:1.2; max-width:100%;
}
.sd-item-mini .sd-dot{ width:8px; height:8px; border-radius:50%; background:var(--sd-brand); flex:0 0 auto; }
.sd-item-mini .sd-badge{
  font-size:10px; font-weight:700; padding:2px 6px; border-radius:999px;
  border:1px solid var(--sd-bd);
}
.sd-item-mini.is-share .sd-badge{ background:var(--sd-badge-bg-share); color:var(--sd-badge-fg-share); border-color:var(--sd-badge-bd-share); }
.sd-item-mini.is-link  .sd-badge{ background:var(--sd-badge-bg-link);  color:var(--sd-badge-fg-link);  border-color:var(--sd-badge-bd-link);  }

.sd-item-mini .sd-text{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; min-width:0; }

/* Service-Namen hübsch anzeigen:
   - wenn kein Label gesetzt ist, erzeugen wir Text via ::after
   - Standard: capitalize
   - Ausnahmen (YouTube, Hacker News, LINE, VK, Web Share, etc.) */
.sd-item-mini .sd-svc::after{
  content: attr(data-svc);
  text-transform: capitalize;
  letter-spacing:.2px;
}

/* Ausnahmen/Mappings auf echte Markennamen */
.sd-item-mini.sd--youtube  .sd-svc::after{ content:"YouTube"; }
.sd-item-mini.sd--hn       .sd-svc::after{ content:"Hacker News"; }
.sd-item-mini.sd--line     .sd-svc::after{ content:"LINE"; }
.sd-item-mini.sd--vk       .sd-svc::after{ content:"VK"; }
.sd-item-mini.sd--xing     .sd-svc::after{ content:"XING"; }
.sd-item-mini.sd--webshare .sd-svc::after{ content:"Web Share"; }
.sd-item-mini.sd--x        .sd-svc::after{ content:"X"; }

/* Dark-Mode (freundlich, nicht pechschwarz) */
@media (prefers-color-scheme: dark){
  .sd-item-mini{
    --sd-bg:#818c9f; --sd-bd:#243449; --sd-fg:#e7ecf3;
    --sd-badge-bg-share:#11203f; --sd-badge-fg-share:#9fb6ff; --sd-badge-bd-share:#1a2a4a;
    --sd-badge-bg-link:#0f221b;  --sd-badge-fg-link:#86d6b7;  --sd-badge-bd-link:#153428;
  }
}

/* Brandfarbe nach Dienst (nur Variable setzen, dezente Dot-Farbe) */
.sd-item-mini.sd--x{--sd-brand:#111} .sd-item-mini.sd--facebook{--sd-brand:#1877f2}
.sd-item-mini.sd--linkedin{--sd-brand:#0a66c2} .sd-item-mini.sd--whatsapp{--sd-brand:#25d366}
.sd-item-mini.sd--telegram{--sd-brand:#24a1de} .sd-item-mini.sd--pinterest{--sd-brand:#e60023}
.sd-item-mini.sd--mail,.sd-item-mini.sd--copy,.sd-item-mini.sd--print,.sd-item-mini.sd--webshare{--sd-brand:#6c757d}
.sd-item-mini.sd--threads{--sd-brand:#000} .sd-item-mini.sd--bluesky{--sd-brand:#1185fe}
.sd-item-mini.sd--reddit{--sd-brand:#ff4500} .sd-item-mini.sd--hn{--sd-brand:#ff6600}
.sd-item-mini.sd--pocket{--sd-brand:#ef4056} .sd-item-mini.sd--flipboard{--sd-brand:#e12828}
.sd-item-mini.sd--vk{--sd-brand:#4c75a3} .sd-item-mini.sd--line{--sd-brand:#00c300}
.sd-item-mini.sd--weibo{--sd-brand:#e6162d} .sd-item-mini.sd--xing{--sd-brand:#026466}
.sd-item-mini.sd--mastodon{--sd-brand:#6364ff}
/* Link-Only & generisch */
.sd-item-mini.sd--instagram{--sd-brand:#E1306C} .sd-item-mini.sd--youtube{--sd-brand:#f00}
.sd-item-mini.sd--tiktok{--sd-brand:#000} .sd-item-mini.sd--github{--sd-brand:#24292e}
.sd-item-mini.sd--website,.sd-item-mini.sd--external{--sd-brand:#6c757d}


/* Auto-Label: Service-Namen hübsch darstellen, wenn kein eigenes Label gesetzt ist */
.sd-preview .sd-auto-label::after{
  content: attr(data-svc);
  text-transform: capitalize;
  letter-spacing: .2px;
}

/* Ausnahmen für Markennamen */
.sd-preview .sd-btn.sd-youtube  .sd-auto-label::after{ content: "YouTube"; }
.sd-preview .sd-btn.sd-hn       .sd-auto-label::after{ content: "Hacker News"; }
.sd-preview .sd-btn.sd-line     .sd-auto-label::after{ content: "LINE"; }
.sd-preview .sd-btn.sd-vk       .sd-auto-label::after{ content: "VK"; }
.sd-preview .sd-btn.sd-xing     .sd-auto-label::after{ content: "XING"; }
.sd-preview .sd-btn.sd-webshare .sd-auto-label::after{ content: "Web Share"; }
.sd-preview .sd-btn.sd-x        .sd-auto-label::after{ content: "X"; }

/* Kompakter machen, damit die Zeile wenig Platz braucht (ohne die Parent-Optik zu brechen) */
.sd-preview .sd-btn{
  padding: 6px 10px;       /* etwas schlanker */
  gap: 6px;                /* engerer Abstand Icon/Label */
  font-size: 13px;         /* kompakt, aber lesbar */
}
.sd-preview .sd-ic { font-size: var(--sd-icon-size, 19px); }

/* Legenden-Container kompakt lassen */
.sd-edit-inline{ display:flex; align-items:center; gap:8px; max-width:100%; }

/* Button im Editor kompakt */
.sd-preview .sd-btn{ padding:4px 8px; gap:6px; font-size:12px; }
.sd-preview .sd-ic { font-size:var(--sd-icon-size, 19px); }
.sd-preview .sd-lb { font-size: var(--sd-label-size, 14px); }

/* Kleine Legende: „Share/Link · Service“ */
.sd-edit-legend{
  --fg:#2a394d; --bd:#e6ecf5; --bg:#f6f8fc;
  --fgShare:#2a394d; /* vorher fast weiß → schlechte Lesbarkeit */
  --fgLink:#0b7b54;

  display:inline-flex; align-items:center; gap:4px;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  font-size:11px; line-height:1.1; color:var(--fg);
  padding:2px 6px; border:1px solid var(--bd); border-radius:8px; background:var(--bg);
  white-space:nowrap; max-width:100%;
}

.sd-edit-legend .sd-legend-mode{
  font-weight:700;
  /* Modus-Farbe */
}
.sd-edit-legend.is-share .sd-legend-mode{ color:var(--fgShare); }
.sd-edit-legend.is-link  .sd-legend-mode{ color:var(--fgLink); }

.sd-edit-legend .sd-legend-sep{ opacity:.5; }

/* 👉 Dienst-Name: etwas größer & fett, damit er sofort erkennbar ist */
.sd-edit-legend .sd-legend-svc{
  font-size:11px;
  font-weight:700;
  overflow:hidden; text-overflow:ellipsis; max-width:32ch;
  text-transform:capitalize; /* hübscher als alles klein */
}

/* 👉 Falls KEIN Label im HTML steht, nimm data-svc als Fallback-Text */
.sd-edit-legend .sd-legend-svc:empty::after{
  content: attr(data-svc);
  text-transform: capitalize;
  letter-spacing:.2px;
}

/* Markennamen-Sonderfälle für den Fallback-Text */
.sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="youtube"]::after,
.sd-edit-legend .sd-legend-svc[data-label=""][data-svc="youtube"]::after{ content:"YouTube"; }
.sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="hn"]::after,
.sd-edit-legend .sd-legend-svc[data-label=""][data-svc="hn"]::after{ content:"Hacker News"; }
.sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="line"]::after,
.sd-edit-legend .sd-legend-svc[data-label=""][data-svc="line"]::after{ content:"LINE"; }
.sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="vk"]::after,
.sd-edit-legend .sd-legend-svc[data-label=""][data-svc="vk"]::after{ content:"VK"; }
.sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="xing"]::after,
.sd-edit-legend .sd-legend-svc[data-label=""][data-svc="xing"]::after{ content:"XING"; }
.sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="webshare"]::after,
.sd-edit-legend .sd-legend-svc[data-label=""][data-svc="webshare"]::after{ content:"Web Share"; }
.sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="x"]::after,
.sd-edit-legend .sd-legend-svc[data-label=""][data-svc="x"]::after{ content:"X"; }
/* SocialDock – each.css */
/* ===== Basis & Variablen ===== */
.socialdock {
    --sd-gutter: 8px;
    --sd-radius: 8px;
    --sd-pad-y: 8px;
    --sd-pad-x: 10px;
    --sd-font: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
    position: relative;
    display: block;
    font-family: var(--sd-font);
    line-height: 1;
}



/* ===== Layout Container ===== */
.socialdock .socialdock-inner {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    gap: var(--sd-gutter);
    justify-content: flex-start; /* default */
  
}

.socialdock[data-align="center"] .socialdock-inner { justify-content: center; }
.socialdock[data-align="right"] .socialdock-inner { justify-content: flex-end; }
.socialdock[data-align="between"] .socialdock-inner { justify-content: space-between; }
.socialdock[data-align="around"] .socialdock-inner { justify-content: space-around; }
.socialdock[data-align="evenly"] .socialdock-inner { justify-content: space-evenly; }

/* ===== Stacked-Mode ===== */
.socialdock[data-stacked="true"] .socialdock-inner { flex-direction: column; }
.socialdock[data-stacked="true"][data-fullwidth="true"] .socialdock-inner { align-items: stretch; }

.socialdock[data-stacked="true"][data-fullwidth="true"] .sd-btn {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Stacked + nicht Fullwidth: horizontal per align-items */
.socialdock[data-stacked="true"]:not([data-fullwidth="true"]) .socialdock-inner { align-items: flex-start; }
.socialdock[data-stacked="true"]:not([data-fullwidth="true"])[data-align="center"] .socialdock-inner { align-items: center; }
.socialdock[data-stacked="true"]:not([data-fullwidth="true"])[data-align="right"] .socialdock-inner { align-items: flex-end; }

.socialdock[data-stacked="true"] .sd-btn { align-self: auto !important; }

/* ===== Buttons ===== */
.socialdock .sd-btn {
    width: var(--sd-btn-w, auto); /* equalWidth via JS */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
      border-width: var(--sd-border-w, 1px);
  border-style: var(--sd-border-style, solid);
  border-color: var(--sd-border-color, currentColor);
    border-radius: var(--sd-radius, var(--sr-radius, var(--sd-radius-default, 8px)));
      padding: var(--sd-pad-y, var(--sr-pad-y, var(--sd-pad-y-default, 8px))) var(--sd-pad-x, var(--sr-pad-x, var(--sd-pad-x-default, 10px)));
    transition: transform .08s ease, opacity .2s ease;
    font-weight: 600;
    white-space: nowrap;
}

.socialdock .sd-btn:focus { outline: 2px solid; outline-offset: 2px; }
.socialdock .sd-btn:hover { transform: translateY(-1px); }
.socialdock .sd-btn:active { transform: translateY(0); }

/* ===== Icons immer perfekt zentriert ===== */
.socialdock .sd-ic {
    font-size: var(--sd-icon-size, 19px); /* global steuerbar (px) */
    width: 1em;
    height: 1em;
    display: inline-flex;
    align-items: center;
    justify-content: center; /* zentriert SVG im Icon-Container */
}
.socialdock .sd-ic svg {
    width: 1em;
    height: 1em;
    display: block;
    overflow: visible; 
}
.socialdock .sd-lb {
    font-size: var(--sd-label-size, inherit);
}

/* ===== Labels & Hover-Animation ===== */
/* 1) Labels AUS (robust), wenn KEIN Hoverlabel aktiv ist */
.socialdock:not([data-labels="true"]):not([data-hoverlabel="true"]) .sd-lb { display: none !important; }
.socialdock:not([data-labels="true"]):not([data-hoverlabel="true"]) .sd-btn {
    gap: 0;           /* kein Phantomabstand */
    justify-content: center; /* Icon mittig */
}

/* 2) Hoverlabel aktiv + Labels nicht explizit an */
.socialdock[data-hoverlabel="true"]:not([data-labels="true"]) .sd-lb {
    display: inline-flex !important; /* sichtbar als Flex-Item */
    align-items: center;
    min-width: 0;      /* echtes Schrumpfen */
    max-width: 0;      /* eingefahren */
    overflow: hidden;
    opacity: 0;
    transform: translateX(-4px) scale(0.98);
    margin-left: 0;
    pointer-events: none;
    transition: max-width .25s ease, opacity .22s ease, transform .25s ease, margin-left .25s ease;
}
.socialdock[data-hoverlabel="true"]:not([data-labels="true"]) .sd-btn {
    gap: 0;           /* Platz entsteht durch margin-left beim Ausfahren */
    justify-content: center;
}
.socialdock[data-hoverlabel="true"]:not([data-labels="true"]) .sd-btn:hover .sd-lb,
.socialdock[data-hoverlabel="true"]:not([data-labels="true"]) .sd-btn:focus-visible .sd-lb {
    max-width: var(--sd-hoverlabel-max, 12ch);
    opacity: 1;
    transform: none;
    margin-left: .5em; /* wirkt wie gap */
}

/* ===== Größen ===== */
.socialdock[data-size="s"] .sd-btn {
  font-size: 12px;
  --sd-pad-y-default: 6px;
  --sd-pad-x-default: 8px;
  --sd-radius-default: 8px;
}

.socialdock[data-size="m"] .sd-btn {
  font-size: 14px;
  --sd-pad-y-default: 8px;
  --sd-pad-x-default: 10px;
  --sd-radius-default: 8px;
}

.socialdock[data-size="l"] .sd-btn {
  font-size: 16px;
  --sd-pad-y-default: 10px;
  --sd-pad-x-default: 12px;
  --sd-radius-default: 12px;
}



/* ===== Formen ===== */
.socialdock[data-shape="square"] .sd-btn { border-radius: 0px; }
.socialdock[data-shape="pill"]   .sd-btn { border-radius: 999px; }

/* optional, nur zur Klarheit – identisch zur Basis: */
.socialdock[data-shape="rounded"] .sd-btn {
  border-radius: var(--sd-radius, var(--sr-radius, var(--sd-radius-default, 8px)));
}


/* ===== Theme-Variablen (Light/Dark/Auto) – nur wenn Brand AUS ===== */
.socialdock[data-theme="light"]:not([data-brand]) .sd-btn,
.socialdock[data-theme="light"][data-brand="off"] .sd-btn {
  color: var(--sd-light-fg, #111);
  background: var(--sd-light-bg, #fff);
}
.socialdock[data-theme="dark"]:not([data-brand]) .sd-btn,
.socialdock[data-theme="dark"][data-brand="off"] .sd-btn {
  color: var(--sd-dark-fg, #eee);
  background: var(--sd-dark-bg, #111);
}
@media (prefers-color-scheme: light) {
  .socialdock[data-theme="auto"]:not([data-brand]) .sd-btn,
  .socialdock[data-theme="auto"][data-brand="off"] .sd-btn {
    color: var(--sd-light-fg, #111);
    background: var(--sd-light-bg, #fff);
  }
}
@media (prefers-color-scheme: dark) {
  .socialdock[data-theme="auto"]:not([data-brand]) .sd-btn,
  .socialdock[data-theme="auto"][data-brand="off"] .sd-btn {
    color: var(--sd-dark-fg, #eee);
    background: var(--sd-dark-bg, #111);
  }
}

/* ===== Brandfarben (pro Service) ===== */
.sd-btn.sd-x         { --sd-brand: #000000; }
.sd-btn.sd-facebook  { --sd-brand: #1877f2; }
.sd-btn.sd-linkedin  { --sd-brand: #0a66c2; }
.sd-btn.sd-whatsapp  { --sd-brand: #25d366; }
.sd-btn.sd-telegram  { --sd-brand: #24a1de; }
.sd-btn.sd-pinterest { --sd-brand: #e60023; }
.sd-btn.sd-mail      { --sd-brand: #6c757d; }
.sd-btn.sd-copy      { --sd-brand: #6c757d; }
.sd-btn.sd-print     { --sd-brand: #6c757d; }
.sd-btn.sd-webshare  { --sd-brand: #6c757d; }
.sd-btn.sd-threads   { --sd-brand: #000000; }
.sd-btn.sd-bluesky   { --sd-brand: #1185fe; }
.sd-btn.sd-reddit    { --sd-brand: #ff4500; }
.sd-btn.sd-hn        { --sd-brand: #ff6600; }
.sd-btn.sd-pocket    { --sd-brand: #ef4056; }
.sd-btn.sd-flipboard { --sd-brand: #e12828; }
.sd-btn.sd-vk        { --sd-brand: #4c75a3; }
.sd-btn.sd-line      { --sd-brand: #00c300; }
.sd-btn.sd-weibo     { --sd-brand: #e6162d; }
.sd-btn.sd-xing      { --sd-brand: #026466; }
.sd-btn.sd-mastodon  { --sd-brand: #6364ff; }
.sd-btn.sd-youtube   { --sd-brand: #ff0000; }
.sd-btn.sd-instagram { --sd-brand: #E1306C; }
.sd-btn.sd-tiktok    { --sd-brand: #000000; }
.sd-btn.sd-github    { --sd-brand: #24292e; }
.sd-btn.sd-website   { --sd-brand: #6c757d; } /* generisch */


.socialdock[data-brand="fg"] .sd-btn {
    color: var(--sd-brand, currentColor);
    border-color: var(--sd-brand, currentColor);
    background: transparent;
}
.socialdock[data-brand="bg"] .sd-btn {
    background: var(--sd-brand, #555);
    border-color: var(--sd-brand, #555);
    color: #fff;
}

/* ⬇️ NEU: Per-Button Brand-Style (überschreibt Theme) */
/* Nach deinen Theme-Regeln einfügen */
.socialdock[data-theme] .sd-btn[data-brand="bg"] {
  background: var(--sd-brand, #555);
  border-color: var(--sd-brand, #555);
  color: #fff;
}

.socialdock[data-theme] .sd-btn[data-brand="fg"] {
  color: var(--sd-brand, currentColor);
  border-color: var(--sd-brand, currentColor);
  background: transparent;
}


.socialdock[data-brand="fg"] .sd-btn:hover { opacity: .95; }
.socialdock[data-brand="fg"] .sd-btn:active { opacity: .9; }
.socialdock[data-brand="bg"] .sd-btn:hover { filter: brightness(.97); }
.socialdock[data-brand="bg"] .sd-btn:active { filter: brightness(.92); }

/* ===== Toast ===== */
.socialdock .socialdock-toast {
    position: absolute;
    margin-top: 8px;
    background: rgba(0, 0, 0, .9);
    color: #fff;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 12px;
    opacity: 0;
    transform: translateY(-4px);
    transition: all .18s ease;
}
.socialdock .socialdock-toast.show {
    opacity: 1;
    transform: translateY(0);
}

/* Basis: Icon-Größe unabhängig vom Label steuern */
.socialdock .sd-ic {
  /* skaliert NUR das Icon (SVG bleibt 1em innerhalb) */
  font-size: var(--sd-icon-size, 19px);
  width: 1em;
  height: 1em;
}

/* ===== Icon-only: kein Hintergrund, kein Rand – Labels bleiben ===== */
.socialdock[data-appearance="true"] .sd-btn {
  background: transparent !important;
  --sd-border-w: 0;
  box-shadow: none !important;
  padding: var(--sd-icon-pad, 0);   /* unsichtbare Klickfläche (0–8px) */
  gap: 8px;                         /* Abstand Icon ↔ Label */
  transform: none;
}

/* Icon im icon-only Modus größer machen */
.socialdock[data-appearance="true"] { --sd-icon-size: 26px; }
/* Optional pro Buttongröße feinabstimmen */
.socialdock[data-appearance="true"][data-size="s"] { --sd-icon-size: 17px; }
.socialdock[data-appearance="true"][data-size="m"] { --sd-icon-size: 22px; }
.socialdock[data-appearance="true"][data-size="l"] { --sd-icon-size: 29px; }

/* Fokus sichtbar (A11y) */
.socialdock[data-appearance="true"] .sd-btn:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Falls im icon-only Modus Brand-Farbe erzwungen werden soll */
.socialdock[data-appearance="true"][data-brand="fg"] .sd-btn { color: var(--sd-brand) !important; }
.socialdock[data-appearance="true"][data-brand="bg"] .sd-btn {
  background: transparent !important;
  border: 0 !important;
  /* wahlweise: color: var(--sd-brand) !important; */
}

/* 1) SVG darf über den ViewBox-Rand schauen (kein Clipping der Strokes) */
.socialdock .sd-ic svg {
  overflow: visible;        /* verhindert "angeschnittene" Kanten */
  display: block;
}

/* 2) Icon-Flexitem nicht schrumpfen lassen, immer genug Platz geben */
.socialdock .sd-ic {
  flex: 0 0 auto;           /* nicht zusammenquetschen */
  min-width: 1em;           /* nie kleiner als die Icon-Größe */
  min-height: 1em;
  padding: .08em;           /* optischer "Bleed" */
}

/* 3) Sicherheitshalber: Buttons haben wirklich kompakte Line-Box */
.socialdock .sd-btn { line-height: 1; }

/* 4) Im Icon-only Modus darf das Icon größer sein, ohne Clipping */
.socialdock[data-appearance="true"] { --sd-icon-size: 26px; }
.socialdock .sd-ic { font-size: var(--sd-icon-size, 19px); width: 1em; height: 1em; }

/* Icon-only Modus: Sicherheits-Inset */
.socialdock[data-appearance="true"]{
  --sd-edge-safety: 2px;         /* ggf. 1px–3px testen */
  padding-inline: var(--sd-edge-safety);
  overflow-x: clip;
}
@supports not (overflow-x: clip){
  .socialdock[data-appearance="true"]{ overflow-x: hidden; }
}

/* Monochrome Icons – sicher */
.socialdock .sd-ic svg,
.socialdock .sd-ic svg * {
  fill: currentColor !important;
  stroke: none !important;
}

/* Perfekte Kreise, wenn Option aktiv UND Labels komplett aus (kein Hoverlabel) */
.socialdock[data-round-icononly="true"]:not([data-labels="true"]):not([data-hoverlabel="true"]) .sd-btn {
  /* Kreisgröße: Icon + vertikales Padding */
  --sd-circle: calc(var(--sd-icon-size, 19px) + (var(--sd-pad-y) * 2));

  /* Equal-Width übersteuern: Breite = Höhe = --sd-circle */
  --sd-btn-w: var(--sd-circle);
  height: var(--sd-circle);

  /* gleiches Padding auf allen Seiten -> optisch zentriert */
  padding: var(--sd-pad-y);

  border-radius: 50%;
  gap: 0;                /* kein „Phantom“-Abstand */
  justify-content: center;
}

/* Optional: auch im icon-only Erscheinungsbild kreisrund */
.socialdock[data-appearance="true"][data-round-icononly="true"]:not([data-labels="true"]):not([data-hoverlabel="true"]) .sd-btn {
  border-radius: 50%;
}
/* Mini-Zeile: edel, freundlich, sehr kompakt */
.sd-item-mini{
  --sd-brand:#6c757d;           /* Fallback Brand */
  --sd-bg:#f6f8fc;              /* freundliches Hell */
  --sd-bd:#e6ecf5;              /* sanfte Linie */
  --sd-fg:#243449;              /* statt Schwarz: edles Slate */
  --sd-badge-bg-share:#eef3ff;  --sd-badge-fg-share:#2a5bd7;  --sd-badge-bd-share:#e2e9ff;
  --sd-badge-bg-link:#e8f7f1;   --sd-badge-fg-link:#0b7b54;   --sd-badge-bd-link:#d6f2e7;

  display:flex; align-items:center; gap:8px;
  padding:4px 8px; margin:2px 0;
  border:0px solid var(--sd-bd); border-radius:4px;
  background:var(--sd-bg); color:var(--sd-fg);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  font-size:12px; line-height:1.2; max-width:100%;
}
.sd-item-mini .sd-dot{ width:8px; height:8px; border-radius:50%; background:var(--sd-brand); flex:0 0 auto; }
.sd-item-mini .sd-badge{
  font-size:10px; font-weight:700; padding:2px 6px; border-radius:999px;
  border:1px solid var(--sd-bd);
}
.sd-item-mini.is-share .sd-badge{ background:var(--sd-badge-bg-share); color:var(--sd-badge-fg-share); border-color:var(--sd-badge-bd-share); }
.sd-item-mini.is-link  .sd-badge{ background:var(--sd-badge-bg-link);  color:var(--sd-badge-fg-link);  border-color:var(--sd-badge-bd-link);  }

.sd-item-mini .sd-text{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; min-width:0; }

/* Service-Namen hübsch anzeigen:
   - wenn kein Label gesetzt ist, erzeugen wir Text via ::after
   - Standard: capitalize
   - Ausnahmen (YouTube, Hacker News, LINE, VK, Web Share, etc.) */
.sd-item-mini .sd-svc::after{
  content: attr(data-svc);
  text-transform: capitalize;
  letter-spacing:.2px;
}

/* Ausnahmen/Mappings auf echte Markennamen */
.sd-item-mini.sd--youtube  .sd-svc::after{ content:"YouTube"; }
.sd-item-mini.sd--hn       .sd-svc::after{ content:"Hacker News"; }
.sd-item-mini.sd--line     .sd-svc::after{ content:"LINE"; }
.sd-item-mini.sd--vk       .sd-svc::after{ content:"VK"; }
.sd-item-mini.sd--xing     .sd-svc::after{ content:"XING"; }
.sd-item-mini.sd--webshare .sd-svc::after{ content:"Web Share"; }
.sd-item-mini.sd--x        .sd-svc::after{ content:"X"; }

/* Dark-Mode (freundlich, nicht pechschwarz) */
@media (prefers-color-scheme: dark){
  .sd-item-mini{
    --sd-bg:#818c9f; --sd-bd:#243449; --sd-fg:#e7ecf3;
    --sd-badge-bg-share:#11203f; --sd-badge-fg-share:#9fb6ff; --sd-badge-bd-share:#1a2a4a;
    --sd-badge-bg-link:#0f221b;  --sd-badge-fg-link:#86d6b7;  --sd-badge-bd-link:#153428;
  }
}

/* Brandfarbe nach Dienst (nur Variable setzen, dezente Dot-Farbe) */
.sd-item-mini.sd--x{--sd-brand:#111} .sd-item-mini.sd--facebook{--sd-brand:#1877f2}
.sd-item-mini.sd--linkedin{--sd-brand:#0a66c2} .sd-item-mini.sd--whatsapp{--sd-brand:#25d366}
.sd-item-mini.sd--telegram{--sd-brand:#24a1de} .sd-item-mini.sd--pinterest{--sd-brand:#e60023}
.sd-item-mini.sd--mail,.sd-item-mini.sd--copy,.sd-item-mini.sd--print,.sd-item-mini.sd--webshare{--sd-brand:#6c757d}
.sd-item-mini.sd--threads{--sd-brand:#000} .sd-item-mini.sd--bluesky{--sd-brand:#1185fe}
.sd-item-mini.sd--reddit{--sd-brand:#ff4500} .sd-item-mini.sd--hn{--sd-brand:#ff6600}
.sd-item-mini.sd--pocket{--sd-brand:#ef4056} .sd-item-mini.sd--flipboard{--sd-brand:#e12828}
.sd-item-mini.sd--vk{--sd-brand:#4c75a3} .sd-item-mini.sd--line{--sd-brand:#00c300}
.sd-item-mini.sd--weibo{--sd-brand:#e6162d} .sd-item-mini.sd--xing{--sd-brand:#026466}
.sd-item-mini.sd--mastodon{--sd-brand:#6364ff}
/* Link-Only & generisch */
.sd-item-mini.sd--instagram{--sd-brand:#E1306C} .sd-item-mini.sd--youtube{--sd-brand:#f00}
.sd-item-mini.sd--tiktok{--sd-brand:#000} .sd-item-mini.sd--github{--sd-brand:#24292e}
.sd-item-mini.sd--website,.sd-item-mini.sd--external{--sd-brand:#6c757d}


/* Auto-Label: Service-Namen hübsch darstellen, wenn kein eigenes Label gesetzt ist */
.sd-preview .sd-auto-label::after{
  content: attr(data-svc);
  text-transform: capitalize;
  letter-spacing: .2px;
}

/* Ausnahmen für Markennamen */
.sd-preview .sd-btn.sd-youtube  .sd-auto-label::after{ content: "YouTube"; }
.sd-preview .sd-btn.sd-hn       .sd-auto-label::after{ content: "Hacker News"; }
.sd-preview .sd-btn.sd-line     .sd-auto-label::after{ content: "LINE"; }
.sd-preview .sd-btn.sd-vk       .sd-auto-label::after{ content: "VK"; }
.sd-preview .sd-btn.sd-xing     .sd-auto-label::after{ content: "XING"; }
.sd-preview .sd-btn.sd-webshare .sd-auto-label::after{ content: "Web Share"; }
.sd-preview .sd-btn.sd-x        .sd-auto-label::after{ content: "X"; }

/* Kompakter machen, damit die Zeile wenig Platz braucht (ohne die Parent-Optik zu brechen) */
.sd-preview .sd-btn{
  padding: 6px 10px;       /* etwas schlanker */
  gap: 6px;                /* engerer Abstand Icon/Label */
  font-size: 13px;         /* kompakt, aber lesbar */
}
.sd-preview .sd-ic { font-size: var(--sd-icon-size, 19px); }

/* Legenden-Container kompakt lassen */
.sd-edit-inline{ display:flex; align-items:center; gap:8px; max-width:100%; }

/* Button im Editor kompakt */
.sd-preview .sd-btn{ padding:4px 8px; gap:6px; font-size:12px; }
.sd-preview .sd-ic { font-size:var(--sd-icon-size, 19px); }
.sd-preview .sd-lb { font-size: var(--sd-label-size, 14px); }

/* Kleine Legende: „Share/Link · Service“ */
.sd-edit-legend{
  --fg:#2a394d; --bd:#e6ecf5; --bg:#f6f8fc;
  --fgShare:#2a394d; /* vorher fast weiß → schlechte Lesbarkeit */
  --fgLink:#0b7b54;

  display:inline-flex; align-items:center; gap:4px;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  font-size:11px; line-height:1.1; color:var(--fg);
  padding:2px 6px; border:1px solid var(--bd); border-radius:8px; background:var(--bg);
  white-space:nowrap; max-width:100%;
}

.sd-edit-legend .sd-legend-mode{
  font-weight:700;
  /* Modus-Farbe */
}
.sd-edit-legend.is-share .sd-legend-mode{ color:var(--fgShare); }
.sd-edit-legend.is-link  .sd-legend-mode{ color:var(--fgLink); }

.sd-edit-legend .sd-legend-sep{ opacity:.5; }

/* 👉 Dienst-Name: etwas größer & fett, damit er sofort erkennbar ist */
.sd-edit-legend .sd-legend-svc{
  font-size:11px;
  font-weight:700;
  overflow:hidden; text-overflow:ellipsis; max-width:32ch;
  text-transform:capitalize; /* hübscher als alles klein */
}

/* 👉 Falls KEIN Label im HTML steht, nimm data-svc als Fallback-Text */
.sd-edit-legend .sd-legend-svc:empty::after{
  content: attr(data-svc);
  text-transform: capitalize;
  letter-spacing:.2px;
}

/* Markennamen-Sonderfälle für den Fallback-Text */
.sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="youtube"]::after,
.sd-edit-legend .sd-legend-svc[data-label=""][data-svc="youtube"]::after{ content:"YouTube"; }
.sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="hn"]::after,
.sd-edit-legend .sd-legend-svc[data-label=""][data-svc="hn"]::after{ content:"Hacker News"; }
.sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="line"]::after,
.sd-edit-legend .sd-legend-svc[data-label=""][data-svc="line"]::after{ content:"LINE"; }
.sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="vk"]::after,
.sd-edit-legend .sd-legend-svc[data-label=""][data-svc="vk"]::after{ content:"VK"; }
.sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="xing"]::after,
.sd-edit-legend .sd-legend-svc[data-label=""][data-svc="xing"]::after{ content:"XING"; }
.sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="webshare"]::after,
.sd-edit-legend .sd-legend-svc[data-label=""][data-svc="webshare"]::after{ content:"Web Share"; }
.sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="x"]::after,
.sd-edit-legend .sd-legend-svc[data-label=""][data-svc="x"]::after{ content:"X"; }

#stacks_in_292 {
	background-color: rgba(241, 221, 169, 1.00);
}

#stacks_in_294 {
	margin: 40px 0px 0px 0px;
	padding: 20px 20px 0px 20px;
}
:root {
  --multi_columns_stacks_in_297:1fr 1fr 1fr;
}
#multi_columns_stacks_in_297 {
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: var(--multi_columns_stacks_in_297);
  grid-gap: 16px;
  
  align-items: center;
  
  
  
  
}
#multi_columns_stacks_in_297 > div {
  min-width: 0;
}
#multi_columns_stacks_in_297 + .deluxe-columns {
  margin-top: 16px;
}
#multi_columns_stacks_in_297 > div img {
  max-width: 100%;
}
#multi_columns_stacks_in_297 > div:not(.nav-column):not(.column-sticky) {
  position: relative;
}



@media all and (min-width: 901px) {
  #multi_columns_stacks_in_297 .hide-mobile {
    display: inherit;
  }
  #multi_columns_stacks_in_297 .hide-tablet {
    display: inherit;
  }
  #multi_columns_stacks_in_297 .hide-mobile {
    display: inherit;
  }
  #multi_columns_stacks_in_297 .hide-desktop {
    display: none;
  }
}
@media all and (max-width: 900px) and (min-width: 501px) {
  #multi_columns_stacks_in_297 .column-tablet-top {
    grid-row: 1;
  }
  #multi_columns_stacks_in_297 .hide-desktop {
    display: inherit;
  }
  #multi_columns_stacks_in_297 .hide-mobile {
    display: inherit;
  }
  #multi_columns_stacks_in_297 .hide-tablet {
    display: none;
  }
}
@media all and (max-width: 500px) {
  #multi_columns_stacks_in_297 .column-mobile-top {
    grid-row: 1;
  }
  #multi_columns_stacks_in_297 .hide-tablet {
    display: inherit;
  }
  #multi_columns_stacks_in_297 .hide-desktop {
    display: inherit;
  }
  #multi_columns_stacks_in_297 .hide-mobile {
    display: none;
  }
}

@media all and (max-width: 900px) {
  #multi_columns_stacks_in_297 {
    grid-template-columns: repeat(1, 1fr);
    
  }
  #multi_columns_stacks_in_297 + .deluxe-columns {
    
  }
  #multi_columns_stacks_in_297 > div:last-child {
    grid-column: span 1;
  }
  
  #multi_columns_stacks_in_297 > div > * {position: relative;}
  #multi_columns_stacks_in_297 > div > * > * {transform: translate(0,0);}
  
}
@media all and (max-width: 500px) {
  #multi_columns_stacks_in_297 {
    grid-template-columns: repeat(1, 1fr);
  }
  #multi_columns_stacks_in_297 > div:last-child {
    grid-column: span 1;
  }
  
  #multi_columns_stacks_in_297 > div > * {position: relative;}
  #multi_columns_stacks_in_297 > div > * > * {transform: translate(0,0);}
  
}


#stacks_in_308 {
	padding: 40px 20px 20px 20px;
}

#stacks_in_311 {
	padding: 20px 20px 20px 20px;
}

#stacks_in_303 {
	padding: 40px 0px 0px 0px;
}

#stacks_in_306 {
	padding: 20px 20px 20px 20px;
}

#stacks_in_298 {
	padding: 0px 20px 20px 20px;
}

#stacks_in_301 {
	padding: 20px 20px 20px 20px;
}
:root {
  --multi_columns_stacks_in_313:1fr 1fr;
}
#multi_columns_stacks_in_313 {
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: var(--multi_columns_stacks_in_313);
  grid-gap: 16px;
  
  align-items: center;
  
  
  
  
}
#multi_columns_stacks_in_313 > div {
  min-width: 0;
}
#multi_columns_stacks_in_313 + .deluxe-columns {
  margin-top: 16px;
}
#multi_columns_stacks_in_313 > div img {
  max-width: 100%;
}
#multi_columns_stacks_in_313 > div:not(.nav-column):not(.column-sticky) {
  position: relative;
}



@media all and (min-width: 901px) {
  #multi_columns_stacks_in_313 .hide-mobile {
    display: inherit;
  }
  #multi_columns_stacks_in_313 .hide-tablet {
    display: inherit;
  }
  #multi_columns_stacks_in_313 .hide-mobile {
    display: inherit;
  }
  #multi_columns_stacks_in_313 .hide-desktop {
    display: none;
  }
}
@media all and (max-width: 900px) and (min-width: 501px) {
  #multi_columns_stacks_in_313 .column-tablet-top {
    grid-row: 1;
  }
  #multi_columns_stacks_in_313 .hide-desktop {
    display: inherit;
  }
  #multi_columns_stacks_in_313 .hide-mobile {
    display: inherit;
  }
  #multi_columns_stacks_in_313 .hide-tablet {
    display: none;
  }
}
@media all and (max-width: 500px) {
  #multi_columns_stacks_in_313 .column-mobile-top {
    grid-row: 1;
  }
  #multi_columns_stacks_in_313 .hide-tablet {
    display: inherit;
  }
  #multi_columns_stacks_in_313 .hide-desktop {
    display: inherit;
  }
  #multi_columns_stacks_in_313 .hide-mobile {
    display: none;
  }
}

@media all and (max-width: 900px) {
  #multi_columns_stacks_in_313 {
    grid-template-columns: repeat(1, 1fr);
    
  }
  #multi_columns_stacks_in_313 + .deluxe-columns {
    
  }
  #multi_columns_stacks_in_313 > div:last-child {
    grid-column: span 1;
  }
  
  #multi_columns_stacks_in_313 > div > * {position: relative;}
  #multi_columns_stacks_in_313 > div > * > * {transform: translate(0,0);}
  
}
@media all and (max-width: 500px) {
  #multi_columns_stacks_in_313 {
    grid-template-columns: repeat(1, 1fr);
  }
  #multi_columns_stacks_in_313 > div:last-child {
    grid-column: span 1;
  }
  
  #multi_columns_stacks_in_313 > div > * {position: relative;}
  #multi_columns_stacks_in_313 > div > * > * {transform: translate(0,0);}
  
}


#stacks_in_317 {
	padding:  20px;
}

#stacks_in_314 {
	padding:  20px;
}
/* FancyLine Stack v1.2.2 */


#stacks_in_320 hr {
	height: 0;
	border: 0;
	 margin: 0;
    padding: 0;
	border-top-width: 1px;
	
	
	
	
	
	
	
	 border-top-style: double;
	
	border-top-color: #5078AF;
	
	
	 background: #31506A;
	
	
}
	


*:first-child+html #stacks_in_320 hr, * html  #stacks_in_320 hr {height: 1px /*IE7*/;}
* html  #stacks_in_320 hr {line-height: 1px /*IE6*/;}
/* End of FancyLine stack */
#stacks_in_320 {
	margin: 40px 0px 0px 0px;
}

#stacks_in_321 {
	margin: 40px 0px 0px 0px;
	padding: 20px 20px 0px 20px;
}
:root {
  --multi_columns_stacks_in_323:minmax(320px,min-content) minmax(320px,min-content) minmax(320px,min-content);
}
#multi_columns_stacks_in_323 {
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: var(--multi_columns_stacks_in_323);
  grid-gap: 0px;
  
  align-items: center;
  
  
  justify-content: center;
  
}
#multi_columns_stacks_in_323 > div {
  min-width: 0;
}
#multi_columns_stacks_in_323 + .deluxe-columns {
  margin-top: 0px;
}
#multi_columns_stacks_in_323 > div img {
  max-width: 100%;
}
#multi_columns_stacks_in_323 > div:not(.nav-column):not(.column-sticky) {
  position: relative;
}



@media all and (min-width: 901px) {
  #multi_columns_stacks_in_323 .hide-mobile {
    display: inherit;
  }
  #multi_columns_stacks_in_323 .hide-tablet {
    display: inherit;
  }
  #multi_columns_stacks_in_323 .hide-mobile {
    display: inherit;
  }
  #multi_columns_stacks_in_323 .hide-desktop {
    display: none;
  }
}
@media all and (max-width: 900px) and (min-width: 501px) {
  #multi_columns_stacks_in_323 .column-tablet-top {
    grid-row: 1;
  }
  #multi_columns_stacks_in_323 .hide-desktop {
    display: inherit;
  }
  #multi_columns_stacks_in_323 .hide-mobile {
    display: inherit;
  }
  #multi_columns_stacks_in_323 .hide-tablet {
    display: none;
  }
}
@media all and (max-width: 500px) {
  #multi_columns_stacks_in_323 .column-mobile-top {
    grid-row: 1;
  }
  #multi_columns_stacks_in_323 .hide-tablet {
    display: inherit;
  }
  #multi_columns_stacks_in_323 .hide-desktop {
    display: inherit;
  }
  #multi_columns_stacks_in_323 .hide-mobile {
    display: none;
  }
}

@media all and (max-width: 900px) {
  #multi_columns_stacks_in_323 {
    grid-template-columns: repeat(1, 1fr);
    
  }
  #multi_columns_stacks_in_323 + .deluxe-columns {
    
  }
  #multi_columns_stacks_in_323 > div:last-child {
    grid-column: span 1;
  }
  
  #multi_columns_stacks_in_323 > div > * {position: relative;}
  #multi_columns_stacks_in_323 > div > * > * {transform: translate(0,0);}
  
}
@media all and (max-width: 500px) {
  #multi_columns_stacks_in_323 {
    grid-template-columns: repeat(1, 1fr);
  }
  #multi_columns_stacks_in_323 > div:last-child {
    grid-column: span 1;
  }
  
  #multi_columns_stacks_in_323 > div > * {position: relative;}
  #multi_columns_stacks_in_323 > div > * > * {transform: translate(0,0);}
  
}


#stacks_in_330 {
	padding: 0px 20px 20px 20px;
}

#stacks_in_327 {
	padding: 0px 20px 20px 20px;
}

#stacks_in_324 {
	padding: 0px 20px 20px 20px;
}

.spacerStack {
	height: 40.00px;
}

#spacerStackstacks_in_333 {
	height: 40.00px;
}




























@media print {
	#spacerStackstacks_in_333 {
		display: none !important;
	}
}
/* 
 * Simple Headers
 * Author: Jeremy Hawes
 * Website: http://onelittledesigner.com/rapidweaver-stack/simple-headers/
 * Support: http://forum.onelittledesigner.com
 * Verson: 1.2.3
 */

#simpleHeaders_stacks_in_334.headerInheritStylesOff,
#simpleHeaders_stacks_in_334.headerInheritStylesOff h1,
#simpleHeaders_stacks_in_334.headerInheritStylesOff h2,
#simpleHeaders_stacks_in_334.headerInheritStylesOff h3,
#simpleHeaders_stacks_in_334.headerInheritStylesOff h4,
#simpleHeaders_stacks_in_334.headerInheritStylesOff h5,
#simpleHeaders_stacks_in_334.headerInheritStylesOff h6 {
	font-size: 18px;
	font-weight: normal;
	text-decoration: none;
	font-style: normal;
	text-align: left;
	letter-spacing: 0px;
}
#simpleHeaders_stacks_in_334.headerInheritStylesOff.lineHeightOn,
#simpleHeaders_stacks_in_334.headerInheritStylesOff.lineHeightOn h1,
#simpleHeaders_stacks_in_334.headerInheritStylesOff.lineHeightOn h2,
#simpleHeaders_stacks_in_334.headerInheritStylesOff.lineHeightOn h3,
#simpleHeaders_stacks_in_334.headerInheritStylesOff.lineHeightOn h4,
#simpleHeaders_stacks_in_334.headerInheritStylesOff.lineHeightOn h5,
#simpleHeaders_stacks_in_334.headerInheritStylesOff.lineHeightOn h6 {
	line-height: 18px;
}
#simpleHeaders_stacks_in_334.headerInheritColorsOff,
#simpleHeaders_stacks_in_334.headerInheritColorsOff a,
#simpleHeaders_stacks_in_334.headerInheritColorsOff a h1,
#simpleHeaders_stacks_in_334.headerInheritColorsOff a h2,
#simpleHeaders_stacks_in_334.headerInheritColorsOff a h3,
#simpleHeaders_stacks_in_334.headerInheritColorsOff a h4,
#simpleHeaders_stacks_in_334.headerInheritColorsOff a h5,
#simpleHeaders_stacks_in_334.headerInheritColorsOff a h6,
#simpleHeaders_stacks_in_334.headerInheritColorsOff h1,
#simpleHeaders_stacks_in_334.headerInheritColorsOff h2,
#simpleHeaders_stacks_in_334.headerInheritColorsOff h3,
#simpleHeaders_stacks_in_334.headerInheritColorsOff h4,
#simpleHeaders_stacks_in_334.headerInheritColorsOff h5,
#simpleHeaders_stacks_in_334.headerInheritColorsOff h6 {
	color: #169EE6;
}
#simpleHeaders_stacks_in_334.headerInheritColorsOff:hover,
#simpleHeaders_stacks_in_334.headerInheritColorsOff a:hover,
#simpleHeaders_stacks_in_334.headerInheritColorsOff a:hover h1,
#simpleHeaders_stacks_in_334.headerInheritColorsOff a:hover h2,
#simpleHeaders_stacks_in_334.headerInheritColorsOff a:hover h3,
#simpleHeaders_stacks_in_334.headerInheritColorsOff a:hover h4,
#simpleHeaders_stacks_in_334.headerInheritColorsOff a:hover h5,
#simpleHeaders_stacks_in_334.headerInheritColorsOff a:hover h6,
#simpleHeaders_stacks_in_334.headerInheritColorsOff h1:hover,
#simpleHeaders_stacks_in_334.headerInheritColorsOff h2:hover,
#simpleHeaders_stacks_in_334.headerInheritColorsOff h3:hover,
#simpleHeaders_stacks_in_334.headerInheritColorsOff h4:hover,
#simpleHeaders_stacks_in_334.headerInheritColorsOff h5:hover,
#simpleHeaders_stacks_in_334.headerInheritColorsOff h6:hover {
	color: #FF6600;
}

#stacks_in_336 {
	padding: 0px 35px 35px 35px;
}
#stacks_in_8{visibility:hidden}