/* assets/styles.css */
:root{
  --trineo-brand:#0f766e;
  --trineo-brand-2:#164e63;
  --trineo-accent:#45dcf;
  --trineo-body-font:Inter, "Segoe UI", sans-serif;
  --trineo-heading-font:Manrope, "Segoe UI", sans-serif;
  --trineo-border:rgba(15,23,42,.12);
  --trineo-shadow:0 24px 70px rgba(15,23,42,.12);
}
html{scroll-behavior:smooth}
body{
  font-family:var(--trineo-body-font);
  background:
    radial-gradient(1100px 620px at 0% -10%, color-mix(in srgb, var(--trineo-brand) 18%, transparent), transparent 58%),
    radial-gradient(900px 520px at 100% 0%, color-mix(in srgb, var(--trineo-accent) 16%, transparent), transparent 54%),
    linear-gradient(180deg, rgba(248,250,252,1) 0%, rgba(255,255,255,1) 100%);
  color:var(--bs-body-color, #0f172a);
}
h1,h2,h3,h4,h5,.navbar-brand,.site-footer .footer-heading{font-family:var(--trineo-heading-font)}
a{ color: var(--trineo-brand); text-underline-offset:.18em; }
a:hover{ color: var(--trineo-brand-2); }
.btn-primary{
  background:linear-gradient(135deg,var(--trineo-brand) 0%, var(--trineo-brand-2) 100%);
  border-color:var(--trineo-brand);
  box-shadow:0 14px 28px color-mix(in srgb, var(--trineo-brand) 25%, transparent);
}
.btn-primary:hover,.btn-primary:focus{ border-color:var(--trineo-brand-2); transform:translateY(-1px); }
.btn-outline-primary{ color:var(--trineo-brand); border-color:color-mix(in srgb, var(--trineo-brand) 35%, transparent); }
.btn-outline-primary:hover{ background:var(--trineo-brand); border-color:var(--trineo-brand); }
.btn-dark{
  background:linear-gradient(135deg, color-mix(in srgb, var(--trineo-brand-2) 92%, black), var(--trineo-brand-2));
  border-color:var(--trineo-brand-2);
  color:#fff;
  box-shadow:0 14px 28px rgba(15,23,42,.16);
}
.btn-dark:hover,.btn-dark:focus{
  background:linear-gradient(135deg,var(--trineo-brand-2), color-mix(in srgb, var(--trineo-brand) 34%, var(--trineo-brand-2)));
  border-color:var(--trineo-brand-2);
  color:#fff;
  transform:translateY(-1px);
}
.btn-outline-dark{
  color:var(--trineo-brand-2);
  border-color:rgba(15,23,42,.28);
  background:rgba(255,255,255,.72);
}
.btn-outline-dark:hover,.btn-outline-dark:focus{
  background:#fff;
  color:var(--trineo-brand);
  border-color:var(--trineo-brand);
}
.card,.site-surface{ border:1px solid var(--trineo-border); box-shadow:var(--trineo-shadow); backdrop-filter:blur(14px); }
.navbar{
  backdrop-filter:blur(18px);
  background:rgba(255,255,255,.82)!important;
  border-bottom:1px solid rgba(15,23,42,.08)!important;
}
.site-brand{ display:flex; align-items:center; gap:.8rem; }
.site-brand .brand-logo{ width:95px; max-width:95px; height:auto; object-fit:contain; }
.site-brand.logo-only .brand-text{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.navbar-nav .nav-link{ font-weight:600; color:rgba(15,23,42,.72); position:relative; }
.navbar-nav .nav-link:hover,.navbar-nav .nav-link.active,.navbar-nav .show > .nav-link{ color:var(--trineo-brand); }
.navbar-nav .nav-link::after{
  content:'';
  position:absolute;
  left:.5rem;
  right:.5rem;
  bottom:.25rem;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--trineo-brand),var(--trineo-accent));
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .24s ease;
}
.navbar-nav .nav-link:hover::after,.navbar-nav .nav-link.active::after,.navbar-nav .show > .nav-link::after{ transform:scaleX(1); }
.dropdown-menu{ border:1px solid rgba(15,23,42,.08); border-radius:1rem; padding:.75rem; box-shadow:0 20px 50px rgba(15,23,42,.14); }
.dropdown-item{ border-radius:.75rem; padding:.6rem .8rem; }
.dropdown-item:hover{ background:color-mix(in srgb, var(--trineo-brand) 10%, white); color:var(--trineo-brand-2); }
.site-footer{
  margin-top:4rem;
  border-top:1px solid rgba(6, 19, 28, 0.08);
  background:rgba(255, 255, 255, 0.92);
  color:var(--trineo-text);
}
.site-footer .footer-inner{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(180px,.8fr) minmax(180px,.8fr);
  gap:2rem;
  padding:2.4rem 0;
}
.site-footer .footer-brand{ display:flex; gap:1rem; align-items:flex-start; }
.site-footer .footer-logo{ width:68px; max-width:68px; height:auto; object-fit:contain; filter:drop-shadow(0 10px 24px rgba(0,0,0,.14)); }
.site-footer .footer-title{ font-size:1.08rem; font-weight:700; margin-bottom:.4rem; color:var(--trineo-text); }
.site-footer .footer-copy{ color:rgba(6, 19, 28, 0.78); max-width:42ch; line-height:1.65; }
.site-footer .footer-heading{ font-size:.8rem; text-transform:uppercase; letter-spacing:.14em; color:rgba(6, 19, 28, 0.62); margin-bottom:.9rem; }
.site-footer ul{ list-style:none; margin:0; padding:0; }
.site-footer li + li{ margin-top:.45rem; }
.site-footer a{ color:rgba(6, 19, 28, 0.78); text-decoration:none; }
.site-footer a:hover{ color:var(--trineo-text); }
.site-footer .footer-legal a[data-cookie-settings]{ cursor:pointer; }
.section-pad{ padding:5rem 0; }
.section-pad-sm{ padding:3rem 0 4rem; }
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  font-size:.82rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:800;
  color:var(--trineo-brand);
}
.eyebrow::before{
  content:'';
  width:2rem;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--trineo-brand),var(--trineo-accent));
}
.display-title{
  font-size:clamp(2.5rem,5vw,4.6rem);
  line-height:.98;
  letter-spacing:-.045em;
  font-family:var(--trineo-heading-font);
  font-weight:800;
}
.lead-soft{
  font-size:clamp(1.08rem,1.4vw,1.42rem);
  line-height:1.7;
  color:rgba(15,23,42,.72);
}
.hero-shell{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(440px 240px at 100% 0%, color-mix(in srgb, var(--trineo-brand) 12%, transparent), transparent 70%),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,244,239,.9));
  border:1px solid rgba(15,23,42,.06);
  border-radius:2rem;
  padding:clamp(1.5rem,2vw,2rem);
  box-shadow:0 24px 60px rgba(15,23,42,.08);
}
.card-elevated{
  background:rgba(255,255,255,.94);
  border:1px solid rgba(15,23,42,.08);
  border-radius:1.6rem;
  box-shadow:0 28px 60px rgba(15,23,42,.1);
}
.fact-stack{
  display:grid;
  gap:.9rem;
}
.fact-pill{
  border:1px solid rgba(15,23,42,.08);
  border-radius:1.25rem;
  padding:1rem 1.1rem;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
}
.info-tile{
  height:100%;
  padding:1.2rem 1.25rem;
  border-radius:1.35rem;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 18px 38px rgba(15,23,42,.08);
}
.accent-dot-list{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:.9rem;
}
.accent-dot-list li{
  position:relative;
  padding-left:1.35rem;
}
.accent-dot-list li::before{
  content:'';
  position:absolute;
  left:0;
  top:.7em;
  width:.5rem;
  height:.5rem;
  border-radius:999px;
  background:var(--trineo-brand);
}
.cta-panel{
  /* war: height:100% (hat auf einzelnen Seiten zu extremen Box-Höhen geführt) */
  border-radius:1.7rem;
  padding:1.6rem;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,244,239,.95));
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 24px 54px rgba(15,23,42,.08);
  max-width:100%;
  margin-left:auto;
  margin-right:auto;
}

/* CTA-Panel in Artikeln/Case Studies: nie über die Content-Spalte hinaus wachsen */
article .cta-panel{
  width:100%;
}
.hero-shell-rich{padding:clamp(1.8rem,2.5vw,2.4rem);}
.visual-frame{
  position:relative;
  overflow:hidden;
  border-radius:1.7rem;
  border:1px solid rgba(15,23,42,.08);
  background:rgba(255,255,255,.92);
  box-shadow:0 24px 54px rgba(15,23,42,.1);
}
.visual-frame-tall{min-height:420px;}
.visual-frame-img{
  width:100%;
  height:100%;
  min-height:420px;
  object-fit:cover;
  display:block;
}
.visual-badge-list{
  position:absolute;
  inset:auto 1rem 1rem 1rem;
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
}
.visual-badge{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:.7rem 1rem;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(15,23,42,.08);
  backdrop-filter:blur(16px);
  font-weight:600;
}
.visual-note-card{
  position:absolute;
  right:1rem;
  bottom:1rem;
  width:min(320px, calc(100% - 2rem));
  border-radius:1.2rem;
  padding:1rem 1.1rem;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(15,23,42,.08);
}
.editorial-panel{
  border-radius:1.8rem;
  padding:1.8rem;
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(245,241,235,.86));
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 24px 54px rgba(15,23,42,.08);
}
.editorial-copy{font-size:1.05rem;}
.section-kicker-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}
.section-side-note{
  max-width:42ch;
  color:rgba(15,23,42,.68);
  font-size:1rem;
  line-height:1.75;
}
.metric-card{
  position:relative;
  overflow:hidden;
}
.metric-counter{
  font-size:.86rem;
  font-weight:800;
  color:var(--trineo-brand);
  letter-spacing:.16em;
  text-transform:uppercase;
  margin-bottom:.8rem;
}
.faq-stack{display:grid;gap:1rem;}
.faq-card{
  border-radius:1.25rem;
  padding:1.25rem 1.35rem;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 18px 38px rgba(15,23,42,.08);
}

/* Kontaktseite: FAQ redesign (scoped) */
.contact-faq .faq-surface{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(15,118,110,.14);
  border-radius:calc(var(--trineo-radius) + .25rem);
  background:linear-gradient(135deg, rgba(239,251,255,.92), rgba(255,255,255,.9));
  box-shadow:0 24px 70px rgba(6,19,28,.10);
  padding:clamp(1.1rem, 2.2vw, 1.6rem);
}
.contact-faq .faq-surface::before{
  content:"";
  position:absolute;
  inset:-30% auto auto -20%;
  width:22rem;
  height:22rem;
  border-radius:50%;
  background:rgba(69,220,255,.16);
  filter:blur(18px);
  pointer-events:none;
}

.contact-faq .faq-stack{position:relative;gap:.9rem;}

.contact-faq details.faq-item{
  border:1px solid rgba(15,118,110,.14);
  border-radius:1.25rem;
  background:rgba(255,255,255,.82);
  box-shadow:0 16px 44px rgba(6,19,28,.07);
  overflow:hidden;
  transition:transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, background-color 220ms ease;
}

.contact-faq details.faq-item:hover{
  transform:translateY(-4px);
  border-color:rgba(69,220,255,.55);
  box-shadow:0 26px 70px rgba(6,19,28,.12);
}

.contact-faq details.faq-item > summary{
  list-style:none;
  cursor:pointer;
  padding:1.1rem 1.15rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  font-weight:850;
  letter-spacing:-.02em;
  color:var(--trineo-text);
  background:linear-gradient(90deg, rgba(239,251,255,.72), rgba(255,255,255,.22));
}

.contact-faq details.faq-item > summary::-webkit-details-marker{display:none;}
.contact-faq details.faq-item > summary::marker{content:"";}

.contact-faq .faq-question{flex:1 1 auto;}

.contact-faq .faq-icon{
  flex:0 0 auto;
  width:2.15rem;
  height:2.15rem;
  border-radius:1rem;
  border:1px solid rgba(17,191,234,.18);
  background:rgba(239,251,255,.9);
  box-shadow:0 10px 26px rgba(6,19,28,.08);
  display:grid;
  place-items:center;
}

.contact-faq .faq-icon::before,
.contact-faq .faq-icon::after{
  content:"";
  position:absolute;
  width:12px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--trineo-brand), var(--trineo-accent));
}

.contact-faq .faq-icon{position:relative;}
.contact-faq .faq-icon::after{transform:rotate(90deg);transition:transform 180ms ease, opacity 180ms ease;}
.contact-faq details[open] .faq-icon::after{transform:rotate(0deg);opacity:0;}

.contact-faq .faq-answer{
  padding:0 1.15rem 1.15rem;
}

.contact-faq .faq-answer p{
  margin:.25rem 0 0;
  color:var(--trineo-muted);
  line-height:1.75;
}

.contact-faq details.faq-item:focus-within{
  border-color:rgba(17,191,234,.55);
  box-shadow:0 0 0 .25rem rgba(17,191,234,.14), 0 26px 70px rgba(6,19,28,.10);
}

@media (max-width: 767.98px){
  .contact-faq .faq-surface{padding:1rem;}
  .contact-faq details.faq-item > summary{padding:1rem;}
  .contact-faq .faq-answer{padding:0 1rem 1rem;}
}
.closing-banner{
  border-radius:1.8rem;
  padding:1.8rem;
  background:linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 24px 54px rgba(15,23,42,.08);
}
.catalog-card,.db-card{
  height:100%;
  border-radius:1.4rem;
  overflow:hidden;
  background:rgba(255,255,255,.95);
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 20px 44px rgba(15,23,42,.08);
}
.catalog-card-media,.db-card-media{aspect-ratio:16/10;overflow:hidden;background:#f8fafc;}
.catalog-card-media img,.db-card-media img{width:100%;height:100%;object-fit:cover;display:block;}
.catalog-card-body,.db-card-body{padding:1.15rem 1.15rem 1.25rem;}
.db-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:1.25rem;
}
.db-grid > *{grid-column:span 12;}
.db-card-link{display:block;height:100%;color:inherit;text-decoration:none;}
.db-card-meta{
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:rgba(15,23,42,.52);
  margin-bottom:.75rem;
}
.db-card-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
}
.db-card-action{font-weight:700;color:var(--trineo-brand);}
.ecwid-shell,.ecwid-browser-frame{
  border-radius:1.8rem;
  border:1px solid rgba(15,23,42,.08);
  background:rgba(255,255,255,.94);
  box-shadow:0 24px 54px rgba(15,23,42,.08);
}
.ecwid-shell{padding:1.6rem;}
.ecwid-browser-frame{min-height:420px;padding:1.25rem;}
.ecwid-placeholder{
  height:100%;
  min-height:360px;
  border-radius:1.3rem;
  border:1px dashed rgba(15,23,42,.2);
  background:linear-gradient(135deg, rgba(248,250,252,.9), rgba(245,241,235,.96));
  padding:1.5rem;
}
.ecwid-code-snippet{
  display:block;
  padding:.9rem 1rem;
  border-radius:1rem;
  background:#0f172a;
  color:#e2e8f0;
  overflow:auto;
}
.code-preview{
  margin:0;
  padding:1rem;
  border-radius:1rem;
  background:#0f172a;
  color:#e2e8f0;
  font-size:.88rem;
  min-height:180px;
  white-space:pre-wrap;
}
.spec-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:1rem;
}
.spec-card{
  grid-column:span 12;
  border-radius:1.2rem;
  padding:1rem 1.1rem;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(15,23,42,.08);
}
.spec-label{
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:rgba(15,23,42,.52);
  margin-bottom:.35rem;
}
.spec-value{font-weight:700;}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
}
.gallery-thumb{
  border-radius:1.2rem;
  overflow:hidden;
  aspect-ratio:4/3;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
}
.gallery-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.reveal-on-scroll{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.reveal-on-scroll.is-visible{ opacity:1; transform:none; }
.card:hover,.site-surface:hover{ transform:translateY(-4px); transition:transform .28s ease, box-shadow .28s ease; box-shadow:0 32px 70px rgba(15,23,42,.14); }
#cookieBox{ position:fixed; left:16px; right:16px; bottom:16px; z-index:9999; max-width:1080px; margin:0 auto; }
#cookieBox .card-body .btn{ white-space: nowrap; }
@media (max-width: 991.98px){
  .site-footer .footer-inner{ grid-template-columns:1fr; }
  .site-brand .brand-logo{ width:81px; max-width:81px; }
  .section-pad{ padding:3.8rem 0; }
  .display-title{ line-height:1.02; }
  .visual-frame-tall,.visual-frame-img{min-height:320px;}
  .editorial-panel,.closing-banner,.ecwid-shell{padding:1.4rem;}
  .db-grid,.spec-grid{grid-template-columns:1fr;}
  .gallery-grid{grid-template-columns:1fr;}
}
@media (min-width: 768px){
  .db-grid > *{grid-column:span 6;}
  .spec-card{grid-column:span 6;}
}
@media (min-width: 1200px){
  .db-grid > *{grid-column:span 4;}
}

/* AI/Generator specific additions */
:root  {

  --trineo-bg: #fbfdff;

  --trineo-surface: #ffffff;

  --trineo-soft: #effbff;

  --trineo-soft-2: #f5fbff;

  --trineo-text: #06131c;

  --trineo-muted: #5d6c78;

  --trineo-primary: #11bfea;

  --trineo-primary-rgb: 17, 191, 234;

  --trineo-accent: #45dcff;

  --trineo-border: rgba(6, 19, 28, 0.1);

  --trineo-shadow: 0 24px 70px rgba(6, 19, 28, 0.11);

  --trineo-radius: 1.5rem;

}

*  {

  box-sizing: border-box;

}

html  {

  scroll-behavior: smooth;

}

body  {

  margin: 0;

  color: var(--trineo-text);

  background:
    radial-gradient(circle at 12% 8%, rgba(69, 220, 255, 0.16), transparent 30rem),
    radial-gradient(circle at 86% 18%, rgba(17, 191, 234, 0.1), transparent 28rem),
    var(--trineo-bg);

  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  line-height: 1.6;

}

img,

svg  {

  max-width: 100%;

  height: auto;

}

a  {

  color: #0788a8;

  text-decoration: none;

}

a:hover  {

  color: #04657d;

}

::selection  {

  background: rgba(69, 220, 255, 0.45);

}

.py-lg-6  {

  padding-top: 7rem;

  padding-bottom: 7rem;

}

.section-pad  {

  padding: 5.5rem 0;

}

.tracking-tight  {

  letter-spacing: -0.055em;

}

.text-secondary  {

  color: var(--trineo-muted) !important;

}

.btn  {

  border-radius: 999px;

  font-weight: 700;

  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, border-color 180ms ease;

}

.btn-primary  {

  --bs-btn-bg: var(--trineo-primary);

  --bs-btn-border-color: var(--trineo-primary);

  --bs-btn-color: #06131c;

  --bs-btn-hover-bg: #45dcff;

  --bs-btn-hover-border-color: #45dcff;

  --bs-btn-hover-color: #06131c;

  --bs-btn-active-bg: #0ba8cf;

  --bs-btn-active-border-color: #0ba8cf;

  box-shadow: 0 14px 34px rgba(var(--trineo-primary-rgb), 0.24);

}

.btn-outline-primary  {

  --bs-btn-color: #067f9c;

  --bs-btn-border-color: rgba(var(--trineo-primary-rgb), 0.45);

  --bs-btn-hover-bg: rgba(69, 220, 255, 0.16);

  --bs-btn-hover-border-color: var(--trineo-primary);

  --bs-btn-hover-color: #06131c;

  background: rgba(255, 255, 255, 0.74);

}

.btn-lg  {

  padding: 0.9rem 1.35rem;

}

.form-control,

.form-select  {

  border-color: rgba(6, 19, 28, 0.12);

  border-radius: 1rem;

  background-color: rgba(255, 255, 255, 0.88);

}

.form-control:focus,

.form-select:focus  {

  border-color: var(--trineo-primary);

  box-shadow: 0 0 0 0.25rem rgba(var(--trineo-primary-rgb), 0.16);

}

.trineo-nav  {

  border-bottom: 1px solid rgba(6, 19, 28, 0.08);

  backdrop-filter: blur(18px);

  background: rgba(255, 255, 255, 0.86) !important;

}

.trineo-nav .navbar-brand img,

.footer-brand img  {

  display: block;

}

.trineo-nav .nav-link  {

  color: rgba(6, 19, 28, 0.74);

  font-weight: 700;

  padding: 0.75rem 0.9rem;

  border-radius: 999px;

}

.trineo-nav .nav-link:hover,

.trineo-nav .nav-link.active  {

  color: var(--trineo-text);

  background: rgba(69, 220, 255, 0.13);

}

.nav-cta  {

  padding: 0.65rem 1.05rem;

}

.hero-section,

.page-hero  {

  position: relative;

  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(245, 251, 255, 0.92));

}

.hero-section::after,

.page-hero::after  {

  content: "";

  position: absolute;

  inset: auto 0 0;

  height: 1px;

  background: linear-gradient(90deg, transparent, rgba(17, 191, 234, 0.5), transparent);

}

.hero-orb  {

  position: absolute;

  border-radius: 999px;

  filter: blur(10px);

  opacity: 0.65;

  pointer-events: none;

  animation: floatOrb 9s ease-in-out infinite alternate;

}

.hero-orb-one  {

  width: 18rem;

  height: 18rem;

  left: -6rem;

  top: 8rem;

  background: rgba(69, 220, 255, 0.22);

}

.hero-orb-two  {

  width: 22rem;

  height: 22rem;

  right: -8rem;

  top: 4rem;

  background: rgba(17, 191, 234, 0.14);

  animation-delay: -3s;

}

@keyframes floatOrb  {

  from  {
 transform: translate3d(0, 0, 0) scale(1);

}

  to  {
 transform: translate3d(1.5rem, 2rem, 0) scale(1.06);

}

}

.eyebrow  {

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  color: #057b98;

  font-size: 0.78rem;

  font-weight: 900;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  margin-bottom: 0.8rem;

}

.eyebrow::before  {

  content: "";

  width: 0.75rem;

  height: 0.75rem;

  border-radius: 50%;

  background: var(--trineo-accent);

  box-shadow: 0 0 0 0.35rem rgba(69, 220, 255, 0.18);

}

.accent-border  {

  border-color: rgba(17, 191, 234, 0.25) !important;

}

.glass-card,

.cta-panel,

.service-card,

.feature-card,

.step-card,

.team-card,

.info-card,

.care-card  {

  border: 1px solid var(--trineo-border);

  border-radius: var(--trineo-radius);

  background: rgba(255, 255, 255, 0.82);

  box-shadow: var(--trineo-shadow);

}

.glass-card,

.cta-panel  {

  backdrop-filter: blur(20px);

}

.hero-card  {

  position: relative;

}

.browser-dots  {

  display: flex;

  gap: 0.45rem;

}

.browser-dots span  {

  width: 0.72rem;

  height: 0.72rem;

  border-radius: 50%;

  background: #dbe7ef;

}

.browser-dots span:nth-child(1)  {
 background: #ffb3b3;

}

.browser-dots span:nth-child(2)  {
 background: #ffe08a;

}

.browser-dots span:nth-child(3)  {
 background: #8ee8b3;

}

.mini-dashboard  {

  background: linear-gradient(135deg, rgba(239, 251, 255, 0.98), rgba(255, 255, 255, 0.96));

  border: 1px solid rgba(17, 191, 234, 0.16);

}

.score-bars  {

  display: grid;

  gap: 0.9rem;

}

.score-bars div  {

  display: grid;

  gap: 0.35rem;

  color: var(--trineo-muted);

  font-weight: 700;

}

.score-bars i  {

  display: block;

  height: 0.55rem;

  border-radius: 999px;

  background: linear-gradient(90deg, var(--trineo-primary), var(--trineo-accent));

  box-shadow: 0 8px 20px rgba(var(--trineo-primary-rgb), 0.22);

}

.metric-card  {

  padding: 1rem;

  border: 1px solid rgba(17, 191, 234, 0.14);

  border-radius: 1.1rem;

  background: rgba(255, 255, 255, 0.74);

}

.metric-card strong  {

  display: block;

  color: var(--trineo-text);

  font-size: 1.25rem;

  line-height: 1.1;

}

.metric-card span  {

  display: block;

  color: var(--trineo-muted);

  font-size: 0.88rem;

}

.bg-soft-blue  {

  background: linear-gradient(180deg, rgba(239, 251, 255, 0.78), rgba(255, 255, 255, 0.88));

}

.bg-linear  {

  background:
    linear-gradient(135deg, rgba(69, 220, 255, 0.16), rgba(255, 255, 255, 0.9) 44%, rgba(239, 251, 255, 0.95)),
    #ffffff;

}

.stat-strip  {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 0.75rem;

  padding: 0.85rem;

  border: 1px solid var(--trineo-border);

  border-radius: 1.4rem;

  background: rgba(255, 255, 255, 0.76);

  box-shadow: 0 18px 50px rgba(6, 19, 28, 0.08);

}

.stat-strip div  {

  padding: 1rem;

  border-radius: 1rem;

  background: rgba(239, 251, 255, 0.9);

}

.stat-strip strong,

.stat-strip span  {

  display: block;

}

.stat-strip strong  {

  font-size: 1.35rem;

}

.stat-strip span  {

  color: var(--trineo-muted);

  font-size: 0.86rem;

}

.feature-card,

.service-card,

.step-card,

.team-card,

.info-card,

.care-card  {

  padding: 1.6rem;

  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;

}

.feature-card:hover,

.service-card:hover,

.step-card:hover,

.team-card:hover,

.info-card:hover  {

  transform: translateY(-6px);

  border-color: rgba(17, 191, 234, 0.35);

  box-shadow: 0 30px 80px rgba(6, 19, 28, 0.13);

}

.feature-card h3,

.feature-card h2,

.service-card h2,

.step-card h3,

.team-card h3,

.info-card h3  {

  font-weight: 850;

  letter-spacing: -0.03em;

}

.icon-bubble,

.service-number,

.step-card span,

.process-list article span,

.pricing-flow span  {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 3rem;

  height: 3rem;

  border-radius: 1rem;

  color: #06131c;

  font-weight: 900;

  background: linear-gradient(135deg, var(--trineo-accent), #dff8ff);

  box-shadow: 0 12px 28px rgba(var(--trineo-primary-rgb), 0.22);

  margin-bottom: 1rem;

}

.clean-list  {

  list-style: none;

  padding-left: 0;

  margin-bottom: 0;

  display: grid;

  gap: 0.65rem;

}

.clean-list li  {

  position: relative;

  padding-left: 1.65rem;

  color: var(--trineo-muted);

}

.clean-list li::before  {

  content: "✓";

  position: absolute;

  left: 0;

  top: 0;

  color: #0788a8;

  font-weight: 900;

}

.columns-2  {

  grid-template-columns: repeat(2, minmax(0, 1fr));

}

.featured-service  {

  background: linear-gradient(180deg, rgba(239, 251, 255, 0.94), rgba(255, 255, 255, 0.9));

  border-color: rgba(17, 191, 234, 0.28);

}

.check-row  {

  display: flex;

  align-items: flex-start;

  gap: 0.85rem;

}

.check-row span  {

  flex: 0 0 auto;

  width: 1.65rem;

  height: 1.65rem;

  border-radius: 50%;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  background: rgba(69, 220, 255, 0.28);

  color: #057b98;

  font-weight: 900;

}

.check-row p  {

  margin: 0;

  color: var(--trineo-muted);

}

.prompt-card,

.prompt-console  {

  position: relative;

  overflow: hidden;

}

.prompt-card::before,

.prompt-console::before  {

  content: "";

  position: absolute;

  inset: -30% auto auto -20%;

  width: 18rem;

  height: 18rem;

  border-radius: 50%;

  background: rgba(69, 220, 255, 0.18);

  filter: blur(20px);

}

.prompt-line  {

  position: relative;

  padding: 1rem;

  border-radius: 1.05rem;

  margin-bottom: 0.9rem;

  border: 1px solid rgba(17, 191, 234, 0.14);

}

.prompt-line.user  {

  background: rgba(239, 251, 255, 0.9);

  font-weight: 700;

}

.prompt-line.ai  {

  background: rgba(255, 255, 255, 0.9);

  color: var(--trineo-muted);

}

.prompt-timeline  {

  height: 0.65rem;

  border-radius: 999px;

  background: rgba(6, 19, 28, 0.08);

  overflow: hidden;

  margin: 1.2rem 0;

}

.prompt-timeline span  {

  display: block;

  height: 100%;

  border-radius: inherit;

  background: linear-gradient(90deg, var(--trineo-primary), var(--trineo-accent));

  animation: loadPulse 2.5s ease-in-out infinite alternate;

}

@keyframes loadPulse  {

  from  {
 filter: saturate(0.9);

}

  to  {
 filter: saturate(1.25);

}

}

.calculator .form-range::-webkit-slider-thumb  {

  background: var(--trineo-primary);

}

.cost-switch  {

  min-height: 100%;

  padding: 1rem 1rem 1rem 3.25rem;

  border: 1px solid var(--trineo-border);

  border-radius: 1.1rem;

  background: rgba(255, 255, 255, 0.72);

}

/* Kostenrechner: kleines Info-"i" neben Labels (Bootstrap Tooltip Trigger) */
.calculator .calculator-label{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
}

.calculator .calculator-info{
  display:inline-grid;
  place-items:center;
  width:1.15rem;
  height:1.15rem;
  border-radius:999px;
  border:1px solid rgba(6, 19, 28, 0.18);
  background:rgba(255,255,255,.88);
  color:rgba(6, 19, 28, 0.72);
  font-weight:900;
  font-size:.75rem;
  line-height:1;
  padding:0;
  margin-left:.35rem;
}

.calculator .calculator-info:hover{
  background:#fff;
  color:var(--trineo-brand);
  border-color:rgba(15,118,110,.28);
}

.calculator .calculator-info:focus{
  outline:0;
  box-shadow:0 0 0 .25rem rgba(var(--trineo-primary-rgb), 0.16);
  border-color:rgba(var(--trineo-primary-rgb), 0.55);
}

/* Kostenrechner: Switch-Farben auf Trineo-CI abstimmen (statt Bootstrap Standard-Blau) */
.calculator .cost-switch .form-check-input{
  margin-left:-2.25rem;
  /* Track-Farbe OFF */
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%286%2c19%2c28%2c0.35%29'/%3e%3c/svg%3e");
}

.calculator .cost-switch .form-check-input:focus{
  border-color:rgba(var(--trineo-primary-rgb), 0.45);
  box-shadow:0 0 0 0.25rem rgba(var(--trineo-primary-rgb), 0.16);
}

.calculator .cost-switch .form-check-input:checked{
  /* Knopf/Track ON: Trineo-Blau */
  background-color:var(--trineo-primary);
  border-color:var(--trineo-primary);
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
}

.estimate-box  {

  padding: 1.6rem;

  border-radius: 1.3rem;

  background: linear-gradient(180deg, rgba(239, 251, 255, 0.96), rgba(255, 255, 255, 0.9));

  border: 1px solid rgba(17, 191, 234, 0.18);

}

.estimate-price  {

  font-size: clamp(2.3rem, 6vw, 4.2rem);

  line-height: 1;

  font-weight: 900;

  letter-spacing: -0.06em;

  margin-bottom: 1rem;

}

.process-list  {

  display: grid;

  gap: 1rem;

}

.process-list article  {

  display: flex;

  gap: 1rem;

  padding: 1.2rem;

  border: 1px solid var(--trineo-border);

  border-radius: 1.25rem;

  background: rgba(255, 255, 255, 0.82);

  box-shadow: 0 16px 44px rgba(6, 19, 28, 0.07);

}

.process-list article span  {

  margin-bottom: 0;

  flex: 0 0 auto;

}

.process-list h3  {

  margin-bottom: 0.25rem;

  font-weight: 850;

}

.process-list p  {

  margin-bottom: 0;

  color: var(--trineo-muted);

}

.process-list.compact article  {

  box-shadow: none;

}

.cta-panel  {

  background:
    radial-gradient(circle at 16% 10%, rgba(69, 220, 255, 0.23), transparent 18rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(239, 251, 255, 0.95));

}

.comparison-card  {

  display: grid;

  gap: 0.8rem;

}

.comparison-row  {

  display: flex;

  justify-content: space-between;

  gap: 1rem;

  padding: 1rem;

  border-radius: 1rem;

}

.comparison-row.muted  {

  background: rgba(6, 19, 28, 0.04);

  color: var(--trineo-muted);

}

.comparison-row.active  {

  background: rgba(69, 220, 255, 0.18);

  border: 1px solid rgba(17, 191, 234, 0.18);

}

.console-label  {

  color: var(--trineo-muted);

  text-transform: uppercase;

  letter-spacing: 0.12em;

  font-size: 0.76rem;

  font-weight: 900;

}

.console-grid  {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 0.85rem;

}

.console-grid div  {

  padding: 1rem;

  border-radius: 1rem;

  background: rgba(239, 251, 255, 0.84);

  border: 1px solid rgba(17, 191, 234, 0.14);

}

.console-grid strong,

.console-grid span  {

  display: block;

}

.console-grid span  {

  color: var(--trineo-muted);

  font-size: 0.88rem;

}

.pricing-flow  {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 1rem;

}

.pricing-flow div  {

  padding: 1rem;

  border-radius: 1rem;

  background: rgba(255, 255, 255, 0.7);

  border: 1px solid rgba(17, 191, 234, 0.12);

}

.pricing-flow h3  {

  font-size: 1.1rem;

  font-weight: 850;

}

.pricing-flow p  {

  color: var(--trineo-muted);

  margin-bottom: 0;

}

.avatar-gradient  {

  width: 4.5rem;

  height: 4.5rem;

  border-radius: 1.35rem;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 1rem;

  background: linear-gradient(135deg, var(--trineo-accent), #ffffff);

  color: var(--trineo-text);

  font-weight: 900;

  font-size: 1.2rem;

  box-shadow: 0 14px 34px rgba(var(--trineo-primary-rgb), 0.2);

}

.info-stack  {

  display: grid;

  gap: 1rem;

  position: sticky;

  top: 6rem;

}

.site-footer  {

  border-top: 1px solid rgba(6, 19, 28, 0.08);

  background: rgba(255, 255, 255, 0.9);

}

.footer-links  {

  list-style: none;

  padding-left: 0;

  margin: 0;

  display: grid;

  gap: 0.45rem;

}

.footer-links a  {

  color: var(--trineo-muted);

  font-weight: 650;

}

.footer-links a:hover,

.footer-links a.active  {

  color: #057b98;

}

.footer-middle  {

  text-align: center;

}

.footer-legal  {

  text-align: right;

}

.cookie-banner  {

  position: fixed;

  z-index: 1080;

  left: 1rem;

  right: 1rem;

  bottom: 1rem;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 1rem;

  max-width: 980px;

  margin: 0 auto;

  padding: 1rem;

  border: 1px solid rgba(17, 191, 234, 0.22);

  border-radius: 1.25rem;

  background: rgba(255, 255, 255, 0.96);

  box-shadow: 0 24px 80px rgba(6, 19, 28, 0.16);

  backdrop-filter: blur(18px);

}

.cookie-banner p  {

  margin: 0.25rem 0 0;

  color: var(--trineo-muted);

}

.cookie-actions  {

  display: flex;

  gap: 0.65rem;

  flex: 0 0 auto;

}

[data-animate]  {

  opacity: 0;

  transform: translate3d(0, 28px, 0) scale(0.985);

  transition: opacity 700ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);

}

[data-animate="fade-left"]  {

  transform: translate3d(34px, 0, 0) scale(0.985);

}

[data-animate="fade-right"]  {

  transform: translate3d(-34px, 0, 0) scale(0.985);

}

[data-animate="zoom-in"]  {

  transform: scale(0.94);

}

[data-animate].is-visible  {

  opacity: 1;

  transform: translate3d(0, 0, 0) scale(1);

}

.tilt-card  {

  will-change: transform;

  transition: transform 180ms ease, box-shadow 220ms ease;

}

.magnetic-btn  {

  will-change: transform;

}

@media (max-width: 991.98px)  {

  .py-lg-6  {

    padding-top: 4.5rem;

    padding-bottom: 4.5rem;


}

  .section-pad  {

    padding: 4rem 0;


}

  .navbar-collapse  {

    padding: 1rem 0 0.7rem;


}

  .stat-strip,

  .pricing-flow  {

    grid-template-columns: 1fr;


}

  .footer-middle,

  .footer-legal  {

    text-align: left;


}

}

@media (max-width: 767.98px)  {

  .display-3  {

    font-size: 3rem;


}

  .section-pad  {

    padding: 3.4rem 0;


}

  .columns-2,

  .console-grid  {

    grid-template-columns: 1fr;


}

  .comparison-row,

  .cookie-banner  {

    flex-direction: column;

    align-items: stretch;


}

  .cookie-actions  {

    width: 100%;


}

  .cookie-actions .btn  {

    flex: 1;


}

}

@media (prefers-reduced-motion: reduce)  {

  *,

  *::before,

  *::after  {

    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    scroll-behavior: auto !important;

    transition-duration: 0.01ms !important;


}

  [data-animate]  {

    opacity: 1;

    transform: none;


}

}

/* TRINEO enforced overrides */
/* padding-top wird für fixed Navbar benötigt; siehe Sticky Navigation (robust) */
[data-animate]{opacity:1;transform:none;}
[data-animate].is-visible{opacity:1!important;transform:none!important;}
.reveal,.fade-in{opacity:1;transform:none;}
.reveal.is-visible,.fade-in.is-visible,.reveal-on-scroll.is-visible{opacity:1!important;transform:none!important;}
body > [data-include="partials/nav.html"],body > [data-include="partials/footer.html"]{display:block;}

/* Sticky Navigation (robust) */
/*
  Warum fixed statt sticky?
  - sticky funktioniert nicht, wenn ein Parent/Ancestor ein scroll/overflow/transform/contain-Context setzt.
  - fixed ist global zuverlässig und verhindert "verschwindende" Navigation.
*/
:root{ --trineo-nav-height:84px; }

.navbar.sticky-top{
  position:fixed;
  top:0;
  left:0;
  right:0;
  width:100%;
  z-index:1100;
}

/* Platz für fixed Navbar schaffen */
body{ padding-top:var(--trineo-nav-height); }

/* Anker-Scroll Offset */
html{ scroll-padding-top:calc(var(--trineo-nav-height) + 8px); }

/* Sicherheitsnetz: falls irgendwo overflow/contain auf <body> gesetzt wird */
body{ overflow-x:hidden; }

main{ position:relative; z-index:1; }

.btn-primary,.btn-dark{
  background:linear-gradient(135deg,var(--trineo-brand) 0%, var(--trineo-brand-2) 100%)!important;
  border-color:var(--trineo-brand)!important;
  color:#fff!important;
}
.btn-primary:hover,.btn-primary:focus,.btn-dark:hover,.btn-dark:focus{
  background:linear-gradient(135deg,var(--trineo-brand-2) 0%, var(--trineo-brand) 100%)!important;
  border-color:var(--trineo-brand-2)!important;
  color:#fff!important;
}
.btn-outline-primary,.btn-outline-dark{
  color:var(--trineo-brand-2)!important;
  border-color:color-mix(in srgb, var(--trineo-brand) 40%, transparent)!important;
  background:rgba(255,255,255,.82)!important;
}
.btn-outline-primary:hover,.btn-outline-primary:focus,.btn-outline-dark:hover,.btn-outline-dark:focus{
  background:var(--trineo-brand)!important;
  border-color:var(--trineo-brand)!important;
  color:#fff!important;
}


/* Media mentions (Home) */
.media-mention-card{
  display:block;
  height:100%;
  overflow:hidden;
  border-radius:1.6rem;
  border:1px solid rgba(15,118,110,.12);
  background:rgba(255,255,255,.9);
  box-shadow:0 18px 54px rgba(22,78,99,.08);
  color:inherit;
  text-decoration:none;
  transition:transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.media-mention-card:hover{
  transform:translateY(-6px);
  border-color:rgba(69,220,255,.55);
  box-shadow:0 30px 86px rgba(22,78,99,.14);
}
.media-mention-image{
  aspect-ratio:16/10;
  background:linear-gradient(180deg, rgba(239,251,255,.92), rgba(255,255,255,.92));
  border-bottom:1px solid rgba(15,118,110,.10);
  overflow:hidden;
  padding:.35rem; /* kleiner Abstand zur Box-Kante, damit Screenshots nicht gequetscht wirken */
}
.media-mention-image img{
  width:100%;
  height:100%;
  object-fit:contain; /* etwas herauszoomen statt hart zu croppen */
  display:block;
  transform:scale(.98);
  transform-origin:center;
}
.media-mention-body{
  padding:1.1rem 1.15rem 1.25rem;
}
.media-mention-meta{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:rgba(15,23,42,.52);
  font-weight:800;
  margin-bottom:.65rem;
}
.media-mention-action{
  margin-top:1rem;
  font-weight:800;
  color:var(--trineo-brand);
}

/* Insights (Home: Case Studies & Blog) */
.insight-card{
  display:block;
  height:100%;
  overflow:hidden;
  border-radius:1.6rem;
  border:1px solid rgba(15,118,110,.12);
  background:rgba(255,255,255,.9);
  box-shadow:0 18px 54px rgba(22,78,99,.08);
  color:inherit;
  text-decoration:none;
  transition:transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.insight-card:hover{
  transform:translateY(-6px);
  border-color:rgba(69,220,255,.55);
  box-shadow:0 30px 86px rgba(22,78,99,.14);
}
.insight-card.is-coming-soon{
  cursor:default;
}
.insight-card.is-coming-soon:hover{
  transform:none;
  border-color:rgba(15,118,110,.12);
  box-shadow:0 18px 54px rgba(22,78,99,.08);
}
.insight-image{
  aspect-ratio:16/10;
  background:linear-gradient(180deg, rgba(239,251,255,.92), rgba(255,255,255,.92));
  border-bottom:1px solid rgba(15,118,110,.10);
  overflow:hidden;
}
.insight-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.insight-body{
  padding:1.1rem 1.15rem 1.25rem;
}
.insight-meta{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:rgba(15,23,42,.52);
  font-weight:800;
  margin-bottom:.65rem;
}
.insight-action{
  margin-top:1rem;
  font-weight:800;
  color:var(--trineo-brand);
}

/* Trineo-GPT: Projekt-Preview Karten */
.project-preview-card{
  display:flex;
  flex-direction:column;
  height:100%;
  overflow:hidden;
  border-radius:var(--trineo-radius);
  border:1px solid var(--trineo-border);
  background:rgba(255,255,255,.82);
  box-shadow:var(--trineo-shadow);
  color:inherit;
  text-decoration:none;
  transition:transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.project-preview-card:hover{
  transform:translateY(-6px);
  border-color:rgba(17, 191, 234, 0.35);
  box-shadow:0 30px 80px rgba(6, 19, 28, 0.13);
}
.project-preview-media{
  aspect-ratio:16/10;
  background:linear-gradient(180deg, rgba(239,251,255,.88), rgba(255,255,255,.92));
  border-bottom:1px solid rgba(15,118,110,.10);
  overflow:hidden;
}
.project-preview-media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.project-preview-body{
  padding:1.25rem 1.35rem 1.35rem;
}
.project-preview-cta{
  display:inline-flex;
  margin-top:.25rem;
  font-weight:800;
  color:var(--trineo-brand);
}

/* Testimonials (Home) */
.container-wide{
  max-width:1440px;
}

.testimonials-carousel{
  position:relative;
  display:flex;
  align-items:stretch;
}

/*
  Früher: horizontales Carousel mit Overflow.
  Neu: responsives Grid (Bootstrap-Logik):
  - Mobile: 1 Spalte
  - Tablet: 2 Spalten
  - Desktop: 3 Spalten
*/
.testimonials-track{
  position:relative;
  flex:1 1 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:1.25rem;
  overflow:visible;
  padding:0;
  align-items:start; /* Karten nicht auf gleiche Höhe strecken */
}

.testimonials-track > figure{
  margin:0;
  height:auto;
}

.testimonials-track > figure.glass-card{
  height:auto;
  align-self:start;
}

.testimonials-track blockquote{
  font-size:1.05rem;
  line-height:1.75;
}

/* Nav-Buttons werden im Grid-Modus nicht benötigt */
.testimonial-nav{
  display:none;
}

@media (min-width: 768px){
  .testimonials-track{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px){
  .testimonials-track{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}

.testimonial-meta{
  display:flex;
  flex-direction:column;
  gap:.15rem;
}
.testimonial-meta .testimonial-name{
  font-weight:800;
  font-size:1.25rem;
  line-height:1.2;
  color:var(--trineo-text);
}
.testimonial-meta .testimonial-org{
  font-weight:800;
  font-size:1rem;
  line-height:1.35;
  color:var(--trineo-muted);
}
.testimonial-stars{
  display:flex;
  align-items:center;
  gap:.2rem;
  margin-bottom:.75rem;
  font-size:1.05rem;
  line-height:1;
  color:#f4b400;
}
.google-review-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.75rem 1.1rem;
  border-radius:999px;
  border:1px solid rgba(15,118,110,.18);
  background:rgba(255,255,255,.75);
  text-decoration:none;
  box-shadow:0 18px 40px rgba(15,23,42,.08);
}
.google-review-link:hover{
  background:rgba(255,255,255,.92);
  border-color:rgba(15,118,110,.32);
}

/* Trustpilot button (Home: Kundenstimmen) */
.trustpilot-review-link{
  max-width:520px;
  margin-left:auto;
  margin-right:auto;
}
.trustpilot-review-link .trustpilot-widget{
  display:block;
}

/* Team profiles (Über uns) */
.team-profile{
  height:100%;
  border:1px solid rgba(15,118,110,.12);
  border-radius:1.6rem;
  background:rgba(255,255,255,.9);
  box-shadow:0 18px 54px rgba(22,78,99,.08);
  overflow:hidden;
  transition:transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.team-profile:hover{
  transform:translateY(-6px);
  border-color:rgba(69,220,255,.55);
  box-shadow:0 30px 86px rgba(22,78,99,.14);
}
.team-profile-media{
  aspect-ratio: 4 / 5;
  background:linear-gradient(135deg, rgba(239,251,255,.96), rgba(255,255,255,.96));
  border-bottom:1px solid rgba(15,118,110,.10);
  overflow:hidden;
}
.team-profile-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.team-profile-body{
  padding:1.1rem 1.15rem 1.25rem;
}
.team-role-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:.45rem;
  color:rgba(15,23,42,.68);
}
.team-role-list li{
  position:relative;
  padding-left:1.15rem;
}
.team-role-list li::before{
  content:'';
  position:absolute;
  left:0;
  top:.65em;
  width:.55rem;
  height:.55rem;
  border-radius:999px;
  background:linear-gradient(135deg,var(--trineo-brand),var(--trineo-accent));
  opacity:.9;
}