/*
 * garantielabel.app — Gestaltung nach den Figma-Screens der App
 * (Helvetica Neue, Blau #0a5fdc, Gelb #f8e610, heller Grund) mit viel Luft.
 * Bewusst nur ein helles Thema: Die Marke ist hell, Grund und Farben sind
 * überall ausdrücklich gesetzt.
 */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/schrift/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/schrift/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --grund: #ffffff;
  --grund-2: #f5f7fa;
  --grund-blau: #eef3fc;
  --flaeche: #f2f5f9;
  --text: #0b0f19;
  --text-2: #4b5363;
  --text-3: #646d7d;
  --linie: #e7eaf0;
  --linie-2: #d8dde6;
  --r-gross: 20px;
  --r-mittel: 14px;
  --r-klein: 10px;
  --h1: clamp(2.4rem, 5vw, 3.75rem);
  --h2: clamp(1.85rem, 3.3vw, 2.75rem);
  --schatten-weich: 0 1px 2px rgba(16, 24, 40, .04), 0 10px 28px rgba(16, 24, 40, .07);
  --blau: #0a5fdc;
  --blau-marke: #146ef5;
  --blau-dunkel: #1a4f9c;
  --blau-hell: rgba(10, 95, 220, 0.12);
  --gelb: #f8e610;
  --schrift: "Inter", ui-sans-serif, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --radius: 16px;
  --breite: 1240px;
  --lesebreite: 700px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "calt";
}
img { max-width: 100%; height: auto; }
a { color: var(--blau); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--blau); outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

h1, h2, h3 { font-weight: 600; letter-spacing: -0.028em; line-height: 1.08; margin: 0; text-wrap: balance; overflow-wrap: break-word; }
/* Lange Komposita („Gewährleistungslabel“) erst auf schmalen Schirmen trennen. */
@media (max-width: 700px) { h1, h2, h3 { hyphens: auto; -webkit-hyphens: auto; } }
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); letter-spacing: -0.024em; }
h3 { font-size: 1.2rem; letter-spacing: -0.015em; line-height: 1.3; }
p { margin: 0; }
.gedaempft { color: var(--text-2); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.springen { position: absolute; left: -9999px; top: 8px; background: var(--text); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 100; }
.springen:focus { left: 8px; }
.rahmen { width: min(var(--breite), 100% - 40px); margin-inline: auto; }

/* Kopf */
.kopf { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.88); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); }
.kopf__innen { display: flex; align-items: center; gap: 28px; height: 68px; }
.marke { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 700; font-size: 0.9rem; line-height: 1.04; letter-spacing: -0.035em; flex: none; }
.marke img { width: 52px; height: 52px; margin: -8px -6px -8px -8px; } /* Logo-SVG enthält Rand und Schatten */
.nav { display: flex; align-items: center; gap: 2px; margin-right: auto; }
.nav a { color: var(--text-2); text-decoration: none; padding: 8px 12px; border-radius: 999px; font-size: 0.9rem; white-space: nowrap; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--text); background: var(--grund-2); }
.kopf__rechts { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nav__menu { display: none; }
@media (max-width: 1080px) {
  .nav { display: none; position: absolute; left: 0; right: 0; top: 68px; flex-direction: column; align-items: stretch; background: #fff; padding: 8px 20px 24px; border-bottom: 1px solid var(--linie); }
  .nav.offen { display: flex; max-height: calc(100dvh - 68px); overflow-y: auto; overscroll-behavior: contain; }
  .nav a { font-size: 1.05rem; padding: 12px 8px; border-radius: 8px; }
  .nav__menu { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--linie); background: #fff; color: var(--text); cursor: pointer; }
}

/* Knöpfe */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; border-radius: 999px; font-family: inherit; font-weight: 500; font-size: 0.98rem; text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background .15s ease; }
.knopf:hover { text-decoration: none; }
.knopf--blau { background: var(--blau); color: #fff; }
.knopf--blau:hover { background: #0852c0; }
.knopf--hell { background: #fff; color: var(--text); border-color: var(--linie-2); }
.knopf--hell:hover { background: var(--grund-2); }
.knopf--klein { min-height: 38px; padding: 0 16px; font-size: 0.9rem; }
.knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.zentriert .knoepfe, .held .knoepfe { justify-content: center; }

/* Startseite */
.held { padding: clamp(56px, 9vw, 112px) 0 clamp(24px, 4vw, 40px); text-align: center; }
.held__innen { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.held h1 { font-size: clamp(2.2rem, 4.1vw, 3.7rem); max-width: none; text-wrap: balance; }
.held h1 span { color: rgba(0, 0, 0, 0.42); }
@media (min-width: 900px) { .held h1 span { display: block; } }
.held p { font-size: clamp(1.08rem, 1.6vw, 1.3rem); color: var(--text-2); max-width: 74ch; line-height: 1.5; hyphens: manual; text-wrap: balance; }
.siegel { display: inline-flex; align-items: center; gap: 8px; font-size: 0.86rem; color: var(--text-2); }
.siegel::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gelb); box-shadow: 0 0 0 4px rgba(248, 230, 16, 0.35); }
.bild img { display: block; width: 100%; height: auto; border-radius: 22px; }

/* Abschnitte */
.abschnitt { padding: clamp(56px, 8vw, 104px) 0; }
.abschnitt--grau { background: var(--grund-2); }
.abschnitt__kopf { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.abschnitt__kopf h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.abschnitt__kopf a { font-size: 0.92rem; color: var(--text-2); text-decoration: none; white-space: nowrap; }
.abschnitt__kopf a:hover { color: var(--text); }
.zentriert { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.zentriert > p { color: var(--text-2); font-size: 1.15rem; max-width: 56ch; }

/* Kacheln mit Bild */
.kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; }
.kacheln--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kacheln--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kachel { display: flex; flex-direction: column; gap: 12px; color: var(--text); text-decoration: none; }
.kachel:hover { text-decoration: none; }
.kachel img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px; background: var(--grund-blau); }
.kachel strong { font-weight: 500; font-size: 1.12rem; line-height: 1.3; letter-spacing: -0.015em; margin-top: 4px; }
.kachel:hover strong { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.kachel small { font-size: 0.86rem; color: var(--text-3); }
.kachel small b { color: var(--text); font-weight: 500; margin-right: 8px; }
.kachel p { color: var(--text-2); font-size: 0.97rem; }
@media (max-width: 960px) { .kacheln, .kacheln--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .kacheln, .kacheln--2, .kacheln--4 { grid-template-columns: 1fr; } }

/* Liste mit Vorschaubild */
.liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; }
.zeile { display: grid; grid-template-columns: 132px 1fr; gap: 18px; align-items: center; color: var(--text); text-decoration: none; }
.zeile img { width: 132px; aspect-ratio: 1; object-fit: cover; border-radius: 12px; background: var(--grund-blau); }
.zeile strong { display: block; font-weight: 500; font-size: 1.05rem; line-height: 1.3; }
.zeile small { color: var(--text-3); font-size: 0.86rem; }
.zeile:hover { text-decoration: none; }
.zeile:hover strong { text-decoration: underline; text-decoration-thickness: 1px; }
@media (max-width: 760px) { .liste { grid-template-columns: 1fr; } .zeile { grid-template-columns: 96px 1fr; } .zeile img { width: 96px; } }

/* Bild und Text nebeneinander */
.paar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.paar--umgekehrt > :first-child { order: 2; }
.paar__text { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.paar__text > p { color: var(--text-2); font-size: 1.08rem; }
@media (max-width: 860px) { .paar { grid-template-columns: 1fr; } .paar--umgekehrt > :first-child { order: 0; } }

/* Häkchenliste wie in Figma */
.haken { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.haken li { position: relative; padding-left: 34px; font-weight: 500; letter-spacing: -0.01em; }
.haken li::before { content: ""; position: absolute; left: 0; top: 0.12em; width: 24px; height: 24px; border-radius: 50%; background: var(--blau-hell) url("/marke/check.svg") center / 11px no-repeat; }
.haken b { color: var(--blau); font-weight: 700; }

/* Zahlen */

/* Seitenkopf der Unterseiten */
.seitenkopf { padding: clamp(48px, 7vw, 96px) 0 clamp(28px, 4vw, 44px); text-align: center; }
.seitenkopf__innen { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.seitenkopf h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); max-width: 100%; text-wrap: balance; }
.seitenkopf p { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--text-2); max-width: 100%; line-height: 1.5; text-wrap: balance; hyphens: manual; }
@media (min-width: 900px) { .seitenkopf h1, .seitenkopf p { max-width: 65%; } }
.meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; font-size: 0.88rem; color: var(--text-3); }
.meta b { color: var(--text); font-weight: 500; }
.krumen ol { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 0; margin: 0; font-size: 0.86rem; color: var(--text-3); }
.krumen li + li::before { content: "/"; margin-right: 6px; color: var(--linie-2); }
.krumen a { color: var(--text-3); text-decoration: none; }
.krumen a:hover { color: var(--text); }
.titelbild { width: min(1120px, 100% - 40px); margin: 0 auto clamp(40px, 6vw, 72px); }
.titelbild img { display: block; width: 100%; height: auto; border-radius: 22px; }

/* Artikeltext */
.inhalt { width: min(var(--lesebreite), 100% - 40px); margin-inline: auto; padding-bottom: clamp(48px, 7vw, 88px); }
.inhalt > * + * { margin-top: 1.15em; }
.inhalt h2 { margin-top: 2.4em; font-size: clamp(1.55rem, 2.6vw, 2rem); scroll-margin-top: 96px; }
.inhalt h3 { margin-top: 1.9em; scroll-margin-top: 96px; }
.inhalt p, .inhalt li { color: #1a1a1a; }
.inhalt ul, .inhalt ol { padding-left: 1.3em; }
.inhalt li + li { margin-top: 0.45em; }
.inhalt blockquote { margin: 1.6em 0; padding: 16px 20px; background: var(--grund-2); border-radius: 12px; color: var(--text-2); font-size: 1.05rem; }
.inhalt code { font-size: 0.9em; background: var(--grund-2); padding: 2px 7px; border-radius: 6px; }
.inhalt figure { margin: 2.4em 0; }
.inhalt figure.breit { width: min(1000px, 100vw - 40px); position: relative; left: 50%; transform: translateX(-50%); }
.inhalt figure img { display: block; width: 100%; height: auto; border-radius: 16px; }
figcaption { font-size: 0.88rem; color: var(--text-3); margin-top: 12px; text-align: center; }
.figur-mittig { display: flex; flex-direction: column; align-items: center; }
.figur-mittig img { width: auto !important; max-width: 100%; }
.figur-schmal img { max-width: 380px; }
.toc { background: var(--grund-2); border-radius: var(--radius); padding: 20px 24px; font-size: 0.95rem; }
.toc strong { display: block; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
.toc ol { margin: 0; padding-left: 1.2em; columns: 2; column-gap: 32px; }
.toc li { break-inside: avoid; margin: 0 0 6px !important; }
.toc a { color: var(--text); text-decoration: none; }
.toc a:hover { text-decoration: underline; }
@media (max-width: 620px) { .toc ol { columns: 1; } }

/* Bausteine im Text */
.kurzantwort { background: var(--grund-blau); border-radius: var(--radius); padding: 22px 24px; }
.kurzantwort::before { content: "Kurz gesagt"; display: block; font-size: 0.92rem; font-weight: 650; color: var(--text); margin-bottom: 6px; }
.kurzantwort p { color: var(--text) !important; font-size: 1.04rem; }
.hinweis { background: var(--grund-2); border-radius: var(--radius); padding: 18px 22px; font-size: 0.97rem; }
.hinweis--rechtlich { background: #fffbe0; }
.tabelle { overflow-x: auto; margin: 1.8em 0; border: 1px solid var(--linie); border-radius: var(--radius); }
.tabelle table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.tabelle th, .tabelle td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.tabelle th { background: var(--grund-2); font-weight: 500; font-size: 0.88rem; color: var(--text-2); }
.tabelle tr:last-child td { border-bottom: 0; }
.liste-haken { list-style: none; padding: 0 !important; display: grid; gap: 10px; }
.liste-haken li { position: relative; padding-left: 32px; margin: 0 !important; }
.liste-haken li::before { content: ""; position: absolute; left: 0; top: 0.18em; width: 22px; height: 22px; border-radius: 50%; background: var(--blau-hell) url("/marke/check.svg") center / 10px no-repeat; }
.schritte { counter-reset: schritt; list-style: none; padding: 0 !important; display: grid; gap: 12px; }
.schritte li { counter-increment: schritt; position: relative; padding: 18px 20px 18px 66px; background: var(--grund-2); border-radius: var(--radius); margin: 0 !important; }
.schritte li::before { content: counter(schritt); position: absolute; left: 18px; top: 16px; width: 32px; height: 32px; border-radius: 50%; background: var(--blau); color: #fff; font-weight: 700; display: grid; place-items: center; font-size: 0.92rem; }
.raster-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.raster-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 760px) { .raster-2, .raster-3 { grid-template-columns: 1fr; } }
.karte { background: var(--grund-2); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 8px; color: var(--text); text-decoration: none; }
.karte p { color: var(--text-2); font-size: 0.97rem; }
.karte h3 a { color: inherit; text-decoration: none; }
.karte--link:hover { background: #edf1f7; text-decoration: none; }
.karte__nr { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blau); }
.badge-demo { display: flex; align-items: center; gap: 12px; padding: 12px 8px 12px 16px; background: #fff; border: 1.5px solid var(--linie-2); border-radius: 12px; max-width: 440px; }
.badge-demo img { width: 40px; height: 40px; flex: none; }
.badge-demo span { display: flex; flex-direction: column; line-height: 1.25; flex-grow: 1; }
.badge-demo b { color: var(--blau-dunkel); font-weight: 600; font-size: 1.08rem; letter-spacing: -0.01em; }
.badge-demo small { color: rgba(0, 0, 0, .6); font-size: 0.92rem; }
.badge-demo i { width: 34px; height: 46px; flex: none; border-left: 1px solid rgba(220, 226, 233, .6); background: url("/marke/chevron.svg") center / 34px no-repeat; }

/* Häufige Fragen */
.faq { border-top: 1px solid var(--linie); }
.faq details { border-bottom: 1px solid var(--linie); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative; font-weight: 500; font-size: 1.06rem; letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 14px; height: 14px; margin-top: -7px; background: linear-gradient(#000, #000) center / 14px 1.5px no-repeat, linear-gradient(#000, #000) center / 1.5px 14px no-repeat; transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 0 22px; color: var(--text-2); }
.faq details > div > * + * { margin-top: 0.8em; }

/* Angebotskarte im Text */
.angebot { display: grid; grid-template-columns: 160px 1fr; gap: 24px; align-items: center; background: var(--grund-blau); border-radius: 20px; padding: 22px; margin: 2.8em 0 !important; }
.angebot div { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.angebot strong { font-size: 1.15rem; letter-spacing: -0.02em; line-height: 1.25; }
.angebot p { color: var(--text-2) !important; font-size: 0.97rem; }
@media (max-width: 560px) { .angebot { grid-template-columns: 1fr; } }

/* Abschluss */
.abschluss { padding: clamp(72px, 10vw, 136px) 0; text-align: center; background: linear-gradient(180deg, #fff 0%, var(--grund-blau) 100%); }
.abschluss__innen { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.abschluss h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); max-width: 18ch; }
.abschluss p { color: var(--text-2); font-size: 1.15rem; max-width: 52ch; }
.abschluss .symbol { width: 104px; height: 104px; margin: -16px auto -14px; }

/* Preise */
.preise { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.preis-karte { border: 1px solid var(--linie); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.preis-karte--empfohlen { border-color: var(--blau); box-shadow: 0 0 0 1px var(--blau); }
.preis { font-size: 2.6rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.preis small { font-size: 1rem; font-weight: 400; color: var(--text-3); letter-spacing: 0; }
.pille { display: inline-flex; padding: 4px 10px; border-radius: 999px; background: var(--gelb); font-size: 0.78rem; font-weight: 700; }
@media (max-width: 860px) { .preise { grid-template-columns: 1fr; } }

/* Galerie der Sprachfassungen */
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 28px 18px; }
.galerie figure { margin: 0 !important; display: flex; flex-direction: column; gap: 10px; }
.galerie img { display: block; width: 100%; height: auto; border-radius: 6px !important; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 8px 24px rgba(16, 40, 80, .08); }
.galerie figcaption { text-align: left; margin: 0; font-size: 0.9rem; color: var(--text); display: flex; flex-direction: column; gap: 4px; }
.galerie .laden { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 0.82rem; }
.galerie .laden a { white-space: nowrap; }

/* Fuß */
.fuss { background: var(--grund-2); padding: 64px 0 36px; font-size: 0.92rem; }
.fuss__raster { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.fuss h2 { font-size: 0.86rem; letter-spacing: 0; color: var(--text-3); font-weight: 500; margin-bottom: 14px; }
.fuss ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.fuss a { color: var(--text); text-decoration: none; }
.fuss a:hover { text-decoration: underline; }
.fuss__text { color: var(--text-2); margin-top: 14px; max-width: 34ch; }
.fuss__unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--linie); color: var(--text-3); font-size: 0.84rem; }
@media (max-width: 860px) { .fuss__raster { grid-template-columns: 1fr 1fr; } .fuss__raster > :first-child { grid-column: 1 / -1; } }
.rahmen--schmal { max-width: 820px; }
.abstand-oben { margin-top: 20px; }

/* GARAN-Generator */
.abschnitt--eng { padding-top: 8px; }
.gen { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.gen-form { display: flex; flex-direction: column; gap: 16px; }
.feld { display: flex; flex-direction: column; gap: 6px; font-size: 0.92rem; font-weight: 500; }
.feld small { font-weight: 400; color: var(--text-3); font-size: 0.84rem; }
.feld input, .feld select { font: inherit; font-size: 1rem; font-weight: 400; padding: 12px 14px; border: 1px solid var(--linie-2); border-radius: 12px; background: #fff; color: var(--text); }
.feld input:focus, .feld select:focus { outline: 2px solid var(--blau); outline-offset: 1px; border-color: transparent; }
.feld input[type="file"] { padding: 10px; }
.haken-feld { display: flex; align-items: center; gap: 10px; font-size: 0.95rem; }
.haken-feld input { width: 18px; height: 18px; accent-color: var(--blau); }
.gen-status { font-size: 0.92rem; color: var(--text-2); min-height: 1.4em; }
.gen-status[data-art="fehler"] { color: #b3261e; }
.gen-status[data-art="ok"] { color: #0e7a3d; }
.gen-downloads { display: flex; flex-wrap: wrap; gap: 8px; }
.gen-downloads[hidden] { display: none; }
.gen-buehne { position: sticky; top: 92px; background: linear-gradient(160deg, #eef4fd 0%, #f8fafe 60%, #fff 100%); border-radius: 22px; padding: clamp(24px, 4vw, 48px); display: grid; place-items: center; min-height: 420px; }
.gen-buehne img { width: 100%; max-width: 540px; height: auto; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .06), 0 24px 60px rgba(16, 40, 80, .16); }
.gen-buehne[data-variante="nested"] img { max-width: 640px; }
@media (max-width: 860px) { .gen { grid-template-columns: 1fr; } .gen-buehne { position: static; order: 1; min-height: 0; } }
.code { background: #0b1220; color: #e6edf7; border-radius: 14px; padding: 18px 20px; overflow-x: auto; font-size: 0.86rem; line-height: 1.55; margin: 0; width: 100%; }
.code code { background: none; padding: 0; color: inherit; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.preise--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.preise--5 .preis { font-size: 2rem; }
@media (max-width: 1100px) { .preise--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .preise--5 { grid-template-columns: 1fr; } }
.schluessel { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 1.2rem; background: var(--grund-blau); padding: 16px 22px; border-radius: 14px; word-break: break-all; }
.schluessel[hidden] { display: none; }
.paar > *, .gen > *, .kacheln > *, .preise > * { min-width: 0; }

/* Klickbare Demo */
.demo { display: flex; flex-direction: column; gap: 24px; }
.demo-buehne { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: clamp(28px, 5vw, 56px); align-items: center; width: 100%; max-width: 980px; margin: 0 auto; background: linear-gradient(160deg, #eef4fd 0%, #f6f9fe 100%); border-radius: 24px; padding: clamp(20px, 4vw, 44px); box-sizing: border-box; }
.demo-shop { position: relative; height: 680px; background: #fff; border-radius: 30px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 24px 60px rgba(16,40,80,.14); }
.demo-shop__bild { position: relative; height: 340px; overflow: hidden; }
.demo-shop__bild > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; display: block; }
.demo-shop__nav { position: absolute; z-index: 1; inset: 0 0 auto 0; height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; background: linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,0)); color: #fff; }
.demo-shop__nav b { font-size: 1.35rem; letter-spacing: -0.03em; }
.demo-burger { width: 22px; height: 14px; border-top: 2px solid #fff; border-bottom: 2px solid #fff; position: relative; }
.demo-burger::after { content: ""; position: absolute; left: 0; right: 0; top: 4px; border-top: 2px solid #fff; }
.demo-scroll { position: relative; transition: transform 1.4s cubic-bezier(.45, 0, .2, 1); will-change: transform; }
.demo-shop__info { padding: 22px 22px 26px; display: flex; flex-direction: column; gap: 8px; }
.demo-sterne { font-size: 0.85rem; letter-spacing: 2px; }
.demo-shop__info strong { font-weight: 500; font-size: 1.3rem; letter-spacing: -0.03em; color: #282828; }
.demo-unter { color: rgba(40,40,40,.7); }
.demo-kauf { display: flex; align-items: center; justify-content: center; height: 50px; background: #282828; color: #fff; font-weight: 500; font-size: 1.1rem; margin: 10px 0 6px; }
.demo-platz[hidden] { display: none; }
.demo-badge { font: inherit; width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; background: #fff; border: 1.5px solid var(--linie-2); border-radius: 10px; padding: 9px 6px 9px 12px; cursor: pointer; }
.demo-badge span { display: flex; flex-direction: column; flex: 1; line-height: 1.25; }
.demo-badge b { color: var(--blau-dunkel); font-weight: 600; }
.demo-badge small { color: rgba(0,0,0,.6); font-size: 0.85rem; }
.demo-badge i { width: 30px; height: 40px; border-left: 1px solid rgba(220,226,233,.6); background: url("/marke/chevron.svg") center / 30px no-repeat; }
.demo-badge:hover { border-color: var(--blau); }
.demo-akk { border-top: 1px solid var(--linie); }
.demo-akk:last-child { border-bottom: 1px solid var(--linie); }
.demo-akk summary { list-style: none; cursor: pointer; padding: 12px 0; display: flex; justify-content: space-between; font-size: 0.95rem; }
.demo-akk summary::-webkit-details-marker { display: none; }
.demo-akk summary::after { content: "+"; color: var(--text-3); }
.demo-akk[open] summary::after { content: "−"; }
.demo-akk--gl summary { color: var(--blau-dunkel); font-weight: 600; }
.demo-akk p { margin: 0 0 12px; color: var(--text-2); font-size: 0.92rem; }
.demo-akk img, .demo-voll { display: block; width: 100%; height: auto; margin-bottom: 12px; border: 1px solid var(--linie); }
.demo-fuss { display: flex; flex-wrap: wrap; gap: 8px 16px; background: var(--grund-2); border-radius: 10px; padding: 14px; font-size: 0.85rem; color: var(--text-2); }
.demo-link { font: inherit; background: none; border: 0; padding: 0; color: var(--blau); text-decoration: underline; cursor: pointer; }
.demo-garan { font: inherit; width: 100%; padding: 0; background: #fff; border: 1px solid var(--linie-2); border-radius: 9px; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; }
.demo-garan img { width: 100%; height: auto; display: block; padding: 6px 8px; }
.demo-garan span { background: var(--linie-2); color: var(--blau-dunkel); font-weight: 600; font-size: 0.82rem; padding: 6px; }
.demo-text { display: flex; flex-direction: column; gap: 18px; font-size: 1.05rem; min-width: 0; }
.demo-text b { font-weight: 700; }
.demo-zu { position: absolute; right: 10px; top: 10px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(0,0,0,.65); color: #fff; font-size: 1.3rem; cursor: pointer; }
@media (max-width: 860px) { .demo-buehne { grid-template-columns: 1fr; } .demo-shop { max-width: 400px; margin: 0 auto; width: 100%; } }

/* Drei Angebote auf der Startseite */
.angebote { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: clamp(32px, 5vw, 56px); text-align: left; }
.angebot-karte { display: flex; flex-direction: column; background: var(--grund-2); border-radius: 24px; overflow: hidden; color: var(--text); text-decoration: none; min-width: 0; }
.angebot-karte > img { display: block; width: 100%; aspect-ratio: 16 / 11; object-fit: cover; background: var(--grund-blau); }
.angebot-karte__text { display: flex; flex-direction: column; gap: 10px; padding: 24px 24px 28px; flex: 1; align-items: flex-start; }
.angebot-karte__text small { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blau); }
.angebot-karte__text h2 { font-size: clamp(1.35rem, 2vw, 1.65rem); }
.angebot-karte__text p { color: var(--text-2); flex: 1; }
.angebot-karte--hervor { background: var(--grund-blau); }
@media (max-width: 960px) { .angebote { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }
.abstand-unten { margin-bottom: 32px; }
.kachel figure, figure.kachel { margin: 0; }

/* Generator, Stufe 2 */
.gen-werkzeug { display: flex; flex-direction: column; gap: 18px; background: #fff; border: 1px solid var(--linie); border-radius: 22px; padding: clamp(18px, 3vw, 28px); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 18px 48px rgba(16,40,80,.08); }
.gen-tabs { display: flex; gap: 6px; background: var(--grund-2); padding: 4px; border-radius: 999px; }
.gen-tab { flex: 1; font: inherit; font-size: 0.92rem; min-height: 40px; border: 0; border-radius: 999px; background: transparent; color: var(--text-2); cursor: pointer; padding: 0 10px; }
.gen-tab[aria-selected="true"] { background: #fff; color: var(--text); font-weight: 500; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
[data-gen-feld][hidden] { display: none !important; }
.gen-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
.gen-reihe .feld--kurz { max-width: 110px; }
.gen-reihe:has(.feld--kurz) { grid-template-columns: 110px 1fr; }
@media (max-width: 560px) { .gen-reihe { grid-template-columns: 1fr; } .gen-reihe:has(.feld--kurz) { grid-template-columns: 90px 1fr; } }
.feld textarea { font: inherit; font-size: 1rem; padding: 12px 14px; border: 1px solid var(--linie-2); border-radius: 12px; resize: vertical; }
.gen-erkl { border: 1px solid var(--linie); border-radius: 14px; padding: 12px 16px; display: grid; gap: 12px; }
.gen-erkl[open] { padding-bottom: 16px; }
.gen-erkl summary { cursor: pointer; font-weight: 500; }
.gen-erkl summary small { color: var(--blau); font-weight: 500; margin-left: 6px; }
.gen-erkl > * + * { margin-top: 10px; }
.gen-los { width: 100%; }
.gen-weiter { background: var(--grund-blau); border-radius: 12px; padding: 12px 14px; font-size: 0.95rem; }
.gen-weiter[hidden] { display: none; }
.gen-csv { display: flex; flex-direction: column; gap: 14px; }
.gen-hinweis { font-size: 0.88rem; color: var(--text-3); }
#g-csv-tabelle td, #g-csv-tabelle th { padding: 8px 10px; font-size: 0.85rem; }
#g-csv-tabelle tr.ungueltig td { color: #b3261e; }
.gen-buehne { flex-direction: column; gap: 12px; }
.gen-buehne__hinweis { align-self: flex-start; font-size: 0.78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.gen-kaufstatus { background: var(--grund-blau); border-radius: 14px; padding: 14px 18px; margin-bottom: 16px; font-weight: 500; }
.gen-kaufstatus[hidden] { display: none; }
.abstand-klein { margin: 8px 0 10px; }
.preis-raster { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 900px) { .preis-raster { grid-template-columns: 1fr; } }
.preis-tabelle { background: #fff; margin-top: 0; }
.preis-tabelle td { font-size: 1.05rem; vertical-align: middle; }
.preis-tabelle tr.beliebt td { background: var(--grund-blau); font-weight: 600; }
.preis-box { background: #fff; border: 1px solid var(--linie); border-radius: 20px; padding: 26px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.preis-box h3 { font-size: 1.3rem; }
.gen { grid-template-columns: minmax(0, 500px) minmax(0, 1fr); }
.gen-reihe > * { min-width: 0; }
.feld select, .feld input { width: 100%; min-width: 0; }
.gen-tab { line-height: 1.2; }
@media (max-width: 860px) { .gen { grid-template-columns: 1fr; } }
.link-knopf { font: inherit; background: none; border: 0; padding: 0; color: var(--text-3); text-decoration: underline; cursor: pointer; font-size: 0.85rem; }
#g-meine-tabelle td { vertical-align: middle; font-size: 0.92rem; }
.gen-downloads { flex-direction: column; align-items: flex-start; gap: 10px; }
.gen-downloads:not([hidden]) { display: flex; }
.gen-dl { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; font-size: 0.92rem; }
.gen-dl[hidden] { display: none; }
.gen-dl span { min-width: 170px; color: var(--text-2); }
.gen-dl .link-knopf { font-size: 0.92rem; color: var(--blau); }
.gen-meine__raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.gen-label { background: #fff; border: 1px solid var(--linie); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.gen-label__vorschau { background: var(--grund-2); border-radius: 10px; aspect-ratio: 269 / 283; display: grid; place-items: center; overflow: hidden; }
.gen-label__vorschau img { width: 86%; height: auto; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 20px rgba(16,40,80,.1); }
.gen-label__vorschau img:not([src]) { visibility: hidden; }
.gen-label__info { display: flex; flex-direction: column; gap: 2px; }
.gen-label__info strong { font-weight: 600; font-size: 0.98rem; overflow-wrap: anywhere; }
.gen-label__info span { font-size: 0.82rem; color: var(--text-3); }
.gen-label__formate { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.gen-label__formate .link-knopf { font-size: 0.82rem; color: var(--blau); }
.beispiel-kopf { display: flex; flex-direction: column; gap: 10px; max-width: 760px; margin-bottom: 28px; }
.beispiel-kopf p { color: var(--text-2); font-size: 1.08rem; }
.beispiel-bilder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 0.45fr); gap: 18px; align-items: start; }
.beispiel-bilder figure { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.beispiel-bilder img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--linie); box-shadow: 0 10px 30px rgba(16,40,80,.08); }
.beispiel-handy img { border-radius: 22px; }
.beispiel-bilder figcaption { text-align: left; margin: 0; }
.beispiel-haken { text-align: left; }
@media (max-width: 900px) { .beispiel-bilder { grid-template-columns: 1fr 1fr; } .beispiel-handy { max-width: 260px; } }
@media (max-width: 560px) { .beispiel-bilder { grid-template-columns: 1fr; } }
.gen-turnstile:empty { display: none; }
.gen-turnstile { margin-top: 12px; }
.gen-ansicht { display: inline-flex; background: var(--grund-2); border-radius: 999px; padding: 3px; gap: 2px; }
.gen-ansicht__knopf { font: inherit; font-size: 0.88rem; border: 0; background: transparent; border-radius: 999px; padding: 7px 14px; cursor: pointer; color: var(--text-2); }
.gen-ansicht__knopf[aria-pressed="true"] { background: #fff; color: var(--text); font-weight: 500; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.gen-meine__raster[hidden] { display: none !important; }
.gen-meine__mini { width: 64px; }
.gen-meine__mini img { width: 52px; height: auto; display: block; border: 1px solid var(--linie); border-radius: 4px; background: #fff; }
.gen-meine__mini img:not([src]) { visibility: hidden; }
.gen-meine__aktion { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; min-width: 220px; }
.vz-suche { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; margin-bottom: 28px; }
.vz-suche .feld { flex: 1; min-width: 240px; max-width: 480px; }
.vz-suche .knopf { min-height: 48px; }
.vz-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.vz-name { font-size: 1.3rem; }
.vz-quelle { color: var(--text-2); margin-bottom: 22px; }
.gen-label__vz { font-size: 0.85rem; }

/* Widget-Seite */
.wd-demos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin: 1.6em 0; align-items: start; }
.wd-demos figure { margin: 0; display: flex; flex-direction: column; gap: 10px; padding: 18px; background: var(--grund-2); border-radius: var(--radius); min-width: 0; }
.wd-demos figcaption { font-size: 0.88rem; color: var(--text-2); }
.wd-baukasten { display: flex; flex-direction: column; gap: 14px; margin: 1.4em 0 2em; padding: 22px; border: 1px solid var(--linie); border-radius: var(--radius); }
.wd-code { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; min-width: 0; }
.wd-code pre { margin: 0; width: 100%; overflow-x: auto; background: #0f1b2d; color: #e6edf7; border-radius: 12px; padding: 14px 16px; font-size: 0.84rem; line-height: 1.5; box-sizing: border-box; }
.wd-code code { background: none; color: inherit; padding: 0; white-space: pre; }
.wd-vorschau { padding: 18px; background: var(--grund-2); border-radius: var(--radius); }
.wd-vorschau:empty { display: none; }

/* Shop-Check */
.sc-form { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; padding: 24px; margin: 0 0 2em; background: var(--grund-blau); border-radius: var(--radius); }
.sc-form .feld { width: 100%; }
.sc-ergebnis { margin: 0 0 2.4em; }
/* Shop-Check-Ergebnis: Fazit oben, dann Gruppen „Zu erledigen“, „Erledigt“, „Zur Info“. Zustand per Zeichen, Wortmarke und Farbe. */
.ce { --ce-ok: #157a46; --ce-ok-grund: #eef8f2; --ce-ok-linie: #b9e2c9; --ce-warn: #b4232a; --ce-warn-grund: #fff3f2; --ce-warn-linie: #f1c2bf; display: flex; flex-direction: column; gap: 18px; margin: 1em 0; }
.ce-fazit { display: flex; gap: 14px; align-items: center; padding: 16px 18px; border-radius: var(--radius); border: 1px solid; }
.ce-fazit div { display: flex; flex-direction: column; gap: 2px; }
.ce-fazit strong { font-size: 1.1rem; }
.ce-fazit span:not(.ce-fazit__zeichen) { font-size: 0.92rem; color: var(--text-2); }
.ce-fazit__zeichen { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; }
.ce-fazit--ok { background: var(--ce-ok-grund); border-color: var(--ce-ok-linie); }
.ce-fazit--ok strong { color: var(--ce-ok); }
.ce-fazit--ok .ce-fazit__zeichen { background: var(--ce-ok); }
.ce-fazit--warnung { background: var(--ce-warn-grund); border-color: var(--ce-warn-linie); }
.ce-fazit--warnung strong { color: var(--ce-warn); }
.ce-fazit--warnung .ce-fazit__zeichen { background: var(--ce-warn); }
.ce-gruppe__titel { margin: 0 0 8px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.ce-gruppe--warnung .ce-gruppe__titel { color: var(--ce-warn); }
.ce-gruppe--ok .ce-gruppe__titel { color: var(--ce-ok); }
.ce-liste { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ce .ce-liste { padding-left: 0; }
.ce .ce-liste li + li { margin-top: 0; }
.ce .ce-inhalt p { color: var(--text-2); }
.ce-punkt { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-klein); border: 1px solid var(--linie); background: var(--grund); }
.ce-punkt--warnung { background: var(--ce-warn-grund); border-color: var(--ce-warn-linie); border-left: 4px solid var(--ce-warn); }
.ce-punkt--ok { background: var(--ce-ok-grund); border-color: var(--ce-ok-linie); }
.ce-punkt--info { background: var(--grund-2); border-color: transparent; }
.ce-zeichen { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 0.8rem; font-weight: 800; color: #fff; }
.ce-punkt--warnung .ce-zeichen { background: var(--ce-warn); }
.ce-punkt--ok .ce-zeichen { background: var(--ce-ok); }
.ce-punkt--info .ce-zeichen { background: transparent; color: var(--text-3); border: 1.5px solid var(--text-3); }
.ce-inhalt { min-width: 0; }
.ce-kopf { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.ce-kopf strong { color: var(--text); font-weight: 600; }
.ce-punkt--info .ce-kopf strong { font-weight: 500; color: var(--text-2); }
.ce-marke { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; }
.ce-marke--warnung { background: var(--ce-warn); color: #fff; }
.ce-marke--ok { background: var(--ce-ok-linie); color: var(--ce-ok); }
.ce-marke--info { background: var(--linie); color: var(--text-3); }
.ce-inhalt p { margin: 4px 0 0; font-size: 0.92rem; color: var(--text-2); }
.ce-punkt--info .ce-inhalt p { font-size: 0.88rem; }
.sc-liste { list-style: none; padding: 0; margin: 1em 0; display: flex; flex-direction: column; gap: 10px; }
.sc-punkt { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--linie); border-radius: var(--radius); }
.sc-punkt p { margin: 4px 0 0; font-size: 0.95rem; color: var(--text-2); }
.sc-zeichen { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 0.9rem; color: #fff; }
.sc-punkt--ok .sc-zeichen { background: #1a7f4b; }
.sc-punkt--fehlt { border-color: #f0c36d; background: #fffbe0; }
.sc-punkt--fehlt .sc-zeichen { background: #c27a00; }
.sc-punkt--info .sc-zeichen { background: var(--text-3); }
.sc-weiter { display: flex; flex-wrap: wrap; gap: 10px; margin: 1.2em 0; }
.sc-titel { font-size: 1.3rem; margin: 0; }

/* Startseite: drei Angebotskarten mit gezeichneten Bildern (skalieren mit der Kartenbreite) */
a.angebot-karte { transition: transform .2s ease, box-shadow .2s ease; }
a.angebot-karte:hover { text-decoration: none; transform: translateY(-3px); box-shadow: 0 18px 40px rgba(16, 40, 90, .10); }
a.angebot-karte:focus-visible { outline: 3px solid var(--blau); outline-offset: 3px; }
.angebot-karte .knopf { margin-top: 6px; }
a.angebot-karte:hover .knopf--blau { background: linear-gradient(180deg, #3a82f5 0%, #1667e2 100%); }
.ak-bild { position: relative; aspect-ratio: 16 / 11; overflow: hidden; container-type: inline-size; display: flex; align-items: center; justify-content: center; background: radial-gradient(120% 90% at 50% 0%, #ffffff 0%, #e8f0fd 100%); }
.angebot-karte--hervor .ak-bild { background: radial-gradient(120% 90% at 50% 0%, #ffffff 0%, #d9e7fc 100%); }
/* 1: Gewährleistungslabel, drei Sprachen aufgefächert */
.ak-blatt { position: absolute; top: 11%; left: 50%; height: 74%; width: auto; transform: translateX(-50%); border-radius: 4px; box-shadow: 0 10px 30px rgba(16, 40, 90, .18); background: #fff; }
.ak-blatt--links { transform: translateX(-100%) rotate(-6deg); top: 14%; }
.ak-blatt--rechts { transform: translateX(0%) rotate(6deg); top: 14%; }
.ak-pille { position: absolute; left: 5cqi; bottom: 5cqi; background: var(--blau); color: #fff; font-size: max(11px, 3.4cqi); font-weight: 600; padding: 1.2cqi 3cqi; border-radius: 999px; box-shadow: 0 6px 16px rgba(10, 95, 220, .3); }
/* 2: GARAN-Generator, Eingabe → Label */
.ak-bild--garan { flex-direction: column; gap: 12px; padding: 0 8%; }
/* 3: Shopify-App, Produktkarte mit Badge */
.ak-produkt { display: grid; grid-template-columns: 34% 1fr; width: 90%; background: #fff; border-radius: 3cqi; overflow: hidden; box-shadow: 0 14px 34px rgba(16, 40, 90, .16); }
.ak-produkt > img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 4; }
.ak-produkt__text { display: flex; flex-direction: column; justify-content: center; gap: 2cqi; padding: 3.5cqi; min-width: 0; }
.ak-produkt__text > b { font-size: max(12px, 4cqi); line-height: 1.2; }
.ak-preis { font-size: max(11px, 3.4cqi); color: var(--text-2); }
.ak-kaufen { background: #111; color: #fff; text-align: center; border-radius: 1.6cqi; padding: 2cqi; font-size: max(11px, 3.2cqi); font-weight: 600; }
.ak-badge { display: flex; align-items: center; gap: 1.8cqi; border: 2px solid var(--blau); border-radius: 2cqi; padding: 1.8cqi 2cqi; box-shadow: 0 0 0 4px rgba(10, 95, 220, .14); }
.ak-badge img { width: max(16px, 5cqi); height: auto; flex: none; }
.ak-badge span { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.ak-badge b { font-size: max(10px, 2.9cqi); color: #1a4f9c; }
.ak-badge small { font-size: max(9px, 2.4cqi); color: var(--text-3); }
@media (prefers-reduced-motion: reduce) { a.angebot-karte, a.angebot-karte:hover { transition: none; transform: none; } }

/* Demo: Popup im Handy, Zeiger, Schrittliste mit Fortschritt */
.demo-overlay { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(10, 20, 40, .45); opacity: 0; transition: opacity .3s ease; }
.demo-overlay[hidden] { display: none; }
.demo-overlay.offen { opacity: 1; }
.demo-overlay__karte { position: relative; width: 88%; max-height: 94%; overflow: hidden; background: #fff; border-radius: 12px; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); transform: translateY(14px) scale(.94); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.demo-overlay.offen .demo-overlay__karte { transform: none; }
.demo-overlay__karte img { display: block; width: 100%; height: auto; }
.demo-overlay__karte img[hidden] { display: none; }
.demo-zu { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .6); color: #fff; font-size: 18px; line-height: 30px; cursor: pointer; }
.demo-zeiger { --x: 300px; --y: 640px; position: absolute; left: 0; top: 0; z-index: 3; width: 28px; height: 28px; border-radius: 50%; background: rgba(10, 95, 220, .22); border: 2px solid var(--blau); transform: translate(calc(var(--x) - 14px), calc(var(--y) - 14px)); opacity: 0; pointer-events: none; transition: transform .8s cubic-bezier(.45, 0, .2, 1), opacity .25s ease, box-shadow .2s ease, background .2s ease; }
.demo-zeiger.sichtbar { opacity: 1; }
.demo-zeiger.tippt { background: rgba(10, 95, 220, .55); box-shadow: 0 0 0 12px rgba(10, 95, 220, .16); }
.demo-schritte { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.demo-schritt { font: inherit; width: 100%; text-align: left; background: none; border: 0; border-radius: 16px; padding: 14px 18px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; color: var(--text-2); transition: background .2s ease, box-shadow .2s ease; }
.demo-schritt:hover { background: rgba(255, 255, 255, .6); }
.demo-schritt:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
.demo-schritt b { font-size: 1.12rem; font-weight: 600; letter-spacing: -0.01em; color: var(--text-3); }
.demo-schritt span { display: none; font-size: 0.95rem; color: var(--text-2); line-height: 1.45; }
.demo-schritt[aria-current="true"] { background: #fff; box-shadow: 0 8px 24px rgba(16, 40, 90, .08); }
.demo-schritt[aria-current="true"] b { color: var(--text); }
.demo-schritt[aria-current="true"] span { display: block; }
.demo-balken { display: none; height: 3px; margin-top: 8px; border-radius: 3px; background: var(--linie); overflow: hidden; }
.demo-schritt[aria-current="true"] .demo-balken { display: block; }
.demo-balken i { display: block; width: 0; height: 100%; background: var(--blau); }
.demo-schritt.laeuft .demo-balken i { animation: demo-fortschritt var(--dauer, 5.6s) linear forwards; }
@keyframes demo-fortschritt { to { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .demo-scroll, .demo-zeiger, .demo-overlay, .demo-overlay__karte { transition: none; } }
.demo-shop__nav { transition: background .4s ease, color .4s ease; }
.demo-shop.gescrollt .demo-shop__nav { background: #fff; color: #111; box-shadow: 0 1px 0 var(--linie); }
.demo-shop.gescrollt .demo-burger, .demo-shop.gescrollt .demo-burger::after { border-color: #111; }
.demo-shop.gescrollt .demo-shop__nav img { filter: invert(1); }
@media (max-width: 860px) { .demo-shop { height: 620px; } }
.demo-extras { list-style: none; margin: 10px 0 0; padding: 12px 0 0; border-top: 1px solid var(--linie); display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; color: rgba(40, 40, 40, .7); }
.demo-extras li::before { content: "✓"; color: #1a7f4b; margin-right: 8px; font-weight: 700; }

/* Startseite: Ratgeber-Teaser */
.ratgeber-teaser { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.rt-karte { display: flex; flex-direction: column; gap: 10px; padding: 24px; border: 1px solid var(--linie); border-radius: 20px; background: #fff; color: var(--text); text-decoration: none; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; min-width: 0; }
.rt-karte:hover { text-decoration: none; border-color: var(--blau); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(16, 40, 90, .08); }
.rt-karte:focus-visible { outline: 3px solid var(--blau); outline-offset: 3px; }
.rt-karte small { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blau); }
.rt-karte strong { font-size: 1.15rem; line-height: 1.3; letter-spacing: -0.015em; text-wrap: balance; }
.rt-karte > span:not(.rt-bild) { color: var(--text-2); font-size: 0.95rem; line-height: 1.5; flex: 1; }
.rt-karte em { font-style: normal; font-weight: 600; color: var(--blau); font-size: 0.95rem; }
@media (max-width: 1000px) { .ratgeber-teaser { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ratgeber-teaser { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .rt-karte, .rt-karte:hover { transition: none; transform: none; } }

/* Offizielles Shopify-App-Store-Badge: unverändert, nur skaliert */
.app-store-badge { display: inline-flex; line-height: 0; border-radius: 6px; }
.app-store-badge img { height: 46px; width: auto; display: block; } /* gleiche Höhe wie .knopf */ /* neben .knopf--klein */
.knoepfe .app-store-badge { transition: transform .2s ease; }
.knoepfe .app-store-badge:hover { transform: translateY(-1px); }
.app-store-badge:focus-visible { outline: 3px solid var(--blau); outline-offset: 3px; }

/* Ratgeber-Teaser: Themen-Grafiken mit dezenter Animation */
.rt-bild { flex: none; position: relative; display: flex; align-items: center; justify-content: center; height: 150px; margin: -24px -24px 8px; border-radius: 19px 19px 0 0; background: radial-gradient(120% 100% at 50% 0%, #ffffff 0%, #e8f0fd 100%); overflow: hidden; }
.rt-kal { position: relative; width: 92px; background: #fff; border-radius: 12px; box-shadow: 0 10px 26px rgba(16, 40, 90, .14); text-align: center; overflow: visible; }
.rt-kal__kopf { display: block; background: var(--blau); color: #fff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 0; border-radius: 12px 12px 0 0; }
.rt-kal__tag { display: block; font-size: 2.6rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1.25; padding-bottom: 4px; }
.rt-kal__haken { position: absolute; right: -12px; bottom: -10px; width: 32px; height: 32px; border-radius: 50%; background: #1a7f4b; color: #fff; font-weight: 700; display: grid; place-items: center; box-shadow: 0 6px 14px rgba(26, 127, 75, .35); animation: rt-plopp 6s ease-in-out infinite; }
@keyframes rt-plopp { 0%, 12% { transform: scale(0); } 20% { transform: scale(1.18); } 26%, 88% { transform: scale(1); } 96%, 100% { transform: scale(0); } }
.rt-liste { display: flex; flex-direction: column; gap: 6px; width: 72%; }
.rt-liste span { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 8px; padding: 5px 10px; font-size: 0.78rem; font-weight: 600; box-shadow: 0 4px 12px rgba(16, 40, 90, .08); opacity: 0; animation: rt-rein 6s ease-out infinite; }
.rt-liste span::before { flex: none; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font-size: 0.65rem; color: #fff; }
.rt-ja::before { content: "✓"; background: #1a7f4b; }
.rt-nein { color: var(--text-3); }
.rt-nein::before { content: "–"; background: #9aa6b8; }
.rt-liste span:nth-child(2) { animation-delay: .25s; }
.rt-liste span:nth-child(3) { animation-delay: .5s; }
.rt-liste span:nth-child(4) { animation-delay: .75s; }
@keyframes rt-rein { 0% { opacity: 0; transform: translateX(-10px); } 10%, 85% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }
.rt-seite { display: grid; grid-template-columns: 38% 1fr; gap: 8px; width: 74%; background: #fff; border-radius: 10px; padding: 8px; box-shadow: 0 10px 26px rgba(16, 40, 90, .14); }
.rt-seite__bild { border-radius: 6px; background: linear-gradient(160deg, #f3d9c4, #e9b8a0); min-height: 86px; }
.rt-seite__zeilen { display: flex; flex-direction: column; gap: 5px; justify-content: center; min-width: 0; }
.rt-seite__zeilen i { display: block; height: 6px; border-radius: 3px; background: #e6ebf2; }
.rt-seite__zeilen i:nth-child(2) { width: 70%; }
.rt-seite__zeilen b { display: block; height: 14px; border-radius: 3px; background: #222; margin-top: 2px; }
.rt-seite__badge { display: flex; align-items: center; gap: 4px; border: 1.5px solid var(--blau); border-radius: 5px; padding: 3px 4px; font-size: 0.55rem; font-weight: 700; color: #1a4f9c; white-space: nowrap; overflow: hidden; animation: rt-puls 2.4s ease-in-out infinite; }
.rt-seite__badge img { width: 10px; height: 10px; flex: none; }
@keyframes rt-puls { 0%, 100% { box-shadow: 0 0 0 0 rgba(10, 95, 220, .35); } 50% { box-shadow: 0 0 0 6px rgba(10, 95, 220, 0); } }
.rt-brief { position: relative; width: 104px; height: 120px; background: #fff; border-radius: 6px; box-shadow: 0 10px 26px rgba(16, 40, 90, .14); padding: 16px 14px; display: flex; flex-direction: column; gap: 8px; transform: rotate(-3deg); }
.rt-brief i { display: block; height: 6px; border-radius: 3px; background: #e6ebf2; }
.rt-brief i:nth-child(2) { width: 80%; } .rt-brief i:nth-child(4) { width: 60%; }
.rt-stempel { position: absolute; left: 50%; top: 58%; border: 2.5px solid #c62828; color: #c62828; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; background: rgba(255, 255, 255, .85); animation: rt-stempel 6s ease-in infinite; }
@keyframes rt-stempel { 0%, 20% { opacity: 0; transform: translate(-50%, -50%) rotate(-14deg) scale(2.2); } 28% { opacity: 1; transform: translate(-50%, -50%) rotate(-14deg) scale(.94); } 32%, 88% { opacity: 1; transform: translate(-50%, -50%) rotate(-14deg) scale(1); } 96%, 100% { opacity: 0; transform: translate(-50%, -50%) rotate(-14deg) scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .rt-kal__haken, .rt-liste span, .rt-seite__badge, .rt-stempel { animation: none; opacity: 1; }
  .rt-kal__haken { transform: none; }
  .rt-stempel { transform: translate(-50%, -50%) rotate(-14deg); }
}

/* Live in echten Shops: Spotlight auf den Hinweis im echten Screenshot */
.spot { --x: 50%; --y: 50%; --b: 20%; --h: 8%; position: relative; display: block; border-radius: 14px; overflow: hidden; }
.kachel--spot .spot img { border-radius: 0; transform-origin: calc(var(--x) + var(--b) / 2) calc(var(--y) + var(--h) / 2); transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.kachel--spot:hover .spot img { transform: scale(1.6); }
.spot__licht { position: absolute; left: var(--x); top: var(--y); width: var(--b); height: var(--h); border-radius: 8px; box-shadow: 0 0 0 3px var(--blau), 0 0 0 9999px rgba(10, 20, 40, .42); animation: spot-puls 2.6s ease-in-out infinite; transition: opacity .4s ease; pointer-events: none; }
.kachel--spot:hover .spot__licht { opacity: 0; }
@keyframes spot-puls { 0%, 100% { box-shadow: 0 0 0 3px var(--blau), 0 0 0 9999px rgba(10, 20, 40, .42); } 50% { box-shadow: 0 0 0 7px rgba(10, 95, 220, .55), 0 0 0 9999px rgba(10, 20, 40, .42); } }
.spot--fortis { --x: 69.4%; --y: 24.6%; --b: 25%; --h: 20.4%; }
.spot--hugo { --x: 56%; --y: 89%; --b: 40.8%; --h: 7.6%; }
.spot--ahoj { --x: 59.7%; --y: 54.4%; --b: 24%; --h: 8.4%; }
@media (prefers-reduced-motion: reduce) { .spot__licht { animation: none; } .kachel--spot:hover .spot img { transform: none; } .kachel--spot:hover .spot__licht { opacity: 1; } }

/* Abschnitts-Köpfe mit Augenbraue, Überschrift und Subline */
.abschnitt__kopf--gross { align-items: flex-end; margin-bottom: 36px; }
.abschnitt__kopf--gross > div { display: flex; flex-direction: column; gap: 10px; max-width: 720px; }
.abschnitt__kopf--gross small, .augenbraue { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blau); }
.abschnitt__kopf--gross h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); text-wrap: balance; }
.abschnitt__kopf--gross p { color: var(--text-2); font-size: 1.08rem; line-height: 1.5; max-width: 60ch; }
.abschnitt__kopf .mehr-link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 1px solid var(--linie-2); border-radius: 999px; background: #fff; color: var(--text); font-size: 0.92rem; font-weight: 500; transition: border-color .2s ease, gap .2s ease; }
.abschnitt__kopf .mehr-link:hover { border-color: var(--text); gap: 12px; color: var(--text); }
@media (max-width: 700px) { .abschnitt__kopf--gross { flex-direction: column; align-items: flex-start; } }
.zentriert h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); text-wrap: balance; }

/* FAQ auf der Startseite als Karten */

/* Amtliche Grafiken in Artikeln: auf hellgrauer Fläche, die Grafik selbst auf Weiß */
.inhalt figure:not(.mail-demo):has(img[src*="/grafiken/"]) { background: var(--grund-2); border-radius: 20px; padding: clamp(18px, 4vw, 40px) clamp(18px, 4vw, 40px) clamp(14px, 2.5vw, 24px); }
.inhalt figure:not(.mail-demo):has(img[src*="/grafiken/"]) img { background: #fff; border-radius: 6px; box-shadow: 0 14px 36px rgba(16, 40, 90, .12); max-width: min(560px, 100%) !important; margin: 0 auto; }
.inhalt figure:not(.mail-demo):has(img[src*="/grafiken/"]) figcaption { margin-top: 16px; }

/* Muster-Bestellbestätigung */
.mail-demo { margin: 2em 0 2.6em !important; background: var(--grund-2); border-radius: 22px; padding: clamp(14px, 3vw, 32px); }
.mail-demo > *:not(figcaption) { max-width: 600px; margin-inline: auto; }
.mail-demo__leiste { display: flex; align-items: center; gap: 14px; background: #e9edf3; border-radius: 14px 14px 0 0; padding: 10px 14px; font-size: 0.8rem; color: var(--text-3); }
.mail-demo__punkte { display: flex; gap: 6px; }
.mail-demo__punkte i { width: 10px; height: 10px; border-radius: 50%; background: #cfd6e0; }
.mail-demo__meta { background: #fff; padding: 16px 20px; border-bottom: 1px solid var(--linie); display: flex; flex-direction: column; gap: 10px; }
.mail-demo__absender { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; }
.mail-demo__absender div { display: flex; flex-direction: column; line-height: 1.3; }
.mail-demo__absender span:not(.mail-demo__avatar) { color: var(--text-3); font-size: 0.8rem; }
.mail-demo__avatar { width: 34px; height: 34px; border-radius: 50%; background: #111; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 0.85rem; flex: none; }
.mail-demo__meta strong { font-size: 1.05rem; letter-spacing: -0.01em; }
.mail-demo__brief { background: #fff; padding: clamp(18px, 4vw, 34px); display: flex; flex-direction: column; gap: 12px; }
.mail-demo__logo { font-weight: 800; letter-spacing: -0.03em; font-size: 1.3rem; text-align: center; padding-bottom: 12px; border-bottom: 1px solid var(--linie); }
.mail-demo__brief h3 { font-size: 1.35rem; margin: 6px 0 0; }
.mail-demo__brief p { color: var(--text-2); margin: 0; font-size: 0.95rem; }
.mail-demo__posten { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--linie); font-size: 0.9rem; }
.mail-demo .mail-demo__posten img, .mail-demo__geraet { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; background: linear-gradient(160deg, #dfe6ef, #c5cfdc); display: block; }
.mail-demo__posten div { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.mail-demo__posten div span { color: var(--text-3); font-size: 0.8rem; }
.mail-demo__summe { display: flex; justify-content: space-between; font-size: 0.95rem; padding: 4px 0 6px; }
.mail-demo__block { position: relative; border: 2px dashed rgba(10, 95, 220, .35); border-radius: 14px; padding: 22px 18px 16px; margin-top: 10px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.mail-demo__marke { position: absolute; top: -11px; left: 16px; background: var(--blau); color: #fff; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
.mail-demo__block h4 { font-size: 1rem; margin: 0; }
.mail-demo .mail-demo__block img { width: min(300px, 100%); height: auto; border: 1px solid var(--linie); border-radius: 4px; background: #fff; }
.mail-demo .mail-demo__block img.mail-demo__garan { width: min(220px, 80%); }
.mail-demo__link { color: var(--blau); text-decoration: underline; font-size: 0.88rem; }
.mail-demo__anhaenge { background: #fff; border-radius: 0 0 14px 14px; border-top: 1px solid var(--linie); padding: 14px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 0.8rem; color: var(--text-3); }
.mail-demo__datei { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--linie-2); border-radius: 10px; padding: 6px 10px; color: var(--text); }
.mail-demo__datei { font-size: 0.68rem; font-weight: 800; color: #c62828; }
.mail-demo__datei b { font-size: 0.8rem; font-weight: 500; color: var(--text); }
.mail-demo figcaption { text-align: center; margin-top: 16px; }

/* ===== Designsystem (Stand 03.10.2026): eine Kartenart, feste Typo-Skala, ruhige Knöpfe ===== */
/* Typo-Skala: alle Seiten- und Abschnittsüberschriften aus denselben zwei Größen */
.held h1, .seitenkopf h1 { font-size: var(--h1); letter-spacing: -0.03em; }
.abschnitt__kopf h2, .abschnitt__kopf--gross h2, .zentriert h2, .abschluss h2 { font-size: var(--h2); }
.inhalt h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); letter-spacing: -0.02em; }
.marke { font-weight: 650; letter-spacing: -0.02em; }

/* Knöpfe: kleiner Radius statt Pille, feine Kante und Lichtkante */
.knopf { border-radius: var(--r-klein); min-height: 44px; padding: 0 20px; font-weight: 550; letter-spacing: -0.005em; transition: background .15s ease, box-shadow .15s ease, transform .15s ease; }
.knopf--blau { background: linear-gradient(180deg, #2a76f2 0%, #0a5fdc 100%); border-color: #0853c4; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(10, 60, 160, .25); }
.knopf--blau:hover { background: linear-gradient(180deg, #3a82f5 0%, #1667e2 100%); }
.knopf--hell { background: #fff; border-color: var(--linie-2); box-shadow: 0 1px 2px rgba(16, 24, 40, .05); }
.knopf--klein { min-height: 36px; padding: 0 14px; border-radius: 9px; }
.nav a { border-radius: 8px; }
.nav__menu { border-radius: 10px; }

/* Hero: Lichtkante statt Grau, Belegzeile, Siegel als Link */
.held h1 span { color: transparent; background: linear-gradient(92deg, #0a5fdc 0%, #3d7cf0 55%, #79a3f7 100%); -webkit-background-clip: text; background-clip: text; }
.siegel { padding: 6px 12px 6px 10px; border: 1px solid var(--linie-2); border-radius: 999px; background: #fff; color: var(--text-2); text-decoration: none; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); transition: border-color .2s ease; }
a.siegel:hover { border-color: var(--text-3); color: var(--text); text-decoration: none; }
.siegel b { font-weight: 500; color: var(--text-3); }
.held__meta { font-size: 0.84rem !important; color: var(--text-2) !important; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; letter-spacing: -0.005em; }
.held__meta span { display: inline-flex; align-items: center; gap: 7px; }
.held__meta svg { width: 15px; height: 15px; color: var(--blau); opacity: .8; }
.held__meta span + span { padding-left: 14px; border-left: 1px solid var(--linie-2); }

/* Eine Kartenart: weiß, 1 px Rand, großer Radius außen, eingerückte Bildfläche innen */
.angebot-karte { background: #fff; border: 1px solid var(--linie); border-radius: var(--r-gross); padding: 8px; }
.angebot-karte--hervor { background: #fff; border-color: rgba(10, 95, 220, .35); box-shadow: 0 0 0 4px rgba(10, 95, 220, .06); }
.ak-bild { border-radius: var(--r-mittel); background: var(--flaeche); border: 1px solid #edf0f5; }
.angebot-karte--hervor .ak-bild { background: #eaf1fd; border-color: #dde8fb; }
.angebot-karte__text { padding: 18px 16px 18px; }
.angebot-karte__text small, .abschnitt__kopf--gross small, .augenbraue { font-size: 0.78rem; letter-spacing: 0.06em; }
.angebot-karte__text h2 { font-size: clamp(1.3rem, 1.9vw, 1.55rem); letter-spacing: -0.02em; }
a.angebot-karte:hover { transform: translateY(-2px); box-shadow: var(--schatten-weich); }
.angebot { background: #fff; border: 1px solid var(--linie); border-radius: var(--r-gross); padding: 10px 22px 10px 10px; }
.karte { background: #fff; border: 1px solid var(--linie); border-radius: var(--r-gross); }
.karte--link:hover { background: #fff; border-color: var(--linie-2); box-shadow: var(--schatten-weich); }
.preis-karte { border-radius: var(--r-gross); background: #fff; }
.toc, .hinweis, .kurzantwort { border-radius: var(--r-mittel); }
.kurzantwort { background: #f6f9fe; border: 1px solid #e1e9f7; }
.abschluss { background: linear-gradient(180deg, #fff 0%, var(--grund-2) 100%); }

/* Abschnitts-Köpfe: überall dasselbe Muster, zentriert — Icon und Label, Überschrift, Satz, Link */
.abschnitt__kopf--gross { flex-direction: column; align-items: center; text-align: center; gap: 18px; margin-bottom: 44px; }
.abschnitt__kopf--gross > div { align-items: center; max-width: 760px; }
.abschnitt__kopf--gross small, .augenbraue { display: inline-flex; align-items: center; gap: 8px; }
.abschnitt__kopf--gross small svg, .augenbraue svg { width: 22px; height: 22px; padding: 4px; border-radius: 7px; background: var(--blau-hell); color: var(--blau); flex: none; }
.abschnitt__kopf--gross p { margin-inline: auto; }
.abschnitt__kopf .mehr-link { padding: 0; border: 0; background: none; color: var(--blau); font-weight: 550; }
.abschnitt__kopf .mehr-link:hover { color: var(--blau); text-decoration: none; gap: 12px; }
.held .held__meta { max-width: none; }
.angebot-karte__text p { font-size: 0.98rem; line-height: 1.55; }
.abschnitt__kopf--gross > div { max-width: 900px; }
.abschluss h2 { max-width: 26ch; }

/* Logoleiste unter dem Hero: einheitlich grau, wie eine ruhige Zeile */
.logoleiste { padding: clamp(28px, 4vw, 48px) 0 clamp(8px, 2vw, 16px); }
.logoleiste p { text-align: center; font-size: 0.84rem; color: var(--text-3); margin-bottom: 22px; }
.logoleiste ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 22px clamp(28px, 5vw, 64px); }
.logoleiste img { display: block; height: 30px; width: auto; transition: opacity .2s ease, filter .2s ease; }
.logo--silhouette { filter: brightness(0); opacity: .42; }
.logo--grau { filter: grayscale(1) contrast(1.1); opacity: .55; }
.logo--hugo { height: 64px !important; margin: -17px 0; }
.logo--ahoj { height: 46px !important; }
.logo--wick { height: 50px !important; margin: -8px 0; }
.logoleiste li:hover img { opacity: .8; }

/* Menü mit Untermenüs (nur CSS: Hover und Tastatur über :focus-within) */
.nav__gruppe { position: relative; }
.nav a { display: inline-flex; align-items: center; gap: 5px; }
.nav__pfeil { opacity: .55; transition: transform .2s ease; }
.nav__unter { position: absolute; top: calc(100% + 6px); left: -8px; min-width: 250px; padding: 6px; background: #fff; border: 1px solid var(--linie); border-radius: var(--r-mittel); box-shadow: 0 12px 32px rgba(16, 24, 40, .1); display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s ease, transform .15s ease, visibility .15s; z-index: 60; }
.nav__unter::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.nav__unter a { padding: 9px 12px; border-radius: 8px; font-size: 0.9rem; color: var(--text); }
.nav__unter a:hover, .nav__unter a[aria-current="page"] { background: var(--grund-2); }
.nav__gruppe:hover .nav__unter, .nav__gruppe:focus-within .nav__unter { opacity: 1; visibility: visible; transform: none; }
.nav__gruppe:hover .nav__pfeil, .nav__gruppe:focus-within .nav__pfeil { transform: rotate(180deg); }
@media (max-width: 1080px) {
  .nav__gruppe { display: flex; flex-direction: column; }
  .nav__unter { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 8px 12px; min-width: 0; }
  .nav__unter a { font-size: 0.95rem; color: var(--text-2); padding: 8px; }
  .nav__pfeil { display: none; }
}
.knopf__icon { flex: none; margin-left: -2px; }
.knopf--hell .knopf__icon { color: var(--blau); }

/* Aktionsleiste ganz oben */
.aktionsleiste { background: linear-gradient(90deg, #0a4fc4 0%, #0a5fdc 50%, #2a76f2 100%); color: #fff; font-size: 0.86rem; }
.aktionsleiste__innen { display: flex; align-items: center; justify-content: center; gap: 8px 16px; flex-wrap: wrap; min-height: 40px; padding: 6px 0; text-align: center; }
.aktionsleiste b { font-weight: 650; }
.aktionsleiste a { color: #fff; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .16); transition: background .2s ease, gap .2s ease; }
.aktionsleiste a:hover { background: rgba(255, 255, 255, .26); gap: 9px; }

/* Anmelden in der Kopfzeile */
@media (max-width: 1180px) { .kopf__app { display: none; } }
.knopf__icon--eu { border-radius: 4px; }

/* Anmelde-Dialog des Generators */

/* Mengenrabatt */
.rabatt { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; background: #fdecea; color: #c4271c; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rabatt--leer { background: var(--grund-2); color: var(--text-3); font-weight: 600; }
.preis-karte .rabatt { align-self: flex-start; }

/* Demo: zwei Knöpfe statt Hinweistext, Popup sauber eingefasst */
.demo-ctas { margin-top: 10px; padding-left: 18px; }
.demo-overlay__karte { padding: 10px; border-radius: 14px; overflow: visible; }
.demo-overlay__karte img { border-radius: 6px; max-height: calc(100% - 0px); }
.demo-zu { top: -12px; right: -12px; width: 32px; height: 32px; line-height: 32px; background: #fff; color: var(--text); box-shadow: 0 4px 12px rgba(11, 15, 25, .2); font-size: 18px; }

/* Anmelden in der blauen Leiste */
.aktionsleiste__innen { position: relative; }
.aktionsleiste a.aktionsleiste__login { position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: none; padding: 4px 6px; gap: 6px; font-weight: 500; opacity: .92; }
.aktionsleiste a.aktionsleiste__login:hover { opacity: 1; background: rgba(255, 255, 255, .14); gap: 6px; }
@media (max-width: 900px) { .aktionsleiste a.aktionsleiste__login { position: static; transform: none; } .aktionsleiste a.aktionsleiste__login span { display: none; } }

/* Untermenü mit Icons und Kurzbeschreibung */
.nav__unter { min-width: 300px; padding: 8px; }
.nav__unter a { display: flex; align-items: flex-start; gap: 12px; padding: 10px; }
.nav__ico { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--blau-hell); color: var(--blau); }
.nav__txt { display: flex; flex-direction: column; line-height: 1.3; }
.nav__txt b { font-weight: 550; font-size: 0.9rem; color: var(--text); }
.nav__txt small { font-size: 0.8rem; color: var(--text-3); margin-top: 2px; }
.nav__unter a:hover .nav__ico { background: var(--blau); color: #fff; }
@media (max-width: 1080px) { .nav__ico { width: 28px; height: 28px; } .nav__txt small { display: none; } }

/* Generator-Karte: beide Fassungen des GARAN-Labels */

/* Shop-Kacheln: Quellenangabe, typealive-Spotlight */
.kachel__quelle { font-size: 0.8rem; color: var(--text-3); margin-top: -6px; }
.kachel__quelle a { color: var(--text-3); }
.kachel__quelle a:hover { color: var(--text); }

/* Untermenü: Spalten Wissen | Lösungen */
.nav__unter { flex-direction: row; gap: 4px; min-width: 0; }
.nav__spalte { display: flex; flex-direction: column; min-width: 270px; }
.nav__spalte + .nav__spalte { border-left: 1px solid var(--linie); padding-left: 4px; }
.nav__titel { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); padding: 8px 10px 4px; }
@media (max-width: 1080px) { .nav__unter { flex-direction: column; } .nav__spalte + .nav__spalte { border-left: 0; padding-left: 0; } .nav__spalte { min-width: 0; } }

/* FAQ auf der Startseite: Antworten direkt sichtbar */
.faq-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.faq-karte { background: #fff; border: 1px solid var(--linie); border-radius: var(--r-gross); padding: 24px; display: flex; flex-direction: column; gap: 10px; color: var(--text-2); font-size: 0.95rem; line-height: 1.55; }
.faq-karte h3 { font-size: 1.08rem; color: var(--text); letter-spacing: -0.01em; display: flex; gap: 10px; align-items: flex-start; }
.faq-karte h3::before { display: none; content: ""; flex: none; width: 24px; height: 24px; border-radius: 7px; background: var(--blau-hell); color: var(--blau); font-size: 0.8rem; font-weight: 700; display: grid; place-items: center; margin-top: 1px; }
.faq-karte p { margin: 0; }
.faq-karte--mehr { background: var(--blau); border-color: var(--blau); color: rgba(255, 255, 255, .85); text-decoration: none; justify-content: space-between; }
.faq-karte--mehr b { color: #fff; font-size: 1.2rem; font-weight: 600; letter-spacing: -0.02em; }
.faq-karte--mehr em { font-style: normal; color: #fff; font-weight: 600; }
.faq-karte--mehr:hover { text-decoration: none; background: #0852c0; }
@media (max-width: 1000px) { .faq-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .faq-raster { grid-template-columns: 1fr; } }

/* Überschriften auf Unterseiten etwas breiter */
@media (min-width: 900px) { .seitenkopf h1 { max-width: 82%; } }

/* Menü: noch nicht verfügbare Einträge */
.nav__bald { display: flex; align-items: flex-start; gap: 12px; padding: 10px; border-radius: 8px; cursor: default; opacity: .6; }
.nav__badge { font-style: normal; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--blau); background: var(--blau-hell); padding: 2px 6px; border-radius: 999px; margin-left: 4px; vertical-align: 2px; }

/* Quellenangaben unter fremden Screenshots */
.titelbild .kachel__quelle { display: block; text-align: center; margin-top: 10px; }
figcaption .kachel__quelle { display: inline-block; margin-top: 4px; }
.spot--herz { --x: 66.3%; --y: 26%; --b: 26.6%; --h: 59.6%; }

/* Infobox im Artikel: schlicht, ohne Bild und Badge */
.angebot--schlicht { grid-template-columns: 1fr; padding: 26px 28px; background: linear-gradient(135deg, #fff 0%, var(--grund-blau) 100%); border-color: #dce7fa; }
.angebot__marke { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blau); }
.angebot__marke svg { width: 16px; height: 16px; }
.angebot--schlicht .angebot__marke svg { color: var(--blau); }
.angebot--schlicht strong { font-size: 1.3rem; }

/* Muster-Mail: Download-Knöpfe und Garantieerklärung wie im Baustein */
.mail-demo__knopf { display: inline-flex; align-items: center; justify-content: center; background: #1f2937; color: #fff; font-size: 0.84rem; font-weight: 600; padding: 9px 16px; border-radius: 6px; }
.mail-demo__klein { font-size: 0.8rem !important; color: var(--text-3) !important; margin: 0; max-width: 46ch; }
.mail-demo__erkl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; text-align: left; font-size: 0.82rem; margin: 6px 0 0; width: 100%; border-top: 1px solid var(--linie); padding-top: 12px; }
.mail-demo__erkl dt { color: var(--text-3); }
.mail-demo__erkl dd { margin: 0; color: var(--text); }

/* GARAN-Seite: zwei Grafiken nebeneinander sauber in ihren Flächen */
.raster-2 figure:has(img[src*="/grafiken/"]) img { max-width: 100%; width: 100%; height: auto; }
.raster-2 figure:has(img[src*="/grafiken/"]) { min-width: 0; display: flex; flex-direction: column; justify-content: center; }

/* Tabelle mit Ergebnis-Markierungen */
.ergebnis { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; font-size: 0.82rem; font-weight: 650; white-space: nowrap; }
.ergebnis::before { font-weight: 800; }
.ergebnis--ja { background: #e7f6ee; color: #137a45; }
.ergebnis--ja::before { content: "✓"; }
.ergebnis--nein { background: #fdecea; color: #c4271c; }
.ergebnis--nein::before { content: "✕"; }
.ergebnis--offen { background: var(--grund-2); color: var(--text-2); }
.ergebnis--offen::before { content: "–"; }
.ergebnis__grund { color: var(--text-2); font-size: 0.92rem; }
.tabelle--ergebnis td { vertical-align: middle; }
.tabelle--ergebnis tr:nth-child(even) td { background: #fafbfd; }

/* Hinweiskasten mit Symbol */
.hinweis { position: relative; padding-left: 58px; }
.hinweis::before { content: "i"; position: absolute; left: 20px; top: 18px; width: 24px; height: 24px; border-radius: 50%; background: var(--text-3); color: #fff; font-weight: 700; font-size: 0.82rem; display: grid; place-items: center; font-style: italic; font-family: Georgia, serif; }
.hinweis--rechtlich::before { content: "!"; background: #c99a06; font-style: normal; font-family: inherit; }

/* Bestellbestätigung: Schritte neben echtem App-Screen */
.schritte-mit-bild { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin: 1.6em 0; }
.schritte-bild { margin: 0 !important; }
.schritte-bild img { border: 1px solid var(--linie); border-radius: var(--r-mittel) !important; }
.gen-vorteile { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.88rem; color: var(--text-2); }
.gen-vorteile li { display: inline-flex; align-items: center; gap: 6px; }
.gen-vorteile li::before { content: "✓"; width: 18px; height: 18px; border-radius: 50%; background: #e7f6ee; color: #137a45; font-size: 0.7rem; font-weight: 800; display: grid; place-items: center; }
.gen-vorteile__preis { font-size: 0.84rem; color: var(--text-3); margin: 0; }
.gen-status:empty { display: none; }

/* Anmelde-Dialog: Feld und Knopf gleich hoch */

/* Kaufbox: Paket links wählen, rechts kaufen */
.paket-zeile { cursor: pointer; transition: background .15s ease; }
.paket-zeile:hover td { background: #f7f9fd; }
.paket-zeile.gewaehlt td { background: var(--grund-blau); }
.paket-wahl { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; }
.paket-wahl input { accent-color: var(--blau); width: 16px; height: 16px; margin: 0; }
.preis-box--wahl { display: flex; flex-direction: column; gap: 14px; background: #fff; border: 1px solid var(--linie); border-radius: var(--r-gross); padding: 26px; box-shadow: var(--schatten-weich); position: sticky; top: 96px; }
.wahl-knopf { width: 100%; min-height: 50px; font-size: 1rem; }
.zahllogos { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; width: 100%; align-self: stretch; }

/* CSV: Muster als Hauptelement, Filter, Seiten, Fortschritt */
.csv-muster { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1.5px dashed #b9cff5; border-radius: var(--r-mittel); background: var(--grund-blau); color: var(--text); text-decoration: none; transition: border-color .2s ease, background .2s ease; }
.csv-muster:hover { border-color: var(--blau); background: #e6effd; text-decoration: none; }
.csv-muster__ico { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--blau); color: #fff; display: grid; place-items: center; }
.csv-muster > span:nth-child(2) { display: flex; flex-direction: column; flex: 1; line-height: 1.35; }
.csv-muster b { font-weight: 600; }
.csv-muster small { color: var(--text-2); font-size: 0.84rem; }
.csv-muster__pfeil { font-size: 1.2rem; color: var(--blau); font-weight: 700; }
.csv-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.csv-filter button { font: inherit; font-size: 0.86rem; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--linie-2); background: #fff; color: var(--text-2); cursor: pointer; }
.csv-filter button b { font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; }
.csv-filter button[aria-pressed="true"] { border-color: var(--text); color: var(--text); background: var(--grund-2); }
.punkt { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.punkt--ok { background: #1a9d5a; }
.punkt--fehler { background: #d92d20; }
.csv-grund { display: block; margin-top: 4px; font-size: 0.78rem; color: #b42318; line-height: 1.35; }
.csv-seiten { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 0.86rem; color: var(--text-2); }
.csv-fortschritt { --anteil: 0%; height: 8px; border-radius: 999px; background: var(--linie); overflow: hidden; }
.csv-fortschritt i { display: block; height: 100%; width: var(--anteil); background: linear-gradient(90deg, #0a5fdc, #3d7cf0); transition: width .3s ease; }

/* Knöpfe in einer Reihe immer gleich breit (am Handy untereinander) */
.demo-ctas { padding-left: 0; }

/* Menü: Spalte mit Shopsystem-Logos kompakt */
.nav__spalte:has(.nav__ico--logo) a:has(.nav__ico--logo) { padding: 7px 10px; align-items: center; }
.nav__ico--logo { background: #fff; border: 1px solid var(--linie); }
.nav__unter a:hover .nav__ico--logo { background: #fff; }
.systemlogo { display: block; flex: none; }
.systemlogo--text { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.02em; color: #1f2a44; }

/* Widget-Übersicht: Kacheln je Shopsystem */
.system-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin: 1.2em 0 2em; }
.system-karte { display: flex; align-items: center; gap: 14px; padding: 16px; background: #fff; border: 1px solid var(--linie); border-radius: var(--r-mittel); color: var(--text); text-decoration: none; transition: border-color .2s ease, box-shadow .2s ease; }
.system-karte:hover { border-color: var(--linie-2); box-shadow: var(--schatten-weich); text-decoration: none; }
.system-karte span { display: flex; flex-direction: column; line-height: 1.3; }
.system-karte b { font-weight: 600; }
.system-karte small { color: var(--text-3); font-size: 0.82rem; }
.system-karte .systemlogo--text { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: var(--grund-2); }
.h1-logo { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; background: #fff; border: 1px solid var(--linie); box-shadow: var(--schatten-weich); vertical-align: middle; margin-right: 18px; }
.h1-logo .systemlogo--text { font-size: 1rem; }
@media (max-width: 700px) { .h1-logo { display: grid; margin: 0 auto 14px; } }

/* Tabellen überall: ruhige Kopfzeile, Zebrastreifen, Hover, erste Spalte betont */
.tabelle { border-radius: var(--r-mittel); border-color: var(--linie); background: #fff; }
.tabelle th { background: var(--grund-2); font-size: 0.74rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); padding: 12px 16px; }
.tabelle td { padding: 14px 16px; vertical-align: middle; }
.tabelle tbody tr:nth-child(even) td { background: #fafbfd; }
.tabelle tbody tr:hover td { background: #f3f7fe; }
.tabelle td:first-child { font-weight: 500; color: var(--text); }
.tabelle td code { font-size: 0.86em; }
.nav__ico--logo svg { width: 22px; height: 22px; }

/* Kaufbox mit Leistungen */
.leistungen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.leistungen li { display: grid; grid-template-columns: 24px 1fr; column-gap: 12px; }
.leistungen li::before { content: "✓"; grid-row: span 2; width: 24px; height: 24px; border-radius: 50%; background: #e7f6ee; color: #137a45; font-weight: 800; font-size: 0.78rem; display: grid; place-items: center; margin-top: 1px; }
.leistungen b { font-weight: 600; font-size: 0.98rem; }
.leistungen span { color: var(--text-2); font-size: 0.88rem; line-height: 1.45; }
.preis-box--wahl .haken-feld { padding-top: 14px; border-top: 1px solid var(--linie); }
.haken-feld > span { flex: 1; }
.zahllogo-bild { display: block; width: 46px; height: auto; border-radius: 4px; }
.preis-klein { font-size: 0.78rem; color: var(--text-3); margin: 0; text-align: center; line-height: 1.45; }
/* Begründung unter der Ja/Nein-Markierung statt daneben */
.ergebnis__grund { display: block; margin-top: 6px; font-size: 0.84rem; line-height: 1.4; color: var(--text-3); }

/* Demo: zwei gleich breite Knöpfe auf Spaltenbreite */
.demo-ctas.knoepfe { display: grid !important; grid-template-columns: 1fr 1fr; grid-auto-flow: row !important; width: 100%; max-width: 520px; }
@media (max-width: 560px) { .demo-ctas.knoepfe { grid-template-columns: 1fr; } }

/* Generator-Karte: vollständiges Label groß, geschachtelte Fassung überlappend davor */
.ak-bild--garan { gap: 10px; }
.ak-bild--garan { padding: 5% 8% 4%; justify-content: center; gap: 8px; }
.ak-bild--garan { gap: 3.5cqi; padding: 0 9%; }
.h1-logo { display: grid; width: 80px; height: 80px; border-radius: 20px; margin: 0 auto 18px; }
.nav__ico--logo svg.systemlogo--breit { width: 28px; height: auto; }
.system-karte > svg.systemlogo { width: 46px; }
.system-karte > .systemlogo--text { margin: 0 8px; }
/* Handy: Logo, „App testen“ und Menü passen nebeneinander, ohne dass die Seite seitlich herausragt. */
@media (max-width: 480px) {
  .kopf__innen { gap: 10px; }
  .marke { font-size: 0.8rem; gap: 8px; }
  .kopf__rechts { gap: 6px; }
  .kopf__rechts .knopf { padding-inline: 12px; }
}
@media (max-width: 370px) { .marke span, .marke b { display: none; } }
/* Sehr schmale Handys (320 px): Raster dürfen schrumpfen statt die Seite zu verbreitern. */
@media (max-width: 900px) { .preis-raster { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) { .fuss__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; } }
@media (max-width: 360px) { .fuss__raster { grid-template-columns: minmax(0, 1fr); } }
/* Lange Code-Wörter (Hook-Namen, Funktionsaufrufe) brechen auf dem Handy um, statt die Seite zu verbreitern. */
:not(pre) > code { overflow-wrap: anywhere; }
.schritte, .schritte li, .schritte li > * { min-width: 0; }
/* FAQ-Kacheln: je Frage ein eigenes Symbol, blaue Kachel mit klarer Reihenfolge statt Lücke in der Mitte */
.faq-karte { padding: 26px; gap: 12px; transition: border-color .2s ease, box-shadow .2s ease; }
.faq-karte:hover { border-color: var(--linie-2); box-shadow: var(--schatten-weich); }
.faq-karte h3 { display: block; font-size: 1.1rem; line-height: 1.35; }
.faq-karte h3::before { content: none; }
.faq-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--blau-hell); color: var(--blau); margin-bottom: 4px; flex: none; }
.faq-karte--mehr { justify-content: flex-start; background: linear-gradient(160deg, #1d6ff2 0%, #0b4fc4 100%); }
.faq-karte--mehr .faq-ico--hell { background: rgba(255, 255, 255, .16); color: #fff; }
.faq-karte--mehr b { font-size: 1.3rem; }
.faq-karte--mehr > span:not(.faq-ico) { font-size: 1rem; line-height: 1.5; }
.faq-mehr-knopf { margin-top: auto; align-self: flex-start; background: #fff; color: var(--blau) !important; padding: 10px 18px; border-radius: 999px; font-size: 0.95rem; }
.faq-karte--mehr:hover .faq-mehr-knopf { background: #eef4ff; }
/* Demo-Schritte mit Symbol: Symbol links, Titel, Erklärung und Fortschritt rechts */
.demo-schritt { flex-direction: row; align-items: flex-start; gap: 14px; }
.demo-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .7); color: var(--text-3); border: 1px solid var(--linie); font-style: normal; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.demo-schritt .demo-text { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; padding-top: 8px; }
.demo-schritt[aria-current="true"] .demo-text { padding-top: 0; }
.demo-schritt[aria-current="true"] .demo-text b { padding-top: 9px; }
.demo-schritt[aria-current="true"] .demo-ico { background: var(--blau); border-color: var(--blau); color: #fff; }
.demo-schritt:hover .demo-ico { color: var(--blau); }
.demo-schritt[aria-current="true"]:hover .demo-ico { color: #fff; }
.demo-schritt[aria-current="true"] .demo-text { display: flex; }
/* GARAN-Karte: Mini-Generator wie die Produktkarte der Shopify-Kachel, links Eingaben, rechts das fertige Label */
.ak-bild--garan { padding: 0; gap: 0; justify-content: center; }
.ak-gen { display: grid; grid-template-columns: 44% 1fr; width: 90%; background: #fff; border-radius: 3cqi; overflow: hidden; box-shadow: 0 14px 34px rgba(16, 40, 90, .16); margin-bottom: 4cqi; }
.ak-gen__form { display: flex; flex-direction: column; gap: 1.8cqi; padding: 4cqi 3.5cqi; min-width: 0; }
.ak-gen__form > b { font-size: max(11px, 3.6cqi); font-weight: 600; color: var(--text); margin-bottom: 0.6cqi; }
.ak-gen__feld { display: flex; flex-direction: column; border: 1px solid var(--linie); border-radius: 1.6cqi; padding: 1.1cqi 2cqi; font-size: max(11px, 3.2cqi); font-weight: 600; color: var(--text); line-height: 1.25; }
.ak-gen__feld small { font-size: max(9px, 2.3cqi); font-weight: 500; color: var(--text-3); }
.ak-gen__los { margin-top: 0.8cqi; background: var(--blau); color: #fff; border-radius: 1.6cqi; padding: 1.8cqi; text-align: center; font-size: max(11px, 3.1cqi); font-weight: 600; }
.ak-gen__vorschau { background: #f3f6fb; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.4cqi; padding: 3.5cqi; border-left: 1px solid #edf0f5; }
.ak-gen__vorschau img { width: 100%; height: auto; border-radius: 1cqi; box-shadow: 0 4px 14px rgba(16, 40, 90, .12); background: #fff; }
.ak-bild--garan .ak-pille { left: 5cqi; bottom: 3.5cqi; }
.ak-gen { grid-template-columns: 46% 1fr; margin-bottom: 0; width: 88%; }
.ak-gen__form { gap: 1.6cqi; padding: 3.6cqi 3.2cqi; justify-content: center; }
.ak-gen__feld { padding: 0.9cqi 2cqi; }
.ak-gen__los { margin-top: 0.6cqi; padding: 1.5cqi; }
.ak-gen__vorschau { padding: 3.6cqi 4.5cqi; }
.ak-bild--garan .ak-pille { left: auto; right: 4cqi; bottom: 3.5cqi; }
/* Untermenüs öffnen direkt unter ihrem Menüpunkt; Spalten sind gleich breit */
@media (min-width: 1081px) {
  .nav__gruppe { position: relative; }
  .nav__unter { left: -8px; right: auto; transform: translateY(-4px); display: grid; grid-auto-flow: column; grid-auto-columns: 290px; max-width: calc(100vw - 32px); }
  .nav__gruppe:hover .nav__unter, .nav__gruppe:focus-within .nav__unter { transform: none; }
  .nav__gruppe:last-child .nav__unter { left: auto; right: -8px; }
  .nav__spalte { min-width: 0; }
  .nav__unter:has(.nav__ico--logo) { grid-auto-columns: 275px; }
}
@media (max-width: 1080px) { .nav__titel--leer { display: none; } }
@media (max-width: 480px) { .kopf__lang { display: none; } }
/* Garantieerklärung in der Muster-Mail: lange Adressen brechen um, auf dem Handy untereinander */
.mail-demo__erkl { grid-template-columns: max-content minmax(0, 1fr); }
.mail-demo__erkl dd { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { .mail-demo__erkl { grid-template-columns: minmax(0, 1fr); gap: 2px; } .mail-demo__erkl dd + dt { margin-top: 8px; } }
/* Demo ohne eingesetzte Box: Handy steht frei auf einem weichen Lichtschein, Schritte direkt daneben */
.demo-buehne { position: relative; background: none; border-radius: 0; padding: 12px 0; isolation: isolate; }
.demo-buehne::before { content: ""; position: absolute; z-index: -1; left: 190px; top: 50%; width: 640px; height: 640px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(29, 111, 242, .2), rgba(29, 111, 242, .07) 55%, rgba(29, 111, 242, 0)); pointer-events: none; }
.demo-buehne::after { content: ""; position: absolute; z-index: -1; left: 190px; top: 50%; width: 520px; height: 520px; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid rgba(29, 111, 242, .12); box-shadow: 0 0 0 70px rgba(29, 111, 242, .03), 0 0 0 71px rgba(29, 111, 242, .08); pointer-events: none; }
.demo-shop { box-shadow: 0 0 0 6px #fff, 0 2px 6px 6px rgba(0, 0, 0, .04), 0 30px 70px rgba(16, 40, 90, .22); }
.demo-schritt:hover { background: rgba(29, 111, 242, .05); }
@media (max-width: 860px) { .demo-buehne::before, .demo-buehne::after { left: 50%; top: 340px; } }
/* Lichtschein der Demo darf die Seite nicht verbreitern */
.demo { overflow-x: clip; overflow-y: visible; padding-block: 8px; }
@media (max-width: 860px) { .demo-buehne::before { width: 120vw; height: 120vw; } .demo-buehne::after { width: 96vw; height: 96vw; } }
/* Handy-Kopf: Logo, „Label erstellen“ und Menü in einer Zeile */
@media (max-width: 430px) { .kopf__gen .knopf__icon { display: none; } .kopf__rechts .knopf { padding-inline: 11px; } .marke { font-size: 0.74rem; } .marke img { width: 46px; height: 46px; } }
@media (max-width: 374px) { .marke span { display: none; } }
@media (max-width: 600px) { .held__meta { gap: 8px 16px; } .held__meta span + span { padding-left: 0; border-left: 0; } }
/* Demo-Hintergrund ohne harte Formen: Punktraster, das weich ausläuft, und ein Lichtschein, der innerhalb der Fläche endet */
.demo-buehne::before { left: 0; top: -40px; right: 0; bottom: -40px; width: auto; height: auto; transform: none; border-radius: 0; background-image: radial-gradient(rgba(29, 111, 242, .28) 1.2px, transparent 1.6px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(ellipse 46% 52% at 190px 50%, #000 0%, rgba(0, 0, 0, .5) 45%, transparent 100%); mask-image: radial-gradient(ellipse 460px 420px at 190px 50%, #000 0%, rgba(0, 0, 0, .45) 50%, transparent 100%); }
.demo-buehne::after { left: 190px; top: 50%; width: 440px; height: 440px; border: 0; box-shadow: none; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(29, 111, 242, .16), rgba(29, 111, 242, 0)); }
@media (max-width: 860px) {
  .demo-buehne::before { -webkit-mask-image: radial-gradient(ellipse 60% 340px at 50% 360px, #000 0%, transparent 100%); mask-image: radial-gradient(ellipse 60% 340px at 50% 360px, #000 0%, transparent 100%); }
  .demo-buehne::after { left: 50%; top: 360px; width: 86vw; height: 86vw; }
}
/* Kontaktformular */
.kontakt-form { display: flex; flex-direction: column; gap: 16px; padding: 28px; background: #fff; border: 1px solid var(--linie); border-radius: var(--r-gross); box-shadow: var(--schatten-weich); margin-bottom: 18px; }
.kontakt-form .feld { width: 100%; }
.kontakt-form textarea { width: 100%; box-sizing: border-box; min-height: 160px; }
.kontakt-form textarea:focus { outline: 2px solid var(--blau); outline-offset: 1px; border-color: transparent; }
.kontakt-reihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 600px) { .kontakt-reihe { grid-template-columns: minmax(0, 1fr); } .kontakt-form { padding: 20px; } }
.kontakt-falle { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.kontakt-hinweis { font-size: 0.86rem; color: var(--text-3); margin: 0; }
.kontakt-form .knopf { align-self: flex-start; }
.kontakt-danke { padding: 28px; background: #eefaf2; border: 1px solid #c7ecd4; border-radius: var(--r-gross); margin-bottom: 18px; outline: none; }
.kontakt-danke strong { display: block; font-size: 1.15rem; color: #11683a; margin-bottom: 6px; }
.kontakt-danke p { margin: 0; color: var(--text-2); }
/* Augenbraue der Angebotskarten mit Symbol (EU, Shopify, Schild) */
.ak-zeile { display: inline-flex; align-items: center; gap: 8px; }
.ak-zeile svg { flex: none; width: 16px; height: 16px; margin: 0; }
/* Ratgeber-Teaser: sechs Karten, zwei neue GARAN-Themen vorn */
.ratgeber-teaser { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .ratgeber-teaser { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ratgeber-teaser { grid-template-columns: minmax(0, 1fr); } }
.rt-garan { position: relative; display: block; width: 92px; transform: rotate(-4deg); }
.rt-garan img { display: block; width: 100%; height: auto; border-radius: 4px; background: #fff; box-shadow: 0 10px 24px rgba(16, 40, 90, .18); }
.rt-garan__chip { position: absolute; right: -34px; top: 10px; background: var(--blau); color: #fff; font-size: 0.74rem; font-weight: 700; padding: 4px 9px; border-radius: 999px; white-space: nowrap; box-shadow: 0 6px 14px rgba(10, 95, 220, .3); transform: scale(0); animation: rt-plopp 6s ease-out infinite; }
.rt-vs { display: flex; align-items: center; gap: 8px; }
.rt-vs > span { display: flex; flex-direction: column; gap: 2px; background: #fff; border-radius: 10px; padding: 8px 11px; box-shadow: 0 4px 12px rgba(16, 40, 90, .08); opacity: 0; animation: rt-rein 6s ease-out infinite; }
.rt-vs > span:last-child { animation-delay: .5s; border: 1px solid #cfe0fb; }
.rt-vs b { font-size: 0.8rem; color: var(--text); }
.rt-vs small { font-size: 0.68rem; color: var(--text-3); font-weight: 500; letter-spacing: 0; text-transform: none; }
.rt-vs i { font-style: normal; font-size: 0.7rem; font-weight: 600; color: var(--text-3); }
@media (prefers-reduced-motion: reduce) { .rt-garan__chip { animation: none; transform: none; } .rt-vs > span { animation: none; opacity: 1; } }
/* GARAN-Karte: geschachtelte Fassung schwebt unten rechts über dem Generator */
.ak-gen-klein { position: absolute; right: 3.5cqi; bottom: 3.5cqi; width: 46%; background: #fff; border-radius: 1.8cqi; padding: 1.6cqi 2cqi 1.4cqi; box-shadow: 0 12px 28px rgba(16, 40, 90, .2); }
.ak-gen-klein img { display: block; width: 100%; height: auto; }
.ak-gen-klein__tag { position: absolute; left: 2cqi; top: 0; transform: translateY(-55%); background: #111827; color: #fff; font-size: max(9px, 2.3cqi); font-weight: 600; padding: 0.5cqi 1.6cqi; border-radius: 999px; }
.ak-bild--garan .ak-gen { margin-bottom: 7cqi; }
/* Hero etwas höher */
.held { padding-top: clamp(28px, 4.5vw, 64px); }
/* Shopify-Karte: GARAN-Label (geschachtelt) unter dem Gewährleistungs-Badge */
.ak-produkt__text { gap: 1.6cqi; padding: 3cqi 3.2cqi; }
.ak-garan-mini { display: block; border: 1px solid var(--linie); border-radius: 1.4cqi; padding: 1.1cqi 1.6cqi; background: #fff; }
.ak-garan-mini img { display: block; width: 100%; height: auto; }
/* Drei Wege zum GARAN-Label: kleine Szenen in den Karten */
.weg-form { display: flex; flex-direction: column; gap: 5px; width: 62%; }
.weg-form i { display: flex; flex-direction: column; font-style: normal; background: #fff; border: 1px solid var(--linie); border-radius: 7px; padding: 3px 9px; font-size: 0.76rem; font-weight: 600; color: var(--text); line-height: 1.2; opacity: 0; animation: rt-rein 6s ease-out infinite; }
.weg-form i small { font-size: 0.6rem; font-weight: 500; color: var(--text-3); letter-spacing: 0; text-transform: none; }
.weg-form i:nth-child(2) { animation-delay: .25s; } .weg-form i:nth-child(3) { animation-delay: .5s; }
.weg-form b { background: var(--blau); color: #fff; border-radius: 7px; padding: 5px; text-align: center; font-size: 0.72rem; animation: rt-puls 2s ease-in-out infinite; }
.weg-csv { display: flex; flex-direction: column; gap: 6px; width: 80%; }
.weg-csv i { display: grid; grid-template-columns: 1.4fr 1fr .5fr 22px; align-items: center; gap: 6px; background: #fff; border-radius: 8px; padding: 6px 10px; font-style: normal; font-size: 0.74rem; box-shadow: 0 4px 12px rgba(16, 40, 90, .08); opacity: 0; animation: rt-rein 6s ease-out infinite; }
.weg-csv i:nth-child(2) { animation-delay: .25s; } .weg-csv i:nth-child(3) { animation-delay: .5s; }
.weg-csv em { font-style: normal; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.weg-csv s { text-decoration: none; width: 18px; height: 18px; border-radius: 50%; background: #1a7f4b; color: #fff; display: grid; place-items: center; font-size: 0.62rem; }
.weg-api { display: flex; flex-direction: column; gap: 3px; width: 84%; background: #0f172a; border-radius: 10px; padding: 12px 14px; box-shadow: 0 10px 24px rgba(16, 40, 90, .2); }
.weg-api code { font-size: 0.68rem; color: #cbd5e1; white-space: nowrap; overflow: hidden; background: none; padding: 0; }
.weg-api code b { color: #7dd3fc; font-weight: 600; }
.weg-api__ok { color: #86efac !important; opacity: 0; animation: rt-rein 6s ease-out infinite; animation-delay: .8s; }
@media (prefers-reduced-motion: reduce) { .weg-form i, .weg-csv i, .weg-api__ok { animation: none; opacity: 1; } .weg-form b { animation: none; } }
.weg-form { display: grid; grid-template-columns: 1fr 1.6fr; gap: 6px; width: 64%; }
.weg-form__breit, .weg-form b { grid-column: 1 / -1; }
/* „Weitere Shopsysteme“ hat drei Spalten (Widget, Widget, Marktplätze): zentriert unter dem Menüpunkt */
@media (min-width: 1081px) {
  .nav__gruppe:nth-child(3) .nav__unter { left: 50%; right: auto; transform: translate(-50%, -4px); }
  .nav__gruppe:nth-child(3):hover .nav__unter, .nav__gruppe:nth-child(3):focus-within .nav__unter { transform: translate(-50%, 0); }
  .nav__unter:has(.nav__ico--logo) { grid-auto-columns: 230px; }
}

/* ===== Marketingfilm Shopify-App (src/film.mjs, js/film.js) ===== */
.film { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.film__buehne { position: relative; width: min(1240px, calc(100vw - 32px)); flex: none; aspect-ratio: 2 / 1; border-radius: var(--r-gross); overflow: hidden; container-type: inline-size; background: radial-gradient(90% 90% at 50% 10%, #ffffff 0%, #eef3fc 70%, #e4ecfb 100%); border: 1px solid #dde8fb; box-shadow: 0 40px 90px rgba(16, 40, 90, .16); --u: 0.78cqi; color: var(--text); }
.film__szene { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility 0s .28s; }
.film__szene.aktiv { opacity: 1; visibility: visible; transition: opacity .4s ease, visibility 0s; }
.film__szene--blau { background: radial-gradient(120% 120% at 15% 0%, #3d7cf0 0%, #1663e6 45%, #0a4fc4 100%); color: #fff; }
.film__szene--blau::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .18) 1px, transparent 1.5px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000, transparent); mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000, transparent); pointer-events: none; }
.film__szene img { display: block; }
.film__kapitel { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; width: min(1240px, calc(100vw - 32px)); }
.film__kapitel button { width: 100%; font: inherit; font-size: 0.84rem; font-weight: 600; color: var(--text-3); background: none; border: 0; padding: 4px 0; cursor: pointer; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.film__kapitel button[aria-current="true"] { color: var(--text); }
.film__kapitel button:focus-visible { outline: 2px solid var(--blau); outline-offset: 3px; border-radius: 4px; }
.film__balken { display: block; height: 3px; border-radius: 3px; background: var(--linie); overflow: hidden; }
.film__balken i { display: block; height: 100%; width: 0; background: var(--blau); }
.film__kapitel button.fertig .film__balken i { width: 100%; }
.film__kapitel button.laeuft .film__balken i { animation: film-balken var(--dauer, 5s) linear forwards; }
.film.pausiert .film__kapitel button.laeuft .film__balken i { animation-play-state: paused; }
@keyframes film-balken { to { width: 100%; } }
.film__pause { position: absolute; right: 16px; bottom: 16px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); box-shadow: 0 4px 12px rgba(16, 40, 90, .2); cursor: pointer; display: grid; place-items: center; z-index: 5; }
.film__pause span { width: 10px; height: 12px; border-left: 3px solid #111827; border-right: 3px solid #111827; box-sizing: border-box; }
.film.pausiert .film__pause span { width: 0; height: 0; border: 0; border-left: 11px solid #111827; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }
.film.pausiert .film__szene.aktiv * { animation-play-state: paused !important; }

/* Typografie */
.mf-typo { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: calc(var(--u) * 1.8); padding: 0 calc(var(--u) * 6); }
.mf-typo--links { align-items: flex-start; text-align: left; padding: 0; gap: calc(var(--u) * .6); }
.mf-klein { font-size: calc(var(--u) * 2.8); font-weight: 600; opacity: .85; letter-spacing: -0.01em; }
.mf-riesig { font-size: calc(var(--u) * 13); font-weight: 800; letter-spacing: -0.05em; line-height: .92; white-space: nowrap; }
.mf-gross { font-size: calc(var(--u) * 7.4); font-weight: 800; letter-spacing: -0.045em; line-height: 1; white-space: nowrap; }
.mf-hell { color: #ffd617; }
.mf-zeile { font-size: calc(var(--u) * 3.6); font-weight: 650; letter-spacing: -0.02em; line-height: 1.2; }
.mf-zeile b { font-weight: 800; background: linear-gradient(transparent 60%, rgba(255, 214, 23, .95) 60%) no-repeat 0 0 / 0% 100%; padding: 0 .1em; }
.mf-fein { font-size: calc(var(--u) * 2.1); line-height: 1.45; opacity: .82; max-width: calc(var(--u) * 62); text-wrap: balance; }
.mf-typo--dunkel { color: var(--text); }
.mf-typo--dunkel .mf-fein { color: var(--text-2); opacity: 1; }
.mf-stempel { font-size: calc(var(--u) * 7); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #d92d20; border: calc(var(--u) * .7) solid #d92d20; border-radius: calc(var(--u) * 1.6); padding: calc(var(--u) * .6) calc(var(--u) * 3); transform: rotate(-7deg); }

/* Auftritte */
.mf-a0, .mf-a1, .mf-a2, .mf-a3, .mf-a4, .mf-a5, .mf-a6 { opacity: 0; }
@keyframes mf-rein { from { opacity: 0; transform: translateY(calc(var(--u) * 4)); filter: blur(calc(var(--u) * .8)); } to { opacity: 1; transform: none; filter: none; } }
@keyframes mf-knall { 0% { opacity: 0; transform: scale(1.35); filter: blur(calc(var(--u) * 1.2)); } 60% { opacity: 1; filter: none; transform: scale(.98); } 100% { opacity: 1; transform: none; } }
@keyframes mf-stempel { 0% { opacity: 0; transform: rotate(-7deg) scale(2.4); } 55% { opacity: 1; transform: rotate(-7deg) scale(.92); } 70% { transform: rotate(-7deg) scale(1.04); } 100% { opacity: 1; transform: rotate(-7deg) scale(1); } }
@keyframes mf-strich { to { background-size: 100% 100%; } }
@keyframes mf-sichtbar { to { opacity: 1; } }
.film__szene.aktiv .mf-a0 { animation: mf-rein .7s cubic-bezier(.2, .8, .2, 1) .1s forwards; }
.film__szene.aktiv .mf-a1 { animation: mf-rein .7s cubic-bezier(.2, .8, .2, 1) .15s forwards; }
.film__szene.aktiv .mf-a2 { animation: mf-rein .7s cubic-bezier(.2, .8, .2, 1) .55s forwards; }
.film__szene.aktiv .mf-a3 { animation: mf-rein .7s cubic-bezier(.2, .8, .2, 1) .95s forwards; }
.film__szene.aktiv .mf-a4 { animation: mf-rein .7s cubic-bezier(.2, .8, .2, 1) 1.5s forwards; }
.film__szene.aktiv .mf-a5 { animation: mf-rein .7s cubic-bezier(.2, .8, .2, 1) 2s forwards; }
.film__szene.aktiv .mf-a6 { animation: mf-rein .7s cubic-bezier(.2, .8, .2, 1) 2.5s forwards; }
.mf-pflicht.aktiv .mf-riesig { animation: mf-knall .8s cubic-bezier(.2, .8, .2, 1) .45s forwards; }
.mf-pflicht.aktiv .mf-zeile b { animation: mf-strich .6s ease 1.9s forwards; }
.mf-risiko.aktiv .mf-stempel { animation: mf-stempel .55s cubic-bezier(.2, .8, .2, 1) .9s forwards; }
.mf-start.aktiv .mf-riesig { animation: mf-knall .8s cubic-bezier(.2, .8, .2, 1) .45s forwards; }

/* Szene „Die App“ */
.mf-split { display: grid; grid-template-columns: auto auto; align-items: center; gap: calc(var(--u) * 10); }
.mf-telefon { position: relative; width: calc(var(--u) * 34); height: calc(var(--u) * 52); background: #fff; color: var(--text); border-radius: calc(var(--u) * 4.4); box-shadow: 0 0 0 calc(var(--u) * .9) rgba(255, 255, 255, .35), 0 calc(var(--u) * 3) calc(var(--u) * 8) rgba(0, 20, 70, .35); overflow: hidden; display: flex; flex-direction: column; transform: rotate(3deg); }
.mf-telefon__bild { height: 40%; overflow: hidden; }
.mf-telefon__bild img { width: 100%; height: 100%; object-fit: cover; }
.mf-telefon__info { padding: calc(var(--u) * 2.4); display: flex; flex-direction: column; gap: calc(var(--u) * 1.4); }
.mf-telefon__info > b { height: calc(var(--u) * 1.8); width: 70%; border-radius: 4px; background: #1f2937; }
.mf-telefon__info > i { height: calc(var(--u) * 1.3); width: 40%; border-radius: 4px; background: #d1d5db; }
.mf-kauf { background: #111; color: #fff; font-size: calc(var(--u) * 1.9); font-weight: 600; text-align: center; padding: calc(var(--u) * 1.5); border-radius: calc(var(--u) * .9); }
.mf-badge { display: flex; align-items: center; gap: calc(var(--u) * 1.2); border: 2px solid var(--blau); border-radius: calc(var(--u) * 1.2); padding: calc(var(--u) * 1.2) calc(var(--u) * 1.4); }
.mf-badge img { width: calc(var(--u) * 3.2); height: auto; flex: none; }
.mf-badge > span { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.mf-badge b { font-size: calc(var(--u) * 1.6); color: #1e3a8a; white-space: nowrap; }
.mf-badge small { font-size: calc(var(--u) * 1.3); color: var(--text-3); white-space: nowrap; }
.mf-garan-klein { display: block; border: 1px solid var(--linie); border-radius: calc(var(--u) * 1); padding: calc(var(--u) * .9) calc(var(--u) * 1.2); opacity: 0; }
.mf-garan-klein img { width: 100%; height: auto; }
.mf-popup { position: absolute; inset: 0; background: rgba(15, 23, 42, .5); display: grid; place-items: center; opacity: 0; }
.mf-popup img { width: 80%; height: auto; border-radius: calc(var(--u) * .8); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); transform: scale(.85); }
.mf-loesung.aktiv .mf-telefon { animation: mf-handy 1s cubic-bezier(.2, .8, .2, 1) .3s forwards; }
@keyframes mf-handy { from { opacity: 0; transform: rotate(10deg) translateY(calc(var(--u) * 12)); } to { opacity: 1; transform: rotate(3deg); } }
.mf-loesung.aktiv .mf-badge { animation: mf-puls 1.4s ease-in-out 1.4s 2; }
@keyframes mf-puls { 50% { box-shadow: 0 0 0 calc(var(--u) * 1) rgba(10, 95, 220, .18); } }
.mf-loesung.aktiv .mf-garan-klein { animation: mf-rein .6s cubic-bezier(.2, .8, .2, 1) 2.4s forwards; }
.mf-loesung.aktiv .mf-popup { animation: mf-sichtbar .35s ease 4.2s forwards; }
.mf-loesung.aktiv .mf-popup img { animation: mf-auf .5s cubic-bezier(.2, .8, .2, 1) 4.2s forwards; }
@keyframes mf-auf { to { transform: none; } }

/* Szene „Überall“ */
.mf-wolke { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 4); padding: 0 calc(var(--u) * 6); }
.mf-wolke .mf-gross { color: var(--text); }
.mf-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * 1.6); max-width: calc(var(--u) * 92); }
.mf-chips span { font-size: calc(var(--u) * 2.6); font-weight: 650; letter-spacing: -0.01em; color: var(--text); background: #fff; border: 1px solid var(--linie); border-radius: 999px; padding: calc(var(--u) * 1.3) calc(var(--u) * 3); box-shadow: 0 calc(var(--u) * .6) calc(var(--u) * 2.4) rgba(16, 40, 90, .1); opacity: 0; white-space: nowrap; }
.mf-chips .mf-chip--blau { background: var(--blau); color: #fff; border-color: var(--blau); }
@keyframes mf-chip { 0% { opacity: 0; transform: translateY(calc(var(--u) * 3)) scale(.8); } 70% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: none; } }
.mf-ueberall.aktiv .mf-chips span { animation: mf-chip .5s cubic-bezier(.2, .8, .2, 1) forwards; }
.mf-ueberall.aktiv .mf-chips span:nth-child(1) { animation-delay: .7s; } .mf-ueberall.aktiv .mf-chips span:nth-child(2) { animation-delay: .9s; }
.mf-ueberall.aktiv .mf-chips span:nth-child(3) { animation-delay: 1.1s; } .mf-ueberall.aktiv .mf-chips span:nth-child(4) { animation-delay: 1.3s; }
.mf-ueberall.aktiv .mf-chips span:nth-child(5) { animation-delay: 1.5s; } .mf-ueberall.aktiv .mf-chips span:nth-child(6) { animation-delay: 1.9s; }
.mf-ueberall.aktiv .mf-chips span:nth-child(7) { animation-delay: 2.1s; }

/* Szene „GARAN & Mail“ */
.mf-split--tief { gap: calc(var(--u) * 8); align-items: start; }
.mf-tief { display: flex; flex-direction: column; align-items: center; text-align: center; gap: calc(var(--u) * 2.2); width: calc(var(--u) * 40); }
.mf-nummer { font-size: calc(var(--u) * 4.4); font-weight: 800; letter-spacing: -0.04em; white-space: nowrap; }
.mf-garan { background: #fff; border-radius: calc(var(--u) * 1.2); padding: calc(var(--u) * 1.2); box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 6) rgba(0, 20, 70, .35); width: calc(var(--u) * 23); transform: rotate(-3deg); }
.mf-garan img { width: 100%; height: auto; }
.mf-mail { background: #fff; color: var(--text); border-radius: calc(var(--u) * 1.8); padding: calc(var(--u) * 2); box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 6) rgba(0, 20, 70, .35); display: flex; flex-direction: column; gap: calc(var(--u) * 1.4); width: calc(var(--u) * 36); transform: rotate(2deg); }
.mf-mail__kopf { display: flex; align-items: center; gap: calc(var(--u) * 1.2); padding-bottom: calc(var(--u) * 1.2); border-bottom: 1px solid var(--linie); font-size: calc(var(--u) * 1.8); white-space: nowrap; }
.mf-mail__kopf span { width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.6); border-radius: 50%; background: #111; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: calc(var(--u) * 1.6); }
.mf-mail__zeile { display: flex; align-items: center; gap: calc(var(--u) * 1.6); }
.mf-mail__zeile img { width: calc(var(--u) * 7); height: auto; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
.mf-knopf { font-size: calc(var(--u) * 1.6); font-weight: 600; color: #fff; background: #111; padding: calc(var(--u) * 1) calc(var(--u) * 1.6); border-radius: calc(var(--u) * .7); white-space: nowrap; }

/* Szene „Loslegen“ */
.mf-logo { width: calc(var(--u) * 10); height: auto; filter: drop-shadow(0 calc(var(--u)) calc(var(--u) * 3) rgba(0, 20, 70, .35)); }
.mf-cta { display: inline-flex; align-items: center; gap: calc(var(--u) * 1.2); background: #fff; color: #0a4fc4; font-size: calc(var(--u) * 2.6); font-weight: 700; padding: calc(var(--u) * 1.8) calc(var(--u) * 3.6); border-radius: 999px; box-shadow: 0 calc(var(--u)) calc(var(--u) * 4) rgba(0, 20, 70, .3); margin-top: calc(var(--u) * 1.4); }
.mf-cta svg { width: calc(var(--u) * 2.8); height: calc(var(--u) * 2.8); }
.mf-start.aktiv .mf-cta { animation: mf-rein .7s cubic-bezier(.2, .8, .2, 1) 1.5s forwards, mf-cta-puls 1.6s ease-in-out 2.4s infinite; }
@keyframes mf-cta-puls { 50% { box-shadow: 0 0 0 calc(var(--u) * 1.4) rgba(255, 255, 255, .25), 0 calc(var(--u)) calc(var(--u) * 4) rgba(0, 20, 70, .3); } }

/* Handy */
@media (max-width: 700px) {
  .film__buehne { aspect-ratio: 4 / 5; --u: 1.55cqi; }
  .film__kapitel { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
  .film__kapitel button { font-size: 0; gap: 0; }
  .mf-riesig { font-size: calc(var(--u) * 9.5); }
  .mf-gross { font-size: calc(var(--u) * 6.2); }
  .mf-zeile { font-size: calc(var(--u) * 3.4); }
  .mf-fein { font-size: calc(var(--u) * 2.4); }
  .mf-split { grid-template-columns: 1fr; gap: calc(var(--u) * 4); justify-items: center; }
  .mf-typo--links { align-items: center; text-align: center; }
  .mf-loesung .mf-gross { font-size: calc(var(--u) * 4.6); }
  .mf-telefon { width: calc(var(--u) * 30); height: calc(var(--u) * 44); }
  .mf-split--tief { gap: calc(var(--u) * 3); }
  .mf-tief { width: calc(var(--u) * 56); gap: calc(var(--u) * 1.4); }
  .mf-tief .mf-fein { display: none; }
  .mf-nummer { font-size: calc(var(--u) * 3.6); }
  .mf-garan { width: calc(var(--u) * 17); }
  .mf-mail { width: calc(var(--u) * 40); }
  .mf-chips span { font-size: calc(var(--u) * 2.5); }
}
@media (prefers-reduced-motion: reduce) {
  .film__szene, .film__szene * { animation: none !important; transition: none !important; }
  .mf-a0, .mf-a1, .mf-a2, .mf-a3, .mf-a4, .mf-a5, .mf-a6, .mf-chips span, .mf-garan-klein, .mf-riesig, .mf-stempel, .mf-telefon { opacity: 1 !important; }
  .mf-zeile b { background-size: 100% 100%; }
}
@media (max-width: 700px) { .mf-telefon { width: calc(var(--u) * 38); height: calc(var(--u) * 46); } .mf-badge b { font-size: calc(var(--u) * 1.5); } .mf-badge small { font-size: calc(var(--u) * 1.2); } }

/* Vier Wege zum GARAN-Label (Generator-Seite) */
.vier-wege { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .vier-wege { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .vier-wege { grid-template-columns: minmax(0, 1fr); } }
.weg-shop { position: relative; display: flex; flex-direction: column; gap: 7px; width: 66%; background: #fff; border-radius: 10px; padding: 12px 12px 10px; box-shadow: 0 6px 18px rgba(16, 40, 90, .12); }
.weg-shop i { height: 34px; border-radius: 6px; background: linear-gradient(135deg, #e5e7eb, #cbd5e1); }
.weg-shop b { height: 8px; width: 60%; border-radius: 4px; background: #1f2937; }
.weg-shop img { width: 100%; height: auto; opacity: 0; animation: rt-rein 6s ease-out infinite; animation-delay: .4s; }
.weg-shop__logo { position: absolute; top: -10px; right: -10px; width: 30px; height: 30px; border-radius: 9px; background: #fff; display: grid; place-items: center; box-shadow: 0 4px 12px rgba(16, 40, 90, .15); }
@media (prefers-reduced-motion: reduce) { .weg-shop img { animation: none; opacity: 1; } }
.vier-wege .weg-csv { width: 92%; }
.vier-wege .weg-csv i { grid-template-columns: 1.5fr 1fr .4fr 18px; font-size: 0.7rem; padding: 6px 8px; }

/* ===================== Kundenbereich (/konto/) und Anmeldung (/anmelden/) =====================
 * Eigene App-Oberfläche ohne Kopf und Fuß der Website, angelehnt an Stripe- und Shopify-Admin:
 * weißes Seitenmenü, hellgrauer Arbeitsbereich, kompakte weiße Karten, Status-Pillen.
 */
.app-koerper { background: #f6f8fb; font-size: 15px; line-height: 1.5; }
.app-koerper [hidden] { display: none !important; }
.app-koerper .feld input, .app-koerper .feld select, .app-koerper .feld textarea { font-size: 0.95rem; padding: 10px 12px; border-radius: 9px; }
.app-koerper .feld { font-size: 0.86rem; color: var(--text-2); }
.app-ico { flex: none; display: block; }
.app-ico--klein { margin-left: auto; color: var(--text-3); }

.app { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.app-koerper:not(.bereit) .app-haupt { opacity: 0; }
.app-haupt { transition: opacity .2s ease; min-width: 0; }

.app-seite { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 4px; padding: 18px 12px 12px; background: #fff; border-right: 1px solid var(--linie); overflow-y: auto; }
.app-marke { display: flex; align-items: center; gap: 10px; padding: 4px 10px 18px; color: var(--text); text-decoration: none; font-weight: 650; font-size: 1rem; letter-spacing: -0.01em; }
.app-marke b { font-weight: 650; color: var(--blau); }
.app-marke:hover { text-decoration: none; }
.app-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.app-nav__titel { margin: 16px 10px 6px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.app-nav__punkt { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--text-2); text-decoration: none; font-size: 0.92rem; font-weight: 500; }
.app-nav__punkt:hover { background: var(--grund-2); color: var(--text); text-decoration: none; }
.app-nav__punkt[aria-current="page"] { background: var(--grund-blau); color: var(--blau); }
.app-nav__punkt[aria-current="page"] .app-ico { color: var(--blau); }
.app-nav__punkt .app-ico { color: var(--text-3); }
.app-nutzer { display: flex; align-items: center; gap: 10px; padding: 10px; margin-top: 12px; border-top: 1px solid var(--linie); }
.app-nutzer__bild { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--blau); color: #fff; font-weight: 650; font-size: 0.9rem; }
.app-nutzer__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.app-nutzer__text b { font-size: 0.84rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-nutzer__text small { font-size: 0.76rem; color: var(--text-3); }
.app-nutzer__raus { flex: none; border: 0; background: none; padding: 6px; border-radius: 7px; color: var(--text-3); cursor: pointer; }
.app-nutzer__raus:hover { background: var(--grund-2); color: var(--text); }
.app-schleier { display: none; }

.app-leiste { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 32px; background: rgba(246, 248, 251, .88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--linie); }
.app-leiste__titel { font-size: 1.25rem; font-weight: 650; letter-spacing: -0.02em; margin: 0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-leiste__menue { display: none; border: 1px solid var(--linie-2); background: #fff; border-radius: 9px; padding: 7px; cursor: pointer; color: var(--text); }
.app-leiste__rechts { display: flex; align-items: center; gap: 10px; }
.app-guthaben { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--linie); color: var(--text); text-decoration: none; font-size: 0.86rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.app-guthaben:hover { text-decoration: none; border-color: var(--linie-2); }
.app-punkt { width: 8px; height: 8px; border-radius: 50%; background: #1a9d5a; }
.app-guthaben.leer .app-punkt { background: #e0a100; }

.app-inhalt { display: flex; flex-direction: column; gap: 20px; padding: 28px 32px 56px; max-width: 1240px; }
.app-bereich { display: flex; flex-direction: column; gap: 20px; }
.app-bereich[hidden] { display: none; }
.app-banner { margin: 0; padding: 12px 16px; border-radius: 10px; background: #fff; border: 1px solid var(--linie); font-size: 0.92rem; }
.app-banner[hidden] { display: none; }
.app-banner[data-art="ok"] { background: #ecf8f1; border-color: #bfe6cf; color: #0e5c31; }
.app-banner[data-art="fehler"] { background: #fdeeee; border-color: #f3c6c3; color: #8f1d16; }

.app-gruss h2 { font-size: 1.5rem; font-weight: 650; letter-spacing: -0.02em; }
.app-gruss p { margin: 4px 0 0; color: var(--text-2); }

.app-karte { background: #fff; border: 1px solid var(--linie); border-radius: 12px; padding: 20px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.app-karte > p { margin: 0; color: var(--text-2); font-size: 0.92rem; }
.app-karte > .knopf { align-self: flex-start; }
.app-karte__kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.app-karte__kopf h3 { font-size: 1rem; font-weight: 650; letter-spacing: -0.01em; }
.app-karte__kopf a { font-size: 0.86rem; font-weight: 500; text-decoration: none; }
.app-karte__kopf a:hover { text-decoration: underline; }

.app-kennzahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.app-kennzahl { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; background: #fff; border: 1px solid var(--linie); border-radius: 12px; color: var(--text); text-decoration: none; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); transition: border-color .15s ease; }
.app-kennzahl:hover { text-decoration: none; border-color: var(--linie-2); }
.app-kennzahl span { font-size: 0.84rem; color: var(--text-2); font-weight: 500; }
.app-kennzahl b { font-size: 1.75rem; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.app-kennzahl small { font-size: 0.8rem; color: var(--text-3); }

.app-raster-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.app-raster-erstellen { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.app-raster-credits { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; align-items: start; }

.app-schnell { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.app-schnell a { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 20px; border: 1px solid var(--linie); border-radius: 12px; color: var(--text); text-decoration: none; transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.app-schnell a:hover { border-color: #bcd2f5; box-shadow: 0 6px 18px rgba(10, 95, 220, .08); transform: translateY(-1px); text-decoration: none; }
.app-schnell__ico { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 10px; border-radius: 11px; background: var(--grund-blau); color: var(--blau); }
.app-schnell__ico .app-ico { width: 22px; height: 22px; }
.app-schnell b { font-size: 1.02rem; font-weight: 600; letter-spacing: -0.01em; }
.app-schnell small { font-size: 0.86rem; color: var(--text-3); }
.app-shopify { display: flex; align-items: center; gap: 20px; padding: 20px 24px; border: 1px solid #d9ead0; border-radius: 12px; background: linear-gradient(100deg, #ffffff 30%, #f2f8ec 100%); box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.app-shopify__marke { flex: none; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 14px; background: #fff; border: 1px solid var(--linie); box-shadow: 0 1px 2px rgba(16, 24, 40, .05); }
.app-shopify__text { flex: 1; min-width: 0; }
.app-shopify__text h3 { font-size: 1.05rem; font-weight: 650; letter-spacing: -0.01em; }
.app-shopify__text p { margin: 4px 0 0; color: var(--text-2); font-size: 0.92rem; }
.app-shopify .knopf { flex: none; }
.app-shopify .app-ico--klein { margin-left: 2px; }

.app-tabelle { overflow-x: auto; border: 1px solid var(--linie); border-radius: 10px; }
.app-tabelle[hidden] { display: none; }
.app-tabelle table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.app-tabelle th { text-align: left; padding: 9px 14px; background: var(--grund-2); color: var(--text-2); font-weight: 500; font-size: 0.8rem; border-bottom: 1px solid var(--linie); white-space: nowrap; }
.app-tabelle td { padding: 10px 14px; border-bottom: 1px solid var(--linie); vertical-align: middle; overflow-wrap: anywhere; }
.app-tabelle tr:last-child td { border-bottom: 0; }
.app-tabelle tbody tr:hover td { background: #fafbfd; }
.app-tabelle .app-rechts { text-align: right; }
.app-tabelle.preis-tabelle td { font-size: 0.95rem; }

.app-pill { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; background: var(--grund-2); color: var(--text-2); font-size: 0.76rem; font-weight: 600; white-space: nowrap; }
.app-pill--ok { background: #e6f6ed; color: #0e7a3d; }
.app-pill--warte { background: #fff5d6; color: #8a5a00; }
.app-pill--fehler { background: #fdecea; color: #b3261e; }

.app-leer { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 16px; text-align: center; border: 1px dashed var(--linie-2); border-radius: 10px; }
.app-leer[hidden] { display: none; }
.app-leer b { font-weight: 600; }
.app-leer p { margin: 0 0 8px; color: var(--text-3); font-size: 0.9rem; }

.app-form { gap: 14px; }
.app-form .knopf--blau { align-self: flex-start; }
.app-vorschau__bild { background: var(--grund-2); border-radius: 10px; padding: 24px; display: grid; place-items: center; }
.app-vorschau__bild img { width: min(100%, 320px); height: auto; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 10px 24px rgba(16,40,80,.12); }
.app-downloads { display: flex; flex-direction: column; gap: 10px; }
.app-downloads[hidden] { display: none; }
.app-downloads .knopf { align-self: flex-start; }
.app-downloads .gen-dl span { min-width: 150px; }

.app-ablage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 32px 20px; border: 1.5px dashed var(--linie-2); border-radius: 12px; background: var(--grund-2); text-align: center; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.app-ablage:hover, .app-ablage.ziehen { border-color: var(--blau); background: var(--grund-blau); }
.app-ablage.gewaehlt { border-style: solid; border-color: #bfe6cf; background: #f1faf5; }
.app-ablage input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.app-ablage .app-ico { width: 28px; height: 28px; color: var(--blau); }
.app-ablage b { font-weight: 600; overflow-wrap: anywhere; }
.app-ablage small { color: var(--text-3); font-size: 0.82rem; }
.app-ablage:focus-within { outline: 2px solid var(--blau); outline-offset: 2px; }

.app-werkzeuge { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.app-suche { flex: 1 1 240px; }
.app-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.app-aktionen .gen-status { margin: 0; flex: 1 1 260px; }

.app-kasse { position: sticky; top: 84px; }
.app-kasse__summe { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; padding-bottom: 12px; border-bottom: 1px solid var(--linie); }
.app-kasse__summe b { font-size: 1.05rem; font-weight: 650; }
.app-kasse__summe span { font-size: 1.5rem; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.app-kasse .knopf--blau { width: 100%; }
.app-kasse .gen-hinweis { margin: 0; }

.app-warnung { padding: 10px 14px; border-radius: 9px; background: #fff8e6; border: 1px solid #f3e1a8; color: #6b4a00; font-size: 0.86rem; }
.app-schluessel { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--linie); border-radius: 9px; background: var(--grund-2); }
.app-schluessel[hidden] { display: none; }
.app-schluessel code { flex: 1 1 220px; font-size: 0.86rem; overflow-wrap: anywhere; }
.app-code { margin: 0; padding: 14px 16px; border-radius: 10px; background: #0b1220; color: #e6edf7; font-size: 0.8rem; line-height: 1.6; overflow-x: auto; }
.app-code code { white-space: pre; }
.app-karte code { font-size: 0.86em; }
.app-liste { margin: 0; padding-left: 1.1em; color: var(--text-2); font-size: 0.92rem; display: grid; gap: 6px; }

/* Anmeldeseite */
.login-seite { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 40px 16px; background: radial-gradient(1200px 500px at 50% -10%, #e6efff 0%, rgba(230, 239, 255, 0) 70%), #f6f8fb; }
.login-marke { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; font-weight: 600; font-size: 1.12rem; line-height: 1.15; letter-spacing: -0.01em; }
.login-marke img { width: 60px; height: 60px; flex: none; }
.login-marke:hover { text-decoration: none; }
.login-karte { width: min(100%, 420px); background: #fff; border: 1px solid var(--linie); border-radius: 16px; padding: 32px; box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 20px 48px rgba(16, 24, 40, .08); display: flex; flex-direction: column; gap: 18px; }
.login-karte h1 { font-size: 1.45rem; font-weight: 650; letter-spacing: -0.02em; }
.login-unter { margin: -8px 0 0; color: var(--text-2); font-size: 0.92rem; }
.login-form { display: flex; flex-direction: column; gap: 14px; }
.login-form[hidden] { display: none; }
.login-form .knopf { width: 100%; }
.login-code { font-size: 1.4rem !important; letter-spacing: 0.3em; text-align: center; font-variant-numeric: tabular-nums; }
.login-zurueck { align-self: center; }
.login-karte .gen-status:empty { display: none; }
.login-karte .gen-turnstile { margin-top: 0; }
.login-neu { margin: 0; padding-top: 16px; border-top: 1px solid var(--linie); font-size: 0.84rem; color: var(--text-3); }
.login-fuss { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; font-size: 0.8rem; }
.login-fuss a { color: var(--text-2); }

/* Hinweisleiste auf der Generator-Seite für angemeldete Kunden */
.gen-angemeldet { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 20px; padding: 12px 16px; border: 1px solid var(--linie); border-radius: 12px; background: #fff; font-size: 0.92rem; color: var(--text-2); }
.gen-angemeldet[hidden] { display: none; }
.gen-csv__punkte { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; color: var(--text-2); font-size: 0.95rem; }

@media (max-width: 1080px) {
  .app-raster-erstellen, .app-raster-credits { grid-template-columns: minmax(0, 1fr); }
  .app-kasse { position: static; }
}
@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .app-seite { position: fixed; z-index: 30; left: 0; top: 0; width: 272px; max-width: 86vw; transform: translateX(-100%); transition: transform .22s ease; box-shadow: 0 20px 48px rgba(16, 24, 40, .18); }
  .app.menue-offen .app-seite { transform: none; }
  .app-schleier { display: block; position: fixed; inset: 0; z-index: 20; background: rgba(11, 15, 25, .35); }
  .app-schleier[hidden] { display: none; }
  .app-leiste { padding: 10px 16px; }
  .app-leiste__menue { display: inline-flex; }
  .app-leiste__rechts .knopf { display: none; }
  .app-inhalt { padding: 20px 16px 48px; }
  .app-kennzahlen, .app-raster-2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .app-schnell { grid-template-columns: minmax(0, 1fr); }
  .login-karte { padding: 24px 20px; }
  .app-downloads .gen-dl span { min-width: 100%; }
}
@media (max-width: 860px) {
  .app-kennzahlen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .app-kennzahl { padding: 12px; }
  .app-kennzahl b { font-size: 1.3rem; }
  .app-kennzahl span { font-size: 0.74rem; }
  .app-kennzahl small { display: none; }
  .app-gruss h2 { font-size: 1.25rem; overflow-wrap: anywhere; }
}

@media (max-width: 1080px) { .app-schnell { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .app-shopify { flex-direction: column; align-items: flex-start; } }
@media (max-width: 520px) { .app-schnell a { padding: 16px; } }

/* Einwilligung zur Besucherstatistik */
.einwilligung { position: fixed; z-index: 60; left: 20px; bottom: 20px; width: min(420px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; background: #fff; border: 1px solid var(--linie); border-radius: 14px; box-shadow: 0 2px 6px rgba(16, 24, 40, .06), 0 20px 48px rgba(16, 24, 40, .16); font-size: 0.9rem; line-height: 1.5; color: var(--text-2); }
.einwilligung strong { font-size: 1rem; font-weight: 650; color: var(--text); letter-spacing: -0.01em; }
.einwilligung p { margin: 0; }
.einwilligung__knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.einwilligung__knoepfe .knopf { width: 100%; }
@media (max-width: 520px) { .einwilligung { left: 16px; right: 16px; bottom: 16px; width: auto; } }

/* Zweite Vorschau: geschachteltes Label unter dem großen */
.label-kompakt { width: 100%; max-width: 540px; display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.label-kompakt__titel { font-size: 0.74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.gen-buehne .label-kompakt img, .app-vorschau .label-kompakt img { width: 100%; max-width: none; height: auto; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 10px 24px rgba(16, 40, 80, .12); }
.app-vorschau__bild { flex-direction: column; }
.app-vorschau .label-kompakt { max-width: 320px; margin-top: 16px; }

/* Teaser in den Spalten des Menüs „EU-Vorgaben“: die beiden Labels zum Vergleich */
.nav__unter a.nav__teaser { display: flex; align-items: center; gap: 14px; margin: 2px 0 8px; padding: 12px; border-radius: 12px; background: var(--grund-2); border: 1px solid var(--linie); }
.nav__unter a.nav__teaser:hover { background: var(--grund-blau); border-color: #cfdcf3; }
.nav__teaser img { flex: none; width: auto; height: 76px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 4px 10px rgba(16, 40, 80, .1); }
.nav__teaser span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nav__teaser b { font-size: 0.9rem; font-weight: 600; color: var(--text); white-space: normal; }
.nav__teaser small { font-size: 0.8rem; line-height: 1.4; color: var(--text-3); white-space: normal; }

/* Kundenbereich: Im Shop einbinden */
.app-systeme { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.app-system { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--linie); border-radius: 10px; background: #fff; font: inherit; font-size: 0.9rem; font-weight: 500; color: var(--text); cursor: pointer; text-align: left; transition: border-color .15s ease, background .15s ease; }
.app-system:hover { border-color: var(--linie-2); background: var(--grund-2); }
.app-system[aria-pressed="true"] { border-color: var(--blau); background: var(--grund-blau); box-shadow: 0 0 0 1px var(--blau) inset; }
.app-system__logo { flex: none; display: grid; place-items: center; width: 28px; height: 28px; }
.app-system__logo svg { max-width: 28px; height: auto; }
.app-system__logo--text { font-size: 0.8rem; font-weight: 700; color: var(--text-2); }
.app-anleitung { display: flex; flex-direction: column; gap: 14px; padding-top: 18px; margin-top: 4px; border-top: 1px solid var(--linie); }
.app-schritte { margin: 0; padding: 0; list-style: none; counter-reset: schritt; display: grid; gap: 12px; }
.app-schritte li { counter-increment: schritt; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; font-size: 0.92rem; color: var(--text-2); }
.app-schritte li::before { content: counter(schritt); grid-row: span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--grund-blau); color: var(--blau); font-weight: 650; font-size: 0.85rem; }
.app-schritte b { color: var(--text); font-weight: 600; }
.app-label-klein { margin: 0; font-size: 0.78rem; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.app-codeblock { display: flex; flex-direction: column; gap: 8px; }
.app-codeblock .knopf { align-self: flex-start; }
.app-shopify--innen { border-color: #d9ead0; }
.app-pruefen { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.app-ergebnis { display: flex; flex-direction: column; gap: 8px; }
.app-ergebnis__adresse { margin: 0 0 4px; font-size: 0.82rem; color: var(--text-3); overflow-wrap: anywhere; }
.app-ergebnis__zeile { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--linie); background: #fff; }
.app-ergebnis__zeile div { display: flex; flex-direction: column; gap: 2px; font-size: 0.9rem; color: var(--text-2); }
.app-ergebnis__zeile b { color: var(--text); font-weight: 600; }
.app-ergebnis__ico { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 0.8rem; font-weight: 700; }
.app-ergebnis__zeile--ok { background: #f1faf5; border-color: #bfe6cf; }
.app-ergebnis__zeile--ok .app-ergebnis__ico { background: #1a9d5a; color: #fff; }
.app-ergebnis__zeile--fehler { background: #fff6f5; border-color: #f3c6c3; }
.app-ergebnis__zeile--fehler .app-ergebnis__ico { background: #c4271c; color: #fff; }
.app-ergebnis__zeile--info .app-ergebnis__ico { background: var(--grund-blau); color: var(--blau); }
.app-wert--warnung { color: #b45309; }
.app-kennzahlen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1080px) { .app-kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Kopier-Symbol in Codeblöcken */
.kopier-rahmen { position: relative; width: 100%; min-width: 0; }
.kopier-rahmen > pre { margin: 0; padding-right: 52px; }
.kopier-knopf { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid rgba(255, 255, 255, .25); border-radius: 8px; background: rgba(255, 255, 255, .92); color: #1f2937; cursor: pointer; box-shadow: 0 1px 2px rgba(0, 0, 0, .15); transition: background .15s ease, color .15s ease; }
.kopier-knopf:hover { background: #fff; color: var(--blau); }
.kopier-knopf.kopiert { background: #1a9d5a; border-color: #1a9d5a; color: #fff; }
.kopier-knopf:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }

/* Feinschliff Mobil (04.10.2026) */
.held h1 { hyphens: manual; -webkit-hyphens: manual; }
@media (max-width: 600px) { .aktionsleiste__mehr { display: none; } }

/* Audit 04.10.2026: Kundenbereich auf dem Handy, Tippziele, Einwilligung */
@media (max-width: 700px) { .app-shopify .knopf { flex: 1 1 auto; width: 100%; white-space: normal; text-align: center; } }
@media (max-width: 860px) {
  .app-seite { z-index: 70; visibility: hidden; transition: transform .22s ease, visibility 0s .22s; }
  .app.menue-offen .app-seite { visibility: visible; transition: transform .22s ease, visibility 0s 0s; }
  .app-schleier { z-index: 65; }
}
@media (max-width: 520px) {
  .app-leiste__titel { font-size: 1.05rem; }
  .app-guthaben { padding: 6px 10px; font-size: 0.78rem; }
  .login-marke { font-size: 1rem; }
}
.app-leiste__menue, .app-nutzer__raus, .kopier-knopf { min-width: 40px; min-height: 40px; }
.csv-filter button { min-height: 40px; }
.film__kapitel button { min-height: 32px; padding-block: 12px; }
.nav__bald { opacity: 1; color: var(--text-3); }
.einwilligung { z-index: 60; }
@media (max-width: 520px) { .einwilligung { padding: 14px 16px; font-size: 0.85rem; } }

.app-karte__kopf h2, .app-shopify__text h2 { font-size: 1rem; font-weight: 650; letter-spacing: -0.01em; margin: 0; }
.app-shopify__text h2 { font-size: 1.05rem; }
.app-nav__recht { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 10px 10px 0; font-size: 0.76rem; }
.app-nav__recht a { color: var(--text-3); text-decoration: none; }
.app-nav__recht a:hover { color: var(--text); text-decoration: underline; }
.link-knopf--blau { color: var(--blau); font-size: 0.88rem; }
.paket-wahl span, .preis-tabelle td:nth-child(-n+2) { white-space: nowrap; font-variant-numeric: tabular-nums; }
.preis-tabelle td:nth-child(3) { white-space: normal; font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .preis-tabelle th, .preis-tabelle td { padding-left: 10px; padding-right: 10px; } .preis-tabelle .rabatt { margin-top: 2px; } }

/* Label-Vorschau wie ein gedrucktes Etikett: weißer Rand, damit das EU-Schild am oberen Rand auf Weiß steht */
.gen-buehne > img, .app-vorschau__bild > img { padding: 14px; box-sizing: border-box; border-radius: 4px; }
.gen-buehne .label-kompakt img, .app-vorschau .label-kompakt img { padding: 8px; box-sizing: border-box; border-radius: 4px; }
#so-funktionierts + .abschnitt { padding-top: 0; }

/* Ergebnis im Generator: Erfolgsbox, Downloads als Tabelle mit Formatknöpfen, ZIP als Hauptaktion */
.gen-form.fertig .gen-vorteile, .gen-form.fertig .gen-vorteile__preis { display: none; }
.gen-form.fertig #g-erstellen { background: #fff; color: var(--text); border-color: var(--linie-2); box-shadow: 0 1px 2px rgba(16, 24, 40, .05); }
.gen-form.fertig #g-erstellen:hover { background: var(--grund-2); }
#g-status[data-art="ok"] { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: 12px; background: #ecf8f1; border: 1px solid #bfe6cf; color: #0e5c31; }
#g-status[data-art="ok"]::before { content: "✓"; flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #1a9d5a; color: #fff; font-size: 0.75rem; font-weight: 800; }
.gen-downloads { gap: 0; align-items: stretch; border: 1px solid var(--linie); border-radius: 14px; padding: 6px 16px 16px; background: #fff; }
.gen-downloads__titel { margin: 10px 0 4px; font-size: 0.78rem; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.gen-dl { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--linie); }
.gen-dl:last-of-type { border-bottom: 0; }
.gen-dl span { min-width: 0; font-size: 0.9rem; color: var(--text-2); }
.gen-dl__formate { display: flex; flex-wrap: wrap; gap: 6px; }
.format-knopf { font: inherit; font-size: 0.82rem; font-weight: 550; padding: 5px 11px; border-radius: 8px; border: 1px solid var(--linie-2); background: #fff; color: var(--text); cursor: pointer; white-space: nowrap; transition: border-color .15s ease, color .15s ease, background .15s ease; }
.format-knopf:hover { border-color: var(--blau); color: var(--blau); background: var(--grund-blau); }
.gen-downloads__zip { width: 100%; margin-top: 12px; }
@media (max-width: 520px) { .gen-dl { grid-template-columns: minmax(0, 1fr); gap: 6px; } }
.app-downloads .gen-dl:first-of-type { border-top: 1px solid var(--linie); }

/* Verlaufsschrift: Platz für Unterlängen (g, y), sonst schneidet background-clip sie ab */
.held h1 span { padding-bottom: 0.14em; margin-bottom: -0.14em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* Menüeinträge ohne Untertitel: Text mittig zum Symbol */
.nav__unter a:not(:has(small)) { align-items: center; }

/* Darstellungsformen zum Anklicken (Gewährleistungslabel, Platzierung) */
.darstellungen { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: 1.4em 0 1.8em; align-items: start; }
.ds-kachel { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--linie); border-radius: 14px; background: #fff; }
.ds-titel { font-size: 0.98rem; font-weight: 650; }
.ds-text { font-size: 0.84rem; color: var(--text-3); line-height: 1.4; margin-bottom: 6px; }
.ds-auf summary { list-style: none; cursor: pointer; }
.ds-auf summary::-webkit-details-marker { display: none; }
.ds-auf summary:focus-visible { outline: 2px solid var(--blau); outline-offset: 3px; border-radius: 8px; }
.ds-auf[open] summary { margin-bottom: 10px; }
.ds-voll { display: block; width: 100%; height: auto; border: 1px solid var(--linie); border-radius: 6px; background: #fff; }
.ds-badge { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1.5px solid var(--linie-2); border-radius: 10px; background: #fff; }
.ds-badge img { flex: none; }
.ds-badge span { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ds-badge b { font-size: 0.86rem; color: #1f4a9c; }
.ds-badge small { font-size: 0.74rem; color: var(--text-3); }
.ds-badge i { font-style: normal; font-size: 1.2rem; color: #1f4a9c; }
.ds-klapp { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border: 1.5px solid var(--linie-2); border-radius: 10px; font-size: 0.86rem; font-weight: 600; color: #1f4a9c; background: #fff; }
.ds-klapp i { font-style: normal; transition: transform .15s ease; }
.ds-auf[open] .ds-klapp i { transform: rotate(180deg); }
.ds-link { font-size: 0.9rem; color: var(--blau); text-decoration: underline; text-underline-offset: 3px; }
.ds-garan-klein { display: block; width: 100%; height: auto; border: 1px solid var(--linie); border-radius: 4px; background: #fff; }

.paket-tipp { display: inline-flex; align-items: center; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--blau); color: #fff; font-style: normal; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; vertical-align: middle; }
/* Menütexte umbrechen statt überzulaufen, Spalten etwas breiter */
.nav__unter a, .nav__txt, .nav__txt b, .nav__txt small { white-space: normal; min-width: 0; }
@media (min-width: 1081px) { .nav__unter { grid-auto-columns: 310px; } }

/* Echte Screenshots in Anleitungen: in Originalgröße, nie hochskaliert, mit Rahmen wie ein Fenster */
.app-bild { margin: 1.2em 0 1.6em; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.inhalt .app-bild img { display: block; width: auto; max-width: 100%; height: auto; border: 1px solid var(--linie-2); border-radius: var(--r-klein); box-shadow: var(--schatten-weich); background: #fff; }
.app-bild figcaption { font-size: 0.85rem; color: var(--text-3); text-align: center; max-width: 60ch; }

/* Kauf vorübergehend pausiert (KAUF_PAUSE in generator/pakete.mjs) */
.kauf-pause { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--r-klein); background: var(--grund-blau); color: var(--blau-dunkel); font-size: 0.9rem; line-height: 1.45; }
.knopf[data-pause]:disabled { opacity: .55; cursor: not-allowed; }