:root{
  --brand:#5d7b80; /* taken from logo tone */
  --brand-ink:#254045;
  --ink:#1f2a2e;
  --muted:#6b7a80;
  --bg:#f7fafb;
  --card:#ffffff;
  --ring: rgba(93,123,128,.2);
  --radius:16px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand-ink);text-decoration:none}
a:hover{text-decoration:underline}

.container{width:min(1100px,92%);margin-inline:auto}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.readable{max-width:900px}
.sr-only{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* Header */
.site-header{
  position:sticky;
  top:0;
  background:#fff;
  border-bottom:1px solid #e5eef1;
  z-index:50
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0.8rem 0
}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:700}
.brand-name{text-transform:lowercase;font-size:1.25rem;color:var(--brand-ink)}
.main-nav ul{
  display:flex;
  align-items:center;
  gap:1rem;
  list-style:none;
  margin:0;
  padding:0
}
.main-nav .cta a{
  background:var(--brand);
  color:#fff;
  padding:.6rem 1rem;
  border-radius:999px
}
.main-nav .nav-toggle{display:none}

/* Hero */
.hero{
  background:linear-gradient(180deg,#fff,#f3f7f8)
}
.hero-inner{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:2rem;
  align-items:center;
  padding:2.5rem 0
}
.hero-copy h1{
  font-size:2rem;
  line-height:1.2;
  margin:0 0 .6rem
}
.hero-bullets{margin:.8rem 0 1.2rem 1.2rem}
.hero-cta .btn{margin-right:.6rem}
.trust{color:var(--muted);font-size:.95rem}

/* Buttons */
.btn{
  display:inline-block;
  padding:.8rem 1rem;
  border-radius:12px;
  border:1px solid var(--brand);
}
.btn.primary{
  background:var(--brand);
  border-color:var(--brand);
  color:#fff;
  cursor:pointer;
}
.btn.ghost{
  background:#fff;
  color:var(--brand-ink);
}
.more{font-weight:600}

/* Check-Liste */
.check{list-style:none;padding-left:1.2rem}
.check li{position:relative;margin:.2rem 0}
.check li::before{
  content:"✓";
  position:absolute;
  left:-1.2rem;
  color:var(--brand)
}

/* Karten-Layout */
.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.2rem
}
.card.price .price-tag{
  font-size:1.4rem;
  font-weight:700;
  margin-top:.8rem
}

/* Typografie in Sektionen */
.features h2,
.pricing h2,
.cta h2{margin-top:2rem}

/* Allgemeine Box / Aside */
.aside{
  background:var(--card);
  border:1px solid #e5eef1;
  border-radius:var(--radius);
  padding:1rem
}

/* Logos-Band (VMware, SQL, …) */
.logos-band{
  padding:1rem 0;
  border-top:1px solid #e5eef1;
  border-bottom:1px solid #e5eef1;
  background:#fff;
}
.logos-band ul{
  display:flex;
  gap:1.5rem;
  list-style:none;
  justify-content:center;
  margin:0;
  padding:0;
  color:var(--muted);
  flex-wrap:wrap;
}

/* Page-Hero */
.page-hero{
  background:#fff;
  padding:2rem 0;
  border-bottom:1px solid #e5eef1
}
.page-hero.narrow{padding:1.2rem 0}

/* Service-Artikel */
.service-sections article{
  background:var(--card);
  border:1px solid #e5eef1;
  border-radius:var(--radius);
  padding:1rem;
  margin:1rem 0
}

/* Preis-Grid */
.pricing .cards{grid-template-columns:repeat(3,1fr)}

/* Testimonials */
.testimonials .cards{grid-template-columns:repeat(2,1fr)}

/* Kontakt / Karte */
.contact .map-placeholder{
  background:#f0f4f6;
  border:1px dashed #c6d3d8;
  border-radius:12px;
  padding:2rem;
  text-align:center;
  color:var(--muted)
}

/* Formular-Felder */
.field{margin-bottom:.8rem}
.field input,
.field textarea{
  width:100%;
  padding:.7rem;
  border:1px solid #cdd8dc;
  border-radius:10px;
  outline:0
}
.field input:focus,
.field textarea:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px var(--ring)
}

/* Footer */
.site-footer{
  margin-top:2rem;
  padding:2rem 0;
  background:#fff;
  border-top:1px solid #e5eef1;
  font-size:.95rem
}
.site-footer h4{margin-top:0}
.site-footer ul{
  list-style:none;
  padding:0;
  margin:0
}
.site-footer .legal{
  padding-top:1.2rem;
  color:var(--muted);
  border-top:1px solid #e5eef1;
  margin-top:1.2rem
}

/* Newsletter */
.newsletter-form{
  display:flex;
  gap:.5rem
}
.newsletter-form input{flex:1}

/* Responsive bis 980px */
@media (max-width:980px){
  .grid-2{grid-template-columns:1fr}
  .grid-3,
  .cards{grid-template-columns:1fr}
  .hero-inner{grid-template-columns:1fr}
  .main-nav ul{
    display:none;
    position:absolute;
    right:1rem;
    top:60px;
    background:#fff;
    border:1px solid #e5eef1;
    border-radius:12px;
    padding:1rem;
    flex-direction:column;
    min-width:220px
  }
  .main-nav .nav-toggle{
    display:inline-block;
    background:#fff;
    border:1px solid #cdd8dc;
    padding:.5rem .7rem;
    border-radius:10px
  }
}

/* Karten & Bilder – einheitlicher Stil */
.card,
.feature-card,
.service-card{
  background-color:#fff;
  border-radius:12px;
  border:1px solid rgba(0,0,0,0.08);
  box-shadow:0 4px 15px rgba(0,0,0,0.06);
  transition:transform 0.3s ease,box-shadow 0.3s ease;
  padding: 1.2rem 1.3rem;
}
.card:hover,
.feature-card:hover,
.service-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 25px rgba(0,0,0,0.12);
}

/* Dev-Flex Layout (Tools & Automatisierung) */
.dev-flex{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:2rem;
  flex-wrap:wrap;
}
.dev-flex .dev-text{
  flex:1 1 60%;
  min-width:280px;
}
.dev-flex .dev-image{
  flex:0 0 300px;
  margin:0;
}
.dev-flex .dev-image img{
  display:block;
  width:100%;
  height:auto;
}

/* Branchen-Bilder innerhalb von Grid-3 */
.container.grid-3 article img{
  display:block;
  margin:0 auto .75rem auto;
  max-width:80%;
  height:auto;
}

/* Gemeinsamer Bildstil (Hero, Branchen, Dev-Image) */
.hero-image img,
.container.grid-3 article img,
.dev-flex .dev-image img{
  border-radius:12px;
  border:1px solid var(--brand);
  box-shadow:0 6px 18px rgba(93,123,128,0.15);
  background-color:#fff;
  padding:4px;
  transition:transform 0.3s ease,box-shadow 0.3s ease,border-color 0.3s ease;
  max-width:100%;
  height:auto;
}
.hero-image img:hover,
.container.grid-3 article img:hover,
.dev-flex .dev-image img:hover{
  transform:translateY(-4px);
  border-color:var(--brand-ink);
  box-shadow:
    0 12px 28px rgba(93,123,128,0.25),
    0 0 0 4px rgba(93,123,128,0.08);
}

/* Dev-Flex mobil: Bild unter Text */
@media (max-width:768px){
  .dev-flex{flex-direction:column}
  .dev-flex .dev-image{align-self:center}
}

/* Cookie-Banner */
.cookie-banner{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  background:#fff;
  border-top:2px solid var(--brand);
  box-shadow:0 -2px 10px rgba(0,0,0,0.1);
  padding:1rem 1.2rem;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  z-index:1000;
  font-size:.95rem;
}
.cookie-banner p{
  margin:0;
  flex:1 1 70%;
  color:var(--ink);
}
.cookie-banner button{
  background:var(--brand);
  color:#fff;
  border:none;
  border-radius:8px;
  padding:.6rem 1rem;
  cursor:pointer;
  font-weight:600;
}
.cookie-banner button:hover{background:var(--brand-ink)}

/* Hero-Buttons (CTA) */
.hero-cta{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
}
.hero-cta .btn{
  flex:1 1 auto;
  text-align:center;
  min-width:180px;
}

/* Kleine Links / Zusatztexte */
.service-sections .small-links{
  margin-top:.75rem;
  font-size:.9rem;
}
.smallest{
  margin-top:.75rem;
  font-size:.75rem;
}

/* Links im Fließtext – Highlight / "mehr"-Chip */
a.more{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  font-weight:600;
  color:var(--brand-ink);
  text-decoration:none;
  padding:.3rem .8rem;
  border-radius:999px;
  border:1px solid rgba(5,82,124,0.25);
  background:rgba(5,82,124,0.04);
  transition:background .15s ease,box-shadow .15s ease,transform .15s ease;
  white-space:nowrap;
}
a.more::after{
  content:"↗";
  font-size:.85em;
}
a.more:hover,
a.more:focus-visible{
  background:rgba(0,255,0,0.08);
  box-shadow:0 4px 12px rgba(5,82,124,0.25);
  transform:translateY(-1px);
  outline:none;
}

/* Referenz-Hervorhebung */
.reference-card{position:relative}
.reference-card.highlight-target,
.service-sections article.highlight-target,
.blog-list article.highlight-target{
  box-shadow:
    0 0 0 2px var(--brand-ink),
    0 12px 30px rgba(0,255,0,0.25);
  background:#eeffee;
  animation:highlightPulse 1.2s ease-out 1;
}
@keyframes highlightPulse{
  0%{
    box-shadow:
      0 0 0 0 rgba(0,255,0,0.5),
      0 16px 40px rgba(0,255,0,0.3);
  }
  100%{
    box-shadow:
      0 0 0 2px rgba(0,255,0,0),
      0 6px 16px rgba(0,255,0,0.15);
  }
}

/* Blog-Übersicht */
.blog-list{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
  gap:2rem;
  justify-content:center;
}
.meta-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;

  font-size: .85rem;
  font-weight: 500;
  color: var(--muted);

  background: rgba(93,123,128,0.08);        /* dein Brand-Ton sehr leicht */
  border: 1px solid rgba(93,123,128,0.15);  /* feiner Border */
  padding: .35rem .65rem;
  border-radius: 999px;                     /* Pill-Badge */

  box-shadow: 0 1px 3px rgba(0,0,0,0.06);   /* sehr leicht */
  white-space: nowrap;                      /* keine Umbrüche */
}

/* Blog-Karten (vereinheitlicht) */
.blog-card{
  background:#ffffff;
  border:1px solid rgba(0,0,0,0.08);
  border-radius:12px;
  padding:1.4rem;
  box-shadow:0 2px 6px rgba(0,0,0,0.06);
  transition:box-shadow 0.2s ease,transform 0.2s ease;
  cursor:pointer;
}
.blog-card:hover{
  box-shadow:0 6px 16px rgba(0,0,0,0.12);
  transform:translateY(-2px);
}
.blog-card h2{
  margin-top:0;
  font-size:1.25rem;
}
.blog-card.highlight-target{
  border-color:var(--brand-ink);
  background:#eeffee;
  box-shadow:
    0 0 0 2px var(--brand-ink),
    0 12px 30px rgba(0,255,0,0.25);
  animation:highlightPulse 1.2s ease-out 1;
}

/* Blog-Kategorien / Überschriften */
.blog-category{
  margin-top:4rem;
  margin-bottom:2rem;
}
.blog-section-heading{
  font-size:1.8rem;
  font-weight:600;
  margin-bottom:1.5rem;
  padding-bottom:.5rem;
  border-bottom:2px solid #e5eef1;
  color:#2a3b47;
}

/* Region-Links (Münster / Rheine) */
.region-links{
  margin:.5rem 0 1rem;
  font-size:.9rem;
  line-height:1.4;
}
.region-links .small-region-link a{
  font-size:.85rem;
  opacity:.75;
}
.region-links .small-region-link a:hover{opacity:1}

/* Aktiver Navi-Link */
.active{text-decoration:underline}

/* Kontaktformular: Select & Checkbox-Layout */
.contact-form select{
  width:100%;
  padding:12px 16px;
  border:1px solid #ddd;
  border-radius:8px;
  background:#fff;
  font-size:1rem;
  font-family:inherit;
  color:#333;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  cursor:pointer;
  transition:border-color 0.2s,box-shadow 0.2s;
}
.contact-form select:hover{border-color:#bbb}
.contact-form select:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(0,122,255,0.15);
  outline:none;
}

/* eigener Pfeil für Select */
.contact-form .field{position:relative}
.contact-form .field select{padding-right:40px}
.contact-form .field::after{
  content:"";
  position:absolute;
  right:16px;
  top:50%;
  width:12px;
  height:12px;
  pointer-events:none;
  transform:translateY(-50%);
  background-image:url("data:image/svg+xml;utf8,<svg fill='%23666' height='12' width='12' xmlns='http://www.w3.org/2000/svg'><path d='M2 4l4 4 4-4z'/></svg>");
  background-size:12px;
  background-repeat:no-repeat;
}

/* Checkbox-Felder */
.contact-form .field.checkbox-field{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:10px;
}
.contact-form .checkbox-field input[type="checkbox"]{
  margin-top:4px;
  width:18px;
  height:18px;
  cursor:pointer;
}
.contact-form .checkbox-field label{
  display:block;
  font-size:.95rem;
  line-height:1.4;
  cursor:pointer;
}

/* Links im Formular */
.contact-form a,
.checkbox-field a{
  color:var(--primary);
  text-decoration:underline;
  text-underline-offset:2px;
  font-weight:500;
}
.contact-form a:hover,
.checkbox-field a:hover{
  text-decoration-thickness:2px;
}

/* --- MOBILE FEINTUNING (<= 600px) --- */
@media (max-width:600px){
  /* Hero kompakter + Bild oben */
  .hero-inner{
    display:flex;
    flex-direction:column;
    gap:1.2rem;
    padding:1.6rem 0 2.2rem;
  }
  .hero-image{
    order:-1;
    max-width:260px;
    margin:0 auto .5rem;
  }
  .hero-image img{
    width:100%;
    height:auto;
  }
  .hero-copy h1{
    font-size:1.5rem;
    line-height:1.3;
    margin-bottom:.4rem;
  }
  .hero-copy p{
    font-size:.98rem;
  }
  .hero-bullets{
    margin:.8rem 0 1rem 1rem;
  }

  /* Logos-Band enger & ZENTRIERT */
  .logos-band{
    padding:.6rem 0;
    text-align:center;
  }
  .logos-band ul{
    gap:.8rem;
    font-size:.85rem;
    justify-content:center; /* zentriert auf Mobile */
  }
  .logos-band li{
    white-space:nowrap;
  }
}
/* Dropdown-Menü unter "Leistungen" – Desktop */
.main-nav li {
  position: relative;
}

/* Elternlink */
.main-nav .has-submenu > .nav-parent {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem;
}

/* kleines Pfeilchen */
.main-nav .has-submenu > .nav-parent::after {
  content: "▾";
  font-size: 0.7em;
  margin-left: 0.3rem;
}

/* Untermenü-Box (Desktop) */
.main-nav .submenu {
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 0;
  min-width: 230px;
  background: #fff;
  border: 1px solid #e5eef1;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  padding: 0.4rem 0;
  list-style: none;
  display: none;
  z-index: 100;
}

.main-nav .submenu li a {
  display: block;
  padding: 0.45rem 0.9rem;
  font-size: 0.95rem;
  white-space: nowrap;
}

.main-nav .submenu li a:hover {
  background: #f3f7f8;
  text-decoration: none;
}

/* Desktop: Hover/Fokus öffnet Untermenü */
.main-nav .has-submenu:hover > .submenu,
.main-nav .has-submenu:focus-within > .submenu {
  display: block;
}

/* --- MOBIL (<= 980px): Untermenü optisch einrücken + per JS öffnen --- */
@media (max-width:980px) {
  /* Hauptmenüeinträge im mobilen Dropdown */
  .main-nav ul {
    align-items: stretch;
    text-align: left;
  }

  .main-nav ul > li > a {
    display: block;
    padding: 0.4rem 0;
  }

  /* Parent "Leistungen" im mobilen Menü */
  .main-nav .has-submenu > .nav-parent {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0;
  }

  /* Untermenü im mobilen Zustand: eingerückt & als Block sichtbar */
  .main-nav .submenu {
    position: static;
    box-shadow: none;
    border: none;
    margin-top: 0.2rem;
    padding: 0.2rem 0 0.4rem 1.2rem;
    border-left: 2px solid #e5eef1;
    display: none;
  }

  .main-nav .submenu li a {
    padding: 0.25rem 0;
    font-size: 0.9rem;
    opacity: 0.9;
  }

  /* Hover auf Mobil deaktivieren – nur JS-Toggle */
  .main-nav .has-submenu:hover > .submenu,
  .main-nav .has-submenu:focus-within > .submenu {
    display: none;
  }

  /* Wird von JS gesetzt: .submenu-open zeigt das Untermenü */
  .main-nav .has-submenu.submenu-open > .submenu {
    display: block;
  }
}

/* Kleine Blog-Badge / Patch für Blog-Links */
.blog-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;

  font-size: 0.7rem;
  font-weight: 500;
  color: var(--brand-ink);

  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(93,123,128,0.25);
  background: rgba(256,123,128,0.05);

  text-decoration: none;
  white-space: nowrap;
}

.blog-chip:hover,
.blog-chip:focus-visible {
  background: rgba(256,123,128,0.12);
  text-decoration: none;
  outline: none;
}

.blog-chip-icon {
  font-size: 0.7rem;
  line-height: 1;
}

/* Variante für Einbindung in Fließtext (weniger Abstand nach oben/unten) */
.blog-chip-inline {
  margin-left: 0.35rem;
}

/* Variante für Kacheln / Boxen (eigene Zeile, etwas Luft nach oben) */
.blog-chip-block {
  display: inline-flex;
  margin-top: 0.4rem;
}

.blog-chip[data-tip] {
  position: relative;
}

.blog-chip[data-tip]:hover::after,
.blog-chip[data-tip]:focus-visible::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  
  background: #1f2a2e;
  color: #fff;
  font-size: 0.75rem;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;

  opacity: 0.5;
  pointer-events: none;

  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.blog-chip[data-tip]::after {
  opacity: 50;
  transition: opacity 0.15s ease;
}

/* Mini-Blog-Box neben der Service-Überschrift */
.service-blog-box {
  background: var(--card);
  border: 1px solid #e5eef1;
  padding: 1rem 1.2rem;
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);

  max-width: 280px;
  margin-left: auto;
  margin-top: 0.5rem;
}

.service-blog-box h4 {
  margin: 0 0 0.6rem;
  font-size: 1.05rem;
  color: var(--brand-ink);
  display: flex;
  align-items: center;
  gap: .4rem;
}

.service-blog-box ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.service-blog-box li {
  margin: .35rem 0;
}

.service-blog-box a {
}

@media(max-width: 900px){
  /* auf mobilen Geräten unter der Überschrift anzeigen */
  .service-blog-box {
    margin: 1.2rem 0 0 0;
    max-width: 100%;
  }
}
/* Layout: Überschrift + Intro links, Blogbox rechts */
.hero-with-box {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
}

/* Linker Textbereich */
.hero-with-box .hero-text {
  flex: 1 1 auto;
  min-width: 0;
}

/* Rechte Box fixiert auf max 280px */
.hero-with-box .service-blog-box {
  flex: 0 0 280px;
  margin: 0;
}

/* Mobil: untereinander */
@media (max-width: 900px) {
  .hero-with-box {
    flex-direction: column;
  }
  
  .hero-with-box .service-blog-box {
    width: 100%;
    max-width: 100%;
  }
}
/* Blog-Chip Liste in Service-Box wie auf Startseite */
.blog-chip-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.blog-chip-list li {
  margin: 0.25rem 0;
}

.small-links a {
  margin-top: 0.6rem;
}

.card .small-links {
  text-align: center;
}
.icon-support {
  width: 26px;
  height: 26px;
  color: var(--brand-ink);
}
.support-link:hover .icon-support {
  color: var(--brand);
}

.tooltip {
  position: relative;
}

.tooltip-text {
  position: absolute;
  bottom: -36px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand-ink);
  color: #fff;
  padding: .35rem .6rem;
  font-size: .8rem;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}

.tooltip:hover .tooltip-text {
  opacity: 1;
  transform: translateX(-50%) translateY(4px);
}

li > ul.smallest {
  margin-top: 0 !important;
  margin-bottom: 0.2rem; /* kleiner Abstand nach unten, optional */
  padding-left: 1.2rem;  /* optisch schön eingerückt */
}
/* --- Support Button im Header --- */
.header-support {
  display: flex;
  align-items: center;
}

.support-link {
  display: flex;
  align-items: center;
  justify-content: center;

  padding: .6rem .8rem;
  border-radius: 10px;

  color: var(--brand-ink);
  border: 1px solid transparent;

  background: rgba(93,123,128,0.06); /* sehr dezenter Brand-Ton */
  transition:
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    color .2s ease,
    transform .2s ease;
}

.support-link:hover {
  background: rgba(93,123,128,0.12);
  border-color: var(--brand);
  color: var(--brand); /* icon + text bekommen die Brand-Farbe */

  box-shadow:
    0 4px 10px rgba(93,123,128,0.20),
    0 0 0 3px rgba(93,123,128,0.15);

  transform: translateY(-1px);
}


/* Tooltip bleibt unverändert */
.tooltip {
  position: relative;
}

.tooltip-text {
  position: absolute;
  bottom: -36px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand-ink);
  color: #fff;
  padding: 0.35rem 0.6rem;
  font-size: 0.8rem;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}

.tooltip:hover .tooltip-text {
  opacity: 1;
  transform: translateX(-50%) translateY(4px);
}
.support-link {
  background: #98ee98 ;       /* dezentes Grün */
  color: #fff;
  border-radius: 10px;
  padding: .4rem .6rem;
  transition: .2s ease;
}

.support-link:hover {
  background: #98ff98;
  transform: translateY(-1px);
}

.support-button {
	background: #98ee98;
}
.support-button:hover {
	background: #98ff98;
}

.info-bubble {
	width:100%; 
}

.support-button {
  display: inline-flex;
  align-items: center;
  gap: .5rem;                 /* Abstand Icon – Text */
  padding: .7rem 1rem;        /* etwas mehr Luft */
  font-weight: 600;
  white-space: nowrap;        /* alles bleibt in einer Zeile */
}

.support-button .icon-support {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}

.support-button span:last-child {
  font-size: .9em;            /* der ↗ etwas kleiner */
}