/* ===== Tokens ===== */
:root{
  --ink:#0F3A63;
  --ink-soft:#3D5C78;
  --paper:#FFFFFF;
  --paper-deep:#F5F5F3;
  --line:#DEDEDA;
  --blue:#0073AA;
  --green:#5BAC26;
  --text:#1E2A33;
  --text-mute:#5E6A73;
  --maxw:1120px;
}
*{box-sizing:border-box;}
html{scroll-behavior:auto;}
body{
  margin:0;background:var(--paper);color:var(--text);
  font-family:'IBM Plex Sans',sans-serif;line-height:1.6;font-size:15.5px;
}
.mono{font-family:'IBM Plex Mono',monospace;}
h1,h2,h3{font-family:'Space Grotesk',sans-serif;margin:0;color:var(--ink);letter-spacing:-0.01em;font-weight:600;}
a{color:inherit;}
img{max-width:100%;display:block;-webkit-user-drag:none;user-drag:none;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
section{scroll-margin-top:84px;}

/* ======== Einblendeffekt für Bereiche & Kacheln ========
   Jedes Element mit der Klasse .reveal blendet sich sanft ein — entweder
   direkt beim Betreten der Seite (falls schon im sichtbaren Bereich) oder
   erst, sobald es beim Scrollen dort ankommt (siehe js/common.js). Neue
   Inhalte bekommen den Effekt automatisch, sobald ihnen dieselbe eine
   Klasse hinzugefügt wird — keine weiteren spezifischen Verweise nötig.
   Bewusst reines Ein-/Ausblenden ohne Verschiebung (kein translateY): bei
   dichten Kachel-Reihen (z.B. Fachgebiete) wirkte ein zusätzliches Sliden
   wie ein ruckartiges Zusammensetzen einzelner Bausteine — ein reiner
   Fade wirkt dagegen bei jeder Anzahl Kacheln gleichmäßig flüssig. */
.reveal{opacity:0;transition:opacity 1s cubic-bezier(.25,.1,.25,1);}
.reveal.reveal-visible{opacity:1;}
@media(prefers-reduced-motion:reduce){
  .reveal{transition:none;}
}

/* ===== Header ===== */
header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);transition:box-shadow .2s ease;}
header.scrolled{box-shadow:0 4px 14px rgba(15,58,99,.10);}
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 28px;max-width:var(--maxw);margin:0 auto;}
.brand{display:flex;align-items:center;gap:9px;font-family:'Space Grotesk';font-weight:600;font-size:16.5px;color:var(--ink);text-decoration:none;cursor:pointer;}
.brand .mark{width:10px;height:10px;border:2px solid var(--blue);transform:rotate(45deg);flex:none;}
.nav-links{display:flex;gap:26px;font-size:13.5px;}
.nav-links a{text-decoration:none;color:var(--text);font-weight:500;position:relative;padding-bottom:3px;}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--blue);transition:width .18s ease;}
.nav-links a:hover::after{width:100%;}
.nav-links a.active{color:var(--ink);}
.nav-links a.active::after{width:100%;background:var(--green);}
.nav .tel{font-family:'IBM Plex Mono';font-size:12.5px;color:var(--text-mute);display:inline-flex;align-items:center;gap:7px;}
.nav .tel i{font-size:11px;color:var(--blue);}
.nav .tel a{color:inherit;text-decoration:none;}
.nav-toggle{display:none;background:none;border:1px solid var(--line);width:38px;height:38px;align-items:center;justify-content:center;cursor:pointer;}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{content:"";display:block;width:16px;height:1.5px;background:var(--ink);position:relative;}
.nav-toggle span{-webkit-transition:background .18s ease .16s;transition:background .18s ease .16s;}
.nav-toggle span::before,.nav-toggle span::after{
  position:absolute;
  -webkit-transition:top .18s ease .18s,-webkit-transform .18s ease;
  transition:top .18s ease .18s,transform .18s ease;
}
.nav-toggle span::before{top:-5px;}
.nav-toggle span::after{top:5px;}
.nav-toggle.active span{background:transparent;}
.nav-toggle.active span::before,.nav-toggle.active span::after{
  top:0;
  -webkit-transition:top .18s ease,-webkit-transform .18s ease .18s;
  transition:top .18s ease,transform .18s ease .18s;
}
.nav-toggle.active span::before{-webkit-transform:rotate(45deg);transform:rotate(45deg);}
.nav-toggle.active span::after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);}

@media(max-width:820px){
  .nav-links{
    position:fixed;inset:64px 0 auto 0;background:var(--paper);
    flex-direction:column;gap:0;padding:8px 28px 20px;border-bottom:1px solid var(--line);
    transform:translateY(-12px);opacity:0;pointer-events:none;transition:all .18s ease;
  }
  .nav-links a{padding:13px 0;border-bottom:1px solid var(--line);width:100%;}
  .nav-links.open{transform:translateY(0);opacity:1;pointer-events:auto;}
  .nav-toggle{display:flex;}
  .nav .tel{display:none;}
}

/* ===== Hero ===== */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);min-height:647px;}
.hero-inner{max-width:var(--maxw);margin:0 auto;padding:88px 28px 64px;position:relative;z-index:1;}
.hero-eyebrow{font-family:'IBM Plex Mono';font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-mute);margin-bottom:16px;display:flex;align-items:center;gap:10px;}
.hero-eyebrow::before{content:"";width:24px;height:1px;background:var(--blue);}
.hero h1{font-size:clamp(30px,5vw,52px);max-width:680px;line-height:1.1;}
.hero h1 em{font-style:normal;border-bottom:3px solid var(--green);padding-bottom:1px;}
.hero p.lead{max-width:540px;margin:24px 0 0;font-size:16.5px;color:var(--text-mute);}
.hero-stats{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  background:linear-gradient(to right,
    transparent,
    rgba(255,255,255,.65) 12%,
    rgba(255,255,255,.65) 88%,
    transparent);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.hero-stats-inner{
  max-width:var(--maxw);margin:0 auto;padding:16px 28px 34px;
  display:flex;gap:0;border-top:1px solid var(--line);flex-wrap:wrap;
}
.hero-stats-inner > div{flex:1;min-width:130px;padding:16px 0 0;border-left:1px solid var(--line);padding-left:18px;}
.hero-stats-inner > div:first-child{border-left:none;padding-left:0;}
.hero-stats .num{font-family:'Space Grotesk';font-size:24px;font-weight:700;color:var(--num-c, var(--ink));}
.hero-stats .lbl{font-size:11.5px;color:var(--text-mute);margin-top:3px;}

@media(max-width:680px){
  .hero{min-height:0;}
  .hero-inner{padding:96px 20px 64px;}
  .hero-stats{position:static;}
  .hero-stats-inner{gap:18px 0;padding:16px 20px 24px;}
  .hero-stats-inner > div{flex:1 1 45%;border-left:none;padding-left:0;border-top:1px solid var(--line);}
}

.crosshair{position:absolute;width:16px;height:16px;opacity:.4;}
.crosshair::before,.crosshair::after{content:"";position:absolute;background:var(--ink);}
.crosshair::before{width:100%;height:1px;top:50%;}
.crosshair::after{height:100%;width:1px;left:50%;}

/* ===== Section heads ===== */
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:26px;border-bottom:1px solid var(--ink);padding-bottom:13px;flex-wrap:wrap;}
.section-head h2{font-size:21px;text-transform:uppercase;}
.section-head .count{font-family:'IBM Plex Mono';font-size:12px;color:var(--text-mute);}
.offene-stellen-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:24px;align-items:start;}
@media(max-width:680px){.offene-stellen-grid{grid-template-columns:1fr;}}
.team-photo.wide .ref-img-wrap img{height:170px;}
.offene-stellen-intro h3{font-size:20px;margin-bottom:10px;}
.offene-stellen-intro p{color:var(--text-mute);font-size:14.5px;margin:0;}
.section-pad{padding:64px 0;}
.section-pad + .section-pad{border-top:1px solid var(--line);}
.lead-text{max-width:680px;color:var(--text-mute);font-size:14.5px;margin:0 0 32px;}

@media(max-width:680px){.section-pad{padding:44px 0;}}



/* ===== Leistungen ===== */
.leistungen-subhead{font-size:16px;margin:0 0 16px;}
.leistungen-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
@media(max-width:900px){.leistungen-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.leistungen-grid{grid-template-columns:1fr;}}


.ref-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media(max-width:760px){.ref-grid{grid-template-columns:1fr;}}
.ref-card{
  border:1px solid var(--line);background:#fff;
  -webkit-transition:border-color .22s ease,-webkit-box-shadow .22s ease;
  transition:border-color .22s ease,box-shadow .22s ease;
}
.ref-card:hover{
  border-color:var(--ink);
  -webkit-box-shadow:0 4px 16px rgba(15,58,99,.13);
  box-shadow:0 4px 16px rgba(15,58,99,.13);
}
.ref-card .ref-top{padding:18px 20px 14px;border-bottom:1px solid var(--line);}
.ref-card h3{font-size:15.5px;line-height:1.3;}
.ref-card .ref-loc{font-family:'IBM Plex Mono';font-size:11.5px;color:var(--text-mute);margin-top:5px;}
.ref-meta{font-family:'IBM Plex Mono';font-size:11px;display:grid;grid-template-columns:1fr 1fr;}
.ref-meta div{padding:9px 14px;border-top:1px solid var(--line);}
.ref-meta div:nth-child(odd){border-right:1px solid var(--line);}
.ref-meta .k{display:block;color:var(--text-mute);font-size:9px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px;}
.ref-meta .v{color:var(--ink);}

/* ===== Ueber uns ===== */
.about-text p{color:var(--text);font-size:14.5px;margin:0 0 15px;}
.about-text .quote{font-family:'Space Grotesk';font-size:18px;color:var(--ink);margin:22px 0;border-left:2px solid var(--green);padding-left:16px;}

.btn:hover{background:#fff;color:var(--ink);-webkit-transform:translateY(-2px);transform:translateY(-2px);}
.btn.outline{background:transparent;color:var(--ink);}
.btn.outline:hover{background:var(--ink);color:#fff;}

/* ===== Job sheets ===== */
.sheet{margin-top:40px;border:1px solid var(--line);background:#fff;scroll-margin-top:90px;transition:border-color .22s ease,box-shadow .22s ease;}
.sheet:hover,.sheet.expanded{border-color:var(--ink);box-shadow:0 4px 16px rgba(15,58,99,.13);}
.sheet-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:24px 24px 18px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .2s ease;}
@media(hover:hover) and (pointer:fine){
  .sheet-top:hover{background:var(--paper-deep);}
}
.sheet.expanded .sheet-top{background:var(--paper-deep);}
.sheet-top .pos-tag{font-family:'IBM Plex Mono';font-size:11.5px;color:var(--text-mute);letter-spacing:.05em;}
.sheet-top h3{font-size:21px;margin-top:7px;max-width:520px;}
.dept-badge{font-family:'IBM Plex Mono';font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--blue);border:1px solid var(--blue);padding:5px 10px;white-space:nowrap;height:fit-content;}
.dept-badge.green{color:var(--green);border-color:var(--green);}

/* ---- Rechte Spalte im sheet-top: Abteilungs-Badge über dem Auf-/Zuklapp-Pfeil,
   statt gequetscht neben der Positionsnummer in der pos-tag-Zeile ---- */
.sheet-top-right{display:flex;flex-direction:column;align-items:flex-end;gap:10px;flex:none;}
@media(max-width:680px){.sheet-top-right{align-self:flex-end;}}

.sheet-toggle{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;
  color:var(--blue);font-size:18px;line-height:1;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.sheet.expanded .sheet-toggle{transform:rotate(180deg);}

/* ---- Auf-/Zuklapp-Mechanik: einfache max-height-Transition, deren Zielwert
   per JS aus der tatsächlichen Inhaltshöhe (scrollHeight) gemessen wird
   (siehe js/karriere.js) — dadurch bleibt sie unabhängig von der jeweiligen
   Textmenge exakt proportional und ruckelfrei. Bewusst kein CSS-Grid-Trick
   (grid-template-rows 0fr↔1fr): das zwingt den Browser bei jedem Frame zu
   einer vollen Grid-Neuberechnung, was in manchen Browsern spürbar hakelig
   wirkt — eine reine max-height-Transition auf einer Blockbox ist deutlich
   günstiger und läuft gleichmäßiger. */
.sheet-collapse{
  max-height:0;
  overflow:hidden;
  transition:max-height .55s cubic-bezier(.22,1,.36,1);
}
.sheet-collapse-inner{overflow:hidden;}

.sheet-body{padding:22px 24px 6px;display:grid;grid-template-columns:1fr 1fr;gap:28px;}
@media(max-width:680px){.sheet-body{grid-template-columns:1fr;padding:18px 18px 4px;}.sheet-top{padding:20px 18px 16px;flex-direction:column;}}
.col h4{font-family:'IBM Plex Mono';font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--text-mute);margin:0 0 12px;}
.col ul{margin:0 0 22px;padding:0;list-style:none;}
.col li{position:relative;padding-left:16px;margin-bottom:9px;font-size:14px;color:var(--text);}
.col li::before{content:"—";position:absolute;left:0;color:var(--line);}
.benefits{grid-column:1 / -1;border-top:1px dashed var(--line);padding-top:18px;}
.benefits ul{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 22px;}
@media(max-width:680px){.benefits ul{grid-template-columns:1fr 1fr;}}

.titleblock{border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr) 1.4fr;font-family:'IBM Plex Mono';font-size:11px;transition:border-color .22s ease;}
.sheet:hover .titleblock,.sheet.expanded .titleblock{border-color:var(--ink);}
@media(max-width:680px){.titleblock{grid-template-columns:repeat(2,1fr);}}
.titleblock div{padding:11px 15px;border-left:1px solid var(--line);}
.titleblock div:first-child{border-left:none;}
.titleblock .k{display:block;color:var(--text-mute);font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px;}
.titleblock .v{color:var(--ink);}
.titleblock .apply{
  background:var(--paper-deep);color:var(--ink);
  border-left:1px solid var(--line);
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;
  gap:16px;
  text-decoration:none;
  padding:11px 20px;
  -webkit-transition:background .22s ease,color .22s ease,-webkit-transform .15s ease;
  transition:background .22s ease,color .22s ease,transform .15s ease;
}
.sheet:hover .titleblock .apply,.sheet.expanded .titleblock .apply{background:var(--ink);color:#fff;}
.sheet .titleblock .apply:hover{background:var(--green);color:#fff;-webkit-transform:translateY(-1px);transform:translateY(-1px);}
.titleblock .apply:active{-webkit-transform:translateY(0);transform:translateY(0);}
.titleblock .apply .v{color:inherit;font-weight:500;-webkit-transition:letter-spacing .2s ease;transition:letter-spacing .2s ease;}
.titleblock .apply:hover .v{letter-spacing:.02em;}
.titleblock .apply .go{font-size:15px;-webkit-transition:-webkit-transform .2s ease;transition:transform .2s ease;}
.titleblock .apply:hover .go{-webkit-transform:translateX(3px);transform:translateX(3px);}
@media(max-width:680px){.titleblock .apply{grid-column:1/-1;}}

/* ===== Footer ===== */
footer{background:var(--ink);color:#D9DEE3;padding:52px 0 26px;}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:36px;}
@media(max-width:680px){.foot-grid{grid-template-columns:1fr;gap:28px;}}
footer h3{color:#fff;font-size:18px;margin-bottom:13px;}
footer p{color:#AEB7C0;font-size:14px;max-width:340px;margin:0;}
.foot-cta{display:inline-flex;align-items:center;gap:8px;margin-top:16px;color:#fff;text-decoration:none;font-family:'IBM Plex Mono';font-size:12.5px;border-bottom:1px solid var(--green);padding-bottom:3px;transition:color .2s ease,gap .2s ease;}
.foot-cta:hover{color:var(--green);gap:12px;}
footer ul{list-style:none;margin:0;padding:0;}
footer li{margin-bottom:8px;font-size:13.5px;color:#C3CAD1;}
footer li a{color:inherit;text-decoration:none;}
footer .label{font-family:'IBM Plex Mono';font-size:10.5px;color:#7C8893;text-transform:uppercase;letter-spacing:.06em;display:block;margin-bottom:13px;}
.foot-bottom{margin-top:44px;padding-top:18px;border-top:1px solid #24486B;display:flex;justify-content:space-between;font-size:12px;color:#7C8893;flex-wrap:wrap;gap:10px;}
.foot-bottom .modal-trigger{background:none;border:none;color:#7C8893;font-size:12px;cursor:pointer;padding:0;font-family:inherit;transition:color .18s ease;}
.foot-bottom .modal-trigger:hover{color:var(--green);}
.foot-credit{color:#7C8893;text-decoration:none;display:inline-flex;align-items:center;gap:5px;transition:color .18s ease;}
.foot-credit:hover{color:#00CCFF;}
.foot-credit .gravid-domain{font-family:'IBM Plex Mono';font-size:12px;color:inherit;letter-spacing:.04em;}
.foot-credit .brand-gravid{color:#3399CC;}

/* ===== Seitenspezifische Stile ===== */
/* ---- Hero Slider ---- */
.hero-slider{position:absolute;inset:0;z-index:0;}
.hero-slide{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center 30%;
  opacity:0;
  -webkit-transition:opacity 1.2s ease;
  transition:opacity 1.2s ease;
}
.hero-slide.active{opacity:1;}
.hero-slider::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,
    rgba(255,255,255,.97) 38%,
    rgba(255,255,255,.72) 62%,
    rgba(255,255,255,.18) 100%);
}

/* ---- Vertikale Punkt-Navigation ---- */
.hero-dots{
  position:absolute;right:28px;top:50%;
  -webkit-transform:translateY(-50%);transform:translateY(-50%);
  z-index:2;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-orient:vertical;-webkit-box-direction:normal;
  -ms-flex-direction:column;flex-direction:column;
  gap:10px;
}
.hero-dot{
  width:8px;height:8px;border-radius:50%;
  background:transparent;
  border:1.5px solid rgba(15,58,99,.4);
  padding:0;cursor:pointer;
  -webkit-transition:background .3s ease, border-color .3s ease, -webkit-transform .3s ease;
  transition:background .3s ease, border-color .3s ease, transform .3s ease;
}
.hero-dot.active{
  background:var(--blue);
  border-color:var(--blue);
  -webkit-transform:scale(1.4);transform:scale(1.4);
}
.hero-dot:hover:not(.active){
  background:rgba(0,115,170,.35);
  border-color:var(--blue);
}
@media(max-width:680px){
  .hero-slider::after{background:rgba(255,255,255,.72);}
  .hero-dots{right:14px;gap:8px;}
  .hero-dot{width:7px;height:7px;}
}

/* ---- Über uns ---- */
.about-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:48px;align-items:start;}
@media(max-width:760px){.about-grid{grid-template-columns:1fr;}}
.person-cards{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:16px 24px;margin-top:8px;}
@media(max-width:760px){.person-cards{grid-template-columns:1fr;}}
.person-card{display:flex;align-items:center;justify-content:center;gap:20px;padding:16px 0;border-bottom:1px solid var(--line);}
/* Bild+Text als Einheit mittig im Feld (justify-content:center oben), Text
   selbst bleibt linksbündig (siehe .person-card .role/.name/.title). */
.person-avatar{
  position:relative;flex:none;
}
.person-card img{width:92px;height:92px;object-fit:cover;object-position:top;-webkit-clip-path:url(#squircle3);clip-path:url(#squircle3);flex:none;filter:grayscale(20%);}
.person-card .role{font-family:'IBM Plex Mono';font-size:11px;color:var(--text-mute);text-transform:uppercase;letter-spacing:.05em;display:block;margin-bottom:4px;}
.person-card .name{font-weight:600;color:var(--ink);font-size:18px;display:block;line-height:1.25;}
.person-card .title{font-size:13px;color:var(--text-mute);margin-top:2px;}
.team-photo{width:100%;}
.team-photo .ref-img-wrap{width:100%;overflow:hidden;cursor:pointer;border:1px solid var(--ink);}
.team-photo .ref-img-wrap img{width:100%;height:240px;object-fit:cover;object-position:top;transition:transform .32s ease;border-bottom:none;}
.team-photo .ref-img-wrap:hover img{transform:scale(1.04);}
.team-photo .ref-img-wrap::after{content:"⊕";position:absolute;bottom:10px;right:12px;background:rgba(15,58,99,.75);color:#fff;font-size:18px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .22s ease,transform .22s ease;transform:scale(.8);}
.team-photo .ref-img-wrap:hover::after{opacity:1;transform:scale(1);}
.office-strip{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);margin-top:48px;border:1px solid var(--ink);}
.office-strip img{width:100%;height:180px;object-fit:cover;display:block;}
.office-strip .ref-img-wrap{width:100%;overflow:hidden;cursor:pointer;}
.office-strip .ref-img-wrap img{height:180px;-webkit-transition:-webkit-transform .32s ease;transition:transform .32s ease;border-bottom:none;}
.office-strip .ref-img-wrap:hover img{-webkit-transform:scale(1.04);transform:scale(1.04);}
.office-strip .ref-img-wrap::after{content:"⊕";position:absolute;bottom:10px;right:12px;background:rgba(15,58,99,.75);color:#fff;font-size:18px;width:32px;height:32px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;opacity:0;-webkit-transition:opacity .22s ease,-webkit-transform .22s ease;transition:opacity .22s ease,transform .22s ease;-webkit-transform:scale(.8);transform:scale(.8);}
.office-strip .ref-img-wrap:hover::after{opacity:1;-webkit-transform:scale(1);transform:scale(1);}
@media(max-width:680px){.office-strip{grid-template-columns:1fr;}}

/* ---- Karriere ---- */
.karriere-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:0;border:1px solid var(--ink);overflow:hidden;}
@media(max-width:680px){.karriere-grid{grid-template-columns:1fr;}}
.karriere-img{height:100%;min-height:220px;}
.karriere-img img{width:100%;height:100%;object-fit:cover;display:block;}
.karriere-text{padding:32px 28px;display:flex;flex-direction:column;justify-content:center;gap:20px;}
.karriere-text h3{font-size:20px;}
.karriere-text p{color:var(--text-mute);font-size:14.5px;margin:0;}

/* ---- Kontakt ---- */
.contact-section{padding:64px 0;border-top:1px solid var(--line);}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;}
@media(max-width:680px){.contact-grid{grid-template-columns:1fr;}}
.contact-block h3{font-size:18px;margin-bottom:16px;}
.contact-data{display:flex;flex-direction:column;gap:0;}
.contact-row{display:flex;gap:0;border-bottom:1px solid var(--line);font-size:13.5px;}
.contact-row .k{font-family:'IBM Plex Mono';font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-mute);padding:10px 12px 10px 0;min-width:100px;}
.contact-row .v{padding:10px 0;color:var(--ink);}
.contact-row a{color:var(--blue);text-decoration:none;}
.contact-row a:hover{text-decoration:underline;}
.map-link{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-family:'IBM Plex Mono';font-size:12.5px;color:var(--blue);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:3px;}

/* ---- Animationen allgemein ---- */
@-webkit-keyframes fadeInOverlay{from{opacity:0}to{opacity:1}}
@keyframes fadeInOverlay{from{opacity:0}to{opacity:1}}
@-webkit-keyframes slideUpModal{from{opacity:0;-webkit-transform:translateY(28px);transform:translateY(28px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}
@keyframes slideUpModal{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@-webkit-keyframes fadeOutOverlay{from{opacity:1}to{opacity:0}}
@keyframes fadeOutOverlay{from{opacity:1}to{opacity:0}}
@-webkit-keyframes slideDownModal{from{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(28px);transform:translateY(28px)}}
@keyframes slideDownModal{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(28px)}}

/* ---- Legal Modal ---- */
.modal-overlay{
  position:fixed;inset:0;background:rgba(15,58,99,.55);z-index:100;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  padding:40px 16px 16px;
  opacity:0;pointer-events:none;
  -webkit-transition:opacity .25s ease;transition:opacity .25s ease;
}
.modal-overlay.open{opacity:1;pointer-events:auto;}
.modal{
  background:#fff;width:100%;max-width:860px;height:80vh;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-orient:vertical;-webkit-box-direction:normal;
  -ms-flex-direction:column;flex-direction:column;
  border-top:3px solid var(--blue);
  -webkit-transform:translateY(28px);transform:translateY(28px);
  -webkit-transition:-webkit-transform .28s ease,opacity .28s ease;
  transition:transform .28s ease,opacity .28s ease;
  opacity:0;
}
.modal-overlay.open .modal{-webkit-transform:translateY(0);transform:translateY(0);opacity:1;}
.modal-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:18px 24px;border-bottom:1px solid var(--line);-ms-flex-negative:0;flex-shrink:0;}
.modal-header h3{font-size:17px;margin:0;}
.modal-close{
  background:none;border:1px solid var(--line);width:34px;height:34px;
  cursor:pointer;font-size:18px;color:var(--ink);
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  -webkit-transition:background .18s ease,color .18s ease,border-color .18s ease;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.modal-close:hover{background:var(--ink);color:#fff;border-color:var(--ink);}
.modal-tabs{display:-webkit-box;display:-ms-flexbox;display:flex;gap:0;border-bottom:1px solid var(--line);-ms-flex-negative:0;flex-shrink:0;}
.modal-tab{padding:12px 20px;font-family:'IBM Plex Mono';font-size:12px;background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;color:var(--text-mute);white-space:nowrap;-webkit-transition:color .18s ease,border-color .18s ease;transition:color .18s ease,border-color .18s ease;}
.modal-tab:hover{color:var(--ink);}
.modal-tab.active{color:var(--blue);border-bottom-color:var(--blue);}
.modal-body{overflow-y:auto;padding:28px 28px 40px;font-size:14px;line-height:1.7;}
.modal-body h1{font-size:20px;margin:0 0 18px;}
.modal-body h2{font-size:16px;margin:22px 0 10px;border-bottom:1px solid var(--line);padding-bottom:8px;}
.modal-body h3{font-size:14px;margin:16px 0 8px;color:var(--ink-soft);}
.modal-body p{margin:0 0 12px;color:var(--text);}
.modal-body ul{padding-left:20px;margin:0 0 12px;}
.modal-body li{margin-bottom:6px;color:var(--text);}
.modal-body a{color:var(--blue);}
.modal-pane{display:none;}
.modal-pane.active{display:block;}

/* ---- Bild-Modal (Referenzen) ---- */
.img-modal-overlay{
  position:fixed;inset:0;background:rgba(10,25,45,.82);z-index:110;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  padding:24px;
  opacity:0;pointer-events:none;
  -webkit-transition:opacity .25s ease;transition:opacity .25s ease;
}
.img-modal-overlay.open{opacity:1;pointer-events:auto;}
.img-modal{
  position:relative;width:960px;max-width:calc(100vw - 48px);
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-orient:vertical;-webkit-box-direction:normal;
  -ms-flex-direction:column;flex-direction:column;
  -webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;
  -webkit-transform:scale(.94);transform:scale(.94);
  -webkit-transition:-webkit-transform .28s ease,opacity .28s ease;
  transition:transform .28s ease,opacity .28s ease;
  opacity:0;
}
.img-modal-overlay.open .img-modal{-webkit-transform:scale(1);transform:scale(1);opacity:1;}
.img-modal img{display:block;width:100%;aspect-ratio:3/2;max-height:70vh;object-fit:cover;}
/* Sanftes, endloses Hin-und-Her-Schwenken für Bilder, die breiter/höher sind
   als der feste 3:2-Ausschnitt (z.B. Panoramafotos) — zeigt so nach und nach
   beide sonst abgeschnittenen Seiten. Langsam und mit weichem Ein-/Ausklingen
   an den Rändern, damit es wie ein sanftes Pendeln statt einer Hektik wirkt. */
@-webkit-keyframes imgPanH{from{-webkit-object-position:0% 50%;object-position:0% 50%;}to{-webkit-object-position:100% 50%;object-position:100% 50%;}}
@keyframes imgPanH{from{object-position:0% 50%;}to{object-position:100% 50%;}}
@-webkit-keyframes imgPanV{from{-webkit-object-position:50% 0%;object-position:50% 0%;}to{-webkit-object-position:50% 100%;object-position:50% 100%;}}
@keyframes imgPanV{from{object-position:50% 0%;}to{object-position:50% 100%;}}
/* Dauer wird per JS proportional zur nötigen Schwenkstrecke gesetzt (siehe
   applyImgPanIntro), damit die gefühlte Geschwindigkeit bei jedem Bild
   gleich wirkt, egal wie stark seine Proportionen vom 3:2-Ausschnitt abweichen. */
.img-modal img.pan-h{-webkit-animation-name:imgPanH;animation-name:imgPanH;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:alternate;animation-direction:alternate;}
.img-modal img.pan-v{-webkit-animation-name:imgPanV;animation-name:imgPanV;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:alternate;animation-direction:alternate;}
/* Porträts (Geschäftsführung/Prokuristen): einzige Ausnahme — Person soll immer
   vollständig zu sehen sein, daher kein Zuschnitt. Feste Breite bleibt trotzdem
   erhalten, damit die Fußleiste unabhängig von Bildschirmausrichtung genauso
   breit wie das Bild ist. */
.img-modal-overlay.portrait-mode .img-modal{width:min(560px,calc(100vw - 48px),70vh);}
.img-modal-overlay.portrait-mode .img-modal img{aspect-ratio:1/1;object-fit:contain;}
.img-modal-caption{
  background:rgba(255,255,255,.88);color:var(--ink);
  padding:14px 24px;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;
  gap:16px;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.img-modal-caption .cap-title{font-family:'Space Grotesk';font-size:15px;font-weight:600;color:var(--ink);}
.img-modal-caption .cap-meta{font-family:'IBM Plex Mono';font-size:11.5px;color:var(--text-mute);margin-top:3px;}
.img-modal-close{
  background:none;border:1px solid var(--line);
  color:var(--ink);width:32px;height:32px;cursor:pointer;font-size:17px;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  -ms-flex-negative:0;flex-shrink:0;
  -webkit-transition:background .18s ease,border-color .18s ease;
  transition:background .18s ease,border-color .18s ease;
}
.img-modal-close:hover{background:var(--ink);color:#fff;border-color:var(--ink);}

/* ---- Bild-Modal: Pfeil-Navigation zur vorherigen/nächsten Referenz ----
   Gleiche Zwei-Ebenen-Lösung wie beim To-Top-Button (siehe Kommentar dort):
   ::before = Rahmenfarbe (volle Größe), ::after = Füllfarbe (1px eingerückt). */
.img-modal-nav{
  position:fixed;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);
  z-index:111;
  width:52px;height:52px;
  background:none;border:none;padding:0;
  color:#fff;font-size:26px;line-height:1;cursor:pointer;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  opacity:0;pointer-events:none;
  -webkit-transition:opacity .2s ease;
  transition:opacity .2s ease;
}
.img-modal-nav::before{
  content:"";position:absolute;inset:0;z-index:-2;
  -webkit-clip-path:url(#squircle3);clip-path:url(#squircle3);
  background:rgba(255,255,255,.35);
  -webkit-transition:background .18s ease;
  transition:background .18s ease;
}
.img-modal-nav::after{
  content:"";position:absolute;inset:1px;z-index:-1;
  -webkit-clip-path:url(#squircle3);clip-path:url(#squircle3);
  background:rgba(255,255,255,.12);
  -webkit-transition:background .18s ease;
  transition:background .18s ease;
}
.img-modal-overlay.open.has-nav .img-modal-nav{opacity:1;pointer-events:auto;}
.img-modal-nav:hover::before{background:rgba(255,255,255,.6);}
.img-modal-nav:hover::after{background:rgba(255,255,255,.22);}
.img-modal-prev{left:20px;}
.img-modal-next{right:20px;}
/* Schwelle orientiert sich am maximalen Modal-Bild (960px) plus dem Platz,
   den die Pfeile links/rechts daneben bräuchten (~90px je Seite) — nicht an
   einem reinen Telefon-Breakpoint. Sonst liegen die Pfeile z.B. auf einem
   iPad im Hoch- oder Querformat weiterhin mittig auf dem Bild statt daneben. */
@media(max-width:1140px){
  .img-modal-nav{
    width:58px;height:58px;font-size:28px;
    top:auto;bottom:32px;
    -webkit-transform:none;transform:none;
  }
  .img-modal-prev{left:24px;}
  .img-modal-next{right:24px;}
}

/* ---- Referenzkarte klickbar ---- */
.ref-card{cursor:pointer;}
.ref-img-wrap{position:relative;overflow:hidden;}

/* ---- Referenzkarten: Bild-Wrap Basisstil ---- */
.ref-img-wrap img{
  width:100%;height:290px;object-fit:cover;display:block;
  border-bottom:1px solid var(--line);
  -webkit-transition:-webkit-transform .32s ease,opacity .32s ease,-webkit-filter .32s ease;
  transition:transform .32s ease,opacity .32s ease,filter .32s ease;
}
.ref-card:hover .ref-img-wrap img{-webkit-transform:scale(1.04);transform:scale(1.04);}
/* Dezentes Ausblenden nur bei Geräten mit echtem Zeigegerät — die gehoverte
   Referenz sticht dadurch stärker hervor. Auf Touch-Geräten (kein Hover)
   bleiben die Bilder immer in voller Farbe sichtbar. */
@media(hover:hover) and (pointer:fine){
  .ref-card .ref-img-wrap img{opacity:.82;-webkit-filter:grayscale(35%);filter:grayscale(35%);}
  .ref-card:hover .ref-img-wrap img{opacity:1;-webkit-filter:grayscale(0%);filter:grayscale(0%);}
}
.ref-img-wrap::after{
  content:"⊕";position:absolute;bottom:10px;right:12px;
  background:rgba(15,58,99,.75);color:#fff;
  font-size:18px;width:32px;height:32px;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  opacity:0;
  -webkit-transition:opacity .22s ease,-webkit-transform .22s ease;
  transition:opacity .22s ease,transform .22s ease;
  -webkit-transform:scale(.8);transform:scale(.8);
}
.ref-card:hover .ref-img-wrap::after{opacity:1;-webkit-transform:scale(1);transform:scale(1);}

/* ---- Porträt-Wrap (Über uns) — steht NACH .ref-img-wrap img, gewinnt damit ----
   Squircle statt Kreis: border wird bei clip-path nicht neu entlang der Kurve
   gezeichnet (Eckstücke fehlen dann, siehe Buttons) — daher hier dieselbe
   Ring-Technik wie bei den Referenzkarten: der Wrap liefert die Randfarbe
   (var(--line), beim Hovern var(--ink), genau wie .ref-card) als Hintergrund,
   das Bild sitzt per Padding 1px eingerückt darüber — ergibt einen scharfen
   1px-Rahmen statt einer echten border-Eigenschaft (siehe Buttons-Kommentar). */
.person-img-wrap{
  position:relative;
  width:92px;height:92px;
  -webkit-clip-path:url(#squircle3);clip-path:url(#squircle3);
  background:var(--line);
  padding:1px;box-sizing:border-box;
  flex:none;cursor:pointer;
}
/* Überschreibt .ref-img-wrap img vollständig für Portraits */
.person-img-wrap img{
  width:100% !important;height:100% !important;
  -webkit-clip-path:url(#squircle3) !important;clip-path:url(#squircle3) !important;
  object-fit:cover !important;object-position:top center !important;
  display:block !important;
  border:none !important;border-bottom:none !important;
  -webkit-filter:grayscale(20%);filter:grayscale(20%);
  -webkit-transition:-webkit-transform .28s ease,-webkit-filter .28s ease;
  transition:transform .28s ease,filter .28s ease;
}
/* Nur das Bild reagiert beim Hovern — kein Rahmen-/Schatten-Effekt drumherum. */
@media(hover:hover) and (pointer:fine){
  .person-card:hover .person-img-wrap img{
    -webkit-transform:scale(1.08);transform:scale(1.08);
    -webkit-filter:grayscale(0);filter:grayscale(0);
  }
}
/* Kein ⊕-Icon bei Portraits */
.person-img-wrap::after{display:none !important;}



/* ---- Leistungen: Icons + individuelle Hover-Farbe ----
   Hover-Funktion aktuell auf Eis gelegt (Felder sind derzeit nicht klickbar/
   führen zu nichts). Basis-Optik zeigt daher überall dauerhaft den Zustand,
   der vorher nur beim Hovern (bzw. auf Touch-Geräten dauerhaft) zu sehen war.
   Die eigentlichen :hover-Regeln bleiben unten als Kommentar erhalten und
   können reaktiviert werden, sobald die Felder wieder eine Funktion (Links o.ä.)
   bekommen. */
.leistung-cell{
  background:var(--paper-deep);padding:14px 18px;
  position:relative;cursor:default;
  display:-ms-grid;display:grid;
  grid-template-columns:1fr 2fr;gap:0 18px;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-transition:background .2s ease,-webkit-transform .2s ease;
  transition:background .2s ease,transform .2s ease;
}
.leistung-cell::before{
  content:"";position:absolute;left:0;top:0;
  width:6px;height:100%;
  background:var(--hc, var(--blue));
  -webkit-transition:height .22s ease;
  transition:height .22s ease;
}
.leistung-icon{
  aspect-ratio:1/1;width:100%;max-width:110px;
  margin:0 auto;box-sizing:border-box;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  font-size:38px;
  color:#C5CBCF;
  -webkit-transition:color .7s ease-in-out, font-size .22s ease, -webkit-transform .7s ease-in-out;
  transition:color .7s ease-in-out, font-size .22s ease, transform .7s ease-in-out;
}

/* ---- Symbol "aufblasen": wird größer bei Hover-Beginn (Maus) bzw.
   Antippen (Touch), wieder kleiner beim Verlassen. Über die .puffed-Klasse
   gesteuert (siehe js/index.js), nicht per reinem CSS :hover — so läuft das
   Größerwerden immer komplett bis zum Ende durch, auch wenn der Cursor die
   Fläche schon vorher wieder verlässt; erst danach darf es schrumpfen.
   Bewusst zwei getrennte transition-Angaben: die hier auf .puffed hinterlegte
   gilt für den Weg HINEIN (etwas zügiger, flüssig), während für den Weg
   ZURÜCK die Angabe auf der Basisklasse .leistung-icon (oben, länger und
   sanfter) greift — dadurch fühlt sich das Schrumpfen spürbar weicher an
   als das Aufblasen. */
.leistung-icon.puffed{
  -webkit-transform:scale(1.18);
  transform:scale(1.18);
  color:#546469;
  -webkit-transition:color .4s ease-in-out, -webkit-transform .4s ease-in-out;
  transition:color .4s ease-in-out, transform .4s ease-in-out;
}
.leistung-cell .lname{
  text-align:left;line-height:1.3;
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;font-size:14px;
  color:var(--ink);display:block;
}

/* ---- Hover-Regeln (auf Eis gelegt, siehe Kommentar oben) ----
.leistung-cell{background:#fff;}
.leistung-cell::before{height:0;}
.leistung-cell:hover{background:var(--paper-deep);}
.leistung-cell:hover::before{height:100%;}
.leistung-icon{color:var(--line);}
.leistung-cell:hover .leistung-icon{color:#546469;font-size:38px;}
@media(hover:none){
  .leistung-cell{background:var(--paper-deep);}
  .leistung-cell::before{height:100%;}
  .leistung-icon{color:#546469;font-size:38px;}
}
---- Ende Hover-Regeln ---- */

@media(min-width:901px){.leistung-cell{padding:16px 18px;}}
@media(max-width:480px){
  .leistung-cell{padding:12px 18px;}
  .leistung-icon{max-width:62px;font-size:32px;}
}

/* ---- Nav-Link Hover (bereits via ::after, zusätzlich color) ---- */
.nav-links a{-webkit-transition:color .18s ease;transition:color .18s ease;}

/* ---- map-link hover ---- */
.map-link{-webkit-transition:color .18s ease,border-color .18s ease;transition:color .18s ease,border-color .18s ease;}
.map-link:hover{color:var(--green);border-color:var(--green);}

/* ---- Titleblock Apply Button (Stellenseite) ---- */
.titleblock .apply{padding:11px 16px;}

@media(min-width:680px){
  .modal-overlay{padding-top:64px;}
}

/* ===== Buttons konsolidiert ===== */
.btn{
  display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  gap:10px;background:var(--ink);color:#fff;text-decoration:none;
  padding:12px 22px;font-family:'IBM Plex Mono';font-size:12.5px;
  white-space:nowrap;position:relative;border:1px solid var(--ink);
  -webkit-transition:background .22s ease,color .22s ease,border-color .22s ease,-webkit-transform .18s ease,box-shadow .22s ease;
  transition:background .22s ease,color .22s ease,border-color .22s ease,transform .18s ease,box-shadow .22s ease;
}
.btn:hover{background:#fff;color:var(--ink);-webkit-transform:translateY(-2px);transform:translateY(-2px);box-shadow:0 4px 16px rgba(15,58,99,.13);}
.btn:active{-webkit-transform:translateY(0);transform:translateY(0);}
.btn.outline{background:transparent;color:var(--ink);}
.btn.outline:hover{background:var(--ink);color:#fff;}

/* ===== To-Top Button =====
   Squircle-Form (clip-path) liegt auf ::before, nicht auf dem Button selbst —
   der Button trägt nur Text-Farbe + Leucht-/Schatteneffekte (per filter, der
   der geclippten Kind-Form korrekt folgt, anders als box-shadow). Getrennte
   Ebenen vermeiden den Safari-Bug, bei dem clip-path + filter/Übergänge auf
   demselben Element nicht sauber zusammenspielen. Versteckte SVG-Definition
   ist bewusst 1×1px groß (nicht 0×0) — 0×0 verhinderte auf manchen Geräten
   die korrekte Auflösung von objectBoundingBox-clipPaths. */
.visually-hidden-defs{position:absolute;width:1px;height:1px;overflow:hidden;margin:-1px;padding:0;border:0;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}
.to-top{
  position:fixed;right:24px;bottom:24px;z-index:50;
  width:46px;height:46px;
  background:none;border:none;padding:0;
  color:#fff;font-size:19px;line-height:1;cursor:pointer;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  opacity:0;pointer-events:none;
  -webkit-transform:translateX(70px);transform:translateX(70px);
  -webkit-transition:opacity .3s ease,-webkit-transform .3s ease,color .22s ease,-webkit-filter .22s ease,bottom .25s ease;
  transition:opacity .3s ease,transform .3s ease,color .22s ease,filter .22s ease,bottom .25s ease;
}
/* Zwei gestapelte Ebenen statt border-Eigenschaft: CSS zeichnet einen border
   bei clip-path nicht neu entlang der Kurve, sondern schneidet nur den
   ursprünglichen rechteckigen Rahmen zu — die Eckstücke gehen dabei verloren.
   ::before (Rahmenfarbe, volle Größe) liegt hinter ::after (Füllfarbe, 1px
   eingerückt) — das ergibt einen sauberen 1px-Rahmen entlang der ganzen Kurve. */
.to-top::before{
  content:"";position:absolute;inset:0;z-index:-2;
  -webkit-clip-path:url(#squircle3);clip-path:url(#squircle3);
  background:var(--ink);
}
.to-top::after{
  content:"";position:absolute;inset:1px;z-index:-1;
  -webkit-clip-path:url(#squircle3);clip-path:url(#squircle3);
  background:var(--ink);
  -webkit-transition:background .22s ease;
  transition:background .22s ease;
}
.to-top.visible{opacity:1;pointer-events:auto;-webkit-transform:translateX(0);transform:translateX(0);}
.to-top.bounce{
  -webkit-animation:toTopBounce 2.5s ease-in-out infinite;
  animation:toTopBounce 2.5s ease-in-out infinite;
}
.to-top:hover{color:var(--ink);-webkit-filter:drop-shadow(0 4px 16px rgba(15,58,99,.13));filter:drop-shadow(0 4px 16px rgba(15,58,99,.13));-webkit-animation-play-state:paused;animation-play-state:paused;}
.to-top:hover::after{background:#fff;}
.to-top.on-footer{-webkit-filter:drop-shadow(0 0 3px rgba(255,255,255,.9)) drop-shadow(0 0 12px rgba(255,255,255,.6));filter:drop-shadow(0 0 3px rgba(255,255,255,.9)) drop-shadow(0 0 12px rgba(255,255,255,.6));}
.to-top.on-footer:hover{-webkit-filter:drop-shadow(0 0 3px rgba(255,255,255,.9)) drop-shadow(0 0 12px rgba(255,255,255,.6)) drop-shadow(0 4px 10px rgba(15,58,99,.13));filter:drop-shadow(0 0 3px rgba(255,255,255,.9)) drop-shadow(0 0 12px rgba(255,255,255,.6)) drop-shadow(0 4px 10px rgba(15,58,99,.13));}
.to-top.modal-open{opacity:0;pointer-events:none;-webkit-transform:translateX(70px);transform:translateX(70px);}
@media(max-width:680px){.to-top{right:16px;bottom:16px;width:42px;height:42px;font-size:17px;}}

@-webkit-keyframes toTopBounce{
  0%   {-webkit-transform:translateY(0);transform:translateY(0);}
  10%  {-webkit-transform:translateY(-10px);transform:translateY(-10px);}
  20%  {-webkit-transform:translateY(0);transform:translateY(0);}
  28%  {-webkit-transform:translateY(-6px);transform:translateY(-6px);}
  36%  {-webkit-transform:translateY(0);transform:translateY(0);}
  100% {-webkit-transform:translateY(0);transform:translateY(0);}
}
@keyframes toTopBounce{
  0%   {transform:translateY(0);}
  10%  {transform:translateY(-10px);}
  20%  {transform:translateY(0);}
  28%  {transform:translateY(-6px);}
  36%  {transform:translateY(0);}
  100% {transform:translateY(0);}
}