/* plant pirate · Footer „Abgerissenes Plakat“
   Nachbau der Komponente „Pushpin Tear Footer“ in reinem CSS/JS (ohne React).
   Ohne JavaScript bleibt der Footer vollständig sichtbar (Klassen s1–s3 stehen im HTML). */
.tpf{position:relative;overflow:hidden;container-type:size;height:max(640px,100svh);max-height:980px;background:var(--tpf-sheet);color:var(--tpf-on-sheet);font-family:var(--tpf-sans);isolation:isolate;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;--ease:cubic-bezier(.22,1,.36,1);--fs:max(12.5px,1.85cqmin)}
/* Risskante: der Footer reißt nach oben in den letzten Abschnitt, mit seiner Körnung und seinem Lichteffekt */
.tpf-tear{position:relative;height:0}
.tpf-tear::before{content:"";position:absolute;left:0;right:0;top:-27px;height:28px;z-index:3;pointer-events:none;background:var(--tpf-grain,none) 0 calc(100% - 1px)/160px 160px,linear-gradient(to right,rgba(255,255,255,.13),rgba(255,255,255,.057)),#2C7A43;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201000%2028%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2028%20L0.0%206.8%20L11.1%202.6%20L22.2%202.4%20L33.3%201.8%20L44.4%208.5%20L55.6%205.2%20L66.7%2011.1%20L77.8%202.2%20L88.9%201.0%20L100.0%2015.1%20L111.1%2012.1%20L122.2%201.0%20L133.3%2012.8%20L144.4%2011.2%20L155.6%2014.7%20L166.7%2011.1%20L177.8%2013.7%20L188.9%203.4%20L200.0%204.0%20L211.1%2012.6%20L222.2%2016.1%20L233.3%2011.4%20L244.4%2015.5%20L255.6%2015.9%20L266.7%2012.3%20L277.8%206.2%20L288.9%201.8%20L300.0%207.9%20L311.1%203.6%20L322.2%2015.2%20L333.3%2010.6%20L344.4%2015.9%20L355.6%207.4%20L366.7%203.9%20L377.8%205.3%20L388.9%204.5%20L400.0%207.6%20L411.1%2013.0%20L422.2%2019.5%20L433.3%2014.5%20L444.4%208.0%20L455.6%204.8%20L466.7%204.9%20L477.8%201.0%20L488.9%203.1%20L500.0%2016.1%20L511.1%205.6%20L522.2%203.5%20L533.3%209.2%20L544.4%203.1%20L555.6%2015.3%20L566.7%2017.4%20L577.8%2011.0%20L588.9%2017.8%20L600.0%205.8%20L611.1%2014.4%20L622.2%206.9%20L633.3%2017.9%20L644.4%2015.1%20L655.6%2010.1%20L666.7%201.9%20L677.8%2013.0%20L688.9%2017.1%20L700.0%207.5%20L711.1%204.7%20L722.2%2016.5%20L733.3%2012.4%20L744.4%2012.5%20L755.6%2014.0%20L766.7%2014.7%20L777.8%2017.7%20L788.9%2017.3%20L800.0%203.5%20L811.1%2020.4%20L822.2%2017.9%20L833.3%202.5%20L844.4%2017.7%20L855.6%2017.1%20L866.7%2015.3%20L877.8%206.3%20L888.9%205.8%20L900.0%2016.7%20L911.1%2011.2%20L922.2%2016.8%20L933.3%209.2%20L944.4%209.5%20L955.6%204.3%20L966.7%2010.7%20L977.8%2010.7%20L988.9%2010.8%20L1000.0%2014.4%20L1000%2028%20Z%22/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201000%2028%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2028%20L0.0%206.8%20L11.1%202.6%20L22.2%202.4%20L33.3%201.8%20L44.4%208.5%20L55.6%205.2%20L66.7%2011.1%20L77.8%202.2%20L88.9%201.0%20L100.0%2015.1%20L111.1%2012.1%20L122.2%201.0%20L133.3%2012.8%20L144.4%2011.2%20L155.6%2014.7%20L166.7%2011.1%20L177.8%2013.7%20L188.9%203.4%20L200.0%204.0%20L211.1%2012.6%20L222.2%2016.1%20L233.3%2011.4%20L244.4%2015.5%20L255.6%2015.9%20L266.7%2012.3%20L277.8%206.2%20L288.9%201.8%20L300.0%207.9%20L311.1%203.6%20L322.2%2015.2%20L333.3%2010.6%20L344.4%2015.9%20L355.6%207.4%20L366.7%203.9%20L377.8%205.3%20L388.9%204.5%20L400.0%207.6%20L411.1%2013.0%20L422.2%2019.5%20L433.3%2014.5%20L444.4%208.0%20L455.6%204.8%20L466.7%204.9%20L477.8%201.0%20L488.9%203.1%20L500.0%2016.1%20L511.1%205.6%20L522.2%203.5%20L533.3%209.2%20L544.4%203.1%20L555.6%2015.3%20L566.7%2017.4%20L577.8%2011.0%20L588.9%2017.8%20L600.0%205.8%20L611.1%2014.4%20L622.2%206.9%20L633.3%2017.9%20L644.4%2015.1%20L655.6%2010.1%20L666.7%201.9%20L677.8%2013.0%20L688.9%2017.1%20L700.0%207.5%20L711.1%204.7%20L722.2%2016.5%20L733.3%2012.4%20L744.4%2012.5%20L755.6%2014.0%20L766.7%2014.7%20L777.8%2017.7%20L788.9%2017.3%20L800.0%203.5%20L811.1%2020.4%20L822.2%2017.9%20L833.3%202.5%20L844.4%2017.7%20L855.6%2017.1%20L866.7%2015.3%20L877.8%206.3%20L888.9%205.8%20L900.0%2016.7%20L911.1%2011.2%20L922.2%2016.8%20L933.3%209.2%20L944.4%209.5%20L955.6%204.3%20L966.7%2010.7%20L977.8%2010.7%20L988.9%2010.8%20L1000.0%2014.4%20L1000%2028%20Z%22/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;}
@media (max-width:900px){.tpf-tear::before{-webkit-mask-size:900px 100%;mask-size:900px 100%;-webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;height:22px;top:-21px}}
.tpf *,.tpf *::before,.tpf *::after{box-sizing:border-box}
:where(.tpf) a{color:inherit;text-decoration:none}
:where(.tpf) button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer}
:where(.tpf) :focus-visible{outline:1.5px solid currentColor;outline-offset:4px;border-radius:4px}
.tpf-stage{position:absolute;left:0;top:0;max-width:none;display:block;pointer-events:none;z-index:0}
.tpf.is-hit .tpf-sheet-g{animation:tpf-hit .32s cubic-bezier(.3,.7,.4,1)}
.tpf-sheet{fill:var(--tpf-sheet)}.tpf-paper{fill:var(--tpf-paper)}.tpf-rim{fill:var(--tpf-rim)}
.tpf-ico{width:1.35em;height:1.35em;display:block;max-width:none;flex:none}
.tpf-z{position:absolute;z-index:2}
.tpf-ink{color:var(--tpf-on-paper)}
/* ohne JavaScript: kein Riss, alles liegt auf der grünen Fläche */
.tpf:not(.tpf-ready) .tpf-ink{color:var(--tpf-on-sheet)}
.tpf:not(.tpf-ready) .tpf-pin{display:none}
/* Aufbau: erst die Elemente auf dem Plakat, dann der Druck auf dem Papier */
.tpf-h{transition:opacity .7s var(--ease),translate .8s var(--ease),filter .7s var(--ease);transition-delay:calc(var(--i,0)*45ms)}
.tpf:not(.s1) .tpf-h{opacity:0;translate:0 10px;filter:blur(6px)}
.tpf-p{transition:opacity .8s var(--ease),translate .9s var(--ease),filter .8s var(--ease);transition-delay:calc(480ms + var(--i,0)*70ms)}
.tpf:not(.s3) .tpf-p{opacity:0;translate:0 18px;filter:blur(8px);transition-delay:0s}
/* obere Leiste */
.tpf-top{left:0;right:0;top:10.8%;transform:translateY(-50%);display:flex;align-items:center;justify-content:space-between;padding:0 11%;font-size:max(15px,2.6cqmin)}
.tpf-row{display:flex;align-items:center;gap:.55em}
.tpf-ib{display:grid;place-items:center;width:1.9em;height:1.9em;margin:-.3em;border-radius:50%;transition:transform .35s var(--ease),background-color .25s}
.tpf-ib:hover{transform:translateY(-2px);background:color-mix(in srgb,currentColor 14%,transparent)}
.tpf-ib:active{transform:scale(.9)}
.tpf-up .tpf-ico{transform:rotate(90deg)}
.tpf-mail{display:flex;align-items:center;gap:.6em;font-size:var(--fs);letter-spacing:.01em;padding:.35em .2em;transition:transform .35s var(--ease)}
.tpf-mail:hover{transform:translateY(-2px)}
.tpf-mail-short{display:none}
.tpf-mail span{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .4s var(--ease)}
.tpf-mail:hover span{background-size:100% 1px}
.tpf-mail .tpf-ico{width:1.5em;height:1.5em}
.tpf-toast{position:absolute;top:calc(100% + .5em);right:0;font-size:max(11px,1.6cqmin);letter-spacing:.04em;white-space:nowrap;padding:.35em .8em;border-radius:99px;background:var(--tpf-on-sheet);color:var(--tpf-sheet);opacity:0;transform:translateY(-4px);transition:opacity .25s,transform .35s var(--ease);pointer-events:none}
.tpf-toast.on{opacity:1;transform:none}
/* Erstgespräch-Pille (statt Newsletter) */
.tpf-news{left:50%;top:10.8%;width:max-content;transform:translate(-50%,-50%);font-size:var(--fs)}
.tpf-news-q{position:absolute;left:50%;top:100%;margin-top:max(10px,1.4cqmin);transform:translateX(-50%);white-space:nowrap;opacity:.85}
.tpf-pill{position:relative;display:flex;align-items:center;gap:1em;width:max-content;height:max(46px,6cqmin);padding:0 .35em 0 1.4em;border-radius:99px;background:var(--tpf-on-sheet);color:var(--tpf-sheet);font-weight:700;font-size:max(14px,2.1cqmin);transition:box-shadow .3s var(--ease),transform .35s var(--ease)}
.tpf-pill > span:first-child{flex:1;min-width:0;white-space:nowrap}
.tpf-pill:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(0,0,0,.5)}
.tpf-knob{display:grid;place-items:center;flex:none;height:calc(100% - .6em);aspect-ratio:1;border-radius:50%;background:var(--tpf-sheet);color:var(--tpf-on-sheet);box-shadow:inset 0 0 0 .22em color-mix(in srgb,var(--tpf-on-sheet) 30%,var(--tpf-sheet));transition:transform .45s cubic-bezier(.5,1.7,.4,1)}
.tpf-pill:hover .tpf-knob{transform:translateX(3px) scale(1.06)}
.tpf-knob .tpf-ico{width:52%;height:52%}
/* Adresse auf Höhe von „Leistungen“, Uhr auf Höhe von „Kontakt“ */
.tpf-flank{top:24%;font-size:var(--fs);letter-spacing:.04em;white-space:nowrap;text-transform:uppercase;line-height:1.25;opacity:.75}
.tpf-flank.l{left:38%;transform:translateX(-50%)}.tpf-flank.r{left:62%;transform:translateX(-50%)}
.tpf-clock{font-variant-numeric:tabular-nums}.tpf-clock i{font-style:normal;animation:tpf-blink 2s steps(1) infinite}
/* Link-Spalten */
.tpf-col{top:24%;display:grid;gap:max(5px,.9cqmin);font-size:var(--fs)}
.tpf-col.l{left:14%;justify-items:start}.tpf-col.r{right:14%;justify-items:end;text-align:right}
.tpf-col h3{all:unset;display:flex;align-items:center;gap:1em;margin-bottom:max(4px,.6cqmin);opacity:.75;line-height:1.25}
.tpf-col.r h3{flex-direction:row-reverse}
.tpf-col h3 .tpf-ico{width:1.1em;height:1.1em}
.tpf-col ul{all:unset;display:grid;gap:max(4px,.7cqmin);justify-items:inherit}
.tpf-col li{list-style:none}
.tpf-col li a{display:inline-block;transition:transform .35s var(--ease),opacity .25s}
.tpf-col.l li a:hover{transform:translateX(4px)}.tpf-col.r li a:hover{transform:translateX(-4px)}
.tpf-big{margin-top:max(6px,1cqmin);font-family:var(--tpf-serif);font-style:italic;font-size:max(26px,4.6cqmin);letter-spacing:-.02em;line-height:1;text-decoration:underline;text-decoration-thickness:max(1.5px,.04em);text-underline-offset:.12em;transition:text-underline-offset .35s var(--ease)}
.tpf .tpf-big:hover{text-underline-offset:.22em}
/* Pin */
.tpf-pin{position:absolute;z-index:3;left:50%;top:64%;width:max(46px,9cqmin);height:max(92px,18cqmin);transform:translate(-50%,-100%);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.tpf-pin:focus-visible{outline-offset:6px}
.tpf-tilt{position:absolute;inset:0;transform-origin:50% 100%;transform:rotate(calc(5deg + var(--tilt,0deg)));transition:transform .7s var(--ease)}
.tpf-drop,.tpf-body{position:absolute;inset:0;transform-origin:50% 100%}
.tpf-body{transition:transform .32s var(--ease)}
.tpf-pin-svg{position:absolute;inset:0;width:100%;height:100%;max-width:none;display:block;overflow:visible}
.tpf-shadow{position:absolute;right:50%;bottom:-.5%;width:150%;height:24%;transform-origin:100% 50%;transform:rotate(16deg);transition:transform .45s var(--ease),opacity .45s}
.tpf-shadow::before,.tpf-shadow::after{content:'';position:absolute;top:50%;border-radius:50%;transform:translateY(-50%)}
.tpf-shadow::before{right:0;width:100%;height:24%;background:linear-gradient(90deg,transparent,rgba(9,30,16,.26) 60%,rgba(9,30,16,.42));filter:blur(2px)}
.tpf-shadow::after{left:-6%;width:60%;height:100%;background:radial-gradient(closest-side,rgba(9,30,16,.22),transparent);filter:blur(3px)}
.tpf:not(.s2) .tpf-pin{opacity:0;pointer-events:none}
.tpf.s2.tpf-anim .tpf-drop{animation:tpf-drop .62s cubic-bezier(.5,0,.75,0) both}
.tpf.s2.tpf-anim .tpf-shadow{animation:tpf-shade .62s cubic-bezier(.5,0,.75,0) both}
.tpf-pin:hover .tpf-body{transform:translateY(-3%)}
.tpf-pin:hover .tpf-shadow{transform:rotate(16deg) translateX(-5%) scaleX(1.06)}
.tpf-pin[data-pin=lift] .tpf-body{transform:translateY(-22%) rotate(-10deg);transition-duration:.3s}
.tpf-pin[data-pin=lift] .tpf-shadow{transform:rotate(16deg) translateX(-26%) scale(1.25);opacity:.55}
.tpf-pin[data-pin=stab] .tpf-body{animation:tpf-stab .42s cubic-bezier(.55,0,.8,.2) both}
/* Druck auf dem Papier */
.tpf-brand{left:50%;top:67%;width:max-content;transform:translateX(-50%);display:grid;justify-items:stretch}
.tpf-brand-top{display:flex;align-items:center;justify-content:space-between;gap:1em;padding:0 .2em 0 .5em}
.tpf-eye{font-family:var(--tpf-serif);font-style:italic;font-size:max(16px,2.7cqmin);letter-spacing:-.01em;background:linear-gradient(90deg,var(--tpf-on-paper),color-mix(in srgb,var(--tpf-on-paper) 35%,var(--tpf-paper)));-webkit-background-clip:text;background-clip:text;color:transparent}
.tpf:not(.tpf-ready) .tpf-eye{background:none;color:inherit}
.tpf-bub{display:inline-flex;align-items:center;gap:.5em;height:1.7em;padding:0 .55em;border-radius:99px;background:color-mix(in srgb,var(--tpf-on-paper) 11%,var(--tpf-paper));font-size:max(11px,1.6cqmin);overflow:hidden;transition:padding .45s var(--ease)}
.tpf-dots{display:flex;gap:.22em}
.tpf-dots i{width:.38em;height:.38em;border-radius:50%;background:color-mix(in srgb,var(--tpf-on-paper) 45%,var(--tpf-paper));animation:tpf-dot 1.2s ease-in-out infinite}
.tpf-dots i:nth-child(2){animation-delay:.15s}.tpf-dots i:nth-child(3){animation-delay:.3s}
.tpf-bub b{font-weight:500;max-width:0;opacity:0;white-space:nowrap;transition:max-width .5s var(--ease),opacity .3s}
.tpf-bub:hover,.tpf-bub:focus-visible{padding:0 .8em}
.tpf-bub:hover b,.tpf-bub:focus-visible b{max-width:8em;opacity:1}
.tpf-word{display:block;overflow:hidden;padding:0 .04em .14em;font-size:max(40px,min(9.8cqmin,11.5cqw));font-weight:600;letter-spacing:-.05em;line-height:.98;white-space:nowrap}
.tpf-word span{display:block;position:relative;transition:transform 1s var(--ease) .5s}
.tpf-word em{font-style:normal;color:var(--tpf-sheet)}
.tpf-word span::after{content:'';position:absolute;left:.02em;right:.04em;bottom:-.02em;height:max(2px,.045em);background:currentColor;transform-origin:0 50%;transition:transform .9s var(--ease) 1.05s,height .3s var(--ease)}
.tpf:not(.s3) .tpf-word span{transform:translateY(125%);transition-delay:0s}
.tpf:not(.s3) .tpf-word span::after{transform:scaleX(0);transition-delay:0s}
.tpf-word:hover span::after{height:max(4px,.075em)}
.tpf-side{top:76%;display:grid;justify-items:center;gap:max(10px,1.9cqmin);font-size:max(13px,2.1cqmin);transform:translateX(-50%)}
.tpf-side .tpf-ico{width:1.35em;height:1.35em;transition:transform .35s var(--ease)}
.tpf-side:hover .tpf-ico{transform:translateY(-2px) rotate(-8deg)}
.tpf-side span{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .4s var(--ease)}
.tpf-side:hover span{background-size:100% 1px}
.tpf-foot{left:0;right:0;bottom:5%;display:flex;align-items:center;justify-content:space-between;gap:1.5em;padding:0 15%;font-size:max(12px,1.85cqmin)}
.tpf-credit{position:absolute;left:50%;transform:translateX(-50%);font-size:max(10px,1.4cqmin);letter-spacing:.08em;text-transform:uppercase;opacity:.62;white-space:nowrap}
.tpf-handle:hover{text-decoration:underline;text-underline-offset:.2em}
/* Handy */
/* wenig Platz: kurze Beschriftung statt der langen Adresse */
@container (max-width: 1500px){ .tpf-mail-full{display:none} .tpf-mail-short{display:inline} }
/* Handy: höherer Footer, Inhalte rücken nach oben, damit alle Links auf dem Plakat bleiben */
@media (max-width:620px){ .tpf{height:900px;max-height:none} }
@container (max-width: 620px){
.tpf-top{top:6.5%;padding:0 7%}.tpf-flank,.tpf-mail span{display:none}
.tpf-news{top:15%}.tpf-pill{width:min(84cqw,330px)}
.tpf-col{top:25%;font-size:14px}.tpf-col.l{left:7%}.tpf-col.r{right:7%}.tpf-col li:nth-child(n+4){display:none}
.tpf-big{font-size:30px}
.tpf-side{top:85%}.tpf-side.l{left:16%!important}.tpf-side.r{left:84%!important}
.tpf-foot{padding:0 7%;bottom:3%}.tpf-credit{bottom:3em}
}
/* Navigation weicht aus, solange der Footer den Bildschirm füllt */
.pp-nav{transition:transform .5s cubic-bezier(.22,1,.36,1),padding .45s cubic-bezier(.22,.61,.36,1)}
body.tpf-on .pp-nav{transform:translateY(-140%)}
@keyframes tpf-hit{0%{transform:translateY(0)}30%{transform:translateY(2px)}60%{transform:translateY(-.5px)}100%{transform:translateY(0)}}
@keyframes tpf-drop{0%{transform:translateY(-62cqh) rotate(-28deg) scale(1.5);opacity:0}25%{opacity:1}80%{transform:translateY(0) rotate(3deg) scale(1)}90%{transform:scale(1.04,.95)}100%{transform:none;opacity:1}}
@keyframes tpf-shade{0%{transform:rotate(16deg) translateX(-60%) scale(2.4);opacity:0}80%{transform:rotate(16deg);opacity:1}100%{transform:rotate(16deg);opacity:1}}
@keyframes tpf-stab{0%{transform:translateY(-22%) rotate(-10deg)}70%{transform:translateY(1.5%) rotate(1deg)}100%{transform:none}}
@keyframes tpf-dot{0%,60%,100%{transform:translateY(0);opacity:.55}30%{transform:translateY(-2.5px);opacity:1}}
@keyframes tpf-blink{0%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion: reduce){.tpf *,.tpf *::before,.tpf *::after{animation:none!important;transition-duration:.01s!important;transition-delay:0s!important}}