/* ============================================================
   PongauerPixel, Stylesheet
   Schriften: lokale System-Font-Stacks, keine externen Verbindungen
   ============================================================ */

/* ---------- Design-Tokens ---------- */
:root{
  --ink:#0a0a0a;
  --graphite:#161618;
  --steel:#86868b;
  --steel-dark:#a1a1a6;
  --mist:#e8e8ea;
  --cloud:#f4f4f6;
  --paper:#fafafa;
  --white:#ffffff;
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
}

/* ---------- Basis ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  font-family:var(--font-sans);
  background:var(--paper);
  color:var(--ink);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--ink);color:var(--paper)}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--steel);outline-offset:3px;border-radius:4px}
img,svg,canvas{display:block}

/* Feine, unaufdringliche Scrollleiste passend zum Monochrom */
html{scrollbar-width:thin;scrollbar-color:var(--steel) transparent}
::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-thumb{background:var(--steel-dark);border-radius:980px;border:2px solid var(--paper)}
::-webkit-scrollbar-track{background:transparent}

h1,h2,h3{text-wrap:balance}

.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--white);
  padding:10px 18px;border-radius:0 0 12px 0;z-index:100;font-size:.9rem;
}
.skip-link:focus{left:0}

/* Nur fuer Vorlesesoftware: bekommt beim Zahlenband den fertigen
   Endwert, waehrend die sichtbare Zahl hochzaehlt */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- Wortmarke ---------- */
.wordmark{
  font-family:var(--font-mono);font-weight:500;font-size:.82rem;
  letter-spacing:.22em;white-space:nowrap;
}
.pxsq{
  display:inline-block;width:.42em;height:.42em;
  background:currentColor;margin:0 .34em;
}

/* ---------- Navigation ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(10,10,10,.68);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(255,255,255,.08);
  color:var(--white);
}
.nav-inner{
  max-width:1120px;margin:0 auto;padding:0 24px;
  height:64px;display:flex;align-items:center;justify-content:space-between;
}
.nav .wordmark{font-size:.92rem}
.nav-links{display:flex;gap:34px;align-items:center;list-style:none}
.nav-links a{
  font-size:.88rem;color:var(--steel-dark);letter-spacing:.01em;
  transition:color .25s ease;
}
.nav-links a:hover{color:var(--white)}
.nav-cta{
  font-size:.82rem;color:var(--ink)!important;background:var(--white);
  padding:8px 18px;border-radius:980px;font-weight:500;
}
.nav-cta:hover{background:var(--mist)}
@media (max-width:640px){
  .nav-links li.hide-sm{display:none}
  .nav-inner{height:56px}
  .nav .wordmark{font-size:.82rem}
  .nav-links a{font-size:.82rem}
}

/* ---------- Layout ---------- */
.section{padding:clamp(90px,12vh,140px) 24px}
.container{max-width:1120px;margin:0 auto}
.narrow{max-width:780px;margin:0 auto}
.dark{background:var(--ink);color:var(--paper)}
.cloud-bg{background:var(--cloud)}

.eyebrow{
  font-family:var(--font-mono);font-size:.72rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--steel);
}
.dark .eyebrow{color:var(--steel-dark)}

/* Das Pixel-Quadrat der Wortmarke kehrt vor jeder Sektions-Überschrift
   wieder und zieht die Marke durch die ganze Seite. */
.head-center .eyebrow::before,
.head-left .eyebrow::before,
.hero .eyebrow::before,
.about .eyebrow::before,
.contact-info .eyebrow::before{
  content:"";display:inline-block;width:.5em;height:.5em;
  background:currentColor;margin-right:.7em;
  vertical-align:baseline;
}

h2{
  font-size:clamp(1.85rem,4vw,2.7rem);font-weight:500;
  letter-spacing:-.028em;line-height:1.15;margin-top:16px;
}
.head-center{max-width:660px;margin:0 auto 60px;text-align:center}
.head-left{max-width:600px;margin-bottom:0}

.btn{
  display:inline-block;padding:13px 28px;border-radius:980px;
  font-size:.95rem;font-weight:500;letter-spacing:-.01em;border:none;cursor:pointer;
  font-family:var(--font-sans);
  transition:transform .25s ease,background .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:scale(.97)}
.btn-light{background:var(--white);color:var(--ink)}
.btn-light:hover{background:var(--white);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.btn-ghost{color:var(--steel-dark);border:1px solid rgba(255,255,255,.22);background:transparent}
.btn-ghost:hover{color:var(--white);border-color:rgba(255,255,255,.5)}
.btn-dark{background:var(--ink);color:var(--white)}
.btn-dark:hover{background:var(--graphite);box-shadow:0 10px 26px rgba(0,0,0,.18)}

/* ---------- Hero ---------- */
.hero{
  background:var(--ink);color:var(--paper);
  padding:96px 24px 0;text-align:center;
  position:relative;overflow:hidden;
  /* Der Hero fuellt beim Einstieg genau den Bildschirm, das
     Zahlenband beginnt erst unter der Falz. Die zweite Zeile mit
     svh nimmt am Handy Ruecksicht auf die ein- und ausblendbare
     Browserleiste, aeltere Browser nutzen die vh-Zeile davor. */
  min-height:100vh;
  min-height:100svh;
  display:flex;flex-direction:column;
}
/* Freier Raum verteilt sich gleichmaessig ueber und unter dem
   Textblock, die Berge kleben dadurch immer am unteren Rand.
   Ist der Bildschirm zu klein fuer alles, waechst der Hero einfach
   und die Seite scrollt ganz normal. */
.hero .eyebrow{margin-top:auto;font-size:.78rem}
/* Subtiles Pixelraster im Hintergrund, aus reinem CSS, lädt nichts nach */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 70%);
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 70%);
}
/* Weicher Lichtschein hinter der Überschrift gibt dem Schwarz Tiefe */
.hero::after{
  content:"";position:absolute;pointer-events:none;
  left:50%;top:-140px;width:820px;height:520px;
  transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(255,255,255,.09),transparent 72%);
}
.hero>*{position:relative;z-index:1}
.hero h1{
  font-size:clamp(2.6rem,7vw,5.8rem);
  font-weight:500;letter-spacing:-.035em;line-height:1.04;
  max-width:980px;margin:22px auto 0;
}
.hero .sub{
  max-width:640px;margin:28px auto 0;
  color:var(--steel-dark);
  font-size:clamp(1.05rem,1.4vw,1.2rem);
}
.cta-row{display:flex;gap:14px;justify-content:center;margin-top:42px;flex-wrap:wrap}
.hero .btn{padding:15px 34px;font-size:1.02rem}
/* Das Panorama laeuft randlos ueber die volle Breite. Der negative
   Rand gleicht die 24px Innenabstand des Heros aus, margin-top:auto
   drueckt es an die Unterkante, und der padding-top garantiert
   einen Mindestabstand zum Textblock darueber. */
.ridge-wrap{margin:auto -24px 0;padding-top:56px}
#ridge{width:100%;height:280px}

/* Feiner Pixel-Staub, der langsam durch den Hero treibt.
   Reines CSS, laedt nichts nach. Zwei Ebenen mit leicht
   unterschiedlicher Richtung und Geschwindigkeit geben Tiefe.
   Sichtbarkeit einstellen: die beiden opacity-Werte unten sind
   der Regler, hoeher heisst deutlicher. Ohne Animation
   (reduzierte Bewegung) stehen die Punkte einfach still. */
.hero-drift{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.85) 18%,#000 45%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.85) 18%,#000 45%);
}
.hero-drift::before,.hero-drift::after{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.9) 1.5px,transparent 2.4px);
}
.hero-drift::before{
  background-size:190px 260px;
  background-position:26px 40px;
  opacity:.32;   /* Sichtbarkeit Ebene 1 */
}
.hero-drift::after{
  background-size:290px 370px;
  background-position:150px 200px;
  opacity:.18;   /* Sichtbarkeit Ebene 2 */
}
@media (prefers-reduced-motion:no-preference){
  .hero-drift::before{animation:px-drift-a 130s linear infinite}
  .hero-drift::after{animation:px-drift-b 200s linear infinite}
}
/* Die Zielpositionen sind exakte Vielfache der Kachelgroesse,
   dadurch laeuft die Schleife nahtlos ohne Sprung. */
@keyframes px-drift-a{to{background-position:-164px -480px}}
@keyframes px-drift-b{to{background-position:440px -540px}}

/* ---------- Zahlenband unter dem Panorama ---------- */
/* Vier Kennzahlen auf dunklem Grund, die beim ersten Sichtbarwerden
   hochzaehlen (Logik in main.js). Werte und Texte aendern:
   data-ziel und die Labels im HTML anpassen, mehr ist nicht noetig. */
.zahlen{background:var(--ink);color:var(--paper);padding:56px 24px 80px}
.zahlen-inner{
  max-width:1120px;margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);
}
.zahl{padding:10px 16px;text-align:center}
.zahl+.zahl{border-left:1px solid rgba(255,255,255,.09)}
.zahl-wert{
  font-size:clamp(2.1rem,4.2vw,3.3rem);font-weight:500;
  letter-spacing:-.03em;line-height:1.05;
  font-variant-numeric:tabular-nums;
}
.zahl-vor{font-size:.45em;font-weight:400;color:var(--steel-dark);letter-spacing:0}
.zahl-label{
  margin-top:12px;
  font-family:var(--font-mono);font-size:.68rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--steel-dark);
}
/* Das Pixel-Quadrat der Marke, wie bei den Eyebrows und Schritten */
.zahl-label::before{
  content:"";display:inline-block;width:.5em;height:.5em;
  background:currentColor;margin-right:.6em;
}
@media (max-width:880px){
  .zahlen-inner{grid-template-columns:1fr 1fr;row-gap:44px}
  .zahl+.zahl{border-left:0}
  .zahl:nth-child(even){border-left:1px solid rgba(255,255,255,.09)}
}

/* ---------- Manifest ---------- */
.manifesto p{
  font-size:clamp(1.5rem,3.3vw,2.3rem);
  font-weight:500;letter-spacing:-.022em;line-height:1.34;
  color:var(--steel);text-align:center;
}
.manifesto p span{color:var(--ink)}

/* ---------- Leistungen (Bento) ---------- */
.bento{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media (max-width:720px){.bento{grid-template-columns:1fr}}
.card{
  background:var(--white);border-radius:26px;padding:40px 36px;
  border:1px solid transparent;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
  transition:transform .35s cubic-bezier(.2,.6,.2,1),box-shadow .35s ease,border-color .35s ease;
}
.card:hover{
  transform:translateY(-5px);
  border-color:var(--steel-dark);
  box-shadow:0 22px 52px rgba(10,10,10,.12);
}
.card h3{
  font-size:1.55rem;font-weight:500;letter-spacing:-.022em;margin-top:12px;
}
.card p{margin-top:14px;color:var(--steel);font-size:.98rem}

/* ---------- Ablauf ---------- */
.steps{
  display:grid;grid-template-columns:repeat(4,1fr);gap:36px;margin-top:64px;
}
@media (max-width:920px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
.step{
  border-top:1px solid rgba(255,255,255,.16);padding-top:20px;
  transition:border-color .35s ease;
}
.step:hover{border-top-color:rgba(255,255,255,.55)}
.step .num{
  font-family:var(--font-mono);font-size:.82rem;font-weight:500;
  letter-spacing:.18em;color:var(--steel-dark);
  transition:color .35s ease;
}
.step .num::before{
  content:"";display:inline-block;width:.5em;height:.5em;
  background:currentColor;margin-right:.7em;
}
.step:hover .num{color:var(--white)}
.step h3{font-size:1.12rem;font-weight:500;margin-top:14px;letter-spacing:-.01em}
.step p{margin-top:10px;color:var(--steel-dark);font-size:.93rem}

/* ---------- Pakete ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:880px){.plans{grid-template-columns:1fr;max-width:520px;margin:0 auto}}
.plan{
  position:relative;background:var(--white);
  border:1px solid var(--mist);border-radius:26px;padding:38px 34px;
  transition:transform .35s cubic-bezier(.2,.6,.2,1),box-shadow .35s ease,border-color .35s ease;
}
.plan:hover{
  transform:translateY(-5px);
  border-color:var(--steel-dark);
  box-shadow:0 22px 52px rgba(10,10,10,.12);
}
/* Die empfohlene Karte ist invertiert: ein dunkler Block im hellen
   Feld, das monochrome Statement der Marke auf einen Blick. */
.plan.featured{
  background:var(--ink);border-color:var(--ink);color:var(--paper);
}
.plan.featured:hover{border-color:var(--ink);box-shadow:0 24px 58px rgba(10,10,10,.30)}
.plan .tag{
  position:absolute;top:-13px;left:32px;
  background:var(--ink);color:var(--white);
  font-family:var(--font-mono);font-size:.62rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  padding:6px 14px;border-radius:980px;
}
.plan.featured .tag{
  background:var(--white);color:var(--ink);
}
.plan h3{font-size:1.45rem;font-weight:500;letter-spacing:-.022em}
.plan .eyebrow{margin-top:8px}
.plan.featured .eyebrow{color:var(--steel-dark)}
.plan ul{list-style:none;margin-top:24px}
.plan li{
  display:flex;gap:12px;padding:9px 0;
  color:var(--steel);font-size:.95rem;
}
.plan.featured li{color:var(--steel-dark)}
.plan li::before{
  content:"";flex:none;width:6px;height:6px;
  background:var(--ink);margin-top:10px;
}
.plan.featured li::before{background:var(--paper)}
.plan-note{
  margin-top:26px;padding-top:18px;border-top:1px solid var(--mist);
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--steel);
}

/* ---------- Über mich ---------- */
.about{text-align:center}
.avatar{
  width:88px;height:88px;border-radius:50%;
  background:var(--ink);color:var(--paper);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 28px;
  font-family:var(--font-mono);font-size:1rem;letter-spacing:.2em;
  padding-left:.2em; /* optischer Ausgleich fürs letter-spacing */
}
.about p{max-width:620px;margin:22px auto 0;color:var(--steel)}

/* ---------- FAQ ---------- */
.faq-list{max-width:780px;margin:0 auto;border-bottom:1px solid var(--mist)}
.faq-list details{border-top:1px solid var(--mist)}
.faq-list summary{
  list-style:none;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:24px 0;font-size:1.06rem;font-weight:500;letter-spacing:-.01em;
  transition:color .25s ease;
}
.faq-list summary:hover{color:var(--steel)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{
  content:"+";font-family:var(--font-mono);font-size:1.25rem;
  color:var(--steel);transition:transform .3s ease;flex:none;
}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list details p{padding:0 40px 26px 0;color:var(--steel);font-size:.98rem;max-width:660px}
@media (prefers-reduced-motion:reduce){.faq-list summary::after{transition:none}}

/* ---------- Kontakt ---------- */
.contact-grid{
  display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:start;
}
@media (max-width:840px){.contact-grid{grid-template-columns:1fr;gap:48px}}
.contact-info p{margin-top:20px;color:var(--steel-dark);max-width:420px}
.contact-list{list-style:none;margin-top:36px}
.contact-list li{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:.85rem;
  padding:14px 0;border-bottom:1px solid rgba(255,255,255,.09);
}
.contact-list li em{font-style:normal;color:var(--steel-dark)}
.contact-list a:hover{color:var(--white)}

.field{display:flex;flex-direction:column;gap:9px;margin-bottom:18px}
.field label{
  font-family:var(--font-mono);font-size:.68rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--steel-dark);
}
.field input,.field textarea{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.15);
  border-radius:14px;padding:13px 16px;
  color:var(--paper);font-family:var(--font-sans);font-size:.96rem;
}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--steel-dark);
  box-shadow:0 0 0 4px rgba(255,255,255,.07);
}
.field textarea{min-height:140px;resize:vertical}
.form-note{
  margin-top:16px;font-family:var(--font-mono);font-size:.68rem;
  letter-spacing:.08em;color:#5c5c62;line-height:1.7;
}

/* ---------- Footer ---------- */
footer{
  background:var(--ink);color:var(--steel-dark);
  padding:52px 24px;border-top:1px solid rgba(255,255,255,.08);
}
.footer-inner{
  max-width:1120px;margin:0 auto;display:flex;flex-wrap:wrap;
  justify-content:space-between;align-items:center;gap:20px;
}
.footer-links{display:flex;gap:26px;list-style:none}
.footer-links a{font-size:.8rem;transition:color .25s ease}
.footer-links a:hover{color:var(--white)}
.footer-note{
  width:100%;margin-top:26px;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.08);
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;color:#5c5c62;
}

/* ---------- Reveal-Animationen ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.6,.2,1),transform .8s cubic-bezier(.2,.6,.2,1)}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .btn,.card,.plan,.plan-cta,.step,.step .num,.faq-list summary{transition:none}
  .btn:hover,.card:hover,.plan:hover,.plan-cta:hover{transform:none}
}

/* ---------- Pakete: Preise & Anfrage-Buttons ---------- */
.plan-preis{
  margin-top:22px;font-size:2.3rem;font-weight:500;
  letter-spacing:-.035em;line-height:1;
}
.plan-preis small{
  font-size:.9rem;font-weight:400;color:var(--steel);
  letter-spacing:0;
}
.plan.featured .plan-preis small{color:var(--steel-dark)}
.plan-monat{
  margin-top:8px;font-family:var(--font-mono);font-size:.72rem;
  letter-spacing:.06em;color:var(--steel);
}
.plan.featured .plan-monat{color:var(--steel-dark)}
.plan-cta{
  display:block;text-align:center;margin-top:26px;
  padding:12px 24px;border-radius:980px;
  font-size:.92rem;font-weight:500;letter-spacing:-.01em;
  border:1px solid var(--ink);color:var(--ink);
  transition:background .25s ease,color .25s ease,transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.plan-cta:hover{background:var(--ink);color:var(--white);transform:translateY(-2px)}
.plan-cta-dark{background:var(--ink);color:var(--white)}
.plan.featured .plan-cta{
  background:var(--white);border-color:var(--white);color:var(--ink);
}
.plan.featured .plan-cta:hover{
  background:var(--white);color:var(--ink);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.plans-fussnote{
  max-width:660px;margin:40px auto 0;text-align:center;
  font-size:.85rem;color:var(--steel);
}
.plans-fussnote a{text-decoration:underline;text-underline-offset:3px}
.plans-fussnote a:hover{color:var(--ink)}
@media (prefers-reduced-motion:reduce){.plan-cta{transition:none}}

/* ---------- Kontakt: Link zum Fragebogen ---------- */
.contact-fb-link{
  text-decoration:underline;text-underline-offset:3px;color:var(--paper);
}
.contact-fb-link:hover{color:var(--white)}

/* ---------- Kontakt: Direktversand ---------- */
/* Honeypot: fuer echte Besucher unsichtbar, Bots fuellen es oft
   trotzdem aus und entlarven sich damit selbst. */
.hp{
  position:absolute;left:-9999px;top:0;
  width:1px;height:1px;overflow:hidden;
}
.kontakt-banner{
  border-radius:14px;padding:14px 18px;margin-bottom:18px;
  font-size:.92rem;line-height:1.55;
}
.kontakt-banner-ok{
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.28);
  color:var(--white);
}
.kontakt-banner-fehler{
  background:rgba(255,120,120,.12);
  border:1px solid rgba(255,140,140,.4);
  color:#ffc9c9;
}
[hidden]{display:none!important}

/* ---------- Referenzen (Demo-Karten) ---------- */
.demos{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media (max-width:720px){.demos{grid-template-columns:1fr}}
.demo-karte{
  display:block;background:var(--white);
  border:1px solid var(--mist);border-radius:26px;padding:38px 34px;
  transition:transform .35s cubic-bezier(.2,.6,.2,1),box-shadow .35s ease,border-color .35s ease;
}
.demo-karte:hover{
  transform:translateY(-5px);
  box-shadow:0 22px 52px rgba(10,10,10,.12);
  border-color:var(--steel-dark);
}
.demo-karte h3{font-size:1.45rem;font-weight:500;letter-spacing:-.022em;margin-top:12px}
.demo-karte p{margin-top:14px;color:var(--steel);font-size:.97rem}
.demo-karte .demo-link{
  display:inline-block;margin-top:24px;
  font-family:var(--font-mono);font-size:.78rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;
  border-bottom:1px solid var(--ink);padding-bottom:3px;
  transition:transform .35s cubic-bezier(.2,.6,.2,1);
}
/* Beim Ueberfahren der Karte rueckt der Link leicht nach rechts,
   ein stilles Zeichen: hier geht es weiter. */
.demo-karte:hover .demo-link{transform:translateX(5px)}
@media (prefers-reduced-motion:reduce){
  .demo-karte,.demo-karte .demo-link{transition:none}
  .demo-karte:hover{transform:none}
  .demo-karte:hover .demo-link{transform:none}
}