/* Pressbiene Designer 0.2.0: gemeinsame Bausteine aus dem Shop-Theme (Basisdesign B, PressbieneTheme 1.5.x) für ALLE Seiten:
   Info-Leiste, Kopf mit Navigation und Werkstatt-Knopf, Fuß, Knöpfe (Aufkleber mit Steppnaht), Chips, Felder, Textseiten.
   Quellen der Werte: scss/pressbiene/_kopf.scss, _bedienelemente.scss, _fuss.scss, _kanten.scss, _tokens.scss. Kommt nach tokens.css und basis.css. */
:root {
  --info-h: 44px; --kopf-zeile-h: 72px; --werk-h: 56px;
  --shop-h: calc(var(--info-h) + var(--kopf-zeile-h) + 2px);
  --kopf-h: calc(var(--shop-h) + var(--werk-h));
  --tex-lineal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 14' width='40' height='14'%3E%3Cg stroke='%23000' stroke-width='1.6' stroke-linecap='butt'%3E%3Cpath d='M0.8 0 V14'/%3E%3Cpath d='M20.4 0 V9'/%3E%3Cpath d='M4.8 0 V4'/%3E%3Cpath d='M8.8 0 V4'/%3E%3Cpath d='M12.8 0 V4'/%3E%3Cpath d='M16.8 0 V4'/%3E%3Cpath d='M24.8 0 V4'/%3E%3Cpath d='M28.8 0 V4'/%3E%3Cpath d='M32.8 0 V4'/%3E%3Cpath d='M36.8 0 V4'/%3E%3C/g%3E%3C/svg%3E");
  --tex-leinen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='h' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006 0.42' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .09  0 0 0 0 .2  0 0 0 0 .24  2.4 0 0 0 -1.0'/%3E%3C/filter%3E%3Cfilter id='v' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.42 0.006' numOctaves='3' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .09  0 0 0 0 .2  0 0 0 0 .24  2.4 0 0 0 -1.0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23h)' opacity='.15'/%3E%3Crect width='220' height='220' filter='url(%23v)' opacity='.12'/%3E%3C/svg%3E");
  --tex-zack-oben: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10' width='20' height='10'%3E%3Cpath d='M0 10 L10 0 L20 10 Z'/%3E%3C/svg%3E");
}
:root[data-theme="dunkel"] { --tex-leinen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='h' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006 0.42' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .96  0 0 0 0 .94  0 0 0 0 .89  2.4 0 0 0 -1.0'/%3E%3C/filter%3E%3Cfilter id='v' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.42 0.006' numOctaves='3' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .96  0 0 0 0 .94  0 0 0 0 .89  2.4 0 0 0 -1.0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23h)' opacity='.15'/%3E%3Crect width='220' height='220' filter='url(%23v)' opacity='.12'/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) { --tex-leinen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='h' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006 0.42' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .96  0 0 0 0 .94  0 0 0 0 .89  2.4 0 0 0 -1.0'/%3E%3C/filter%3E%3Cfilter id='v' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.42 0.006' numOctaves='3' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .96  0 0 0 0 .94  0 0 0 0 .89  2.4 0 0 0 -1.0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23h)' opacity='.15'/%3E%3Crect width='220' height='220' filter='url(%23v)' opacity='.12'/%3E%3C/svg%3E"); } }
@media (max-width: 899px) { :root { --kopf-zeile-h: 64px; } }
@media (max-width: 599px) { :root { --info-h: 0px; --kopf-zeile-h: 56px; --werk-h: 52px; } }

html { scroll-padding-top: 24px; }
body { font-family: var(--f-text); font-size: 1rem; line-height: 1.5; color: var(--tinte); background: var(--grund); overflow-x: hidden; }
::selection { background: var(--gelb); color: var(--tinte-fest); }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; border-radius: 2px; box-shadow: none; }
@media (forced-colors: active) { :focus-visible { outline: 3px solid CanvasText !important; outline-offset: 2px !important; } }

/* Doodles aus dem Shop: ein Strichsatz, 2,5 px bei jeder Größe, gelber Fleck dahinter */
.pb-dd { flex: none; width: 1.75rem; height: 1.75rem; fill: none; stroke: currentColor; stroke-width: 2.5px; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.fleck { fill: var(--gelb); stroke: none; }

/* ================= Rahmen: Info-Leiste und Kopf wie im Shop ================= */

.pb-info-leiste { flex: none; display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 44px; padding: 0 4px 0 16px; background: var(--tuerkis-zart); color: var(--tinte); font-size: 0.9375rem; line-height: 1.3; text-align: center; }
.pb-info-leiste__text { flex: 1 1 auto; margin: 0; padding: 4px 0; text-wrap: balance; }
.pb-modus-schalter { position: relative; display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: inherit; font-family: var(--f-mono); font-size: 0.875rem; font-weight: 700; cursor: pointer; }
.pb-modus-schalter:hover { background: var(--gelb); color: var(--auf-gelb); }
.pb-modus-schalter .ico { width: 24px; height: 24px; --fleck-an: 1; --fleck: #FFDC3C; }
@media (max-width: 599px) { .pb-info-leiste { display: none; } }

.pb-kopf { position: relative; z-index: 50; flex: none; border-bottom: 2px dashed var(--naht); background: var(--grund); color: var(--tinte); }
.pb-kopf__innen { max-width: 1264px; margin: 0 auto; padding-inline: 16px; }
@media (min-width: 992px) { .pb-kopf__innen { padding-inline: 20px; } }
.pb-kopf__zeile { display: flex; align-items: center; gap: 8px; min-height: var(--kopf-zeile-h); padding-block: 10px; }
@media (max-width: 899px) { .pb-kopf__zeile { padding-block: 6px; } }
.pb-kopf__logo { flex: none; display: flex; align-items: center; min-height: 44px; padding: 6px 0; line-height: 0; text-decoration: none; border-radius: 8px; }
.pb-kopf__logo img { display: block; width: 116px; height: auto; aspect-ratio: 924 / 188; }
@media (min-width: 421px) { .pb-kopf__logo img { width: 132px; } }
@media (min-width: 992px) { .pb-kopf__logo img { width: 188px; } }

.pb-kopf__nav { display: none; flex: 1 1 auto; min-width: 0; margin-left: 16px; }
@media (min-width: 992px) { .pb-kopf__nav { display: block; } }
.pb-nav__liste { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.pb-nav__link { position: relative; display: inline-flex; align-items: center; min-height: 48px; padding: 0 14px; border-radius: 8px; color: var(--tinte); font-family: var(--f-display); font-size: 1.1875rem; font-weight: 700; line-height: 1; text-decoration: none; }
.pb-nav__link:hover, .pb-nav__link:focus-visible { background: var(--gelb); color: var(--auf-gelb); }

/* Menü unter 992 px: klappt unter dem Kopf auf */
@media (max-width: 991px) {
  .pb-kopf[data-menue="auf"] .pb-kopf__nav { display: block; position: absolute; top: 100%; left: 0; right: 0; margin: 0; padding: 8px 16px 16px; background: var(--grund); border-bottom: 2px dashed var(--naht); box-shadow: 0 4px 0 var(--sh); }
  .pb-kopf[data-menue="auf"] .pb-nav__liste { flex-direction: column; gap: 0; }
  .pb-kopf[data-menue="auf"] .pb-nav__link { width: 100%; min-height: 48px; }
}

.pb-kopf__aktionen { display: flex; align-items: center; gap: 4px; margin-left: auto; }
@media (min-width: 992px) { .pb-kopf__aktionen { gap: 8px; } }
.pb-kopf__knopf { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--tinte); text-decoration: none; cursor: pointer; }
.pb-kopf__knopf:hover { background: var(--gelb); color: var(--auf-gelb); }
.pb-kopf__konto { display: none; }
@media (min-width: 576px) { .pb-kopf__konto { display: inline-grid; } }
@media (min-width: 992px) { .pb-kopf__menue { display: none; } }

/* Werkstatt-Knopf: Aufkleber mit Maßband-Streifen und kleiner Biene (dieselbe Datei wie im Shop). Im Designer ist er die aktuelle Seite. */
.pb-werkstatt { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 14px 14px 6px 8px; border: 2.5px solid var(--tinte-fest); border-radius: 14px; background: var(--gelb); box-shadow: 3px 3px 0 var(--sh-voll); color: var(--auf-gelb); font-family: var(--f-display); font-size: 1.0625rem; font-weight: 700; line-height: 1; text-decoration: none; rotate: -2deg; transition: rotate var(--tempo) var(--auslauf), transform var(--tempo) var(--auslauf); }
.pb-werkstatt::before { content: ""; position: absolute; top: 3px; right: 6px; left: 6px; height: 8px; background: var(--auf-gelb); -webkit-mask: var(--tex-lineal) left top / 40px 14px repeat-x; mask: var(--tex-lineal) left top / 40px 14px repeat-x; }
.pb-werkstatt:hover { background: var(--gelb); color: var(--auf-gelb); rotate: 0deg; transform: scale(1.04); }
.pb-werkstatt:hover .pb-werkstatt__biene { animation: pb-wippen 240ms var(--auslauf); }
.pb-werkstatt:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }
.pb-werkstatt__biene { display: grid; place-items: center; width: 32px; height: 32px; border: 2px solid var(--tinte-fest); border-radius: 50%; background: #fff; }
.pb-werkstatt__biene img { display: block; width: 22px; height: 22px; }
@media (max-width: 899px) { .pb-werkstatt { padding: 14px 10px 6px 6px; font-size: 1rem; } }
@media (max-width: 599px) { .pb-werkstatt { min-height: 44px; } .pb-kopf__zeile { padding-block: 4px; } }
@media (max-width: 420px) { .pb-werkstatt { gap: 5px; padding: 14px 8px 6px 5px; font-size: 0.9375rem; } .pb-werkstatt__biene { width: 28px; height: 28px; } }
@keyframes pb-wippen { 0% { transform: rotate(0); } 30% { transform: rotate(-14deg); } 65% { transform: rotate(10deg); } 100% { transform: rotate(0); } }

/* ================= Knöpfe: Aufkleber mit Naht (wie .btn im Shop) ================= */
.knopf { min-height: 44px; padding: 0.5rem 1.25rem; gap: 10px; font-family: var(--f-mono); font-size: 0.9375rem; font-weight: 700; line-height: 1.25; letter-spacing: 0; color: var(--auf-gelb); background: var(--gelb); border: 2.5px solid var(--tinte-fest); border-radius: 14px; box-shadow: 4px 4px 0 var(--sh-voll); white-space: normal; transition: transform var(--tempo) var(--auslauf), box-shadow var(--tempo) var(--auslauf); }
.knopf:not(.leise):not(.icon)::after { content: ""; position: absolute; inset: 4px; border: 2px dashed currentColor; border-radius: 10px; opacity: 0.55; pointer-events: none; }
.knopf:hover { background: var(--gelb); color: var(--auf-gelb); transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--sh-voll); }
.knopf:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--sh-voll); }
.knopf:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }
.knopf.gross { min-height: 52px; padding: 0.75rem 1rem; font-size: 1rem; }
.knopf.zweit { background: var(--zettel); color: var(--tinte); border-color: var(--tinte); }
.knopf.zweit:hover { background: var(--tuerkis-zart); color: var(--tinte); }
.knopf.leise { background: transparent; color: var(--tinte); border-color: transparent; box-shadow: none; transform: none; }
.knopf.leise:hover { background: var(--gelb); color: var(--auf-gelb); box-shadow: none; transform: none; }
.knopf.leise:active { transform: none; }
.knopf.zufall { background: var(--tuerkis); color: var(--tinte-fest); border-color: var(--tinte-fest); }
.knopf.zufall:hover { background: var(--tuerkis); color: var(--tinte-fest); filter: none; }
.knopf.icon { padding: 0; width: 44px; box-shadow: 2px 3px 0 var(--sh-voll); }
.knopf.icon.leise { box-shadow: none; }
.knopf.gefahr { background: var(--fehler); color: var(--zettel); border-color: var(--tinte-fest); }
.knopf.leise[disabled] { background: transparent; border-color: transparent; color: var(--tinte-2); opacity: 0.55; }
.knopf[disabled], .knopf[aria-disabled="true"] { opacity: 1; border-color: var(--kante); background: var(--tuerkis-zart); color: var(--tinte-2); box-shadow: none; transform: none; cursor: not-allowed; }
.knopf.leise[disabled] { box-shadow: none; }
.knopf[disabled]::after, .knopf[aria-disabled="true"]::after { display: none; }
.leer .knopf svg, .leer .knopf .ico { width: 24px; height: 24px; max-width: none; }
.knopf .ico { --fleck-an: 0; }

/* Chips: gestrichelter Rahmen, gedrückt = gelb mit Tinte-Rand (wie ein gewählter Eintrag im Shop) */
.chip { min-height: 44px; padding: 0 12px; font-family: var(--f-mono); font-size: 0.875rem; font-weight: 700; color: var(--tinte); background: var(--zettel); border: 2px dashed var(--kante); border-radius: var(--r-feld); }
.chip:hover { background: var(--tuerkis-zart); }
.chip[aria-pressed="true"] { background: var(--gelb); color: var(--auf-gelb); border: 2px solid var(--tinte-fest); }
.chip[aria-disabled="true"] { opacity: 1; background: var(--tuerkis-zart); color: var(--tinte-2); border-color: var(--kante); }

/* Felder wie .form-control im Shop */
.feld input[type="text"], .feld input[type="number"], .feld select { min-height: 48px; padding: 0.625rem 0.875rem; border: 2px solid var(--kante); border-radius: var(--r-feld); background-color: var(--zettel); color: var(--tinte); font-family: var(--f-text); font-size: 1rem; }
.feld input:focus, .feld select:focus { border-color: var(--tinte); outline: 3px solid var(--fokus); outline-offset: 2px; }
.feld > label, .feld > .label { font-family: var(--f-mono); font-size: var(--s-13); font-weight: 700; color: var(--tinte); }
.feld input:disabled, .feld input[readonly] { background: var(--tuerkis-zart); color: var(--tinte-2); }
.kasten input { border: 2px solid var(--kante); border-radius: 6px; background: var(--zettel); }
.kasten input:checked { background: var(--gelb); border-color: var(--tinte-fest); }
.kasten input::after { border-left-color: var(--tinte-fest); border-bottom-color: var(--tinte-fest); }
input[type="range"]::-webkit-slider-thumb { background: var(--gelb); border-color: var(--tinte-fest); }
input[type="range"]::-moz-range-thumb { background: var(--gelb); border-color: var(--tinte-fest); }
.einheit span { color: var(--tinte-2); }

/* ================= Textseiten (Meldeseite, Verwaltung) mit Kopf und Fuß des Shops ================= */
.pb-fuss { position: relative; margin-top: 4rem; padding: 3.5rem 0 1rem; background-color: var(--tuerkis-zart); background-image: var(--tex-leinen), repeating-linear-gradient(0deg, var(--faden) 0 1px, transparent 1px 5px), repeating-linear-gradient(90deg, var(--faden) 0 1px, transparent 1px 5px); -webkit-mask: var(--tex-zack-oben) left top / 20px 10px repeat-x, linear-gradient(#000, #000) left 9px / 100% calc(100% - 9px) no-repeat; mask: var(--tex-zack-oben) left top / 20px 10px repeat-x, linear-gradient(#000, #000) left 9px / 100% calc(100% - 9px) no-repeat; color: var(--tinte); }
.pb-fuss::before { content: ""; position: absolute; left: 0; right: 0; top: 26px; border-top: 2px dashed var(--naht); pointer-events: none; }
.pb-fuss__innen { max-width: 1264px; margin: 0 auto; padding-inline: 16px; }
@media (min-width: 992px) { .pb-fuss__innen { padding-inline: 20px; } }
.pb-fuss a { text-decoration-color: var(--tuerkis); text-decoration-thickness: 2px; text-underline-offset: 4px; color: var(--tinte); }
.pb-fuss a:hover { background: var(--gelb); color: var(--auf-gelb); text-decoration-color: var(--auf-gelb); }
.pb-fuss__marke { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding-bottom: 8px; }
.pb-fuss__marke a { display: inline-flex; align-items: center; min-height: 44px; line-height: 0; text-decoration: none; }
.pb-fuss__marke a:hover { background: none; }
.pb-fuss__marke img { display: block; width: 200px; max-width: 100%; height: auto; }
.pb-fuss__gruss { margin: 0; font-family: var(--f-hand); font-size: 1.25rem; font-weight: 500; line-height: 1.3; color: var(--tinte); }
.pb-fuss__spalten { display: grid; grid-template-columns: 1fr; gap: 8px 32px; padding-block: 16px; }
@media (min-width: 768px) { .pb-fuss__spalten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pb-fuss h2 { margin: 8px 0; font-family: var(--f-display); font-size: 1.25rem; font-weight: 700; color: var(--tinte); }
.pb-fuss p { margin: 0 0 0.75rem; }
.pb-fuss__liste { margin: 0; padding: 0; list-style: none; }
.pb-fuss__liste a { display: inline-flex; align-items: center; min-height: 44px; }
.pb-fuss__unten { margin: 0; padding: 16px 0 8px; border-top: 2px dashed var(--naht); text-align: center; font-size: 0.9375rem; color: var(--tinte-2); }
.pb-knopf { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0.5rem 1.5rem; margin-top: 0.5rem; border: 2.5px solid var(--tinte-fest); border-radius: 14px; background: var(--gelb); box-shadow: 4px 4px 0 var(--sh-voll); color: var(--auf-gelb) !important; font-family: var(--f-mono); font-size: 0.9375rem; font-weight: 700; line-height: 1.25; text-decoration: none !important; }
.pb-knopf::after { content: ""; position: absolute; inset: 4px; border: 2px dashed currentColor; border-radius: 10px; opacity: 0.55; pointer-events: none; }
.pb-knopf:hover { background: var(--gelb) !important; transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--sh-voll); }

body.textseite, body.verwaltungsseite { min-height: 100dvh; display: flex; flex-direction: column; }
body.textseite > main, body.verwaltungsseite > main { flex: 1 0 auto; width: 100%; }
body.textseite .seite-schmal a:not(.knopf), body.verwaltungsseite main a:not(.knopf) { color: var(--tinte); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--tuerkis); }
body.textseite .seite-schmal a:not(.knopf):hover { background: var(--gelb); color: var(--auf-gelb); }
.seite-schmal h1 { font-size: clamp(2.125rem, 1.4rem + 3.2vw, 3.5rem); line-height: 1.15; }
.seite-schmal input[type="text"], .seite-schmal input[type="email"], .seite-schmal select, .seite-schmal textarea { min-height: 48px; padding: 0.625rem 0.875rem; border: 2px solid var(--kante); border-radius: var(--r-feld); background: var(--zettel); color: var(--tinte); font-family: var(--f-text); font-size: 1rem; }
.seite-schmal input:focus, .seite-schmal select:focus, .seite-schmal textarea:focus { border-color: var(--tinte); outline: 3px solid var(--fokus); outline-offset: 2px; }
.seite-schmal label, .seite-schmal legend { font-family: var(--f-mono); font-size: 0.9375rem; }
.seite-schmal .kasten { display: flex; font-family: var(--f-text); }
.seite-schmal .hinweis { border: 2px solid var(--kante); border-radius: var(--r-karte); background: var(--zettel); box-shadow: 3px 3px 0 var(--sh); }
.seite-schmal .hinweis.fehler { border-color: var(--fehler); background: var(--fehler-zart); }
.seite-schmal .hinweis.ok { border-color: var(--ok); background: var(--ok-zart); }
.seite-schmal .klein { color: var(--tinte-2); }
.seite-schmal .knopf, .seite-schmal button.knopf { min-height: 48px; }


.pb-modus-schalter__symbol { display: block; flex: none; width: 24px; height: 24px; overflow: visible; }