/* screenshot42.de – Stil Copy 42: Blau-Weiß, Punkteraster, Handschrift (Caveat), harte Schatten */
:root { --navy: #02204c; --tinte: #0e1b33; --blau: #0b4aa8; --grau: #3d4b63; --hell: #5b6b82; --cyan: #00d8ff; --rot: #e5484d; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: Inter, system-ui, sans-serif; color: var(--tinte); overflow-x: hidden;
  background-color: #f7f9fc; background-image: radial-gradient(#d5deea 1px, transparent 1px); background-size: 22px 22px;
}
a { color: var(--navy); }
img, video, svg { max-width: 100%; }
figure { margin: 0; }
.hand { font-family: Caveat, cursive; font-weight: 700; color: var(--blau); }
.hand.grau { color: var(--hell); font-size: 22px; }
.hand.klein { font-size: 26px; }

/* Kopf */
.kopf { max-width: 1240px; margin: 0 auto; padding: 20px 32px; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.marke { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinte); font-weight: 700; font-size: 19px; }
.kopf nav { display: flex; gap: 22px; flex-wrap: wrap; font-size: 15px; flex: 1; }
.kopf nav a { text-decoration: none; color: var(--grau); }
.kopf nav a:hover { color: var(--blau); }
.kopf nav a { white-space: nowrap; }
/* Kopf mittelbreit: längere Menüwörter anderer Sprachen nicht im Kopf umbrechen */
@media (max-width: 1100px) { .kein-abo { display: none; } .kopf nav { gap: 16px; font-size: 14.5px; } }
@media (max-width: 920px) { .kopf .sprachwahl { margin-left: auto; } .kopf nav { order: 3; flex-basis: 100%; gap: 6px 16px; font-size: 14px; } }
.kein-abo { font-size: 25px; }
/* Sprachwahl im Kopf (ohne Skript: details/summary) */
.sprachwahl { position: relative; font-size: 14px; }
.sprachwahl summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 8px 10px; border: 1.5px solid #c9d4e3; border-radius: 10px; color: var(--grau); font-weight: 600; }
.sprachwahl summary::-webkit-details-marker { display: none; }
.sprachwahl summary:hover, .sprachwahl[open] summary { border-color: var(--navy); color: var(--navy); }
.sprachwahl summary svg { width: 16px; height: 16px; }
.sprachliste { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; display: grid; min-width: 168px; padding: 6px; background: #fff; border: 2px solid var(--navy); border-radius: 12px; box-shadow: 4px 4px 0 var(--navy); }
.sprachliste a { padding: 7px 12px; border-radius: 8px; text-decoration: none; color: var(--tinte); }
.sprachliste a:hover { background: #e4f8ff; }
.sprachliste a[aria-current] { font-weight: 700; color: var(--blau); }
.knopf { background: var(--navy); color: #fff; text-decoration: none; padding: 11px 18px; border-radius: 10px; font-weight: 600; font-size: 15px; }
.knopf:hover { background: var(--blau); color: #fff; }
.knopf.gross { padding: 15px 22px; border-radius: 12px; font-size: 16px; }

/* Rahmen und Filme */
.rahmen { position: relative; border-radius: 14px; overflow: hidden; border: 2px solid var(--navy); box-shadow: 6px 6px 0 var(--navy); background: #fff; }
.rahmen.dick { border-radius: 18px; box-shadow: 8px 8px 0 var(--navy); }
.rahmen > img:first-child, .film video { display: block; width: 100%; height: auto; }
.film video { aspect-ratio: 1440 / 900; }
.notizen { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* KI-Zeichen (Art. 50 KI-VO), wie bei Album 42 */
.ki-zeichen { position: absolute; top: 2.4%; left: 1.4%; z-index: 3; width: clamp(26px, 3.4vw, 46px); height: auto; pointer-events: none; }
.ki-klein { position: absolute; right: 8px; bottom: 8px; z-index: 3; width: 22px; height: auto; pointer-events: none; }

/* Held */
.held { max-width: 1320px; margin: 0 auto; padding: 24px 32px 40px; position: relative; }
.weltall { position: absolute; left: 0; top: 0; width: 100%; height: 380px; pointer-events: none; }
.held-text { position: relative; max-width: 760px; }
.stempel { display: inline-block; font-family: Caveat, cursive; font-weight: 700; font-size: 32px; color: var(--rot); border: 3px solid var(--rot); border-radius: 10px; padding: 0 14px; transform: rotate(-5deg); }
h1 { margin: 14px 0 0; font-size: clamp(38px, 5.4vw, 60px); line-height: 1.04; letter-spacing: -1.8px; font-weight: 800; }
.leuchtstift { background: linear-gradient(transparent 62%, #8ff0ff 62%); }
.held-text p { font-size: 19px; line-height: 1.55; color: var(--grau); margin: 20px 0 26px; }
.reihe { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.laptop { margin-top: 36px; }
/* 1440×900 große Aufnahme, per matrix3d auf den Bildschirm im 2000 px breiten Foto gelegt, --s skaliert mit */
.laptop .schirm {
  position: absolute; left: 0; top: 0; width: 1440px; height: 900px; max-width: none; transform-origin: 0 0;
  transform: scale(var(--s, 0.626)) matrix3d(0.3898655, -0.0038601841, 0, -0.000063447087, -0.077674811, 0.48709734, 0, -0.000018822729, 0, 0, 1, 0, 963.66254, 353.56096, 0, 1);
  filter: brightness(.95);
}

/* Abschnitte */
.breit { max-width: 1320px; margin: 0 auto; padding: 64px 32px 24px; }
.schmal { max-width: 1240px; margin: 0 auto; padding: 56px 32px 40px; }
h2 { margin: 0; font-size: clamp(32px, 4vw, 44px); letter-spacing: -1px; }
h3 { margin: 4px 0 0; font-size: clamp(28px, 3.2vw, 38px); letter-spacing: -.8px; line-height: 1.1; }
.unter { margin: 10px 0 30px; color: var(--grau); font-size: 18px; max-width: 760px; line-height: 1.55; }
.mitte { text-align: center; margin-left: auto; margin-right: auto; }
.zeile { display: flex; flex-wrap: wrap; gap: 36px 48px; align-items: center; }
.zeile.umgekehrt { flex-wrap: wrap-reverse; }
.zeile .text { flex: 1 1 320px; min-width: 0; }
.zeile .text p { font-size: 18px; line-height: 1.6; color: var(--grau); }
.zeile .film { flex: 1 1 560px; min-width: 0; }
.zeile .gross-film { flex: 2 1 640px; }
.schritte { flex: 1 1 280px; list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 22px; font-size: 15.5px; color: var(--grau); line-height: 1.5; }
.schritte .hand { display: block; font-size: 28px; line-height: 1.2; }
.tasten { display: flex; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--navy); }
.tasten span { border: 1.5px solid var(--navy); border-radius: 8px; padding: 4px 10px; background: #fff; }
.foto { margin: 0; }
.leiste-rollen { overflow-x: auto; margin-top: 24px; }
.leiste-rollen svg { width: 100%; min-width: 960px; height: auto; display: block; }
.funktionen { display: flex; flex-direction: column; gap: 72px; padding-top: 16px; }
.karte { flex: 1 1 460px; min-width: 0; background: #fff; border: 2px solid var(--navy); border-radius: 18px; box-shadow: 6px 6px 0 var(--navy); padding: 20px; }
.karte svg { width: 100%; height: auto; display: block; }
.platzhalter { border: 2px dashed #9fb3cc; box-shadow: none; padding: 28px; text-align: center; }
.platzhalter .hand { font-size: 28px; }

/* Sprüche zwischendurch: Handschrift, schräg, rot unterkringelt */
.spruch { max-width: 1240px; margin: 0 auto; padding: 44px 32px 8px; text-align: center; }
.spruch p { display: inline-block; margin: 0; font-family: Caveat, cursive; font-weight: 700; font-size: clamp(34px, 4.6vw, 56px); line-height: 1.15; color: var(--navy); transform: rotate(-2deg); }
.spruch.rechts p { transform: rotate(1.6deg); }
.spruch.innen { padding: 0; }
/* Spruch direkt über einem Film rechts: rechtsbündig über dem Film, dichter an den Abschnitt */
.spruch.ueber-film { text-align: right; padding-bottom: 0; margin-bottom: -18px; }
.spruch u { text-decoration: none; position: relative; white-space: nowrap; }
.spruch u::after {
  content: ""; position: absolute; left: -3%; right: -3%; bottom: -.14em; height: .34em; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M3 10 C 30 3, 52 15, 82 8 S 142 3, 197 9' fill='none' stroke='%23E5484D' stroke-width='4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.zeile .text p.fein { font-size: 14.5px; color: var(--hell); margin-top: 14px; }

/* Preise */
.preise { background: #fff; border: 2px solid var(--navy); border-radius: 22px; box-shadow: 8px 8px 0 var(--navy); padding: 36px; display: flex; flex-wrap: wrap; gap: 32px; align-items: center; }
.preise-text { flex: 1 1 320px; }
.preise-text h2 { font-size: 40px; letter-spacing: -.8px; }
.preise-text p { color: var(--grau); font-size: 17px; line-height: 1.55; margin: 10px 0 0; }
.kein-abo-kasten { display: inline-flex; align-items: baseline; gap: 10px; margin-top: 18px; padding: 10px 16px; border: 2px solid var(--tinte); border-radius: 12px; transform: rotate(-1.5deg); }
.kein-abo-kasten strong { font-size: 18px; }
.kein-abo-kasten .hand { font-size: 24px; }
.tarife { flex: 2 1 520px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tarif { display: flex; flex-direction: column; align-items: center; gap: 2px; border: 1.5px solid #d5deea; border-radius: 14px; padding: 18px 12px 14px; text-align: center; text-decoration: none; color: var(--tinte); transition: transform .12s, box-shadow .12s; }
.tarif:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--navy); border-color: var(--navy); }
.tarife b { display: block; font-size: 34px; font-weight: 800; }
.tarife span { color: var(--hell); font-size: 14px; }
.tarif em { font-style: normal; margin-top: 12px; padding: 7px 16px; border: 1.5px solid var(--navy); border-radius: 10px; background: #fff; font-weight: 700; font-size: 14.5px; }
.tarif:hover em { background: var(--navy); color: #fff; }
.tarife .beliebt { border: 2px solid var(--navy); background: #e4f8ff; }

/* Download */
.laden { text-align: center; }
.pfeil-hinweis { font-size: 30px; color: var(--navy); margin: -8px 0 4px; transform: rotate(-1.5deg); }
.geraete { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; margin-top: 22px; }
.geraet { flex: 0 1 250px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 20px; background: #fff; border: 2px solid var(--navy); border-radius: 16px; box-shadow: 4px 4px 0 #e1e8f1; text-align: left; transform: rotate(-1deg); }
.geraet.beliebt { box-shadow: 4px 4px 0 var(--cyan); transform: rotate(.8deg); }
.geraet:last-child { transform: rotate(-.6deg); }
.geraet b { font-size: 19px; }
.geraet .hand { font-size: 24px; line-height: 1.05; color: var(--navy); }
.geraet .knopf { margin-top: 12px; align-self: stretch; text-align: center; box-shadow: 4px 4px 0 var(--cyan); }
.laden-hinweise { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px 28px; max-width: 880px; margin: 30px auto 0; text-align: left; font-size: 14.5px; line-height: 1.55; color: var(--grau); }
.laden-hinweise p { margin: 0; }
.laden-hinweise b { color: var(--tinte); }

/* Anleitungen: Kacheln auf der Startseite und unter jeder Anleitung */
/* Kacheln immer mittig: Startseite 3 × 2, unter jeder Anleitung die anderen fünf in einer Reihe */
.anleitungen { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin-top: 26px; }
.anleitungen > .anleitung { flex: 0 1 222px; }
#anleitungen .anleitungen { max-width: 800px; margin-left: auto; margin-right: auto; }
#anleitungen .anleitungen > .anleitung { flex-basis: 240px; }
.weitere h2 { text-align: center; }
.anleitung { display: flex; flex-direction: column; gap: 8px; background: #fff; border: 2px solid var(--navy); border-radius: 16px; box-shadow: 4px 4px 0 var(--navy); padding: 18px 18px 14px; text-decoration: none; color: var(--tinte); transition: transform .12s, box-shadow .12s; }
.anleitung:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--navy); }
.anleitung .symbol { width: 46px; height: 46px; margin: -4px 0 2px -4px; }
.anleitung b { font-size: 18px; line-height: 1.25; }
.anleitung span { color: var(--grau); font-size: 14.5px; line-height: 1.5; }
.anleitung .hand { color: var(--blau); font-size: 22px; margin-top: auto; }

/* Anleitung als eigene Seite */
.krumen { max-width: 1320px; margin: 0 auto; padding: 4px 32px 0; font-size: 14px; color: var(--hell); }
.krumen a { color: var(--hell); }
.thema-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 48px; padding-bottom: 8px; }
.thema-kopf .held-text { flex: 1 1 460px; max-width: 700px; }
.thema-kopf h1 { font-size: clamp(34px, 4.6vw, 52px); }
.thema-kopf .stempel { font-size: 28px; margin-top: 8px; }
.skizze { flex: 1 1 340px; max-width: 520px; margin: 0 auto; position: relative; padding-top: 64px; }
.skizze > svg[role] { display: block; width: 100%; height: auto; }
.rakete-flug { position: absolute; top: -34px; right: -14px; width: 50%; height: auto; pointer-events: none; }
/* Merkzettel mit Klebestreifen */
.zettel { position: relative; display: block; margin: 36px 0 12px; padding: 22px 24px 18px; background: #fffbea; border: 2px solid var(--navy); border-radius: 4px 14px 6px 12px; box-shadow: 5px 5px 0 var(--navy); transform: rotate(-1.2deg); font-size: 17.5px; line-height: 1.6; color: var(--grau); }
.zettel::before { content: ""; position: absolute; top: -13px; left: calc(50% - 46px); width: 92px; height: 24px; background: rgba(0, 216, 255, .42); border: 1px solid rgba(2, 32, 76, .18); transform: rotate(-3deg); }
.zettel .hand { display: block; font-size: 30px; color: var(--rot); line-height: 1.1; margin-bottom: 4px; }
.abschluss .rakete { flex: none; width: 120px; height: auto; margin-left: auto; }
.thema .spruch { padding-top: 56px; }
.artikel { max-width: 860px; margin: 0 auto; padding: 24px 32px 32px; }
.artikel h2 { font-size: clamp(26px, 3vw, 34px); margin: 40px 0 12px; }
.artikel p, .artikel li { font-size: 17.5px; line-height: 1.65; color: var(--grau); }
.artikel li { margin-bottom: 8px; }
.artikel b { color: var(--tinte); }
.artikel .film { margin: 22px 0 8px; }
.tabelle { overflow-x: auto; }
.tabelle table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 2px solid var(--navy); border-radius: 14px; box-shadow: 4px 4px 0 var(--navy); overflow: hidden; }
.tabelle th, .tabelle td { text-align: left; vertical-align: top; padding: 11px 14px; border-bottom: 1px solid #e3e9f2; font-size: 16px; line-height: 1.5; color: var(--grau); }
.tabelle th { background: #e4f8ff; color: var(--tinte); font-size: 14px; }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle td:first-child { white-space: nowrap; color: var(--tinte); }
kbd { font: 600 13.5px Inter, system-ui, sans-serif; color: var(--navy); border: 1.5px solid var(--navy); border-bottom-width: 3px; border-radius: 6px; padding: 1px 7px; background: #fff; white-space: nowrap; }
.bild-mit-text { margin: 28px 0 8px; }
.bild-mit-text img { display: block; width: 100%; height: auto; }
.bild-mit-text figcaption { margin-top: 10px; font-size: 15px; color: var(--hell); text-align: center; }
.abschluss { justify-content: space-between; }
.weitere h2 { font-size: clamp(28px, 3.4vw, 38px); }

/* Fuß */
.fuss { max-width: 1240px; margin: 0 auto; padding: 28px 32px 48px; display: flex; gap: 22px; flex-wrap: wrap; align-items: center; font-size: 14px; color: var(--hell); }
.fuss > span { flex: 1; }
.fuss .hand { font-size: 20px; }
.fuss a { color: var(--hell); }
.recht h1 { font-size: clamp(32px, 4vw, 44px); margin-top: 8px; }
.recht .klein { font-size: 14px; color: var(--hell); }
.recht h2 { font-size: clamp(22px, 2.6vw, 28px); }
/* Anleitungen im Fuß: zentrierte Knöpfe mit den Symbolen der Kacheln */
.fuss-nav { flex-basis: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 14px; padding: 6px 0 30px; margin-bottom: 4px; border-bottom: 2px dashed #c5d2e3; }
/* sechs Knöpfe in zwei Dreierreihen statt 5 + 1 */
.fuss-nav .knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 14px; max-width: 720px; }
.fuss-nav b { flex-basis: 100%; text-align: center; font-family: Caveat, cursive; font-size: 32px; font-weight: 700; color: var(--blau); line-height: 1; margin-bottom: 4px; }
.fuss .fuss-nav a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px 7px 10px; background: #fff; border: 2px solid var(--navy); border-radius: 999px; box-shadow: 3px 3px 0 var(--navy); color: var(--tinte); font-size: 14.5px; font-weight: 600; text-decoration: none; transition: transform .12s, box-shadow .12s; }
.fuss .fuss-nav a:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--navy); color: var(--blau); }
.fuss-nav .symbol { width: 26px; height: 26px; flex: none; }
/* Rechtliches mit kleinen Symbolen */
.fuss-recht { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.fuss-recht a, .fuss button.link { display: inline-flex; align-items: center; gap: 6px; color: var(--hell); text-decoration: none; }
.fuss button.link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.fuss-recht a:hover, .fuss button.link:hover { color: var(--blau); }
.fuss button.link[hidden] { display: none; }
.fuss .ico { width: 16px; height: 16px; flex: none; color: var(--blau); }

@media (max-width: 760px) {
  .kopf, .held, .breit, .schmal, .fuss, .krumen, .artikel { padding-left: 16px; padding-right: 16px; }
  .tabelle td:first-child { white-space: normal; }
  .skizze { padding-top: 48px; }
  .abschluss .rakete { width: 84px; }
  .kopf { gap: 12px 18px; }
  .kopf .sprachwahl { margin-left: auto; }
  .kopf nav { order: 3; flex-basis: 100%; gap: 6px 16px; font-size: 14px; }
  .kein-abo { display: none; }
  .weltall { display: none; }
  .tarife { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .preise { padding: 22px; }
  .notizen { display: none; }
  .spruch.ueber-film { text-align: center; margin-bottom: 0; }
  .zeile .film, .zeile .gross-film, .karte { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
@media (max-width: 400px) {
  h1, h2, h3 { hyphens: auto; overflow-wrap: break-word; }
}
@media (max-width: 520px) {
  .anleitungen > .anleitung, #anleitungen .anleitungen > .anleitung { flex: 1 1 100%; }
}

/* Danke-Seite */
.danke .stempel { margin-bottom: 10px; }
.danke ol { padding-left: 22px; }
.danke li { margin-bottom: 14px; }
.geraete.klein { justify-content: flex-start; gap: 10px; margin: 12px 0 4px; }
.geraete.klein .knopf { font-size: 14.5px; padding: 9px 14px; }
.danke .englisch { margin-top: 64px; padding-top: 10px; border-top: 1.5px dashed #8a99ae; }

/* Japanisch: Überschriften an Wortgrenzen umbrechen, nicht mitten im Wort */
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3, :lang(ja) .anleitung b { word-break: auto-phrase; }

/* Seite „Alle Programme“ */
.programme .einleitung { font-size: 19px; line-height: 1.55; color: var(--grau); max-width: 680px; margin: 0 0 32px; }
.programm-liste { display: grid; gap: 22px; }
.programm { display: grid; grid-template-columns: 72px 1fr; gap: 22px; align-items: start; padding: 26px 28px; background: #fff; border: 2px solid var(--navy); border-radius: 18px; box-shadow: 5px 5px 0 var(--navy); }
.programm:first-child { background: #e4f8ff; }
.programm img { width: 72px; height: 72px; border-radius: 16px; }
.programm h2 { margin: 0; font-size: 26px; line-height: 1.2; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; }
.programm h2 .notiz { font-size: 26px; color: var(--rot); transform: rotate(-3deg); display: inline-block; }
.artikel .programm p { margin: 6px 0 0; font-size: 16.5px; }
.artikel .programm p.art { margin-top: 4px; color: var(--blau); font-weight: 700; }
.artikel .programm p.systeme { margin: 10px 0 16px; font-size: 14px; color: var(--hell); letter-spacing: .02em; }
.programm .knopf, .programme .firma .knopf { display: inline-block; }
.knopf.zwei { background: #fff; color: var(--navy); border: 2px solid var(--navy); }
.knopf.zwei:hover { background: var(--navy); color: #fff; }
.programme .firma { margin-top: 44px; padding-top: 28px; border-top: 2px dashed #c5d2e3; }
.programme .firma h2 { margin-top: 0; }
.artikel p.marken { margin-top: 36px; font-size: 13px; color: var(--hell); }
@media (max-width: 560px) { .programm { grid-template-columns: 1fr; gap: 14px; padding: 20px; } .programm img { width: 56px; height: 56px; } }

/* Kontaktseite */
.kontakt form { display: grid; gap: 18px; margin-top: 8px; padding: 26px 28px; background: #fff; border: 2px solid var(--navy); border-radius: 18px; box-shadow: 5px 5px 0 var(--navy); }
.kontakt form[hidden] { display: none; }
.kontakt label { display: grid; gap: 7px; font-size: 15px; font-weight: 700; color: var(--tinte); }
.kontakt label small { font-size: 13px; font-weight: 400; color: var(--hell); }
.kontakt input, .kontakt textarea { width: 100%; font: inherit; font-size: 16px; font-weight: 400; color: var(--tinte); background: #fbfcfe; border: 1.5px solid #c9d6e5; border-radius: 12px; padding: 12px 14px; }
.kontakt textarea { resize: vertical; min-height: 190px; }
.kontakt input:focus, .kontakt textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px #7febff; }
.artikel.kontakt p.hinweis { margin: 0; font-size: 14px; color: var(--hell); }
.kontakt button.knopf { justify-self: start; border: 0; cursor: pointer; font-family: inherit; box-shadow: 4px 4px 0 var(--cyan); }
.kontakt button.knopf:disabled { opacity: .55; cursor: default; }
.kontakt .lockfalle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.artikel.kontakt #kontaktStatus { min-height: 1.6em; font-weight: 700; margin: 0; }
#kontaktStatus.fehler { color: #b42318; }
.artikel.kontakt p.direkt { margin-top: 26px; }
.gesendet { display: grid; justify-items: center; gap: 18px; padding: 44px 24px 40px; text-align: center; background: #fff; border: 2px solid var(--navy); border-radius: 18px; box-shadow: 5px 5px 0 var(--cyan); }
.gesendet[hidden] { display: none; }
.gesendet svg { width: min(240px, 70vw); height: auto; overflow: visible; }
.artikel .gesendet p { max-width: 480px; font-size: 20px; font-weight: 700; line-height: 1.45; color: var(--tinte); margin: 0; }
.gesendet .brief, .gesendet .haken { transform-box: fill-box; transform-origin: center; }
.gesendet .spur { animation: kSpur .7s ease-out both; }
.gesendet .brief { animation: kFlug 1.1s cubic-bezier(.25, .8, .3, 1) both; }
.gesendet .haken { animation: kHaken .45s 1.05s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes kSpur { from { opacity: 0; } to { opacity: .8; } }
@keyframes kFlug { 0% { transform: translate(-150px, 32px) rotate(-18deg) scale(.55); opacity: 0; } 15% { opacity: 1; } 70% { transform: translate(-8px, -16px) rotate(4deg) scale(1); } 100% { transform: none; opacity: 1; } }
@keyframes kHaken { from { transform: scale(0); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .gesendet .spur, .gesendet .brief, .gesendet .haken { animation: none; } }
/* halftone42.de: Programmbilder in den Zeilen neben dem Text, KI-Zeichen in der Ecke */
.zeile figure.rahmen { flex: 1 1 560px; min-width: 0; }
figure.rahmen { position: relative; }
figure.rahmen > img:first-child { display: block; width: 100%; height: auto; border-radius: inherit; }