@layer reset, base, components, responsive;

@layer reset {
  *{box-sizing:border-box}
  html{scroll-behavior:smooth;scroll-padding-top:86px;overflow-x:hidden}
  body{margin:0}
  button,input,textarea{font:inherit}
  button{cursor:pointer}
  a{color:inherit}
  img,svg{display:block;max-width:100%}
  h1,h2,h3,p{margin-top:0}
  button{border:0}
  summary{cursor:pointer}
}

@layer base {
  :root{
    --green:#4CB94D;
    --green-d:#348C3A;
    --teal:#008B78;
    --teal-d:#006D5F;
    --violet:#7737B5;
    --violet-d:#5E278D;
    --white:#FFFFFF;
    --ink:#1F2937;
    --ink-2:#273444;
    --gray:#F3F4F6;
    --muted:#657181;
    --line:#D7DEE5;
    --line-2:#C4CDD6;
    --dark:#18232E;
    --dark-2:#202D39;
    --shell:1320px;
    --soft-shadow:0 24px 70px rgba(31,41,55,.12);
  }
  body{
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
    color:var(--ink);background:#fff;line-height:1.5;overflow-x:hidden;text-rendering:optimizeLegibility;
  }
  ::selection{background:#E9D9F5;color:var(--ink)}
  :focus-visible{outline:3px solid rgba(119,55,181,.36);outline-offset:4px}
  .shell{width:min(var(--shell),calc(100% - 48px));margin-inline:auto}
  .section{padding:110px 0}
  .skip-link{position:absolute;left:-9999px;top:0;z-index:1000;padding:10px 14px;background:var(--ink);color:#fff;text-decoration:none}
  .skip-link:focus{left:12px;top:12px}
  .eyebrow{
    display:inline-flex;align-items:center;gap:9px;margin:0 0 14px;color:var(--violet);
    font-size:.73rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase;line-height:1.3;
  }
  .eyebrow::before{content:"";width:6px;height:6px;background:currentColor;border-radius:50%;flex:0 0 auto;opacity:.9}
  .section-head h2,.faq h2{
    font-size:clamp(2.45rem,4.5vw,4.65rem);line-height:.98;letter-spacing:-.052em;margin-bottom:16px;
    text-wrap:balance;hyphens:none;word-break:normal;
  }
  .section-head>p:last-child{max-width:720px;color:#5F6C7B;font-size:clamp(1rem,1.3vw,1.13rem);margin-bottom:0}
  .section-head.compact{max-width:900px}
  .section-head.light h2{color:#fff}
  .section-head.light>p:last-child{color:#C7D0D8}
  .section-head.light .eyebrow{color:#CFAAE9}
  .button{
    display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:11px 17px;
    border:1px solid transparent;border-radius:4px;font-weight:800;text-decoration:none;
    transition:transform .17s ease,background .17s ease,border-color .17s ease,color .17s ease;
  }
  .button:hover{transform:translateY(-1px)}
  .button-primary{background:var(--violet);border-color:var(--violet);color:#fff;box-shadow:inset 0 -2px 0 rgba(0,0,0,.12)}
  .button-primary:hover{background:var(--violet-d);border-color:var(--violet-d)}
  .button-ghost{background:#fff;border-color:#BBC5CE;color:var(--ink)}
  .button-ghost:hover{border-color:var(--violet);color:var(--violet)}
  .arrow::after{content:"→";transition:transform .17s ease}
  .arrow:hover::after{transform:translateX(3px)}
  .reveal{opacity:1;transform:none}
  .js .reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
  .js .reveal.visible{opacity:1;transform:none}
}

@layer components {
  /* HEADER */
  .site-header{position:fixed;inset:0 0 auto 0;z-index:100;border-bottom:1px solid transparent;transition:background .2s ease,border-color .2s ease,box-shadow .2s ease}
  .site-header.scrolled{background:rgba(255,255,255,.97);border-bottom-color:rgba(199,207,216,.92);box-shadow:0 5px 18px rgba(31,41,55,.045)}
  .header-inner{height:82px;display:flex;align-items:center;justify-content:space-between;gap:28px;transition:height .2s ease}
  .site-header.scrolled .header-inner{height:74px}
  .brand{display:flex;width:220px;text-decoration:none;flex:0 0 auto}
  .brand img{width:100%;height:auto}
  .main-nav{display:flex;align-items:center;gap:23px}
  .main-nav>a:not(.button){text-decoration:none;color:#4D5A68;font-size:.91rem;font-weight:710}
  .main-nav>a:not(.button):hover{color:var(--violet)}
  .menu-button{display:none;background:#fff;border:1px solid #C5CDD5;border-radius:4px;padding:9px 12px;font-weight:760;color:var(--ink)}

  /* HERO */
  .hero{position:relative;min-height:100vh;padding:138px 0 78px;display:flex;align-items:center;overflow:hidden;background:
    radial-gradient(circle at 84% 18%,rgba(119,55,181,.14),transparent 28%),
    radial-gradient(circle at 11% 79%,rgba(0,139,120,.075),transparent 25%),
    linear-gradient(180deg,#FCFCFD 0%,#F8F9FA 72%,#F2F4F6 100%)}
  .hero-grid-bg,.areas-grid-bg,.signup-grid-bg{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(31,41,55,.027) 1px,transparent 1px),linear-gradient(90deg,rgba(31,41,55,.027) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to bottom,transparent,black 16%,black 84%,transparent)}
  .hero-layout{display:grid;grid-template-columns:.92fr 1.08fr;gap:50px;align-items:center;position:relative;z-index:2}
  .hero-layout>*{min-width:0}
  .hero-copy{max-width:690px}
  .hero-status{display:inline-flex;align-items:center;gap:9px;margin-bottom:23px;color:#627080;font-size:.8rem;letter-spacing:.01em}
  .hero-status i{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px rgba(76,185,77,.10)}
  .hero-status strong{color:var(--ink);font-weight:800}
  .hero h1{font-size:clamp(3.7rem,5.2vw,4.8rem);line-height:.91;letter-spacing:-.061em;margin-bottom:24px;text-wrap:balance;hyphens:none;word-break:normal}
  .hero h1 span{display:block;max-width:100%;color:var(--violet)}
  .hero-lead{font-size:clamp(1.08rem,1.45vw,1.23rem);max-width:650px;color:#586575;margin-bottom:0}
  .hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:27px}
  .brand-line{display:flex;gap:22px;align-items:flex-end;flex-wrap:wrap;margin-top:28px;color:#4D5A68}
  .brand-line strong{font-size:.94rem}
  .brand-line span{position:relative;font-family:"Segoe Print","Bradley Hand",cursive;font-size:1.16rem;transform:rotate(-1.8deg);padding-bottom:7px;color:var(--ink)}
  .brand-line span::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--green),var(--teal));transform:rotate(-3.5deg)}

  .diagram{position:relative;isolation:isolate}
  .connection-layer{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
  .connection-layer path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round}
  .hero-system{min-height:620px}
  .system-halo{position:absolute;left:50%;top:50%;border:1px solid rgba(119,55,181,.13);border-radius:50%;transform:translate(-50%,-50%);z-index:0}
  .halo-a{width:320px;height:320px}
  .halo-b{width:470px;height:470px;border-color:rgba(0,139,120,.09)}
  .hero-core,.area-core,.species-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3}
  .hero-core{width:178px;height:178px;display:grid;place-items:center;align-content:center;background:rgba(255,255,255,.97);border:1px solid #BAC4CE;box-shadow:0 24px 50px rgba(31,41,55,.14),8px 9px 0 rgba(119,55,181,.055)}
  .hero-core::before,.hero-core::after{content:"";position:absolute;width:28px;height:28px;border-color:var(--violet);opacity:.55}
  .hero-core::before{left:-1px;top:-1px;border-left:2px solid;border-top:2px solid}
  .hero-core::after{right:-1px;bottom:-1px;border-right:2px solid;border-bottom:2px solid}
  .hero-core img{width:76px;margin-bottom:8px}
  .hero-core strong{font-size:1.24rem}
  .hero-core small{color:#6C7886;font-size:.74rem;letter-spacing:.04em}
  .hero-node{position:absolute;z-index:3;min-width:152px;padding:11px 12px 11px 15px;background:rgba(255,255,255,.72);border-left:2px solid #BFC7D0;border-top:1px solid rgba(191,199,208,.65);backdrop-filter:blur(2px)}
  .hero-node::after{content:"";position:absolute;left:0;bottom:-6px;width:58%;height:1px;background:linear-gradient(90deg,currentColor,transparent);opacity:.25}
  .hero-node .node-kicker{display:block;color:#788493;font-size:.57rem;text-transform:uppercase;letter-spacing:.1em;font-weight:800;margin-bottom:3px}
  .hero-node b{display:block;font-size:.86rem;letter-spacing:-.01em}
  .hero-node small{display:block;color:#6D7988;font-size:.67rem;margin-top:2px}
  .node-1{left:3%;top:9%;color:var(--green-d);border-left-color:var(--green)}
  .node-2{left:40%;top:1%;color:var(--teal-d);border-left-color:var(--teal)}
  .node-3{right:0;top:10%;color:var(--violet-d);border-left-color:var(--violet)}
  .node-4{right:-1%;top:52%;color:var(--teal-d);border-left-color:var(--teal)}
  .node-5{right:10%;bottom:3%;color:var(--violet-d);border-left-color:var(--violet)}
  .node-6{left:7%;bottom:4%;color:var(--green-d);border-left-color:var(--green)}
  .hero-connections path{stroke:#AEB9C4;stroke-width:1.15;opacity:.72}
  .hero-connections path.flow{stroke:url(#heroConnectionGradient);stroke-width:1.8;opacity:.95}
  .hero-system.in-view .hero-connections path{animation:lineDraw .9s ease forwards}
  .hero-system.in-view .hero-connections path:nth-child(2){animation-delay:.08s}.hero-system.in-view .hero-connections path:nth-child(3){animation-delay:.16s}.hero-system.in-view .hero-connections path:nth-child(4){animation-delay:.24s}.hero-system.in-view .hero-connections path:nth-child(5){animation-delay:.32s}.hero-system.in-view .hero-connections path:nth-child(6){animation-delay:.4s}
  @keyframes lineDraw{to{stroke-dashoffset:0}}

  /* META STRIP */
  .signal-band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#FAFBFC}
  .signal-grid{display:grid;grid-template-columns:repeat(4,1fr);min-height:72px}
  .signal-grid span{display:flex;align-items:center;gap:10px;padding:16px 22px;border-left:1px solid var(--line);font-size:.8rem;font-weight:720;color:#52606F}
  .signal-grid span:first-child{border-left:0}
  .signal-grid i{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(76,185,77,.10)}

  /* PRINCIPLE */
  .principle{background:#fff}
  .principle-layout{position:relative}
  .flow-diagram{position:relative;margin-top:42px;min-height:470px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;background:linear-gradient(rgba(119,55,181,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(119,55,181,.022) 1px,transparent 1px),radial-gradient(circle at center,rgba(119,55,181,.055),transparent 38%);background-size:34px 34px,34px 34px,auto}
  .flow-lines{position:absolute;inset:0;width:100%;height:100%}
  .flow-lines path{fill:none;stroke:url(#flowGradient);stroke-width:1.25;stroke-dasharray:6 8;animation:slowDash 18s linear infinite;opacity:.85}
  @keyframes slowDash{to{stroke-dashoffset:-170}}
  .flow-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;width:165px;height:125px;background:var(--ink);color:#fff;display:grid;place-items:center;align-content:center;gap:4px;box-shadow:8px 9px 0 rgba(31,41,55,.10)}
  .flow-core img{width:53px}.flow-core strong{font-size:1rem}.flow-core small{font-size:.66rem;color:#C9D1D8}
  .flow-source,.flow-target{position:absolute;z-index:3;width:150px;padding:9px 0;background:rgba(255,255,255,.82)}
  .flow-source{left:24px;border-right:2px solid var(--violet);text-align:right;padding-right:13px}
  .flow-target{right:24px;border-left:2px solid var(--teal);padding-left:13px}
  .flow-source span,.flow-target span{display:block;font-size:.8rem;font-weight:820}.flow-source small,.flow-target small{display:block;color:#788493;font-size:.64rem;margin-top:1px}
  .source-a,.target-a{top:13%}.source-b,.target-b{top:34%}.source-c,.target-c{top:58%}.source-d,.target-d{top:79%}
  .flow-pulse{position:absolute;left:50%;top:50%;width:9px;height:9px;border-radius:50%;background:var(--violet);box-shadow:0 0 0 8px rgba(119,55,181,.08);z-index:4;opacity:0}
  .flow-diagram.visible .pulse-a{animation:pulseFlow 5.5s ease-in-out .6s 1}.flow-diagram.visible .pulse-b{background:var(--teal);animation:pulseFlow2 5.5s ease-in-out 1.4s 1}
  @keyframes pulseFlow{0%{transform:translate(-300px,-150px);opacity:0}12%{opacity:1}48%{transform:translate(0,0);opacity:1}90%{transform:translate(310px,155px);opacity:1}100%{opacity:0}}
  @keyframes pulseFlow2{0%{transform:translate(-300px,150px);opacity:0}12%{opacity:1}48%{transform:translate(0,0);opacity:1}90%{transform:translate(310px,-150px);opacity:1}100%{opacity:0}}
  .principle-line{margin:21px 0 0;color:#586575}.principle-line strong{color:var(--ink)}

  /* AREAS */
  .areas{position:relative;background:linear-gradient(180deg,#1E2A36 0%,#17222D 100%);color:#fff;overflow:hidden}
  .areas-grid-bg{opacity:.85;background-image:linear-gradient(rgba(255,255,255,.026) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px);mask-image:linear-gradient(to bottom,transparent,black 10%,black 90%,transparent)}
  .area-board{position:relative;display:grid;grid-template-columns:minmax(280px,1fr) 230px minmax(280px,1fr);gap:44px;align-items:center;margin-top:48px;min-height:650px;padding:34px 10px 84px}
  .area-column{position:relative;z-index:3;display:grid;gap:0}
  .area-column h3{margin:0 0 11px;color:#AEB9C4;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:850}
  .area-node{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:center;width:100%;padding:14px 0;background:transparent;color:#DCE3E9;text-align:left;border-top:1px solid rgba(255,255,255,.11);transition:color .18s ease,transform .18s ease,background .18s ease}
  .area-node:last-child{border-bottom:1px solid rgba(255,255,255,.11)}
  .area-node::before{content:"";position:absolute;left:-12px;top:50%;width:3px;height:0;background:var(--violet);transform:translateY(-50%);transition:height .18s ease,background .18s ease}
  .area-node[data-accent="green"]::before{background:var(--green)}.area-node[data-accent="teal"]::before{background:var(--teal)}.area-node[data-accent="violet"]::before{background:var(--violet)}
  .area-node:hover,.area-node:focus-visible,.area-node.active{color:#fff;transform:translateX(4px)}
  .area-node:hover::before,.area-node:focus-visible::before,.area-node.active::before{height:58%}
  .area-index{font-size:.64rem;color:#788696;font-variant-numeric:tabular-nums}
  .area-copy{min-width:0}.area-copy b{display:block;font-size:.87rem;line-height:1.24}.area-copy small{display:block;color:#8491A0;font-size:.65rem;margin-top:3px;line-height:1.3}
  .area-core{position:relative;left:auto;top:auto;transform:none;width:200px;height:200px;display:grid;place-items:center;align-content:center;justify-self:center;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.19);box-shadow:0 0 0 14px rgba(119,55,181,.04),0 24px 60px rgba(0,0,0,.18)}
  .area-core img{width:82px;margin-bottom:9px}.area-core strong{font-size:1.15rem}.area-core small{color:#AEB9C4;font-size:.68rem;letter-spacing:.06em}
  .core-rings{position:absolute;inset:-45px;pointer-events:none}.core-rings i{position:absolute;inset:0;border:1px solid rgba(119,55,181,.13);border-radius:50%}.core-rings i:nth-child(2){inset:-30px;border-color:rgba(0,139,120,.08)}
  .area-connections path{stroke:#758494;stroke-width:1;opacity:.55;transition:stroke .18s ease,opacity .18s ease,stroke-width .18s ease}
  .area-connections path[data-accent="green"]{stroke:#65B86B}.area-connections path[data-accent="teal"]{stroke:#36A696}.area-connections path[data-accent="violet"]{stroke:#9B6CC5}
  .area-connections path.dim{opacity:.12}.area-connections path.active{opacity:1;stroke-width:2.2;filter:drop-shadow(0 0 5px rgba(255,255,255,.14))}
  .area-board.in-view .area-connections path{animation:areaDraw .7s ease forwards}
  .area-board.in-view .area-connections path:nth-child(2){animation-delay:.08s}.area-board.in-view .area-connections path:nth-child(3){animation-delay:.16s}.area-board.in-view .area-connections path:nth-child(4){animation-delay:.24s}.area-board.in-view .area-connections path:nth-child(5){animation-delay:.32s}.area-board.in-view .area-connections path:nth-child(6){animation-delay:.4s}.area-board.in-view .area-connections path:nth-child(7){animation-delay:.48s}.area-board.in-view .area-connections path:nth-child(8){animation-delay:.56s}.area-board.in-view .area-connections path:nth-child(9){animation-delay:.64s}.area-board.in-view .area-connections path:nth-child(10){animation-delay:.72s}
  @keyframes areaDraw{to{stroke-dashoffset:0}}
  .area-detail{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);width:min(720px,72%);z-index:4;display:grid;grid-template-columns:auto auto 1fr;gap:11px;align-items:center;padding:12px 14px;border-top:1px solid rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.09);background:rgba(8,15,22,.34)}
  .area-detail>span{font-size:.58rem;text-transform:uppercase;letter-spacing:.11em;color:#7F8D9C;font-weight:850}.area-detail strong{font-size:.77rem;white-space:nowrap}.area-detail p{margin:0;color:#AAB5BF;font-size:.74rem}
  .authority-note{max-width:900px;margin:30px 0 0;color:#B9C4CE;font-size:.84rem}.authority-note strong{color:#fff}

  /* WORKFLOW */
  .workflow{background:#fff}
  .workflow-layout{display:grid;grid-template-columns:.72fr 1.28fr;gap:70px;align-items:center}
  .process{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:0;align-items:center;min-height:240px}
  .process-track{position:absolute;left:8%;right:8%;top:50%;height:1px;background:#CCD4DC;overflow:hidden}
  .process-track span{position:absolute;inset:0;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--green),var(--teal),var(--violet));transition:transform 1.15s cubic-bezier(.2,.7,.2,1)}
  .process.visible .process-track span{transform:scaleX(1)}
  .process-step{position:relative;z-index:2;text-align:center;padding:10px 7px}
  .process-step::before{content:"";display:block;width:14px;height:14px;margin:0 auto 13px;border:3px solid #fff;background:var(--ink);box-shadow:0 0 0 1px #B9C3CD;transition:transform .2s ease,background .2s ease}
  .process-step:hover::before{transform:scale(1.2);background:var(--violet)}
  .process-step i{display:block;color:#8994A0;font-style:normal;font-size:.58rem;letter-spacing:.08em}.process-step b{display:block;font-size:.8rem;margin-top:3px}.process-step small{display:block;color:#778391;font-size:.62rem;margin-top:2px}

  /* SECURITY */
  .security{background:radial-gradient(circle at 82% 20%,rgba(0,139,120,.12),transparent 28%),linear-gradient(180deg,#1C2935,#17222D);color:#fff}
  .security-layout{display:grid;grid-template-columns:.88fr 1.12fr;gap:72px;align-items:center}
  .security-points{display:grid;grid-template-columns:1fr 1fr;margin-top:26px;border-top:1px solid rgba(255,255,255,.15)}
  .security-points span{padding:11px 0;border-bottom:1px solid rgba(255,255,255,.10);color:#D5DCE2;font-size:.8rem}
  .security-stack{position:relative;min-height:430px;display:grid;align-content:center;gap:9px;padding-left:78px}
  .security-axis{position:absolute;left:38px;top:15%;bottom:15%;width:1px;background:linear-gradient(180deg,transparent,#5D7080 16%,#5D7080 84%,transparent)}
  .security-axis::after{content:"";position:absolute;left:-3px;top:0;width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 6px rgba(0,139,120,.12);animation:axisPulse 4.6s ease-in-out infinite}
  @keyframes axisPulse{0%,100%{top:0}50%{top:calc(100% - 7px)}}
  .security-layer{position:relative;display:grid;grid-template-columns:42px 1fr;grid-template-areas:"n b" "n s";gap:2px 12px;padding:18px 19px;border-top:1px solid rgba(255,255,255,.16);border-right:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035);box-shadow:8px 9px 0 rgba(0,0,0,.08);transition:transform .2s ease,background .2s ease}
  .security-layer:hover{transform:translateX(5px);background:rgba(255,255,255,.055)}
  .security-layer>span{grid-area:n;align-self:center;color:#7C8997;font-size:.6rem;letter-spacing:.1em}.security-layer b{grid-area:b;font-size:.88rem}.security-layer small{grid-area:s;color:#AEB9C4;font-size:.68rem}
  .l1{width:80%}.l2{width:87%;margin-left:3%}.l3{width:94%;margin-left:6%}.l4{width:100%;margin-left:9%}

  /* SPECIES */
  .species{background:#FAFBFC;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .species-layout{display:grid;grid-template-columns:.88fr 1.12fr;gap:70px;align-items:center}
  .species-orbit{position:relative;width:min(620px,100%);aspect-ratio:1/1;justify-self:end}
  .species-ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid rgba(119,55,181,.13);border-radius:50%;pointer-events:none}
  .ring-1{width:34%;height:34%}.ring-2{width:62%;height:62%;border-color:rgba(0,139,120,.12)}.ring-3{width:88%;height:88%;border-color:rgba(76,185,77,.10)}
  .species-center{width:112px;height:112px;display:grid;place-items:center;align-content:center;background:#fff;border:1px solid #C7CFD7;box-shadow:7px 8px 0 rgba(31,41,55,.055)}
  .species-center img{width:66px}.species-center small{margin-top:4px;color:#6E7A88;font-weight:800;font-size:.64rem}
  .species-node{position:absolute;z-index:3;width:88px;background:transparent;color:#536170;display:grid;place-items:center;gap:5px;padding:0;transition:transform .22s ease,color .22s ease}
  .species-node::before{content:"";position:absolute;width:64px;height:64px;border:1px solid #C9D1D9;border-radius:50%;background:#fff;box-shadow:4px 5px 0 rgba(31,41,55,.035);z-index:-1;transition:border-color .22s ease,box-shadow .22s ease}
  .species-node svg{width:37px;height:37px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .species-node span{font-size:.67rem;font-weight:800;color:#6D7885}
  .species-node:hover,.species-node:focus-visible{transform:translateY(-4px);color:var(--violet)}
  .species-node:hover::before,.species-node:focus-visible::before{border-color:#B99ECF;box-shadow:0 0 0 7px rgba(119,55,181,.055)}
  .s1{left:8%;top:18%}.s2{right:9%;top:16%}.s3{right:1%;bottom:23%}.s4{left:43%;bottom:2%}.s5{left:1%;bottom:24%}
  .species-connections path{stroke:#B7C2CC;stroke-width:1.1;opacity:.65;transition:opacity .2s ease,stroke .2s ease}
  .species-connections path.active{stroke:var(--violet);stroke-width:1.8;opacity:1}.species-connections path.dim{opacity:.15}
  .species-orbit.in-view .species-node{animation:speciesReveal .55s both}.species-orbit.in-view .s2{animation-delay:.1s}.species-orbit.in-view .s3{animation-delay:.2s}.species-orbit.in-view .s4{animation-delay:.3s}.species-orbit.in-view .s5{animation-delay:.4s}
  @keyframes speciesReveal{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
  .species-orbit.in-view .species-connections path{animation:areaDraw .75s ease forwards}

  /* SIGNUP */
  .signup{position:relative;background:linear-gradient(135deg,#1A2530 0%,#2D2535 53%,#19252F 100%);color:#fff;overflow:hidden}
  .signup-grid-bg{background-image:linear-gradient(rgba(255,255,255,.023) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.023) 1px,transparent 1px);mask-image:linear-gradient(to right,black,transparent 76%)}
  .signup-glow{position:absolute;width:620px;height:620px;right:-180px;top:-240px;border-radius:50%;background:radial-gradient(circle,rgba(119,55,181,.24),transparent 66%)}
  .signup-layout{position:relative;z-index:2;display:grid;grid-template-columns:.76fr 1.24fr;gap:74px;align-items:start}
  .signup-copy{padding-top:5px}
  .signup-copy .eyebrow{color:#CDA7E7}
  .signup-copy h2{font-size:clamp(2.9rem,4.9vw,5rem);line-height:.94;letter-spacing:-.055em;margin-bottom:16px;text-wrap:balance}
  .signup-lead{color:#D6DCE2;font-size:1.05rem;margin-bottom:30px}
  .signup-steps{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:0}
  .signup-steps::before{content:"";position:absolute;left:16px;top:17px;bottom:17px;width:1px;background:linear-gradient(180deg,var(--green),var(--teal),var(--violet));transform:scaleY(0);transform-origin:top;transition:transform .9s ease .2s}
  .signup-copy.visible .signup-steps::before{transform:scaleY(1)}
  .signup-steps li{position:relative;display:grid;grid-template-columns:34px 1fr;gap:14px;padding:0 0 24px}
  .signup-steps li:last-child{padding-bottom:0}
  .signup-steps li>span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#1C2833;border:1px solid #51606F;color:#D9E0E6;font-size:.61rem;font-weight:850;z-index:2}
  .signup-steps b{display:block;font-size:.9rem;margin-top:4px}.signup-steps small{display:block;color:#99A6B3;font-size:.7rem;margin-top:2px}
  .signup-truth{margin:28px 0 8px;color:#BFC8D1;font-size:.78rem}.mail-link{display:inline-block;font-weight:800;color:#fff}.signup-wordmark{width:245px;margin-top:32px;clip-path:inset(7px 7px 7px 7px round 10px)}
  .signup-form{position:relative;padding:5px 0 0 44px;border-left:1px solid rgba(255,255,255,.16);color:#fff}
  .signup-form::before{content:"";position:absolute;left:-1px;top:0;width:1px;height:110px;background:linear-gradient(180deg,var(--violet),transparent);box-shadow:0 0 14px rgba(119,55,181,.35)}
  .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:19px 24px}
  .form-grid label{display:flex;flex-direction:column;font-size:.73rem;font-weight:800;color:#E5E9ED}
  .form-grid label b{color:#E7A3B5}.form-grid .wide{grid-column:1/-1}
  .form-grid input,.form-grid textarea{width:100%;border:0;border-bottom:1px solid rgba(255,255,255,.32);background:transparent;min-height:43px;padding:10px 1px;color:#fff;border-radius:0;transition:border-color .18s ease,box-shadow .18s ease}
  .form-grid textarea{border:1px solid rgba(255,255,255,.30);padding:10px;resize:vertical;margin-top:8px;min-height:102px}
  .form-grid input::placeholder,.form-grid textarea::placeholder{color:#909CA9}
  .form-grid input:focus,.form-grid textarea:focus{outline:0;border-color:#A77ACE;box-shadow:0 1px 0 #A77ACE}
  .form-grid small,.consent-error{min-height:15px;color:#F0B8C5;font-size:.64rem;font-weight:620}
  .consent{display:flex;gap:10px;align-items:flex-start;margin:18px 0 0;font-size:.75rem;color:#C4CDD5}.consent input{width:18px;height:18px;flex:0 0 auto;margin-top:1px}.consent button{padding:0;background:none;color:#D8B7EF;text-decoration:underline}
  .form-actions{margin-top:10px}.submit{min-width:205px}
  .form-note{font-size:.7rem;color:#97A4B1;margin:12px 0 0;max-width:680px}
  .form-status{display:none;margin-top:14px;padding:11px 0 11px 14px;border-left:3px solid var(--teal);color:#D7ECE8;font-size:.78rem;background:rgba(0,139,120,.08)}
  .form-status.show{display:block}

  /* FAQ + FOOTER */
  .faq{max-width:940px}.faq h2{font-size:clamp(2.3rem,4vw,4rem)}
  .faq details{border-top:1px solid var(--line)}.faq details:last-child{border-bottom:1px solid var(--line)}
  .faq summary{list-style:none;padding:17px 0;font-weight:850;display:flex;justify-content:space-between;gap:18px}.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:"+";color:var(--violet);font-size:1.15rem}.faq details[open] summary::after{content:"−"}.faq details p{color:#5E6B79;margin:0 0 17px;max-width:760px}
  .site-footer{background:#17212B;color:#E8EDF1;padding:40px 0;border-top:3px solid #263442}
  .footer-layout{display:grid;grid-template-columns:1fr 1.5fr;gap:30px;align-items:start}.footer-layout>div img{width:235px;background:#fff;padding:7px}.footer-layout>div p{margin:11px 0 0;color:#B9C4CE;font-size:.82rem}.footer-layout nav{display:flex;gap:16px;justify-content:flex-end;flex-wrap:wrap}.footer-layout nav a,.footer-layout nav button{background:none;color:#D0D8DF;text-decoration:none;padding:0;font-size:.83rem}.footer-layout nav a:hover,.footer-layout nav button:hover{color:#fff}
  dialog{width:min(680px,calc(100% - 28px));padding:0;border:1px solid #C4CBD3;border-radius:4px;box-shadow:0 25px 80px rgba(31,41,55,.28)}dialog::backdrop{background:rgba(23,33,43,.62)}.dialog-head{display:flex;justify-content:space-between;align-items:center;padding:17px 19px;border-bottom:1px solid var(--line)}.dialog-head h3{margin:0}.dialog-head button{width:34px;height:34px;background:#fff;border:1px solid #C7CED6}.dialog-body{padding:20px;color:#596675}.dialog-body strong{display:block;margin-top:12px;color:var(--ink)}
}

@layer responsive {
  @media (max-width:1160px){
    .hero-layout{grid-template-columns:1fr;gap:28px}.hero{padding-top:122px}.hero-copy{max-width:900px}.hero-system{min-height:580px}
    .signal-grid{grid-template-columns:1fr 1fr}.signal-grid span:nth-child(3){border-left:0;border-top:1px solid var(--line)}.signal-grid span:nth-child(4){border-top:1px solid var(--line)}
    .workflow-layout,.security-layout,.species-layout{grid-template-columns:1fr}.workflow-layout{gap:40px}.security-layout,.species-layout{gap:44px}.species-orbit{justify-self:center}
    .area-board{grid-template-columns:minmax(240px,1fr) 190px minmax(240px,1fr);gap:28px}.area-core{width:175px;height:175px}.area-core img{width:72px}.area-detail{width:min(760px,82%)}
    .signup-layout{grid-template-columns:.8fr 1.2fr;gap:52px}
  }

  @media (max-width:900px){
    .header-inner{height:74px}.site-header.scrolled .header-inner{height:68px}.brand{width:188px}.main-nav{display:none;position:absolute;left:24px;right:24px;top:74px;flex-direction:column;align-items:stretch;background:#fff;border:1px solid var(--line);box-shadow:var(--soft-shadow);padding:14px}.site-header.scrolled .main-nav{top:68px}.main-nav.open{display:flex}.menu-button{display:block}
    .hero{padding-top:108px}.hero h1{font-size:clamp(3.15rem,9.6vw,5rem)}
    .flow-diagram{min-height:530px}.flow-lines{opacity:.42}.flow-source,.flow-target{width:132px}.flow-source{left:12px}.flow-target{right:12px}
    .area-board{grid-template-columns:1fr;gap:24px;min-height:auto;padding:30px 12px 30px}.area-connections{display:none}.area-core{position:relative;left:auto;top:auto;transform:none;grid-row:1;width:158px;height:158px;margin:0 auto 6px}.area-work{grid-row:2}.area-admin{grid-row:3}.area-node:hover,.area-node:focus-visible,.area-node.active{transform:translateX(3px)}.area-detail{position:relative;left:auto;bottom:auto;transform:none;width:100%;grid-template-columns:1fr;gap:4px;margin-top:2px;background:rgba(8,15,22,.25)}.area-detail strong{white-space:normal}
    .process{grid-template-columns:repeat(3,1fr);row-gap:28px}.process-track{display:none}.process-step{border-bottom:1px solid var(--line);padding:14px 8px}
    .signup-layout{grid-template-columns:1fr;gap:46px}.signup-form{padding-left:0;border-left:0;border-top:1px solid rgba(255,255,255,.16);padding-top:34px}.signup-form::before{left:0;top:-1px;width:110px;height:1px;background:linear-gradient(90deg,var(--violet),transparent)}
  }

  @media (max-width:680px){
    .shell{width:min(var(--shell),calc(100% - 28px))}.section{padding:80px 0}.header-inner{height:68px}.site-header.scrolled .header-inner{height:64px}.brand{width:166px}.main-nav{top:68px;left:14px;right:14px}.site-header.scrolled .main-nav{top:64px}
    .hero{min-height:auto;padding:98px 0 54px}.hero h1{font-size:clamp(2.65rem,11.7vw,3.9rem);line-height:.95}.hero-lead{font-size:1rem}.hero-actions{display:grid}.brand-line{align-items:flex-start;flex-direction:column;gap:10px}
    .hero-system{min-height:510px}.system-halo{display:none}.hero-core{width:140px;height:140px}.hero-core img{width:58px}.hero-node{min-width:125px;padding:9px 9px 9px 12px;background:rgba(255,255,255,.90);backdrop-filter:none}.node-1{left:0;top:5%}.node-2{left:auto;right:0;top:5%}.node-3{left:0;right:auto;top:42%}.node-4{right:0;top:42%}.node-5{right:0;bottom:2%}.node-6{left:0;bottom:2%}.hero-connections{display:none}
    .signal-grid{grid-template-columns:1fr}.signal-grid span{border-left:0!important;border-top:1px solid var(--line)}.signal-grid span:first-child{border-top:0}
    .section-head h2,.faq h2{font-size:clamp(2.15rem,9.5vw,3.25rem)}
    .flow-diagram{min-height:650px;display:grid;grid-template-columns:1fr 130px 1fr;grid-template-rows:repeat(4,1fr);align-items:center;gap:8px 10px;padding:22px 0}.flow-lines,.flow-pulse{display:none}.flow-core{position:relative;left:auto;top:auto;transform:none;grid-column:2;grid-row:1/5;align-self:center;width:126px;height:112px}.flow-source,.flow-target{position:relative;left:auto;right:auto;top:auto;width:auto;background:transparent}.flow-source{text-align:right;padding-right:10px}.flow-target{padding-left:10px}.source-a{grid-column:1;grid-row:1}.source-b{grid-column:1;grid-row:2}.source-c{grid-column:1;grid-row:3}.source-d{grid-column:1;grid-row:4}.target-a{grid-column:3;grid-row:1}.target-b{grid-column:3;grid-row:2}.target-c{grid-column:3;grid-row:3}.target-d{grid-column:3;grid-row:4}
    .area-board{padding-inline:0}.area-node{padding:13px 0}.area-copy b{font-size:.83rem}.authority-note{font-size:.8rem}
    .process{grid-template-columns:1fr 1fr;gap:12px}.process-step{border:1px solid var(--line);padding:13px;background:#fff}.process-step::before{margin-bottom:8px}
    .security-points{grid-template-columns:1fr}.security-stack{min-height:auto;padding:12px 0 0 46px}.security-axis{left:19px;top:8%;bottom:8%}.security-layer{width:100%!important;margin-left:0!important;padding:15px 14px}
    .species-orbit{width:100%;aspect-ratio:auto;display:grid;grid-template-columns:1fr 1fr;gap:14px;padding-top:0}.species-ring,.species-connections{display:none}.species-center{position:relative;left:auto;top:auto;transform:none;grid-column:1/-1;width:112px;height:112px;margin:0 auto 8px}.species-node{position:relative;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:100%;min-height:96px;display:grid;grid-template-columns:58px 1fr;justify-items:start;text-align:left;gap:12px;padding:0 14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}.species-node::before{width:50px;height:50px;left:14px;top:22px}.species-node svg{width:30px;height:30px;margin-left:10px}.species-node span{font-size:.76rem}.species-node:hover,.species-node:focus-visible{transform:none;color:var(--violet)}
    .form-grid{grid-template-columns:1fr}.form-grid .wide{grid-column:auto}.signup-copy h2{font-size:clamp(2.55rem,10.8vw,3.8rem)}.signup-wordmark{width:220px}.signup-form{padding-top:30px}.footer-layout{grid-template-columns:1fr}.footer-layout nav{justify-content:flex-start}
  }

  @media (max-width:430px){
    .shell{width:min(var(--shell),calc(100% - 22px))}.hero h1{font-size:clamp(2.45rem,11.1vw,3.25rem)}.eyebrow{font-size:.67rem;letter-spacing:.105em}.hero-status{font-size:.74rem}.brand{width:154px}.menu-button{padding:8px 10px}
    .hero-system{min-height:470px}.hero-core{width:124px;height:124px}.hero-core img{width:50px}.hero-node{min-width:110px;max-width:118px}.hero-node b{font-size:.78rem}.hero-node small{font-size:.59rem}.hero-node .node-kicker{font-size:.51rem}.node-3,.node-4{top:41%}
    .flow-diagram{grid-template-columns:1fr 108px 1fr;min-height:625px}.flow-core{width:106px;height:102px}.flow-core img{width:44px}.flow-source,.flow-target{padding-top:7px;padding-bottom:7px}.flow-source span,.flow-target span{font-size:.7rem}.flow-source small,.flow-target small{font-size:.58rem}
    .area-core{width:140px;height:140px}.area-core img{width:60px}.area-detail{padding:11px 0}.area-node{grid-template-columns:30px minmax(0,1fr);gap:9px}
    .process{grid-template-columns:1fr}.process-step{display:grid;grid-template-columns:34px 1fr;grid-template-areas:"dot b" "dot s";text-align:left;gap:1px 10px}.process-step::before{grid-area:dot;margin:auto}.process-step i{display:none}.process-step b{grid-area:b}.process-step small{grid-area:s}
    .species-orbit{grid-template-columns:1fr}.species-node{min-height:82px;grid-template-columns:52px 1fr}.species-node::before{width:44px;height:44px;top:18px}.species-node svg{width:27px;height:27px;margin-left:8px}
    .footer-layout nav{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  }

  @media (max-width:340px){
    .brand{width:142px}.hero h1{font-size:2.35rem}.hero-system{min-height:445px}.hero-node{min-width:102px;max-width:108px;padding-left:10px}.hero-core{width:116px;height:116px}.hero-core img{width:46px}.flow-diagram{grid-template-columns:1fr 94px 1fr;gap:5px}.flow-core{width:92px;height:96px}.flow-core span{font-size:.82rem}.area-copy b{font-size:.78rem}.footer-layout nav{grid-template-columns:1fr}
  }

  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{animation:none!important;transition:none!important}
    .js .reveal{opacity:1!important;transform:none!important}
    .signup-steps::before,.process-track span{transform:none!important}
  }
}

/* =====================================================================
   TP-READABILITY-SPECIES-V1 START
   TierPult Landingpage – Lesbarkeit + professionelles Tierarten-Iconset
   ===================================================================== */

/* ---------- allgemeine Lesbarkeit ---------- */

body{
  font-size:17px;
}

.main-nav>a:not(.button){
  font-size:.98rem;
  line-height:1.35;
}

.button{
  font-size:.96rem;
  line-height:1.25;
}

.eyebrow{
  font-size:.78rem;
  line-height:1.35;
}

.hero-status{
  font-size:.86rem;
}

.hero-lead{
  font-size:clamp(1.12rem,1.5vw,1.28rem);
  line-height:1.68;
}

.section-head>p:last-child{
  font-size:clamp(1.08rem,1.35vw,1.20rem);
  line-height:1.68;
}

.signal-grid span{
  font-size:.90rem;
  line-height:1.4;
}

.area-copy b{
  font-size:.96rem;
  line-height:1.35;
}

.area-copy small{
  font-size:.74rem;
  line-height:1.45;
}

.area-detail>span{
  font-size:.66rem;
}

.area-detail strong{
  font-size:.86rem;
  line-height:1.35;
}

.area-detail p{
  font-size:.82rem;
  line-height:1.5;
}

.authority-note{
  font-size:.94rem;
  line-height:1.68;
}

.process-step b{
  font-size:.94rem;
  line-height:1.35;
}

.process-step small{
  font-size:.76rem;
  line-height:1.45;
}

.security-layer strong{
  font-size:1rem;
  line-height:1.35;
}

.security-layer span{
  font-size:.84rem;
  line-height:1.5;
}

.signup-steps b{
  font-size:1rem;
  line-height:1.35;
}

.signup-steps small{
  font-size:.80rem;
  line-height:1.45;
}

.signup-truth{
  font-size:.90rem;
  line-height:1.5;
}

.signup-form label{
  font-size:.90rem;
}

.signup-form input,
.signup-form select,
.signup-form textarea{
  font-size:1rem;
}

.faq summary{
  font-size:1.03rem;
  line-height:1.45;
}

.faq details p{
  font-size:.97rem;
  line-height:1.7;
}

.footer-layout>div p{
  font-size:.90rem;
  line-height:1.55;
}

.footer-layout nav a,
.footer-layout nav button{
  font-size:.91rem;
}


/* ---------- Tierarten: Desktop ---------- */

.species-layout{
  grid-template-columns:.88fr 1.12fr;
  gap:76px;
}

.species-orbit{
  width:min(650px,100%);
}

.species-center{
  width:126px;
  height:126px;
  border-color:#BFC9D3;
  box-shadow:
    0 18px 44px rgba(31,41,55,.09),
    6px 7px 0 rgba(31,41,55,.045);
}

.species-center img{
  width:74px;
}

.species-center small{
  margin-top:7px;
  font-size:.74rem;
  letter-spacing:.025em;
  color:#536170;
}

.species-node{
  width:108px;
  gap:8px;
  color:#425466;
}

.species-node::before{
  width:76px;
  height:76px;
  border-color:#BAC5D0;
  background:#fff;
  box-shadow:
    0 10px 28px rgba(31,41,55,.065),
    4px 5px 0 rgba(31,41,55,.035);
}

.species-node .species-icon{
  display:block;
  width:42px;
  height:42px;
  background:currentColor;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:contain;
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:contain;
}

.species-icon-dog{
  -webkit-mask-image:url("species-final/tierpult-species-dog.svg");
  mask-image:url("species-final/tierpult-species-dog.svg");
}

.species-icon-cat{
  -webkit-mask-image:url("species-final/tierpult-species-cat.svg");
  mask-image:url("species-final/tierpult-species-cat.svg");
}

.species-icon-bird{
  -webkit-mask-image:url("species-final/tierpult-species-bird.svg");
  mask-image:url("species-final/tierpult-species-bird.svg");
}

.species-icon-rabbit{
  -webkit-mask-image:url("species-final/tierpult-species-rabbit.svg");
  mask-image:url("species-final/tierpult-species-rabbit.svg");
}

.species-icon-more{
  -webkit-mask-image:url("species-final/tierpult-species-more.svg");
  mask-image:url("species-final/tierpult-species-more.svg");
}

.species-node span:last-child{
  max-width:108px;
  font-size:.84rem;
  line-height:1.2;
  font-weight:800;
  letter-spacing:.005em;
  color:inherit;
  text-align:center;
}

.species-node:hover,
.species-node:focus-visible{
  color:var(--violet);
}

.species-node:hover::before,
.species-node:focus-visible::before{
  border-color:#A987C6;
  box-shadow:
    0 0 0 7px rgba(119,55,181,.055),
    0 12px 30px rgba(31,41,55,.08);
}


/* ---------- Tablet ---------- */

@media (max-width:1160px){
  .species-layout{
    gap:50px;
  }

  .species-orbit{
    width:min(620px,92vw);
  }
}


/* ---------- Mobile ---------- */

@media (max-width:680px){
  body{
    font-size:16.5px;
  }

  .eyebrow{
    font-size:.73rem;
  }

  .hero-lead,
  .section-head>p:last-child{
    line-height:1.62;
  }

  .signal-grid span{
    font-size:.88rem;
  }

  .area-copy b{
    font-size:.91rem;
  }

  .area-copy small{
    font-size:.72rem;
  }

  .authority-note{
    font-size:.89rem;
  }

  .species-layout{
    gap:34px;
  }

  .species-orbit{
    width:100%;
    grid-template-columns:1fr 1fr;
    gap:12px;
  }

  .species-center{
    width:120px;
    height:120px;
    margin-bottom:12px;
  }

  .species-center img{
    width:68px;
  }

  .species-node{
    min-height:104px;
    grid-template-columns:68px minmax(0,1fr);
    gap:14px;
    padding:0 16px;
    border:1px solid #D3DAE1;
    background:#fff;
    color:#425466;
  }

  .species-node::before{
    left:16px;
    top:23px;
    width:56px;
    height:56px;
    box-shadow:none;
  }

  .species-node .species-icon{
    width:34px;
    height:34px;
    margin-left:11px;
  }

  .species-node span:last-child{
    max-width:none;
    font-size:.91rem;
    line-height:1.3;
    text-align:left;
  }
}


/* ---------- kleine Smartphones ---------- */

@media (max-width:430px){
  .main-nav>a:not(.button){
    font-size:1rem;
  }

  .eyebrow{
    font-size:.72rem;
  }

  .species-orbit{
    grid-template-columns:1fr;
    gap:10px;
  }

  .species-center{
    width:112px;
    height:112px;
    margin-bottom:10px;
  }

  .species-center img{
    width:64px;
  }

  .species-node{
    min-height:88px;
    grid-template-columns:60px minmax(0,1fr);
    padding:0 14px;
  }

  .species-node::before{
    width:50px;
    height:50px;
    left:14px;
    top:18px;
  }

  .species-node .species-icon{
    width:30px;
    height:30px;
    margin-left:10px;
  }

  .species-node span:last-child{
    font-size:.92rem;
  }

  .footer-layout nav a,
  .footer-layout nav button{
    font-size:.94rem;
  }
}


/* ---------- sehr kleine Smartphones ---------- */

@media (max-width:340px){
  body{
    font-size:16px;
  }

  .species-node{
    min-height:84px;
  }

  .species-node span:last-child{
    font-size:.88rem;
  }
}

/* TP-READABILITY-SPECIES-V1 END */

/* =====================================================================
   TP-RESPONSIVE-V2 START
   Vollständiger Responsive-Refinement-Pass
   ===================================================================== */

html,
body{
  max-width:100%;
  overflow-x:hidden;
}

body{
  font-size:17px;
  line-height:1.62;
}

h1,
h2,
h3,
p{
  word-break:normal;
  overflow-wrap:normal;
  hyphens:none;
}

.button{
  min-height:48px;
  font-size:1rem;
}

.main-nav>a:not(.button){
  font-size:1rem;
}

.section-head>p:last-child{
  line-height:1.7;
}


/* ---------------------------------------------------------------------
   TIERARTEN – DESKTOP
   Die Außenknoten bleiben sichtbar innerhalb der Systemgrafik.
   --------------------------------------------------------------------- */

@media (min-width:901px){

  .species-orbit{
    width:min(560px,100%);
  }

  .species-center{
    width:116px;
    height:116px;
  }

  .species-center img{
    width:67px;
  }

  .species-node{
    width:88px;
    gap:6px;
  }

  .species-node::before{
    width:62px;
    height:62px;
  }

  .species-node .species-icon{
    width:32px;
    height:32px;
  }

  .species-node span:last-child{
    max-width:92px;
    font-size:.78rem;
    line-height:1.16;
  }

  .species-orbit .s1{
    left:14%;
    right:auto;
    top:20%;
    bottom:auto;
  }

  .species-orbit .s2{
    left:auto;
    right:14%;
    top:20%;
    bottom:auto;
  }

  .species-orbit .s3{
    left:auto;
    right:7%;
    top:65%;
    bottom:auto;
  }

  .species-orbit .s4{
    left:calc(50% - 44px);
    right:auto;
    top:auto;
    bottom:3%;
  }

  .species-orbit .s5{
    left:7%;
    right:auto;
    top:65%;
    bottom:auto;
  }

}


/* ---------------------------------------------------------------------
   TABLET – 701 bis 900
   Keine zusammengeschrumpfte Desktopgrafik.
   --------------------------------------------------------------------- */

@media (max-width:900px){

  .section{
    padding:86px 0;
  }

  .section-head h2,
  .faq h2{
    font-size:clamp(2.35rem,6.4vw,3.4rem);
    line-height:.98;
  }

  .section-head>p:last-child{
    font-size:1.08rem;
  }

  /* Fachbereiche */

  .area-board{
    display:grid;
    grid-template-columns:1fr;
    gap:22px;
    min-height:0;
    padding:24px 0 8px;
    margin-top:34px;
  }

  .area-connections,
  .core-rings{
    display:none;
  }

  .area-core{
    grid-row:1;
    width:138px;
    height:138px;
    margin:0 auto 8px;
    box-shadow:
      0 18px 45px rgba(0,0,0,.16),
      0 0 0 10px rgba(119,55,181,.035);
  }

  .area-core img{
    width:62px;
  }

  .area-core strong{
    font-size:1.05rem;
  }

  .area-core small{
    font-size:.72rem;
  }

  .area-work{
    grid-row:2;
  }

  .area-admin{
    grid-row:3;
  }

  .area-column h3{
    margin:8px 0 5px;
    font-size:.75rem;
  }

  .area-node{
    min-height:62px;
    grid-template-columns:36px minmax(0,1fr);
    gap:12px;
    padding:12px 2px;
  }

  .area-node:hover,
  .area-node:focus-visible,
  .area-node.active{
    transform:none;
  }

  .area-node::before{
    left:0;
  }

  .area-index{
    font-size:.7rem;
  }

  .area-copy b{
    font-size:1rem;
    line-height:1.3;
  }

  .area-copy small{
    font-size:.78rem;
    line-height:1.4;
  }

  /*
     JS verschiebt diesen einen Detailblock mobil direkt unter den
     ausgewählten Fachbereich.
  */
  .area-column .area-detail{
    position:relative;
    left:auto;
    right:auto;
    bottom:auto;
    transform:none;
    width:100%;
    display:block;
    margin:0;
    padding:10px 4px 17px 48px;
    border-top:0;
    border-bottom:1px solid rgba(255,255,255,.13);
    background:transparent;
  }

  .area-column .area-detail>span,
  .area-column .area-detail>strong{
    display:none;
  }

  .area-column .area-detail p{
    margin:0;
    max-width:720px;
    color:#C6D0D8;
    font-size:.88rem;
    line-height:1.58;
  }

  .authority-note{
    max-width:none;
    margin-top:24px;
    font-size:.94rem;
    line-height:1.65;
  }


  /* Tierarten */

  .species-layout{
    grid-template-columns:1fr;
    gap:38px;
  }

  .species-orbit{
    width:min(760px,100%);
    aspect-ratio:auto;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:12px;
    justify-self:center;
  }

  .species-ring,
  .species-connections{
    display:none;
  }

  .species-center{
    position:relative;
    left:auto;
    top:auto;
    transform:none;
    grid-column:1/-1;
    width:116px;
    height:116px;
    margin:0 auto 10px;
  }

  .species-center img{
    width:66px;
  }

  .species-node{
    position:relative;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    width:100%;
    min-height:96px;
    display:grid;
    grid-template-columns:1fr;
    justify-items:center;
    align-content:center;
    gap:8px;
    padding:10px 6px;
    border:0;
    border-top:1px solid var(--line);
    background:transparent;
  }

  .species-node::before{
    position:relative;
    left:auto;
    top:auto;
    width:52px;
    height:52px;
    grid-row:1;
    grid-column:1;
  }

  .species-node .species-icon{
    position:absolute;
    top:21px;
    left:50%;
    width:30px;
    height:30px;
    margin:0;
    transform:translateX(-50%);
  }

  .species-node span:last-child{
    max-width:130px;
    margin-top:3px;
    font-size:.86rem;
    line-height:1.25;
    text-align:center;
  }

  .species-node:hover,
  .species-node:focus-visible{
    transform:none;
  }


  /* Vorregistrierung */

  .signup-layout{
    grid-template-columns:1fr;
    gap:42px;
  }

  .signup-form{
    padding-left:0;
    padding-top:32px;
    border-left:0;
    border-top:1px solid rgba(255,255,255,.16);
  }

  .signup-form::before{
    left:0;
    top:-1px;
    width:120px;
    height:1px;
    background:linear-gradient(90deg,var(--violet),transparent);
  }


  /* FAQ */

  .faq{
    max-width:1080px;
  }

  .faq summary{
    padding:20px 0;
    font-size:1.06rem;
    line-height:1.45;
  }

  .faq details p{
    max-width:900px;
    margin-bottom:21px;
    font-size:1rem;
    line-height:1.72;
  }

}


/* ---------------------------------------------------------------------
   MOBILE – bis 680
   --------------------------------------------------------------------- */

@media (max-width:680px){

  body{
    font-size:16.5px;
  }

  .shell{
    width:min(var(--shell),calc(100% - 30px));
  }

  .section{
    padding:66px 0;
  }

  .section-head h2,
  .faq h2{
    font-size:clamp(2.15rem,9vw,3rem);
    line-height:.98;
    letter-spacing:-.045em;
  }

  .section-head>p:last-child{
    font-size:1rem;
    line-height:1.65;
  }

  .eyebrow{
    font-size:.73rem;
    line-height:1.35;
  }

  .button{
    min-height:50px;
  }

  /* Fachbereiche */

  .area-board{
    gap:18px;
    padding-top:18px;
  }

  .area-core{
    width:118px;
    height:118px;
  }

  .area-core img{
    width:54px;
  }

  .area-node{
    min-height:59px;
    padding:11px 0;
  }

  .area-copy b{
    font-size:.96rem;
  }

  .area-copy small{
    font-size:.76rem;
  }

  .area-column .area-detail{
    padding:8px 0 16px 42px;
  }

  .area-column .area-detail p{
    font-size:.86rem;
  }

  .authority-note{
    font-size:.89rem;
  }


  /* Tierarten:
     2 Spalten statt langer Ein-Spalten-Liste.
  */

  .species-layout{
    gap:30px;
  }

  .species-orbit{
    grid-template-columns:1fr 1fr;
    gap:0 14px;
  }

  .species-center{
    width:108px;
    height:108px;
    margin-bottom:8px;
  }

  .species-center img{
    width:61px;
  }

  .species-node{
    min-height:88px;
    grid-template-columns:44px minmax(0,1fr);
    justify-items:start;
    align-items:center;
    align-content:center;
    gap:11px;
    padding:10px 4px;
    text-align:left;
  }

  .species-node::before{
    position:absolute;
    left:3px;
    top:50%;
    width:44px;
    height:44px;
    transform:translateY(-50%);
  }

  .species-node .species-icon{
    position:relative;
    top:auto;
    left:auto;
    width:26px;
    height:26px;
    margin-left:12px;
    transform:none;
    z-index:1;
  }

  .species-node span:last-child{
    max-width:none;
    margin:0;
    font-size:.87rem;
    line-height:1.25;
    text-align:left;
  }

  .species-node.s5{
    grid-column:1/-1;
    width:calc(50% - 7px);
    justify-self:center;
  }


  /* FAQ */

  .faq summary{
    padding:18px 0;
    font-size:1rem;
  }

  .faq details p{
    font-size:.96rem;
    line-height:1.67;
  }

}


/* ---------------------------------------------------------------------
   SMALL MOBILE – bis 430
   --------------------------------------------------------------------- */

@media (max-width:430px){

  .shell{
    width:min(var(--shell),calc(100% - 24px));
  }

  .section{
    padding:58px 0;
  }

  .hero{
    padding-top:92px;
    padding-bottom:48px;
  }

  .hero h1{
    font-size:clamp(2.45rem,11vw,3rem);
  }

  .hero-lead{
    font-size:1rem;
    line-height:1.62;
  }

  .hero-actions{
    gap:9px;
  }

  .hero-actions .button{
    width:100%;
  }

  .main-nav>a:not(.button){
    font-size:1rem;
  }

  /* Fachbereiche */

  .area-core{
    width:108px;
    height:108px;
  }

  .area-core img{
    width:49px;
  }

  .area-node{
    grid-template-columns:29px minmax(0,1fr);
    gap:9px;
  }

  .area-index{
    font-size:.65rem;
  }

  .area-copy b{
    font-size:.92rem;
  }

  .area-copy small{
    font-size:.72rem;
  }

  .area-column .area-detail{
    padding-left:38px;
  }

  .area-column .area-detail p{
    font-size:.84rem;
  }


  /* Tierarten bleibt bewusst zweispaltig */

  .species-orbit{
    grid-template-columns:1fr 1fr;
    gap:0 10px;
  }

  .species-center{
    grid-column:1/-1;
    width:102px;
    height:102px;
  }

  .species-center img{
    width:57px;
  }

  .species-node{
    min-height:82px;
    grid-template-columns:40px minmax(0,1fr);
    gap:8px;
    padding:8px 2px;
  }

  .species-node::before{
    width:40px;
    height:40px;
    left:1px;
  }

  .species-node .species-icon{
    width:23px;
    height:23px;
    margin-left:9px;
  }

  .species-node span:last-child{
    font-size:.82rem;
  }

  .species-node.s5{
    width:calc(50% - 5px);
  }


  /* Vorregistrierung */

  .signup-layout{
    gap:34px;
  }

  .signup-copy h2{
    font-size:clamp(2.35rem,10.2vw,3rem);
  }

  .signup-steps b{
    font-size:.96rem;
  }

  .signup-steps small{
    font-size:.78rem;
  }

  .form-grid{
    gap:13px;
  }

  .form-actions .button{
    width:100%;
  }


  /* FAQ */

  .faq h2{
    margin-bottom:22px;
  }

  .faq summary{
    gap:14px;
    padding:17px 0;
    font-size:.98rem;
  }

  .faq details p{
    margin-bottom:19px;
    font-size:.94rem;
  }

}


/* ---------------------------------------------------------------------
   320–360 px
   --------------------------------------------------------------------- */

@media (max-width:360px){

  .shell{
    width:min(var(--shell),calc(100% - 20px));
  }

  .section{
    padding:52px 0;
  }

  .hero h1{
    font-size:2.3rem;
  }

  .area-copy b{
    font-size:.88rem;
  }

  .area-copy small{
    font-size:.7rem;
  }

  .species-orbit{
    gap:0 8px;
  }

  .species-node{
    min-height:78px;
    grid-template-columns:36px minmax(0,1fr);
    gap:6px;
  }

  .species-node::before{
    width:36px;
    height:36px;
  }

  .species-node .species-icon{
    width:21px;
    height:21px;
    margin-left:8px;
  }

  .species-node span:last-child{
    font-size:.78rem;
  }

}

/* TP-RESPONSIVE-V2 END */

/* =====================================================================
   TP-PROJECT-PIPELINE-V1 START
   ===================================================================== */

.project-progress{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(
      circle at 80% 15%,
      rgba(119,55,181,.07),
      transparent 31%
    ),
    #fff;
}

.progress-grid-bg,
.faq-grid-bg{
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(
      rgba(31,41,55,.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(31,41,55,.025) 1px,
      transparent 1px
    );
  background-size:44px 44px;
  mask-image:
    linear-gradient(
      to bottom,
      transparent,
      black 12%,
      black 88%,
      transparent
    );
}

.progress-heading{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:52px;
  align-items:end;
}

.progress-status{
  display:flex;
  align-items:center;
  gap:13px;
  padding-bottom:7px;
}

.progress-status-dot{
  position:relative;
  width:11px;
  height:11px;
  border-radius:50%;
  background:var(--green);
  box-shadow:
    0 0 0 6px rgba(76,185,77,.08);
  flex:0 0 auto;
}

.progress-status-dot::after{
  content:"";
  position:absolute;
  inset:-7px;
  border:1px solid rgba(76,185,77,.35);
  border-radius:50%;
  animation:tpStatusPulse 2.8s ease-out infinite;
}

.progress-status small{
  display:block;
  margin-bottom:3px;
  color:#788493;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.progress-status strong{
  display:block;
  font-size:.94rem;
  color:var(--ink);
}

@keyframes tpStatusPulse{
  0%{
    opacity:.8;
    transform:scale(.65);
  }
  70%,
  100%{
    opacity:0;
    transform:scale(1.55);
  }
}

.project-pipeline{
  position:relative;
  z-index:2;
  margin-top:64px;
  padding-top:30px;
}

.pipeline-base,
.pipeline-active{
  position:absolute;
  top:45px;
  left:8%;
  right:8%;
  height:2px;
  transform-origin:left center;
}

.pipeline-base{
  background:#D8DEE4;
}

.pipeline-active{
  right:45%;
  background:
    linear-gradient(
      90deg,
      var(--green),
      var(--teal),
      var(--violet)
    );
  transform:scaleX(0);
  transition:
    transform 1.35s cubic-bezier(.2,.7,.2,1) .18s;
}

.project-pipeline.visible .pipeline-active{
  transform:scaleX(1);
}

.pipeline-steps{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:26px;
  list-style:none;
  margin:0;
  padding:0;
}

.pipeline-step{
  position:relative;
  padding-top:48px;
}

.pipeline-dot{
  position:absolute;
  top:7px;
  left:0;
  width:17px;
  height:17px;
  border-radius:50%;
  background:#fff;
  border:2px solid #ABB6C1;
  box-shadow:0 0 0 5px #fff;
  transition:
    border-color .25s ease,
    background .25s ease,
    transform .25s ease;
}

.pipeline-step.completed .pipeline-dot{
  background:var(--green);
  border-color:var(--green);
}

.pipeline-step.current .pipeline-dot{
  background:var(--violet);
  border-color:var(--violet);
  box-shadow:
    0 0 0 5px #fff,
    0 0 0 8px rgba(119,55,181,.10);
}

.pipeline-step.partner .pipeline-dot{
  background:#fff;
  border-color:var(--teal);
}

.pipeline-step small{
  display:block;
  color:#87919D;
  font-size:.67rem;
  font-weight:850;
  letter-spacing:.1em;
  margin-bottom:8px;
}

.pipeline-step strong{
  display:block;
  color:var(--ink);
  font-size:1rem;
  line-height:1.3;
  margin-bottom:7px;
}

.pipeline-step p{
  margin:0;
  max-width:210px;
  color:#63707F;
  font-size:.84rem;
  line-height:1.55;
}

.pipeline-state{
  display:inline-block;
  margin-top:13px;
  color:#697685;
  font-size:.69rem;
  font-weight:820;
  letter-spacing:.055em;
  text-transform:uppercase;
}

.pipeline-step.current .pipeline-state{
  color:var(--violet);
}

.pipeline-step.partner .pipeline-state{
  color:var(--teal);
}

.practice-partner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:110px minmax(0,1fr) auto;
  gap:34px;
  align-items:center;
  margin-top:72px;
  padding:30px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.practice-symbol{
  width:92px;
  height:92px;
  display:grid;
  place-items:center;
  background:#fff;
  border:1px solid #C7D0D9;
  box-shadow:
    7px 8px 0 rgba(31,41,55,.045);
}

.practice-symbol img{
  width:58px;
  height:58px;
}

.practice-kicker{
  margin:0 0 7px;
  color:var(--teal);
  font-size:.72rem;
  font-weight:850;
  letter-spacing:.105em;
  text-transform:uppercase;
}

.practice-copy h3{
  max-width:770px;
  margin:0 0 10px;
  color:var(--ink);
  font-size:clamp(1.45rem,2.35vw,2.2rem);
  line-height:1.08;
  letter-spacing:-.035em;
}

.practice-copy>p:last-child{
  max-width:820px;
  margin:0;
  color:#5D6A79;
  font-size:.98rem;
  line-height:1.7;
}

.practice-action{
  min-width:220px;
}

.practice-action .button{
  width:100%;
}

.practice-action small{
  display:block;
  margin-top:9px;
  color:#778391;
  font-size:.68rem;
  line-height:1.4;
}


/* Tablet / Mobile Project Pipeline */

@media (max-width:900px){

  .progress-heading{
    grid-template-columns:1fr;
    gap:22px;
  }

  .progress-status{
    padding-bottom:0;
  }

  .project-pipeline{
    margin-top:44px;
    padding:0 0 0 30px;
  }

  .pipeline-base,
  .pipeline-active{
    left:7px;
    right:auto;
    width:2px;
    height:auto;
    top:12px;
    bottom:14px;
  }

  .pipeline-base{
    background:#D8DEE4;
  }

  .pipeline-active{
    right:auto;
    bottom:44%;
    background:
      linear-gradient(
        180deg,
        var(--green),
        var(--teal),
        var(--violet)
      );
    transform:scaleY(0);
    transform-origin:top center;
  }

  .project-pipeline.visible .pipeline-active{
    transform:scaleY(1);
  }

  .pipeline-steps{
    grid-template-columns:1fr;
    gap:0;
  }

  .pipeline-step{
    padding:0 0 30px 34px;
  }

  .pipeline-step:last-child{
    padding-bottom:0;
  }

  .pipeline-dot{
    top:3px;
    left:-30px;
  }

  .pipeline-step p{
    max-width:680px;
  }

  .pipeline-state{
    margin-top:9px;
  }

  .practice-partner{
    grid-template-columns:90px minmax(0,1fr);
    gap:24px;
    margin-top:54px;
  }

  .practice-action{
    grid-column:2;
    min-width:0;
    width:min(330px,100%);
  }

  .practice-symbol{
    width:78px;
    height:78px;
  }

  .practice-symbol img{
    width:48px;
    height:48px;
  }

}

@media (max-width:680px){

  .project-pipeline{
    margin-top:36px;
    padding-left:24px;
  }

  .pipeline-base,
  .pipeline-active{
    left:6px;
  }

  .pipeline-step{
    padding-left:27px;
    padding-bottom:27px;
  }

  .pipeline-dot{
    left:-25px;
    width:15px;
    height:15px;
  }

  .pipeline-step strong{
    font-size:.96rem;
  }

  .pipeline-step p{
    font-size:.86rem;
  }

  .practice-partner{
    grid-template-columns:64px minmax(0,1fr);
    gap:17px;
    padding:24px 0;
  }

  .practice-symbol{
    width:60px;
    height:60px;
  }

  .practice-symbol img{
    width:38px;
    height:38px;
  }

  .practice-copy h3{
    font-size:1.5rem;
  }

  .practice-copy>p:last-child{
    grid-column:1/-1;
    font-size:.94rem;
  }

  .practice-action{
    grid-column:1/-1;
    width:100%;
  }

}

@media (max-width:430px){

  .progress-status strong{
    font-size:.89rem;
  }

  .pipeline-step small{
    font-size:.63rem;
  }

  .pipeline-step strong{
    font-size:.93rem;
  }

  .pipeline-step p{
    font-size:.84rem;
  }

  .practice-partner{
    grid-template-columns:52px minmax(0,1fr);
  }

  .practice-symbol{
    width:50px;
    height:50px;
  }

  .practice-symbol img{
    width:31px;
    height:31px;
  }

  .practice-kicker{
    font-size:.65rem;
  }

  .practice-copy h3{
    font-size:1.36rem;
  }

}

/* TP-PROJECT-PIPELINE-V1 END */


/* =====================================================================
   TP-FAQ-EXPERIENCE-V3 START
   ===================================================================== */

.faq-section{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(
      circle at 12% 12%,
      rgba(0,139,120,.055),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #FBFCFD,
      #F4F6F8
    );
}

.faq-layout{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(260px,.68fr) minmax(0,1.32fr);
  gap:78px;
  align-items:start;
  max-width:var(--shell);
}

.faq-intro{
  position:sticky;
  top:118px;
}

.faq-intro h2{
  font-size:clamp(2.8rem,4.5vw,4.6rem);
  line-height:.95;
  letter-spacing:-.055em;
  margin-bottom:19px;
}

.faq-intro>p:not(.eyebrow){
  max-width:390px;
  color:#63707F;
  font-size:1rem;
  line-height:1.7;
}

.faq-signal{
  position:relative;
  width:190px;
  height:42px;
  margin-top:32px;
}

.faq-signal span{
  position:absolute;
  left:0;
  right:0;
  top:20px;
  height:1px;
  background:
    linear-gradient(
      90deg,
      var(--green),
      var(--teal),
      var(--violet)
    );
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 1s ease .25s;
}

.faq-layout.visible .faq-signal span{
  transform:scaleX(1);
}

.faq-signal i{
  position:absolute;
  top:16px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:#fff;
  border:2px solid var(--violet);
  opacity:0;
  transform:scale(.6);
  transition:
    opacity .3s ease,
    transform .3s ease;
}

.faq-signal i:nth-child(2){
  left:0;
  border-color:var(--green);
}

.faq-signal i:nth-child(3){
  left:50%;
  border-color:var(--teal);
  transition-delay:.18s;
}

.faq-signal i:nth-child(4){
  right:0;
  border-color:var(--violet);
  transition-delay:.36s;
}

.faq-layout.visible .faq-signal i{
  opacity:1;
  transform:scale(1);
}

.faq-list{
  counter-reset:tpFaq;
  border-top:1px solid var(--line);
}

.faq-list details{
  position:relative;
  counter-increment:tpFaq;
  border:0;
  border-bottom:1px solid var(--line);
  overflow:hidden;
  transition:
    background .25s ease,
    padding .25s ease;
}

.faq-list details::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:
    linear-gradient(
      180deg,
      var(--teal),
      var(--violet)
    );
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .34s cubic-bezier(.2,.7,.2,1);
}

.faq-list details[open]{
  background:
    linear-gradient(
      90deg,
      rgba(119,55,181,.045),
      rgba(0,139,120,.018) 56%,
      transparent
    );
}

.faq-list details[open]::before{
  transform:scaleY(1);
}

.faq-list summary{
  position:relative;
  display:grid;
  grid-template-columns:46px minmax(0,1fr) 40px;
  align-items:center;
  gap:15px;
  min-height:76px;
  padding:18px 8px 18px 0;
  color:var(--ink);
  font-size:1.02rem;
  font-weight:830;
  line-height:1.4;
  list-style:none;
}

.faq-list summary::-webkit-details-marker{
  display:none;
}

.faq-list summary::before{
  content:counter(tpFaq, decimal-leading-zero);
  color:#919CA7;
  font-size:.66rem;
  font-weight:850;
  letter-spacing:.08em;
}

.faq-list summary::after{
  content:"+";
  display:grid;
  place-items:center;
  justify-self:end;
  width:32px;
  height:32px;
  border:1px solid #C9D1D9;
  color:var(--violet);
  font-size:1.22rem;
  font-weight:500;
  line-height:1;
  transition:
    transform .28s ease,
    background .2s ease,
    border-color .2s ease,
    color .2s ease;
}

.faq-list details:hover summary::after{
  border-color:#AD93C2;
}

.faq-list details[open] summary::after{
  content:"−";
  transform:rotate(180deg);
  background:var(--violet);
  border-color:var(--violet);
  color:#fff;
}

.faq-answer{
  overflow:hidden;
}

.faq-answer p{
  max-width:790px;
  margin:0;
  padding:
    0 54px 24px 61px;
  color:#586675;
  font-size:.98rem;
  line-height:1.72;
}

.faq-list details[open] .faq-answer{
  animation:tpFaqReveal .34s cubic-bezier(.2,.7,.2,1) both;
}

@keyframes tpFaqReveal{
  from{
    opacity:0;
    transform:translateY(-8px);
  }
  to{
    opacity:1;
    transform:none;
  }
}

.faq-list details:focus-within{
  outline:2px solid rgba(119,55,181,.22);
  outline-offset:3px;
}


/* FAQ Responsive */

@media (max-width:900px){

  .faq-layout{
    grid-template-columns:1fr;
    gap:35px;
  }

  .faq-intro{
    position:relative;
    top:auto;
  }

  .faq-intro>p:not(.eyebrow){
    max-width:720px;
  }

  .faq-signal{
    margin-top:24px;
  }

}

@media (max-width:680px){

  .faq-layout{
    gap:28px;
  }

  .faq-intro h2{
    font-size:clamp(2.25rem,10vw,3.2rem);
  }

  .faq-list summary{
    grid-template-columns:36px minmax(0,1fr) 34px;
    gap:10px;
    min-height:70px;
    padding:16px 2px 16px 0;
    font-size:.96rem;
  }

  .faq-list summary::after{
    width:29px;
    height:29px;
    font-size:1.1rem;
  }

  .faq-answer p{
    padding:
      0 38px 21px 46px;
    font-size:.94rem;
    line-height:1.67;
  }

}

@media (max-width:430px){

  .faq-signal{
    width:150px;
  }

  .faq-list summary{
    grid-template-columns:29px minmax(0,1fr) 31px;
    gap:8px;
    font-size:.93rem;
  }

  .faq-list summary::before{
    font-size:.61rem;
  }

  .faq-answer p{
    padding:
      0 4px 20px 37px;
    font-size:.92rem;
  }

}

/* TP-FAQ-EXPERIENCE-V3 END */

/* =====================================================================
   TP-SPECIES-ICONSET-V2 START
   Eigene TierPult-Tierarten-Icons + saubere Kreisgeometrie
   ===================================================================== */

.species-icon-dog{
  -webkit-mask-image:url("species-final/tierpult-species-dog.svg");
  mask-image:url("species-final/tierpult-species-dog.svg");
}

.species-icon-cat{
  -webkit-mask-image:url("species-final/tierpult-species-cat.svg");
  mask-image:url("species-final/tierpult-species-cat.svg");
}

.species-icon-bird{
  -webkit-mask-image:url("species-final/tierpult-species-bird.svg");
  mask-image:url("species-final/tierpult-species-bird.svg");
}

.species-icon-rabbit{
  -webkit-mask-image:url("species-final/tierpult-species-rabbit.svg");
  mask-image:url("species-final/tierpult-species-rabbit.svg");
}

.species-icon-more{
  -webkit-mask-image:url("species-final/tierpult-species-more.svg");
  mask-image:url("species-final/tierpult-species-more.svg");
}


/* ---------------------------------------------------------
   Desktop-Orbit
   Der komplette Node IST der Kreis.
   Icon und Text liegen vollständig innerhalb.
   --------------------------------------------------------- */

@media (min-width:901px){

  .species-layout{
    grid-template-columns:.92fr 1.08fr;
    gap:68px;
  }

  .species-orbit{
    width:min(520px,100%);
    aspect-ratio:1/1;
    justify-self:center;
  }

  .species-center{
    width:106px;
    height:106px;
  }

  .species-center img{
    width:61px;
  }

  .species-center small{
    margin-top:4px;
    font-size:.67rem;
  }

  .species-node{
    width:78px;
    height:78px;
    min-width:78px;
    min-height:78px;
    box-sizing:border-box;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:3px;
    padding:7px 5px 6px;

    border:1px solid #BEC9D3;
    border-radius:50%;
    background:#fff;

    color:#536170;
    box-shadow:
      0 9px 24px rgba(31,41,55,.07),
      4px 5px 0 rgba(31,41,55,.035);

    overflow:visible;

    transition:
      color .2s ease,
      border-color .2s ease,
      box-shadow .2s ease,
      transform .2s ease;
  }

  .species-node::before{
    display:none!important;
    content:none!important;
  }

  .species-node .species-icon{
    flex:0 0 auto;
    width:28px;
    height:28px;
    margin:0;
    background:currentColor;

    -webkit-mask-repeat:no-repeat;
    -webkit-mask-position:center;
    -webkit-mask-size:contain;

    mask-repeat:no-repeat;
    mask-position:center;
    mask-size:contain;
  }

  .species-node span:last-child{
    display:block;
    width:100%;
    max-width:66px;
    margin:0;

    color:inherit;
    font-size:.61rem;
    line-height:1.08;
    font-weight:820;
    letter-spacing:0;
    text-align:center;
  }

  .species-node:hover,
  .species-node:focus-visible{
    color:var(--violet);
    border-color:#A98AC2;
    transform:scale(1.045);
    box-shadow:
      0 0 0 5px rgba(119,55,181,.05),
      0 10px 25px rgba(31,41,55,.08);
  }

  /* Alle Kreise bleiben vollständig innerhalb der äußeren Bahn */

  .species-orbit .s1{
    left:13%;
    right:auto;
    top:18%;
    bottom:auto;
  }

  .species-orbit .s2{
    left:auto;
    right:13%;
    top:18%;
    bottom:auto;
  }

  .species-orbit .s3{
    left:auto;
    right:6%;
    top:auto;
    bottom:23%;
  }

  .species-orbit .s4{
    left:50%;
    right:auto;
    top:auto;
    bottom:5%;
    transform:translateX(-50%);
  }

  .species-orbit .s5{
    left:6%;
    right:auto;
    top:auto;
    bottom:23%;
  }

  .species-orbit.in-view .s4{
    transform:translateX(-50%);
  }

  .species-orbit.in-view .s4:hover,
  .species-orbit.in-view .s4:focus-visible{
    transform:translateX(-50%) scale(1.045);
  }

}


/* ---------------------------------------------------------
   Tablet
   Kompakte Icon-Reihe statt zusammengestauchtem Orbit.
   --------------------------------------------------------- */

@media (min-width:681px) and (max-width:900px){

  .species-layout{
    gap:34px;
  }

  .species-orbit{
    width:100%;
    aspect-ratio:auto;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:14px;
    justify-items:center;
    align-items:start;
  }

  .species-ring,
  .species-connections{
    display:none;
  }

  .species-center{
    position:relative;
    left:auto;
    top:auto;
    transform:none;

    grid-column:1/-1;

    width:104px;
    height:104px;
    margin:0 auto 13px;
  }

  .species-center img{
    width:59px;
  }

  .species-node{
    position:relative;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;

    width:78px;
    height:78px;
    min-width:78px;
    min-height:78px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:3px;
    padding:7px 5px 6px;

    border:1px solid #C2CCD5;
    border-radius:50%;
    background:#fff;

    color:#536170;
    box-shadow:0 8px 20px rgba(31,41,55,.055);

    transform:none!important;
  }

  .species-node::before{
    display:none!important;
    content:none!important;
  }

  .species-node .species-icon{
    position:relative;
    left:auto;
    top:auto;

    width:27px;
    height:27px;

    margin:0;
    transform:none;

    background:currentColor;
  }

  .species-node span:last-child{
    width:100%;
    max-width:66px;
    margin:0;

    color:inherit;
    font-size:.61rem;
    line-height:1.08;
    text-align:center;
  }

}


/* ---------------------------------------------------------
   Mobile
   3 + 2 kompakte Kreise.
   Keine lange vertikale Liste.
   --------------------------------------------------------- */

@media (max-width:680px){

  .species-layout{
    gap:28px;
  }

  .species-orbit{
    width:100%;
    aspect-ratio:auto;

    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:15px 4px;

    justify-items:center;
    align-items:start;
  }

  .species-ring,
  .species-connections{
    display:none;
  }

  .species-center{
    position:relative;
    left:auto;
    top:auto;
    transform:none;

    grid-column:1/-1;

    width:96px;
    height:96px;
    margin:0 auto 10px;
  }

  .species-center img{
    width:54px;
  }

  .species-center small{
    font-size:.64rem;
  }

  .species-node{
    position:relative;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;

    width:74px;
    height:74px;
    min-width:74px;
    min-height:74px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:2px;
    padding:6px 4px 5px;

    border:1px solid #C2CCD5;
    border-radius:50%;
    background:#fff;

    color:#536170;
    box-shadow:0 7px 18px rgba(31,41,55,.05);

    transform:none!important;
  }

  .species-node::before{
    display:none!important;
    content:none!important;
  }

  .species-node .species-icon{
    position:relative;
    left:auto;
    top:auto;

    width:25px;
    height:25px;

    margin:0;
    transform:none;

    background:currentColor;
  }

  .species-node span:last-child{
    display:block;

    width:100%;
    max-width:64px;

    margin:0;

    color:inherit;
    font-size:.59rem;
    line-height:1.05;
    font-weight:820;
    text-align:center;
  }

  .species-node.s1{
    grid-column:1 / span 2;
  }

  .species-node.s2{
    grid-column:3 / span 2;
  }

  .species-node.s3{
    grid-column:5 / span 2;
  }

  .species-node.s4{
    grid-column:2 / span 2;
    width:74px;
  }

  .species-node.s5{
    grid-column:4 / span 2;
    width:74px;
  }

}


/* ---------------------------------------------------------
   Sehr kleine Smartphones
   --------------------------------------------------------- */

@media (max-width:360px){

  .species-orbit{
    gap:13px 2px;
  }

  .species-center{
    width:90px;
    height:90px;
  }

  .species-center img{
    width:50px;
  }

  .species-node,
  .species-node.s4,
  .species-node.s5{
    width:68px;
    height:68px;
    min-width:68px;
    min-height:68px;
  }

  .species-node .species-icon{
    width:23px;
    height:23px;
  }

  .species-node span:last-child{
    max-width:59px;
    font-size:.56rem;
  }

}

/* TP-SPECIES-ICONSET-V2 END */

/* =====================================================================
   TP-SPECIES-FINAL-V1 START
   Final freigegebenes TierPult-Tierarten-Iconset
   ===================================================================== */

.species-node .species-icon{
  -webkit-mask-image:none!important;
  mask-image:none!important;

  -webkit-mask:none!important;
  mask:none!important;

  background-color:transparent!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  background-size:contain!important;
}

.species-icon-dog{
  background-image:
    url("species-final/tierpult-species-dog.svg")!important;
}

.species-icon-cat{
  background-image:
    url("species-final/tierpult-species-cat.svg")!important;
}

.species-icon-bird{
  background-image:
    url("species-final/tierpult-species-bird.svg")!important;
}

.species-icon-rabbit{
  background-image:
    url("species-final/tierpult-species-rabbit.svg")!important;
}

.species-icon-more{
  background-image:
    url("species-final/tierpult-species-more.svg")!important;
}

/* Die finalen Motive haben eigene Markenfarben.
   Hover verändert deshalb nur Kreis/Umfeld, nicht das Motiv. */

.species-node:hover .species-icon,
.species-node:focus-visible .species-icon{
  background-color:transparent!important;
}

/* TP-SPECIES-FINAL-V1 END */

/* =====================================================================
   TP-SPECIES-FINAL-VISUAL-V2 START
   Größerer Orbit, größere Final-Icons, Responsive 3+2, mehr Bewegung
   ===================================================================== */


/* ---------------------------------------------------------------------
   Gemeinsame finale Darstellung
   --------------------------------------------------------------------- */

.species-node .species-icon{
  display:block;
  flex:0 0 auto;

  background-position:center!important;
  background-repeat:no-repeat!important;
  background-size:contain!important;

  transition:
    transform .28s cubic-bezier(.2,.75,.25,1),
    filter .28s ease;
}

.species-node span:last-child{
  color:#465463;
  font-weight:820;
  letter-spacing:0;
}

.species-center{
  transition:
    box-shadow .32s ease,
    transform .32s ease;
}


/* ---------------------------------------------------------------------
   DESKTOP LARGE – ab 1280 px
   --------------------------------------------------------------------- */

@media (min-width:1280px){

  .species-layout{
    grid-template-columns:.84fr 1.16fr;
    gap:64px;
  }

  .species-orbit{
    width:min(660px,100%);
    aspect-ratio:1/1;
    justify-self:center;
  }

  .species-ring.ring-1{
    width:34%;
    height:34%;
  }

  .species-ring.ring-2{
    width:62%;
    height:62%;
  }

  .species-ring.ring-3{
    width:91%;
    height:91%;
  }

  .species-center{
    width:146px;
    height:146px;

    box-shadow:
      0 18px 46px rgba(31,41,55,.10),
      7px 8px 0 rgba(31,41,55,.045);
  }

  .species-center img{
    width:84px;
  }

  .species-center small{
    margin-top:7px;
    font-size:.75rem;
  }

  .species-node{
    width:112px;
    height:112px;
    min-width:112px;
    min-height:112px;

    gap:5px;
    padding:10px 7px 9px;

    border:1px solid #BAC5CF;
    border-radius:50%;

    background:#fff;

    box-shadow:
      0 13px 31px rgba(31,41,55,.085),
      5px 6px 0 rgba(31,41,55,.035);
  }

  .species-node .species-icon{
    width:58px;
    height:58px;
  }

  .species-node span:last-child{
    width:100%;
    max-width:92px;

    font-size:.67rem;
    line-height:1.08;
    text-align:center;
  }

  /*
     Die Node-Mittelpunkte sitzen innerhalb der äußeren Bahn.
     Die Kreise wirken dadurch zum Orbit gehörig, ohne abgeschnitten zu werden.
  */

  .species-orbit .s1{
    left:8%;
    right:auto;
    top:14%;
    bottom:auto;
  }

  .species-orbit .s2{
    left:auto;
    right:8%;
    top:14%;
    bottom:auto;
  }

  .species-orbit .s3{
    left:auto;
    right:2%;
    top:auto;
    bottom:22%;
  }

  .species-orbit .s4{
    left:50%;
    right:auto;
    top:auto;
    bottom:0;
    transform:translateX(-50%);
  }

  .species-orbit .s5{
    left:2%;
    right:auto;
    top:auto;
    bottom:22%;
  }

}


/* ---------------------------------------------------------------------
   DESKTOP NORMAL – 901 bis 1279 px
   --------------------------------------------------------------------- */

@media (min-width:901px) and (max-width:1279px){

  .species-layout{
    grid-template-columns:.88fr 1.12fr;
    gap:54px;
  }

  .species-orbit{
    width:min(590px,100%);
    aspect-ratio:1/1;
  }

  .species-center{
    width:132px;
    height:132px;
  }

  .species-center img{
    width:76px;
  }

  .species-center small{
    font-size:.71rem;
  }

  .species-node{
    width:102px;
    height:102px;
    min-width:102px;
    min-height:102px;

    gap:4px;
    padding:9px 6px 8px;
  }

  .species-node .species-icon{
    width:51px;
    height:51px;
  }

  .species-node span:last-child{
    max-width:84px;
    font-size:.64rem;
    line-height:1.07;
  }

  .species-orbit .s1{
    left:8%;
    right:auto;
    top:15%;
    bottom:auto;
  }

  .species-orbit .s2{
    left:auto;
    right:8%;
    top:15%;
    bottom:auto;
  }

  .species-orbit .s3{
    left:auto;
    right:2%;
    top:auto;
    bottom:22%;
  }

  .species-orbit .s4{
    left:50%;
    right:auto;
    top:auto;
    bottom:0;
    transform:translateX(-50%);
  }

  .species-orbit .s5{
    left:2%;
    right:auto;
    top:auto;
    bottom:22%;
  }

}


/* ---------------------------------------------------------------------
   DESKTOP INTERACTION + ANIMATION
   --------------------------------------------------------------------- */

@media (min-width:901px){

  .species-node:hover,
  .species-node:focus-visible{
    color:inherit;
    border-color:#9C7ABC;

    box-shadow:
      0 0 0 7px rgba(119,55,181,.055),
      0 16px 36px rgba(31,41,55,.11);
  }

  .species-node:hover .species-icon,
  .species-node:focus-visible .species-icon{
    transform:scale(1.10) translateY(-2px);
    filter:drop-shadow(0 5px 7px rgba(31,41,55,.10));
  }

}


/* ---------------------------------------------------------------------
   TABLET – 681 bis 900 px
   Eigene 3+2 Komposition.
   --------------------------------------------------------------------- */

@media (min-width:681px) and (max-width:900px){

  .species-layout{
    grid-template-columns:1fr;
    gap:38px;
  }

  .species-orbit{
    width:min(650px,100%);
    aspect-ratio:auto;

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

    gap:22px 10px;

    justify-items:center;
    align-items:start;
    justify-self:center;
  }

  .species-ring,
  .species-connections{
    display:none;
  }

  .species-center{
    position:relative;
    left:auto;
    top:auto;
    transform:none;

    grid-column:1/-1;

    width:132px;
    height:132px;

    margin:0 auto 8px;
  }

  .species-center img{
    width:76px;
  }

  .species-center small{
    font-size:.71rem;
  }

  .species-node{
    position:relative;

    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;

    width:106px;
    height:106px;
    min-width:106px;
    min-height:106px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:5px;
    padding:9px 6px 8px;

    border:1px solid #BEC8D2;
    border-radius:50%;

    background:#fff;

    box-shadow:
      0 11px 27px rgba(31,41,55,.07);

    transform:none!important;
  }

  .species-node::before{
    display:none!important;
    content:none!important;
  }

  .species-node .species-icon{
    position:relative;
    top:auto;
    left:auto;

    width:52px;
    height:52px;

    margin:0;
    transform:none;
  }

  .species-node span:last-child{
    width:100%;
    max-width:88px;

    margin:0;

    font-size:.65rem;
    line-height:1.08;

    text-align:center;
  }

  .species-node.s1{
    grid-column:1 / span 2;
  }

  .species-node.s2{
    grid-column:3 / span 2;
  }

  .species-node.s3{
    grid-column:5 / span 2;
  }

  .species-node.s4{
    grid-column:2 / span 2;
    width:106px;
  }

  .species-node.s5{
    grid-column:4 / span 2;
    width:106px;
  }

}


/* ---------------------------------------------------------------------
   MOBILE – bis 680 px
   --------------------------------------------------------------------- */

@media (max-width:680px){

  .species-layout{
    gap:30px;
  }

  .species-orbit{
    width:100%;
    aspect-ratio:auto;

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

    gap:18px 4px;

    justify-items:center;
    align-items:start;
  }

  .species-ring,
  .species-connections{
    display:none;
  }

  .species-center{
    position:relative;
    left:auto;
    top:auto;
    transform:none;

    grid-column:1/-1;

    width:112px;
    height:112px;

    margin:0 auto 10px;
  }

  .species-center img{
    width:65px;
  }

  .species-center small{
    font-size:.67rem;
  }

  .species-node{
    position:relative;

    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;

    width:90px;
    height:90px;
    min-width:90px;
    min-height:90px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:3px;
    padding:7px 5px 6px;

    border:1px solid #C1CBD4;
    border-radius:50%;

    background:#fff;

    box-shadow:
      0 8px 21px rgba(31,41,55,.06);

    transform:none!important;
  }

  .species-node::before{
    display:none!important;
    content:none!important;
  }

  .species-node .species-icon{
    position:relative;

    top:auto;
    left:auto;

    width:43px;
    height:43px;

    margin:0;
    transform:none;
  }

  .species-node span:last-child{
    width:100%;
    max-width:76px;

    margin:0;

    font-size:.62rem;
    line-height:1.06;

    text-align:center;
  }

  .species-node.s1{
    grid-column:1 / span 2;
  }

  .species-node.s2{
    grid-column:3 / span 2;
  }

  .species-node.s3{
    grid-column:5 / span 2;
  }

  .species-node.s4{
    grid-column:2 / span 2;
    width:90px;
  }

  .species-node.s5{
    grid-column:4 / span 2;
    width:90px;
  }

}


/* ---------------------------------------------------------------------
   SMALL MOBILE – bis 430 px
   --------------------------------------------------------------------- */

@media (max-width:430px){

  .species-orbit{
    gap:15px 2px;
  }

  .species-center{
    width:102px;
    height:102px;
  }

  .species-center img{
    width:59px;
  }

  .species-node,
  .species-node.s4,
  .species-node.s5{
    width:82px;
    height:82px;
    min-width:82px;
    min-height:82px;
  }

  .species-node .species-icon{
    width:38px;
    height:38px;
  }

  .species-node span:last-child{
    max-width:70px;
    font-size:.58rem;
  }

}


/* ---------------------------------------------------------------------
   VERY SMALL MOBILE – bis 360 px
   --------------------------------------------------------------------- */

@media (max-width:360px){

  .species-orbit{
    gap:13px 0;
  }

  .species-center{
    width:94px;
    height:94px;
  }

  .species-center img{
    width:54px;
  }

  .species-node,
  .species-node.s4,
  .species-node.s5{
    width:74px;
    height:74px;
    min-width:74px;
    min-height:74px;
  }

  .species-node .species-icon{
    width:34px;
    height:34px;
  }

  .species-node span:last-child{
    max-width:63px;
    font-size:.54rem;
  }

}


/* ---------------------------------------------------------------------
   MOTION
   --------------------------------------------------------------------- */

/*
   Alte Reveal-Animation deaktivieren.
   Sie verändert transform und kollidiert mit der finalen Positionierung.
*/

.species-orbit.in-view .species-node{
  animation:none!important;
}


/* Nodes erscheinen nacheinander über Opacity/Filter,
   ohne ihre Positions-Transforms anzufassen. */

.species-orbit:not(.in-view) .species-node{
  opacity:0;
}

.species-orbit.in-view .species-node{
  animation:
    tpSpeciesNodeAppear .62s cubic-bezier(.2,.75,.25,1) both!important;
}

.species-orbit.in-view .s1{
  animation-delay:.05s!important;
}

.species-orbit.in-view .s2{
  animation-delay:.14s!important;
}

.species-orbit.in-view .s3{
  animation-delay:.23s!important;
}

.species-orbit.in-view .s4{
  animation-delay:.32s!important;
}

.species-orbit.in-view .s5{
  animation-delay:.41s!important;
}

@keyframes tpSpeciesNodeAppear{
  from{
    opacity:0;
    filter:blur(3px);
  }

  to{
    opacity:1;
    filter:none;
  }
}


/* Motive bewegen sich nach dem Erscheinen nur minimal.
   Keine Rotation. */

.species-orbit.in-view .species-icon{
  animation:
    tpSpeciesFloat 4.8s ease-in-out infinite;
}

.species-orbit.in-view .s2 .species-icon{
  animation-delay:-.7s;
}

.species-orbit.in-view .s3 .species-icon{
  animation-delay:-1.4s;
}

.species-orbit.in-view .s4 .species-icon{
  animation-delay:-2.1s;
}

.species-orbit.in-view .s5 .species-icon{
  animation-delay:-2.8s;
}

@keyframes tpSpeciesFloat{
  0%,
  100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-3px);
  }
}


/* Zentrum bekommt einen sehr ruhigen Fokus-Puls. */

.species-orbit.in-view .species-center{
  animation:
    tpSpeciesCenterPulse 5.4s ease-in-out infinite;
}

@keyframes tpSpeciesCenterPulse{
  0%,
  100%{
    box-shadow:
      0 15px 38px rgba(31,41,55,.08),
      6px 7px 0 rgba(31,41,55,.04);
  }

  50%{
    box-shadow:
      0 18px 46px rgba(119,55,181,.12),
      6px 7px 0 rgba(31,41,55,.04);
  }
}


/* Die drei Systemringe atmen minimal gegeneinander. */

@media (min-width:901px){

  .species-orbit.in-view .ring-1{
    animation:
      tpSpeciesRingPulse 5.8s ease-in-out infinite;
  }

  .species-orbit.in-view .ring-2{
    animation:
      tpSpeciesRingPulse 6.8s ease-in-out infinite reverse;
  }

  .species-orbit.in-view .ring-3{
    animation:
      tpSpeciesRingPulse 7.8s ease-in-out infinite;
  }

  @keyframes tpSpeciesRingPulse{
    0%,
    100%{
      opacity:.72;
    }

    50%{
      opacity:1;
    }
  }

}


/* Hover gewinnt gegen die ruhige Dauerbewegung. */

.species-node:hover .species-icon,
.species-node:focus-visible .species-icon{
  animation:none!important;
  transform:translateY(-2px) scale(1.10)!important;
}


/* Accessibility */

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

  .species-orbit .species-node,
  .species-orbit .species-icon,
  .species-orbit .species-center,
  .species-orbit .species-ring{
    animation:none!important;
    transition:none!important;
  }

  .species-orbit .species-node{
    opacity:1!important;
    filter:none!important;
  }

}

/* TP-SPECIES-FINAL-VISUAL-V2 END */

/* =====================================================================
   TP-HEADER-NAV-V1 START
   Präziser Desktop-Header / Mobile wird separat abgenommen
   ===================================================================== */

@media (min-width:901px){

  .site-header{
    background:rgba(255,255,255,.985);
    border-bottom:1px solid rgba(199,207,216,.58);

    box-shadow:
      0 1px 0 rgba(31,41,55,.018);

    transition:
      background .2s ease,
      border-color .2s ease,
      box-shadow .2s ease;
  }

  .site-header.scrolled{
    background:rgba(255,255,255,.985);

    border-bottom-color:rgba(190,200,210,.88);

    box-shadow:
      0 8px 24px rgba(31,41,55,.055);
  }

  .header-inner{
    height:86px;
    gap:42px;
  }

  .site-header.scrolled .header-inner{
    height:72px;
  }

  .brand{
    width:214px;
  }

  .main-nav{
    gap:4px;
  }

  .main-nav>a:not(.button){
    position:relative;

    display:inline-flex;
    align-items:center;

    min-height:44px;

    padding:0 10px;

    color:#445260;

    font-size:.95rem;
    font-weight:750;
    line-height:1;

    text-decoration:none;

    transition:
      color .18s ease;
  }

  .main-nav>a:not(.button)::after{
    content:"";

    position:absolute;

    left:10px;
    right:10px;
    bottom:5px;

    height:2px;

    background:
      linear-gradient(
        90deg,
        var(--green),
        var(--teal),
        var(--violet)
      );

    transform:scaleX(0);
    transform-origin:left center;

    transition:
      transform .22s cubic-bezier(.2,.75,.25,1);
  }

  .main-nav>a:not(.button):hover,
  .main-nav>a:not(.button):focus-visible{
    color:var(--ink);
  }

  .main-nav>a:not(.button):hover::after,
  .main-nav>a:not(.button):focus-visible::after{
    transform:scaleX(1);
  }

  .main-nav>a:not(.button):focus-visible{
    outline:2px solid rgba(119,55,181,.22);
    outline-offset:3px;
  }

  .main-nav>.button{
    min-height:46px;

    margin-left:10px;

    padding-left:19px;
    padding-right:19px;

    font-size:.92rem;
    font-weight:820;

    box-shadow:
      0 6px 16px rgba(119,55,181,.14);

    transition:
      transform .18s ease,
      box-shadow .18s ease,
      background .18s ease;
  }

  .main-nav>.button:hover,
  .main-nav>.button:focus-visible{
    transform:translateY(-1px);

    box-shadow:
      0 9px 21px rgba(119,55,181,.19);
  }

}


/* Zwischen Desktop und Menü-Breakpoint etwas kompakter */

@media (min-width:901px) and (max-width:1120px){

  .header-inner{
    gap:24px;
  }

  .brand{
    width:196px;
  }

  .main-nav{
    gap:0;
  }

  .main-nav>a:not(.button){
    padding-left:7px;
    padding-right:7px;

    font-size:.89rem;
  }

  .main-nav>a:not(.button)::after{
    left:7px;
    right:7px;
  }

  .main-nav>.button{
    margin-left:6px;

    padding-left:14px;
    padding-right:14px;

    font-size:.87rem;
  }

}

/* TP-HEADER-NAV-V1 END */

/* =====================================================================
   TP-MOBILE-RESPONSIVE-V3 START

   Betrifft:
   Header
   Hero
   Hero-System
   Prinzip/Flow
   Fachbereiche
   Arbeitszusammenhang
   Sicherheit

   Tierarten bleiben bewusst unangetastet.
   ===================================================================== */


/* =====================================================================
   TABLET + MOBILE
   ===================================================================== */

@media (max-width:900px){

  /* --------------------------------------------------
     Fixed Header
     -------------------------------------------------- */

  .site-header,
  .site-header.scrolled{
    background:#fff;
    border-bottom:1px solid #D4DAE0;
    box-shadow:0 4px 16px rgba(31,41,55,.045);
    backdrop-filter:none;
  }

  .header-inner{
    height:66px;
  }

  .site-header.scrolled .header-inner{
    height:60px;
  }

  .brand{
    width:164px;
  }

  .menu-button{
    min-height:44px;
    padding:8px 12px;
    background:#fff;
    font-size:.94rem;
    line-height:1;
  }

  .main-nav{
    top:66px;
    left:18px;
    right:18px;
    padding:10px;
    gap:2px;
    background:#fff;
  }

  .site-header.scrolled .main-nav{
    top:60px;
  }

  .main-nav>a{
    min-height:46px;
    display:flex;
    align-items:center;
    padding:10px 12px;
  }

  section[id]{
    scroll-margin-top:76px;
  }


  /* --------------------------------------------------
     HERO – mobile application composition
     -------------------------------------------------- */

  .hero{
    min-height:0;
    padding-top:96px;
    padding-bottom:58px;
  }

  .hero-layout{
    gap:38px;
  }

  .hero-system{
    min-height:0;
    height:auto;

    display:grid;
    grid-template-columns:1fr 1fr;

    gap:12px;

    padding:4px 0 0;
  }

  .system-halo,
  .hero-connections{
    display:none!important;
  }

  .hero-core{
    position:relative!important;

    left:auto!important;
    top:auto!important;

    transform:none!important;

    grid-column:1/-1;
    grid-row:1;

    width:122px;
    height:122px;

    margin:0 auto 8px;
  }

  .hero-core img{
    width:51px;
  }

  .hero-node{
    position:relative!important;

    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;

    width:100%;
    min-width:0;
    max-width:none;

    min-height:88px;

    padding:11px 11px 10px 14px;

    background:#fff;
    backdrop-filter:none;

    border-top:1px solid #D5DCE3;

    box-shadow:
      0 5px 14px rgba(31,41,55,.035);
  }

  .hero-node .node-kicker{
    font-size:.58rem;
  }

  .hero-node b{
    font-size:.88rem;
  }

  .hero-node small{
    font-size:.68rem;
  }


  /* --------------------------------------------------
     PRINZIP / INFORMATIONEN GEHÖREN ZUSAMMEN

     Zentrum oben.
     Danach jeweils Quelle + Ziel nebeneinander.
     -------------------------------------------------- */

  .flow-diagram{
    min-height:0;

    display:grid;

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

    grid-template-rows:
      auto
      repeat(4,auto);

    gap:10px 12px;

    margin-top:34px;
    padding:18px 0;

    overflow:visible;
  }

  .flow-lines,
  .flow-pulse{
    display:none!important;
  }

  .flow-core{
    position:relative;

    left:auto;
    top:auto;

    transform:none;

    grid-column:1/-1;
    grid-row:1;

    width:126px;
    height:108px;

    margin:0 auto 9px;
  }

  .flow-core img{
    width:47px;
  }

  .flow-source,
  .flow-target{
    position:relative;

    left:auto!important;
    right:auto!important;
    top:auto!important;

    width:100%;

    min-height:76px;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:10px 11px 10px 13px;

    text-align:left;

    background:#fff;

    border-top:1px solid #D5DCE3;
    border-bottom:1px solid #D5DCE3;
  }

  .flow-source{
    border-left:3px solid var(--violet);
    border-right:0;
  }

  .flow-target{
    border-left:3px solid var(--teal);
  }

  .flow-source span,
  .flow-target span{
    font-size:.87rem;
  }

  .flow-source small,
  .flow-target small{
    font-size:.68rem;
  }

  .source-a{
    grid-column:1;
    grid-row:2;
  }

  .target-a{
    grid-column:2;
    grid-row:2;
  }

  .source-b{
    grid-column:1;
    grid-row:3;
  }

  .target-b{
    grid-column:2;
    grid-row:3;
  }

  .source-c{
    grid-column:1;
    grid-row:4;
  }

  .target-c{
    grid-column:2;
    grid-row:4;
  }

  .source-d{
    grid-column:1;
    grid-row:5;
  }

  .target-d{
    grid-column:2;
    grid-row:5;
  }


  /* --------------------------------------------------
     FACHBEREICHE
     -------------------------------------------------- */

  .area-board{
    min-height:0;

    gap:0;

    margin-top:30px;
    padding:18px 0 20px;
  }

  .area-core{
    width:116px;
    height:116px;

    margin:0 auto 18px;

    box-shadow:
      0 0 0 7px rgba(119,55,181,.035),
      0 14px 34px rgba(0,0,0,.14);
  }

  .area-core img{
    width:50px;
    margin-bottom:5px;
  }

  .area-core strong{
    font-size:.96rem;
  }

  .area-core small{
    font-size:.64rem;
  }

  .area-column h3{
    margin:17px 0 3px;
  }

  .area-node{
    min-height:57px;

    padding:10px 0;

    grid-template-columns:31px minmax(0,1fr);

    gap:10px;
  }

  .area-copy b{
    font-size:.91rem;
    line-height:1.25;
  }

  .area-copy small{
    font-size:.72rem;
    line-height:1.35;
  }

  .area-node:hover,
  .area-node:focus-visible,
  .area-node.active{
    transform:none;
  }

  .area-column .area-detail{
    padding:
      7px 0
      14px 41px;

    margin:0;
  }

  .area-column .area-detail p{
    font-size:.84rem;
    line-height:1.5;
  }

  .authority-note{
    margin-top:22px;
    font-size:.88rem;
    line-height:1.58;
  }


  /* --------------------------------------------------
     ARBEITSZUSAMMENHANG
     kompakte Timeline statt Kartenstapel
     -------------------------------------------------- */

  .workflow-layout{
    gap:28px;
  }

  .process{
    min-height:0;

    display:grid;
    grid-template-columns:1fr;

    gap:0;

    border-top:1px solid var(--line);
  }

  .process-track{
    display:none!important;
  }

  .process-step{
    min-height:70px;

    display:grid;

    grid-template-columns:
      40px
      minmax(0,1fr);

    grid-template-areas:
      "index title"
      "index subtitle";

    gap:1px 12px;

    align-items:center;

    padding:12px 0;

    text-align:left;

    border:0;
    border-bottom:1px solid var(--line);

    background:transparent;
  }

  .process-step::before{
    display:none!important;
  }

  .process-step i{
    grid-area:index;

    width:34px;
    height:34px;

    display:grid;
    place-items:center;

    margin:0;

    border:1px solid #BCC6CF;

    color:#6F7B88;

    font-size:.62rem;
    font-style:normal;
    font-weight:820;
    letter-spacing:.05em;

    background:#fff;
  }

  .process-step b{
    grid-area:title;

    margin:0;

    font-size:.94rem;
    line-height:1.2;
  }

  .process-step small{
    grid-area:subtitle;

    margin:1px 0 0;

    font-size:.72rem;
    line-height:1.3;
  }


  /* --------------------------------------------------
     SICHERHEIT
     -------------------------------------------------- */

  .security-layout{
    gap:30px;
  }

  .security-points{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:0 15px;

    margin-top:24px;
  }

  .security-points span{
    padding:11px 0;

    border-bottom:
      1px solid rgba(255,255,255,.13);

    font-size:.82rem;
    line-height:1.35;
  }

  .security-stack{
    min-height:0;

    gap:8px;

    padding:
      8px 0
      0 35px;
  }

  .security-axis{
    left:11px;
    top:15px;
    bottom:15px;
  }

  .security-layer{
    width:100%!important;
    min-height:72px;

    margin-left:0!important;

    grid-template-columns:
      34px
      minmax(0,1fr);

    gap:2px 10px;

    padding:12px 13px;

    box-shadow:
      4px 5px 0 rgba(0,0,0,.07);
  }

  .security-layer:hover{
    transform:none;
  }

  .security-layer>span{
    font-size:.65rem;
  }

  .security-layer b{
    font-size:.91rem;
  }

  .security-layer small{
    font-size:.70rem;
  }

}



/* =====================================================================
   MOBILE – bis 680 px
   ===================================================================== */

@media (max-width:680px){

  .section{
    padding:60px 0;
  }


  /* Header */

  .header-inner{
    height:62px;
  }

  .site-header.scrolled .header-inner{
    height:56px;
  }

  .brand{
    width:150px;
  }

  .menu-button{
    min-height:42px;
    padding:7px 10px;
    font-size:.91rem;
  }

  .main-nav{
    top:62px;
    left:12px;
    right:12px;
  }

  .site-header.scrolled .main-nav{
    top:56px;
  }

  section[id]{
    scroll-margin-top:68px;
  }


  /* Hero */

  .hero{
    padding:
      84px 0
      48px;
  }

  .hero-layout{
    gap:31px;
  }

  .hero h1{
    font-size:
      clamp(
        2.55rem,
        10.7vw,
        3.35rem
      );

    line-height:.96;
  }

  .hero-lead{
    font-size:1rem;
    line-height:1.58;
  }

  .hero-actions{
    gap:9px;
  }

  .hero-actions .button{
    min-height:48px;
  }

  .brand-line{
    margin-top:25px;
  }

  .hero-system{
    gap:10px;
  }

  .hero-core{
    width:108px;
    height:108px;

    margin-bottom:5px;
  }

  .hero-core img{
    width:45px;
  }

  .hero-node{
    min-height:80px;
    padding:10px 9px 9px 12px;
  }

  .hero-node b{
    font-size:.83rem;
  }

  .hero-node small{
    font-size:.65rem;
  }

  .hero-node .node-kicker{
    font-size:.54rem;
  }


  /* Prinzip */

  .principle .section-head h2{
    font-size:
      clamp(
        2.25rem,
        9.7vw,
        2.9rem
      );
  }

  .flow-diagram{
    gap:9px;
    margin-top:29px;
  }

  .flow-core{
    width:112px;
    height:96px;
  }

  .flow-core img{
    width:43px;
  }

  .flow-core strong{
    font-size:.91rem;
  }

  .flow-core small{
    font-size:.61rem;
  }

  .flow-source,
  .flow-target{
    min-height:69px;

    padding:
      9px 8px
      9px 10px;
  }

  .flow-source span,
  .flow-target span{
    font-size:.82rem;
  }

  .flow-source small,
  .flow-target small{
    font-size:.64rem;
  }


  /* Fachbereiche */

  .areas .section-head h2{
    font-size:
      clamp(
        2.25rem,
        9.3vw,
        2.85rem
      );
  }

  .area-core{
    width:104px;
    height:104px;
  }

  .area-core img{
    width:45px;
  }

  .area-node{
    min-height:54px;
    padding:9px 0;
  }


  /* Workflow */

  .workflow .section-head h2{
    font-size:
      clamp(
        2.25rem,
        9.3vw,
        2.85rem
      );
  }


  /* Security */

  .security .section-head h2{
    font-size:
      clamp(
        2.25rem,
        9.3vw,
        2.85rem
      );
  }

  .security-points{
    margin-top:19px;
  }

  .security-layer{
    min-height:68px;
  }

}



/* =====================================================================
   SMALL MOBILE – bis 430 px
   ===================================================================== */

@media (max-width:430px){

  .section{
    padding:54px 0;
  }


  /* Header */

  .header-inner{
    height:60px;
  }

  .site-header.scrolled .header-inner{
    height:55px;
  }

  .brand{
    width:143px;
  }

  .menu-button{
    min-height:40px;

    padding:6px 9px;

    font-size:.88rem;
  }

  .main-nav{
    top:60px;
  }

  .site-header.scrolled .main-nav{
    top:55px;
  }


  /* Hero */

  .hero{
    padding-top:79px;
  }

  .hero-status{
    font-size:.72rem;
  }

  .hero .eyebrow{
    font-size:.69rem;
  }

  .hero h1{
    font-size:
      clamp(
        2.42rem,
        10.5vw,
        3rem
      );
  }

  .hero-system{
    gap:8px;
  }

  .hero-core{
    width:100px;
    height:100px;
  }

  .hero-core img{
    width:42px;
  }

  .hero-node{
    min-height:76px;
    padding:9px 8px 8px 10px;
  }

  .hero-node b{
    font-size:.79rem;
  }

  .hero-node small{
    font-size:.61rem;
  }


  /* Flow */

  .flow-diagram{
    gap:8px;
  }

  .flow-core{
    width:104px;
    height:90px;
  }

  .flow-source,
  .flow-target{
    min-height:64px;
  }

  .flow-source span,
  .flow-target span{
    font-size:.78rem;
  }

  .flow-source small,
  .flow-target small{
    font-size:.60rem;
  }


  /* Areas */

  .area-core{
    width:96px;
    height:96px;
  }

  .area-core img{
    width:41px;
  }

  .area-core strong{
    font-size:.90rem;
  }

  .area-node{
    grid-template-columns:
      27px
      minmax(0,1fr);

    gap:8px;
  }

  .area-index{
    font-size:.62rem;
  }

  .area-copy b{
    font-size:.87rem;
  }

  .area-copy small{
    font-size:.68rem;
  }

  .area-column .area-detail{
    padding-left:35px;
  }

  .area-column .area-detail p{
    font-size:.81rem;
  }


  /* Workflow */

  .process-step{
    min-height:65px;

    grid-template-columns:
      36px
      minmax(0,1fr);

    gap:1px 10px;

    padding:10px 0;
  }

  .process-step i{
    width:31px;
    height:31px;
  }

  .process-step b{
    font-size:.90rem;
  }

  .process-step small{
    font-size:.69rem;
  }


  /* Security */

  .security-points{
    grid-template-columns:1fr;
  }

  .security-points span{
    padding:10px 0;
  }

  .security-stack{
    padding-left:30px;
  }

  .security-axis{
    left:9px;
  }

  .security-layer{
    min-height:64px;

    grid-template-columns:
      30px
      minmax(0,1fr);

    padding:10px 11px;
  }

  .security-layer b{
    font-size:.87rem;
  }

  .security-layer small{
    font-size:.67rem;
  }

}



/* =====================================================================
   VERY SMALL – bis 360 px
   ===================================================================== */

@media (max-width:360px){

  .brand{
    width:136px;
  }

  .menu-button{
    font-size:.84rem;
  }

  .hero h1{
    font-size:2.30rem;
  }

  .hero-node{
    min-height:72px;
  }

  .flow-diagram{
    gap:6px;
  }

  .flow-source,
  .flow-target{
    padding-left:8px;
    padding-right:6px;
  }

  .flow-source span,
  .flow-target span{
    font-size:.74rem;
  }

  .area-copy b{
    font-size:.84rem;
  }

  .process-step b{
    font-size:.86rem;
  }

}


/* TP-MOBILE-RESPONSIVE-V3 END */