/* Shop Ruhrpott Guitars – Look der Tester-Seite (Plugins/Testpaket/make_webseite.py), Farben aus Proberaum
   (Source/UI/Look.h): dunkler Grund, cremefarbene Felder mit farbiger Kopfleiste, Schrift Lato.
   Petrol = Proberaum, Rost = Plugins, Messing = Bundles und Infos. */
@font-face { font-family: "Lato"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/Lato-Regular.ttf") format("truetype"); }
@font-face { font-family: "Lato"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/Lato-Bold.ttf") format("truetype"); }
:root {
  --grund: #2b2824; --kopf: #26231f; --feld: #e8dfc8; --feld-dunkel: #d6cbb0; --creme: #f3ecdb;
  --tinte: #2b2621; --tinte-weich: #6b6156; --tinte-blass: #8b8172; --rand: #c9bd9f; --linie: #b9ad92;
  --kopftext: #a59c8c; --petrol: #2f6e6a; --rost: #b5652a; --messing: #8a7a3a; --led: #d64a2a;
  --chip: #3a352f; --chip-rand: #5a5148;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--grund); color: var(--tinte);
  font: 17px/1.6 "Lato", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; }
a { color: var(--rost); }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 20px; }

/* Kopf */
.seitenkopf { background: var(--kopf); border-bottom: 1px solid #3f3933; }
.seitenkopf .wrap { display: flex; align-items: center; gap: 18px; padding-top: 22px; padding-bottom: 22px; }
.seitenkopf .marke { flex: none; line-height: 0; }
.seitenkopf img { width: 56px; height: 56px; }
.seitenkopf .titel { flex: 1; min-width: 0; }
.seitenkopf h1 { margin: 0; font-weight: 700; font-size: clamp(20px, 3.6vw, 30px); letter-spacing: .22em;
  text-transform: uppercase; line-height: 1.2; }
.seitenkopf h1 a { color: var(--creme); text-decoration: none; }
.seitenkopf p { margin: 4px 0 0; color: var(--kopftext); font-size: 13px; letter-spacing: .18em; text-transform: uppercase; }
.korb { flex: none; display: flex; align-items: center; gap: 8px; background: var(--chip); border: 1px solid var(--chip-rand);
  color: var(--creme); text-decoration: none; padding: 7px 14px; border-radius: 8px; font-size: 14px; letter-spacing: .06em; }
.korb:hover { border-color: var(--kopftext); }
.korb .zahl { background: var(--rost); border-radius: 10px; min-width: 22px; padding: 0 6px; text-align: center;
  font-weight: 700; font-size: 13px; }
/* Hinweis-Banner (Admin „Shop“) und Kasse geschlossen */
.hinweisband { color: var(--creme); font-size: 15px; font-weight: 700; padding: 9px 0; }
.hinweisband.messing { background: var(--messing); }
.hinweisband.rost { background: var(--rost); }
.hinweisband.petrol { background: var(--petrol); }
.hinweisband a { color: var(--creme); white-space: nowrap; }
.rechtstext h1 { font-size: 26px; margin: 0 0 14px; }
.rechtstext h2 { font-size: 20px; margin: 22px 0 8px; }
.rechtstext h3 { font-size: 17px; margin: 18px 0 6px; }
.rechtstext table { border-collapse: collapse; margin: 0 0 14px; }
.rechtstext td, .rechtstext th { border: 1px solid var(--linie); padding: 6px 8px; vertical-align: top; text-align: left; }
.liste th.breit { width: 22%; }
.liste .balken { margin-top: 4px; }
.neue-datei { border-top: 1px solid var(--linie); padding-top: 10px; margin-top: 10px; }
.umbruch { word-break: break-all; }
.code-feld { width: 100%; font: 14px/1.5 ui-monospace, Menlo, monospace; color: var(--tinte); background: var(--creme);
  border: 1px solid var(--rand); border-radius: 8px; padding: 9px 11px; }
.hinweisband.vorschau { border-radius: 8px; padding: 9px 14px; margin: 0 0 14px; }
.testbetrieb { background: var(--led); color: var(--creme); font-size: 14px; font-weight: 700; letter-spacing: .04em; padding: 7px 0; }

main.wrap { padding-top: 26px; padding-bottom: 10px; }

/* Felder */
.panel { background: var(--feld); border-radius: 14px; overflow: hidden; margin: 0 0 22px;
  box-shadow: 0 2px 0 rgba(0,0,0,.25); scroll-margin-top: 16px; }
.kopfleiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px;
  padding: 12px 22px; color: var(--creme); }
.kopfleiste h2 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.petrol .kopfleiste { background: var(--petrol); }
.rost .kopfleiste { background: var(--rost); }
.messing .kopfleiste { background: var(--messing); }
.rechts { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px;
  border-radius: 6px; background: rgba(243,236,219,.16); border: 1px solid rgba(243,236,219,.45); color: var(--creme); }
.inhalt { padding: 20px 24px 22px; }
.inhalt > :first-child { margin-top: 0; }
.inhalt ul { padding-left: 20px; margin: 10px 0; }
.inhalt li { margin: 4px 0; }
.klein { font-size: 14px; color: var(--tinte-weich); }

/* Angebote oben: Proberaum und die Bundles */
.angebote { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 22px; }
.angebote .panel { margin: 0; display: flex; flex-direction: column; }
.angebot .inhalt { display: flex; flex-direction: column; flex: 1; }
.angebot h3 { margin: 0 0 6px; font-size: 24px; line-height: 1.25; }
.angebot p { margin: 0 0 10px; }
.preiszeile { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: auto !important; }
.preis { font-weight: 700; font-size: 22px; color: var(--tinte); white-space: nowrap; }
.preis.gross { font-size: 30px; }
.statt { color: var(--tinte-weich); font-size: 15px; text-decoration: line-through; }

/* Knöpfe */
.knopf { display: block; text-align: center; background: var(--rost); color: var(--creme); border: 0; cursor: pointer;
  text-decoration: none; font: inherit; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: 15px;
  padding: 13px 18px 11px; border-radius: 9px; box-shadow: inset 0 -2px 0 rgba(0,0,0,.18); }
.knopf:hover { filter: brightness(1.08); }
.knopf.aus, .knopf:disabled { background: var(--feld-dunkel); color: var(--tinte-blass); cursor: not-allowed; box-shadow: none; filter: none; }
.kauf { display: flex; align-items: center; justify-content: flex-end; gap: 18px; margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--linie); }
.kauf .knopf { min-width: 240px; }
.links { margin: 12px 0 0; }
.kauf + .links, .system + .links { text-align: right; }
.link { font-weight: 700; text-decoration: none; }
.link::after { content: " ›"; }
.link.aus { color: var(--tinte-blass); cursor: not-allowed; }

/* So funktioniert's */
.vierspaltig { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 28px; }
.vierspaltig h3 { margin: 0 0 4px; font-size: 17px; }
.vierspaltig p { margin: 0; font-size: 16px; }

/* Produkte */
h2.abschnitt { color: var(--creme); font-size: 15px; letter-spacing: .22em; text-transform: uppercase; margin: 36px 0 12px; }
nav.plugins { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
nav.plugins a { background: var(--chip); border: 1px solid var(--chip-rand); color: var(--creme); text-decoration: none;
  padding: 6px 13px; border-radius: 8px; font-size: 14px; letter-spacing: .04em; }
nav.plugins a:hover { border-color: var(--kopftext); }
.kurz { margin: 0 0 16px; color: var(--tinte-weich); font-size: 19px; }
figure { margin: 0 0 16px; }
figure img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--rand); }
figcaption { font-size: 14px; color: var(--tinte-weich); margin-top: 6px; }
.tipp { background: var(--feld-dunkel); border-radius: 9px; padding: 10px 14px; font-size: 16px; }
.tipp span { font-weight: 700; color: var(--rost); letter-spacing: .12em; text-transform: uppercase; font-size: 13px; margin-right: 6px; }

/* Fuß */
footer { color: var(--kopftext); font-size: 13px; padding: 10px 0 48px; }
footer a { color: var(--kopftext); }
.rechtliches { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 10px; font-size: 14px; }

@media (max-width: 900px) {
  .angebote { grid-template-columns: 1fr; }
  .vierspaltig { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .wrap { padding: 0 16px; }
  .seitenkopf .wrap { gap: 12px; }
  .seitenkopf img { width: 44px; height: 44px; }
  .seitenkopf p { letter-spacing: .1em; }
  .inhalt { padding: 16px 16px 18px; }
  .kopfleiste { padding: 11px 16px; }
  .vierspaltig { grid-template-columns: 1fr; }
  .kauf { flex-wrap: wrap; justify-content: space-between; }
  .kauf .knopf { min-width: 0; flex: 1 1 100%; }
  .kauf + .links, .system + .links { text-align: center; }
}
@media (max-width: 480px) {
  .korb { padding: 6px 9px; font-size: 0; gap: 0; }   /* nur die Zahl */
  .korb .zahl { font-size: 13px; }
}

/* Einführung oben */
.einleitung .spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.einleitung .spalten p { margin: 0 0 12px; }
.einleitung .signatur { margin: 4px 0 0; color: var(--tinte-weich); font-size: 15px; letter-spacing: .08em; }

/* Dreingabe (z. B. Backline): kleines Bild neben dem Text */
.extra { display: flex; gap: 18px; align-items: flex-start; background: var(--feld-dunkel); border-radius: 10px;
  padding: 12px; margin: 14px 0; }
.extra img { display: block; width: 240px; height: auto; border-radius: 7px; border: 1px solid var(--rand); }
.extra h3 { margin: 2px 0 4px; font-size: 17px; }
.extra p { margin: 0; font-size: 16px; }
.system { margin: 8px 0 0; text-align: right; font-size: 14px; color: var(--tinte-weich); }

@media (max-width: 760px) {
  .einleitung .spalten { grid-template-columns: 1fr; }
  .extra { flex-direction: column; }
  .extra img { width: 100%; max-width: 320px; }
  .system { text-align: center; }
}

/* Meldungen (z. B. „liegt jetzt im Warenkorb“) */
.meldung { background: var(--creme); border-left: 5px solid var(--petrol); border-radius: 10px; padding: 12px 18px;
  margin: 0 0 18px; font-size: 16px; }
.meldung.fehler { border-left-color: var(--led); }
.kauf form { margin: 0; }
.angebot form { margin: 0; }
.angebot .knopf { width: 100%; }

/* Warenkorb und Kasse */
table.posten { width: 100%; border-collapse: collapse; margin: 0 0 14px; }
.posten td { padding: 10px 6px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.posten td:first-child { padding-left: 0; }
.posten .betrag { text-align: right; white-space: nowrap; font-weight: 700; }
.posten .weg { width: 1%; text-align: right; }
.posten .summe td { border-bottom: 0; font-size: 19px; font-weight: 700; padding-top: 14px; }
.posten form { margin: 0; }
.entfernen { background: none; border: 0; color: var(--tinte-weich); font: inherit; font-size: 14px; cursor: pointer;
  text-decoration: underline; padding: 0; }
.entfernen:hover { color: var(--led); }
.kauf .link { margin-right: auto; }
/* Gutschein im Warenkorb */
.posten .gutschein-zeile td { color: var(--petrol); }
.posten .gutschein-zeile .klein { color: var(--tinte-weich); }
.gutschein-form { display: flex; gap: 10px; max-width: 420px; }
.gutschein-form input { flex: 1; min-width: 0; font: inherit; color: var(--tinte); background: var(--creme); text-transform: uppercase;
  letter-spacing: .06em; border: 1px solid var(--rand); border-radius: 8px; padding: 9px 11px; }
.gutschein-form input:focus { outline: 2px solid var(--petrol); outline-offset: 1px; border-color: var(--petrol); }
.knopf.klein { font-size: 13px; padding: 10px 14px 8px; }

/* Formulare (Kasse) */
.kasse { display: grid; grid-template-columns: 3fr 2fr; gap: 22px; align-items: start; }
.kasse .panel { margin: 0; }
.feld { display: block; margin: 0 0 14px; }
.feld > span { display: block; font-weight: 700; font-size: 15px; margin: 0 0 4px; }
.feld > span span, .feld > span label { display: inline; }
.feld > span input[type=checkbox] { width: auto; margin: 0 3px 0 0; padding: 0; vertical-align: -1px; }
.feld span i { font-weight: 400; font-style: normal; color: var(--tinte-weich); }
.feld input, .feld select { width: 100%; font: inherit; color: var(--tinte); background: var(--creme);
  border: 1px solid var(--rand); border-radius: 8px; padding: 9px 11px; }
.feld input:focus, .feld select:focus { outline: 2px solid var(--petrol); outline-offset: 1px; border-color: var(--petrol); }
.feld.fehler input, .feld.fehler select { border-color: var(--led); }
.feld em { display: block; color: var(--led); font-style: normal; font-size: 14px; margin-top: 3px; }
.hinweis { margin: -8px 0 14px; }
details { margin: 4px 0 8px; }
summary { cursor: pointer; color: var(--rost); font-weight: 700; margin: 0 0 12px; }
.zweifeld { display: grid; grid-template-columns: 1fr 2fr; gap: 0 12px; }
.haken { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; font-size: 16px; }
.haken input { margin-top: 5px; width: 18px; height: 18px; flex: none; accent-color: var(--rost); }
@media (max-width: 860px) { .kasse { grid-template-columns: 1fr; } }
.zweispalten-klein { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.zweispalten-klein .link { margin-left: 6px; }
.meldung-klein { min-height: 1.4em; margin: 8px 0 0; color: var(--led); font-size: 15px; }
#paypal-knoepfe { max-width: 420px; margin: 16px 0 0; }
.haken a { color: var(--rost); }
@media (max-width: 760px) { .zweispalten-klein { grid-template-columns: 1fr; } }

/* Hochformat-Bilder schmaler; Bundle-Bereich */
figure.hoch { max-width: 460px; margin-left: auto; margin-right: auto; }
.bundlezeile { margin-top: 12px; padding-top: 12px; }
.bundlezeile + .bundlezeile { border-top: 0; margin-top: 4px; padding-top: 4px; }
.bundlezeile .was { margin-right: auto; }
@media (max-width: 760px) { .bundlezeile .was { flex: 1 1 100%; } }

/* Danke-Seite: Lizenzschlüssel und Downloads */
.lizenz { display: flex; flex-direction: column; gap: 4px; background: var(--creme); border: 2px dashed var(--petrol);
  border-radius: 10px; padding: 14px 18px; margin: 0 0 18px; }
.lizenz code { font: 700 26px/1.2 "SF Mono", Menlo, Consolas, monospace; letter-spacing: .06em; color: var(--tinte); }
.lizenz + h3 { margin: 0 0 6px; }
.testen-kurz { font-size: 14px; color: var(--tinte-weich); margin: 10px 0 0 !important; }
.testen-kurz span { font-weight: 700; color: var(--tinte); }
.testen-kurz a { color: var(--rost); font-weight: 700; }
/* Angebots-Kacheln: Test-Links immer drei Zeilen hoch, damit Preise und Knöpfe aller Kacheln auf einer Linie stehen */
.angebot .testen-kurz { min-height: calc(3 * 1.45em); line-height: 1.45; }
.asio { display: flex; align-items: center; gap: 12px; margin: 8px 0 4px; }
.asio img { flex: none; width: 48px; height: auto; }
.asio p { margin: 0; }
.download-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 6px 0 4px; }
.download-kachel { display: flex; flex-direction: column; gap: 3px; background: var(--creme); border: 1px solid var(--rand); border-radius: 10px;
  padding: 12px 14px; text-decoration: none; color: var(--tinte); }
.download-kachel b { color: var(--rost); }
.download-kachel:hover { border-color: var(--rost); }
.downloads-liste { list-style: none; padding: 0 !important; }
.downloads-liste li { margin: 0 0 8px !important; }
.downloads-liste .klein { margin-left: 8px; }

/* Verwaltung */
.schmal { max-width: 460px; margin: 0 auto; }
.admin-nav { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 20px; }
.admin-nav a { background: var(--chip); border: 1px solid var(--chip-rand); color: var(--creme); text-decoration: none;
  padding: 6px 13px; border-radius: 8px; font-size: 14px; }
.admin-nav a.aktiv { background: var(--rost); border-color: var(--rost); }
.admin-nav .wer { margin-left: auto; color: var(--kopftext); font-size: 14px; }
.admin-nav .wer a { background: none; border: 0; padding: 0; color: var(--kopftext); text-decoration: underline; }
.kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0 0 22px; }
.kachel { background: var(--feld); border-radius: 12px; padding: 14px 18px; display: flex; flex-direction: column; }
.kachel span { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--tinte-weich); font-weight: 700; }
.kachel b { font-size: 30px; line-height: 1.3; }
.kachel i { font-style: normal; font-size: 14px; color: var(--tinte-weich); }
.balken { display: block; width: 100%; height: 14px; border-radius: 7px; }
.balken .leer { fill: var(--feld-dunkel); }
.balken .voll { fill: var(--petrol); }
table.liste { width: 100%; border-collapse: collapse; font-size: 15px; }
.liste th { text-align: left; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-weich);
  border-bottom: 2px solid var(--linie); padding: 6px; }
.liste td { padding: 8px 6px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.liste td a { color: var(--tinte); }
.liste .betrag { text-align: right; white-space: nowrap; }
.status { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 6px;
  background: var(--feld-dunkel); color: var(--tinte-weich); white-space: nowrap; }
.status.paid { background: var(--petrol); color: var(--creme); }
.status.refunded { background: var(--led); color: var(--creme); }
.warn { color: var(--led); font-weight: 700; }
form.aktion { display: inline-block; margin: 0 6px 6px 0; }
.klein-knopf { display: inline-block; font-size: 12px; padding: 8px 12px 7px; letter-spacing: .1em; }
.knopf.gefahr { background: var(--led); }
.daten { display: grid; grid-template-columns: max-content 1fr; gap: 4px 18px; margin: 0 0 12px; font-size: 15px; }
.daten dt { color: var(--tinte-weich); }
.daten dd { margin: 0; }
.filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; }
.filter input, .filter select { font: inherit; font-size: 15px; padding: 6px 10px; border: 1px solid var(--rand); border-radius: 8px; background: var(--creme); }
@media (max-width: 760px) { .kacheln { grid-template-columns: 1fr; } .daten { grid-template-columns: 1fr; } }
.weg-zeile td { color: var(--tinte-blass); text-decoration: line-through; }
.weg-zeile td .klein, .weg-zeile td form { text-decoration: none; }
.alt-zeile td { color: var(--tinte-blass); }
.rechts a.chip { text-decoration: none; }
.qr { width: 220px; max-width: 100%; background: #fff; border-radius: 10px; padding: 6px; margin: 6px 0 10px; }
.qr svg { display: block; width: 100%; height: auto; }
pre.codes { font: 700 18px/1.6 "SF Mono", Menlo, Consolas, monospace; background: var(--feld); border-radius: 8px; padding: 10px 14px; margin: 8px 0 0; }
pre.codes.schluessel { font-size: 14px; white-space: pre-wrap; word-break: break-all; }
input.code { font: 700 22px/1.2 "SF Mono", Menlo, Consolas, monospace; letter-spacing: .2em; max-width: 220px; }

/* Sale */
.preis.sale { color: var(--led); }
.sale-hinweis { display: block; font-size: 13px; color: var(--led); font-weight: 700; margin-top: 2px; }
.system .sale-hinweis { display: inline; }
.pfeile form { margin: 0 2px 0 0; } .pfeile .entfernen { font-size: 16px; text-decoration: none; }
.feld textarea { width: 100%; font: inherit; font-size: 15px; color: var(--tinte); background: var(--creme);
  border: 1px solid var(--rand); border-radius: 8px; padding: 8px 10px; resize: vertical; }
.vorgabe { color: var(--tinte-blass); font-weight: 400; }
.geaendert { color: var(--rost); font-weight: 700; }
.feld span label.klein { font-weight: 400; margin-left: 6px; }
.bilder-edit { display: flex; flex-direction: column; gap: 12px; margin: 0 0 16px; }
.bild-zeile { display: grid; grid-template-columns: 200px 1fr; gap: 14px; align-items: start; background: var(--feld-dunkel);
  border-radius: 10px; padding: 10px; }
.bild-zeile img { width: 100%; border-radius: 6px; border: 1px solid var(--rand); }
.bild-zeile .feld { margin-bottom: 8px; }
.zahl-klein { width: 60px; font: inherit; padding: 2px 6px; border: 1px solid var(--rand); border-radius: 6px; background: var(--creme); }
@media (max-width: 760px) { .bild-zeile { grid-template-columns: 1fr; } }

/* Kundenbereich */
.konto-kopf { color: var(--creme); margin: 0 0 16px; }
.konto-kopf .klein { color: var(--kopftext); }
.konto-kopf form.aktion { margin: 0 0 0 10px; }
.konto-kopf .entfernen { color: var(--kopftext); }
.schmal-text { max-width: 560px; }
.liste th.breit { width: 22%; }
.liste .balken { margin-top: 4px; }
.neue-datei { border-top: 1px solid var(--linie); padding-top: 10px; margin-top: 10px; }
.umbruch { word-break: break-all; }
.code-feld { font-family: "SF Mono", Menlo, Consolas, monospace !important; letter-spacing: .06em; text-transform: uppercase; }
.konto-link { flex: none; color: var(--kopftext); font-size: 14px; letter-spacing: .06em; text-decoration: none; margin-right: 4px; }
.konto-link:hover { color: var(--creme); }
@media (max-width: 480px) { .konto-link { font-size: 12px; } }
.kasse .bundlezeile { flex-wrap: wrap; gap: 8px 14px; }
.kasse .bundlezeile .knopf { min-width: 0; }
.kasse .bundlezeile .was { flex: 1 1 140px; }

/* Sprachumschalter */
.sprache { flex: none; display: flex; gap: 2px; font-size: 13px; letter-spacing: .08em; }
.sprache a { color: var(--kopftext); text-decoration: none; padding: 3px 6px; border-radius: 5px; }
.sprache a.aktiv { color: var(--creme); background: var(--chip); }
.sprache a:hover { color: var(--creme); }

/* Info-Mails: Hinweis in der Kasse, Anmeldung (Feld „falle“ nur für Bots) */
.infomail-hinweis { margin: 4px 0 14px; }
.infomail-hinweis p { margin: 0 0 6px; }
.falle { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.infomail-form .haken { margin: 6px 0 12px; }

.rechtstext.zusatz { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--linie, rgba(0,0,0,.12)); }

/* wie auf der Tester-Seite: weitere Bilder kleiner nebeneinander; kleines ASIO-Logo im Windows-Tipp */
.bilderreihe { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 18px; }
.asio-klein { height: 36px; width: auto; float: right; margin: 0 0 6px 12px; }
.tipp::after { content: ""; display: block; clear: both; }
.tipp + .tipp { margin-top: 10px; }
@media (max-width: 640px) { .bilderreihe { grid-template-columns: 1fr; } }

/* Presseseite (presse/) */
.fakten { width: 100%; border-collapse: collapse; margin: 0 0 12px; }
.fakten th, .fakten td { text-align: left; vertical-align: top; padding: 9px 10px; border-bottom: 1px solid var(--linie); }
.fakten th { width: 28%; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-weich); }
.fakt-zeile { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
.fakt-zeile > span:last-child { white-space: nowrap; font-weight: 700; }
.presse-bilder { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 18px; }
.presse-bilder figcaption { font-size: 14px; line-height: 1.4; margin-top: 6px; }
.zweifeld.gleich { grid-template-columns: 1fr 1fr; }
.feld-titel { margin: 0 0 6px; }
@media (max-width: 640px) {
  .fakten th { display: block; width: auto; border-bottom: 0; padding-bottom: 0; }
  .fakten td { display: block; padding-top: 4px; }
  .presse-bilder, .zweifeld.gleich { grid-template-columns: 1fr; }
}

/* Admin › Presse */
.mailvorschau { background: var(--creme); border: 1px solid var(--rand); border-radius: 10px; padding: 10px 14px; margin: 6px 0 10px; }
.mailvorschau pre, .verlauf pre { white-space: pre-wrap; font: inherit; font-size: 15px; margin: 6px 0 0; }
.verlauf { list-style: none; padding: 0 !important; }
.verlauf li { border-left: 3px solid var(--linie); padding: 4px 0 6px 12px; margin: 0 0 10px !important; }
.verlauf li.mail { border-left-color: var(--rost); }
.verlauf li.anfrage { border-left-color: var(--petrol); }
.status-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.notiz-form { margin: 0 0 16px; }