/*
 * KeyTag Werkstattseite
 *
 * Systemschriften statt Google Fonts: kein Aufruf fremder Server, nichts
 * fuer die Datenschutzerklaerung, schneller auf dem Handy.
 * --akzent kommt pro Seite aus der Farbe der Filiale (style am body).
 * --primary ist das feste Blau des Bearbeiten-Modus und des Admins.
 */

:root {
    --primary: #1d5fd1;
    --auf-primary: #ffffff;
    --akzent: #ffc20e;
    --auf-akzent: #16181b;
    --tinte: #16181b;
    --graphit: #23272e;
    --text: #0f172a;
    --text-leise: #64748b;
    --grund: #f1f5f9;
    --karte: #ffffff;
    --rand: #e2e8f0;
    --stern: #f59e0b;
    --stern-aus: #cbd5e1;
    --gut: #15803d;
    --gut-grund: #f0fdf4;
    --schlecht: #b91c1c;
    --schlecht-grund: #fef2f2;
    --warn: #92400e;
    --warn-grund: #fffbeb;
    --radius: 16px;
    --schatten: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    color: var(--text);
    background: var(--grund);
    /* 100dvh statt 100vh: Auf dem iPhone ist 100vh die GROSSE Fensterhoehe
       ohne Browserleisten - auf einem Flex-body wird die Seite dadurch
       laenger als ihr Inhalt und laesst sich "endlos" weiterscrollen
       (phototap 24.09., hier vom User am 07.10. wieder bemerkt). Browser
       ohne dvh ignorieren die Regel - lieber kein Mindestmass als ein falsches. */
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

[hidden] {
    display: none !important;
}

a {
    color: var(--primary);
}

h1,
h2,
h3 {
    line-height: 1.25;
    margin: 0 0 .5rem;
}

h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }

p {
    margin: 0 0 1rem;
}

code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .92em;
}

img {
    max-width: 100%;
}

.nur-vorleser {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ------------------------------------------------------------------ Rahmen */

.spalte {
    width: 100%;
    max-width: 32rem;
    margin: 0 auto;
    padding: 1rem 1rem 0;
    flex: 1;
}

.breit {
    width: 100%;
    max-width: 64rem;
    margin: 0 auto;
    padding: 1.25rem 1rem 0;
    flex: 1;
}

.karte {
    background: var(--karte);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
    padding: 1.5rem;
    margin-bottom: 1rem;
}

/* Sprungziele (#google, #plattformen) nicht unter der klebenden Kopfleiste verstecken */
.bearbeiten .karte,
.bearbeiten .b-block {
    scroll-margin-top: 5rem;
}

.karte > :last-child {
    margin-bottom: 0;
}

.karte.schmal {
    max-width: 30rem;
}

.mittig {
    text-align: center;
}

.marke {
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-leise);
    margin-bottom: .75rem;
}

.klein {
    font-size: .875rem;
    color: var(--text-leise);
}

.leer {
    color: var(--text-leise);
}

.fuss {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .25rem 1.25rem;
    padding: 1.5rem 1rem 2rem;
    font-size: .8rem;
}

.fuss a {
    color: var(--text-leise);
    text-decoration: none;
}

.fuss a:hover {
    text-decoration: underline;
}

/* -------------------------------------------------------------- Bewertung */

.sterne {
    display: flex;
    justify-content: flex-start;
    gap: .25rem;
    margin: 1.25rem 0 .25rem;
}

.stern {
    display: block;
    width: 3.25rem;
    height: 3.25rem;
    padding: .2rem;
    border-radius: 12px;
    color: var(--stern-aus);
    transition: transform .12s ease, color .12s ease;
    -webkit-tap-highlight-color: transparent;
}

.stern svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
    display: block;
}

.stern.an,
.stern.vorschau {
    color: var(--stern);
}

.stern:active {
    transform: scale(.9);
}

.stern:focus-visible {
    outline: 3px solid var(--tinte);
    outline-offset: 2px;
}

@media (hover: hover) {
    .stern:hover {
        transform: scale(1.08);
    }
}

@media (max-width: 22rem) {
    .stern {
        width: 2.75rem;
        height: 2.75rem;
    }
}

.stern-text {
    min-height: 1.55em;
    font-weight: 600;
    margin-bottom: 0;
}

/* Nur beim Einblenden per Skript - ohne JavaScript steht der Teil sofort da. */
.ws-bewertung .eingeblendet {
    animation: einblenden .25s ease;
}

@keyframes einblenden {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ws-bewertung .eingeblendet { animation: none; }
    .stern { transition: none; }
}

.plattformen {
    display: grid;
    gap: .6rem;
    margin-bottom: 1rem;
}

.plattform {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .9rem 1rem;
    border: 2px solid var(--pf);
    border-radius: 12px;
    color: var(--text);
    font-weight: 600;
    text-decoration: none;
    background: var(--karte);
}

.plattform:hover,
.plattform:focus-visible {
    background: color-mix(in srgb, var(--pf) 8%, white);
}

.pf-zeichen {
    flex: none;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--pf);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.link-knopf {
    display: inline-block;
    font-size: .95rem;
}

.oeffentlich {
    font-size: .875rem;
    color: var(--text-leise);
    border-top: 1px solid var(--rand);
    padding-top: 1rem;
    margin: 1.25rem 0 0;
}

.danke {
    text-align: center;
}

.haken {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto .75rem;
    border-radius: 50%;
    background: var(--gut-grund);
    color: var(--gut);
    font-size: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Honeypot: fuer Menschen unsichtbar, fuer Bots ein normales Feld */
.hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.schritte {
    list-style: none;
    counter-reset: schritt;
    padding: 0;
    margin: 1.25rem 0;
}

.schritte li {
    counter-increment: schritt;
    position: relative;
    padding: 0 0 1rem 2.75rem;
}

.schritte li::before {
    content: counter(schritt);
    position: absolute;
    left: 0;
    top: 0;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: var(--primary);
    color: var(--auf-primary);
    font-weight: 700;
    font-size: .9rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.schritte strong,
.schritte span {
    display: block;
}

.schritte span {
    color: var(--text-leise);
}

.text h2 {
    margin-top: 1.5rem;
}

.code-eingabe {
    display: flex;
    gap: .5rem;
    align-items: flex-end;
}

.code-eingabe .feld {
    flex: 1;
    margin: 0;
}

.code-eingabe input {
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* ---------------------------------------------------------------- Formulare */

.feld {
    display: block;
    margin: 0 0 1rem;
    border: 0;
    padding: 0;
    min-width: 0;
}

.feld > span,
.feld > legend,
.bildfeld-name {
    display: block;
    font-weight: 600;
    font-size: .925rem;
    margin-bottom: .35rem;
    padding: 0;
}

.feld small {
    font-weight: 400;
    color: var(--text-leise);
}

.feld-hinweis {
    display: block;
    margin-top: .3rem;
    font-size: .825rem;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="date"],
select,
textarea {
    width: 100%;
    font: inherit;
    font-size: 16px; /* unter 16px zoomt iOS beim Antippen hinein */
    color: var(--text);
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: .65rem .8rem;
}

textarea {
    resize: vertical;
    min-height: 7rem;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent);
}

.auswahl {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0 1.25rem .35rem 0;
    font-size: .95rem;
}

.knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    color: var(--auf-primary);
    background: var(--primary);
    border: 2px solid var(--primary);
    border-radius: 10px;
    padding: .7rem 1.2rem;
    cursor: pointer;
    line-height: 1.2;
}

.knopf:hover {
    filter: brightness(.94);
}

.knopf:disabled {
    opacity: .6;
    cursor: wait;
}

.knopf-voll {
    width: 100%;
    padding: .9rem 1.2rem;
    margin-bottom: .75rem;
}

.knopf-zweit {
    color: var(--text);
    background: #fff;
    border-color: #cbd5e1;
}

.knopf-gefahr {
    color: #fff;
    background: var(--schlecht);
    border-color: var(--schlecht);
}

.knopf-klein {
    font-size: .85rem;
    padding: .4rem .75rem;
    border-width: 1px;
}

.hinweis {
    border-radius: 12px;
    padding: .8rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
}

.hinweis.fehler {
    background: var(--schlecht-grund);
    border-color: #fecaca;
    color: var(--schlecht);
}

.hinweis.erfolg {
    background: var(--gut-grund);
    border-color: #bbf7d0;
    color: var(--gut);
}

.hinweis.warnung {
    background: var(--warn-grund);
    border-color: #fde68a;
    color: var(--warn);
}

.hinweis a {
    color: inherit;
    font-weight: 600;
}

/* ------------------------------------------------------------- Verwaltung */

.leiste {
    background: #fff;
    border-bottom: 1px solid var(--rand);
    position: sticky;
    top: 0;
    z-index: 10;
}

.leiste-innen {
    max-width: 64rem;
    margin: 0 auto;
    padding: .75rem 1rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.leiste-firma {
    min-width: 0;
}

.leiste-firma strong {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.leiste-firma span {
    font-size: .8rem;
    color: var(--text-leise);
}

.leiste-aktionen {
    display: flex;
    gap: .5rem;
    flex: none;
}

.leiste-aktionen form {
    margin: 0;
}

.reiter {
    max-width: 64rem;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    gap: .25rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.reiter a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .75rem .8rem;
    color: var(--text-leise);
    text-decoration: none;
    font-weight: 600;
    font-size: .925rem;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
}

.reiter a.aktiv {
    color: var(--text);
    border-bottom-color: var(--primary);
}

.zaehler {
    background: var(--schlecht);
    color: #fff;
    font-size: .72rem;
    border-radius: 999px;
    padding: .05rem .45rem;
}

.kopfzeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    margin: .5rem 0 1rem;
}

.kopfzeile h1 {
    margin: 0;
}

.umschalter {
    display: inline-flex;
    background: #fff;
    border: 1px solid var(--rand);
    border-radius: 10px;
    padding: 3px;
}

.umschalter a {
    padding: .35rem .7rem;
    border-radius: 7px;
    font-size: .85rem;
    color: var(--text-leise);
    text-decoration: none;
    white-space: nowrap;
}

.umschalter a.aktiv {
    background: var(--text);
    color: #fff;
}

.kacheln {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: .75rem;
    margin-bottom: 1rem;
}

.kachel {
    background: #fff;
    border: 1px solid var(--rand);
    border-radius: 14px;
    padding: 1rem;
    color: var(--text);
    text-decoration: none;
}

a.kachel:hover {
    border-color: var(--primary);
}

.kachel-zahl {
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
}

.kachel-zahl small {
    color: var(--stern);
    font-size: 1.1rem;
}

.kachel-name {
    font-size: .85rem;
    color: var(--text-leise);
}

.raster-2 {
    display: grid;
    gap: 0 1rem;
}

@media (min-width: 48rem) {
    .raster-2 {
        grid-template-columns: 1fr 1fr;
    }
}

.balken {
    list-style: none;
    padding: 0;
    margin: .75rem 0 1rem;
}

.balken li {
    display: grid;
    grid-template-columns: 2.5rem 1fr 3rem;
    align-items: center;
    gap: .6rem;
    margin-bottom: .45rem;
    font-size: .9rem;
}

.balken-spur {
    height: .7rem;
    background: var(--grund);
    border-radius: 999px;
    overflow: hidden;
}

.balken-wert {
    display: block;
    height: 100%;
    background: #94a3b8;
    border-radius: 999px;
}

.balken-wert.positiv {
    background: var(--stern);
}

.balken-zahl {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.zahlenliste {
    list-style: none;
    padding: 0;
    margin: .5rem 0 1rem;
}

.zahlenliste li {
    display: flex;
    justify-content: space-between;
    padding: .45rem 0;
    border-bottom: 1px solid var(--rand);
}

.teilen {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.teilen-text {
    flex: 1 1 18rem;
}

.qr {
    flex: none;
    background: #fff;
    border: 1px solid var(--rand);
    border-radius: 12px;
    padding: .25rem;
}

.link-zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.link-zeile code {
    background: var(--grund);
    padding: .35rem .6rem;
    border-radius: 8px;
    word-break: break-all;
}

/* Nachrichten */

.nachricht.erledigt {
    opacity: .7;
}

.nachricht-kopf {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .5rem;
}

.nachricht-sterne {
    color: var(--stern);
    letter-spacing: .1em;
}

.nachricht-kopf time {
    font-size: .85rem;
    color: var(--text-leise);
}

.nachricht-text {
    white-space: normal;
    overflow-wrap: anywhere;
}

.nachricht-absender {
    font-size: .9rem;
    color: var(--text-leise);
}

.nachricht-aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    border-top: 1px solid var(--rand);
    padding-top: .75rem;
}

.nachricht-aktionen form {
    margin: 0;
}

.blaettern {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1rem 0;
    font-size: .9rem;
}

/* Einstellungen */

.bildfeld {
    margin-bottom: 1rem;
}

.bildfeld-vorschau {
    display: block;
    margin-bottom: .5rem;
    border: 1px solid var(--rand);
    border-radius: 12px;
    background: var(--grund);
}

.bildfeld-vorschau {
    width: 6rem;
    height: 6rem;
    object-fit: contain;
    background: #fff;
}

.bildfeld input[type="file"] {
    font-size: .875rem;
    max-width: 100%;
}

.hilfe {
    background: var(--grund);
    border-radius: 12px;
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    font-size: .9rem;
}

.hilfe summary {
    cursor: pointer;
    font-weight: 600;
}

.hilfe ol {
    margin: .75rem 0 0;
    padding-left: 1.25rem;
}

.pf-liste {
    margin-bottom: .75rem;
}

.pf-zeile {
    display: grid;
    grid-template-columns: 1fr;
    gap: .4rem;
    padding: .75rem;
    border: 1px solid var(--rand);
    border-radius: 12px;
    margin-bottom: .5rem;
}

.pf-knoepfe {
    display: flex;
    gap: .3rem;
    justify-content: flex-end;
}

@media (min-width: 48rem) {
    .pf-zeile {
        grid-template-columns: 11rem 1fr auto;
        align-items: center;
    }

    .pf-zeile:has([data-pf-name]:not([hidden])) {
        grid-template-columns: 11rem 10rem 1fr auto;
    }
}

.suchzeile input {
    text-transform: none;
    letter-spacing: normal;
}

.treffer {
    list-style: none;
    padding: 0;
    margin: 1rem 0 .75rem;
}

.treffer-eintrag {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .85rem 1rem;
    border: 1px solid var(--rand);
    border-radius: 12px;
    margin-bottom: .5rem;
}

.treffer-eintrag form {
    margin: 0;
}

.treffer-text {
    flex: 1 1 14rem;
    min-width: 0;
}

.treffer-text > * {
    display: block;
}

.treffer-text span {
    font-size: .9rem;
    color: var(--text-leise);
}

.treffer-sterne {
    color: var(--stern) !important;
}

.speichern-leiste {
    position: sticky;
    bottom: 0;
    padding: .75rem 0 1rem;
    background: linear-gradient(to top, var(--grund) 70%, transparent);
    display: flex;
    justify-content: flex-end;
}

/* Admin */

.filterleiste {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .75rem;
    padding: 1rem;
}

.filterleiste .feld {
    margin: 0;
    flex: 1 1 9rem;
}

.filterleiste .feld-breit {
    flex: 3 1 14rem;
}

.filterleiste-knoepfe {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.tabelle-rahmen {
    overflow-x: auto;
    background: #fff;
    border: 1px solid var(--rand);
    border-radius: 14px;
}

.tabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

/* Kopf bewusst nicht klebend: in einem overflow-x-Container klebt sticky am
   Container statt am Fenster und schiebt sich ueber die erste Zeile. */
.tabelle th,
.tabelle td {
    text-align: left;
    padding: .6rem .75rem;
    border-bottom: 1px solid var(--rand);
    white-space: nowrap;
}

.tabelle th {
    background: var(--grund);
    font-weight: 600;
}

.tabelle th a {
    color: var(--text);
    text-decoration: none;
}

.tabelle tbody tr:hover {
    background: #f8fafc;
}

.zahl-spalte {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
}

.status {
    display: inline-block;
    font-size: .75rem;
    font-weight: 600;
    padding: .15rem .55rem;
    border-radius: 999px;
    vertical-align: middle;
}

.status-unregistered { background: #e2e8f0; color: #334155; }
.status-active       { background: #dcfce7; color: #166534; }
.status-inactive     { background: #fee2e2; color: #991b1b; }

.angaben {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .4rem 1rem;
    margin: 0;
    font-size: .925rem;
}

.angaben dt {
    color: var(--text-leise);
}

.angaben dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1rem;
}

.aktionen form {
    margin: 0;
}

.gefahrenzone {
    border: 1px solid #fecaca;
    background: var(--schlecht-grund);
    border-radius: 12px;
    padding: 1rem;
    max-width: 34rem;
}

.pin-anzeige {
    font-size: 1.5rem;
    letter-spacing: .15em;
    font-family: ui-monospace, Menlo, Consolas, monospace;
}

.aufzaehlung {
    padding-left: 1.2rem;
    margin: 0;
}

.aufzaehlung li {
    margin-bottom: .5rem;
}

/* ------------------------------------------------------------------ Symbole */

.sym {
    width: 1.25em;
    height: 1.25em;
    flex: none;
    display: inline-block;
    vertical-align: -.2em;
}

/* ============================================================ Werkstattseite */

body.ws {
    background: #f4f3ef;
}

.inhaber-leiste {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .7rem 1rem;
    background: var(--primary);
    color: #fff;
    text-decoration: none;
    font-size: .95rem;
}

.inhaber-leiste strong {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

.ws-kopf {
    background: var(--graphit);
    color: #fff;
    padding: 1.75rem 1rem 2.25rem;
}

.ws-kopf-innen {
    max-width: 34rem;
    margin: 0 auto;
}

.ws-kopf-innen {
    display: flex;
    align-items: center;
    gap: .9rem;
}

.ws-logo {
    width: 3.75rem;
    height: 3.75rem;
    flex: none;
    border-radius: 12px;
    background: #fff;
    object-fit: contain;
    padding: .25rem;
}

.ws-logo-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: var(--akzent);
    color: var(--auf-akzent);
    font-size: 1.6rem;
    font-weight: 800;
}

.ws-kopf-text {
    min-width: 0;
}

.ws-name {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.ws-adresse {
    margin: .2rem 0 0;
    color: #d5d8dd;
    font-size: .95rem;
}

.ws-status {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .95rem;
    color: #e6e8eb;
}

.ws-punkt {
    width: .65rem;
    height: .65rem;
    border-radius: 50%;
    background: #9aa0a8;
    flex: none;
}

.ws-status.offen .ws-punkt {
    background: #3ddc84;
}

.ws-inhalt {
    width: 100%;
    max-width: 34rem;
    margin: -1rem auto 0;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
}

.ws-block {
    scroll-margin-top: 1rem;
}

.karte-ws {
    background: #fff;
    border-radius: var(--radius);
    padding: 1.25rem;
}

.karte-ws h2 {
    font-size: 1.2rem;
    font-weight: 700;
}

.ws-block h3 {
    font-size: 1.05rem;
    margin-top: .75rem;
}

.ws-leise {
    color: #5b6068;
    margin-bottom: .25rem;
}

.anker {
    display: block;
    position: relative;
    top: -1rem;
}

/* Termin und Kontakt */

.ws-termin {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.ws-termin-knopf {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 3.75rem;
    border-radius: 14px;
    background: var(--akzent);
    color: var(--auf-akzent);
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 800;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .08);
}

.ws-schnell {
    display: grid;
    gap: .65rem;
}

.ws-schnell-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ws-schnell-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.ws-schnell-knopf {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-height: 4.5rem;
    background: #fff;
    border-radius: 14px;
    color: var(--tinte);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 600;
}

.ws-schnell-1 .ws-schnell-knopf {
    flex-direction: row;
    min-height: 3.25rem;
}

.ws-schnell-knopf .sym {
    width: 1.5rem;
    height: 1.5rem;
}

.ws-termin-knopf:focus-visible,
.ws-schnell-knopf:focus-visible,
.ws-knopf-rand:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}

/* Angebot */

.ws-angebot {
    background: color-mix(in srgb, var(--akzent) 16%, #fff);
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem;
}

.ws-angebot h2 {
    font-size: 1.2rem;
    margin-bottom: .35rem;
}

.ws-angebot p:last-child {
    margin-bottom: 0;
    color: #33373d;
}

.ws-marke {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #5b4a00;
    margin-bottom: .25rem;
}

/* Oeffnungszeiten */

.ws-zeiten {
    margin: 0;
}

.ws-zeile {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .35rem 0;
}

.ws-zeile dt,
.ws-zeile dd {
    margin: 0;
}

.ws-zeile dd {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ws-zeile.zu {
    color: #5b6068;
}

.ws-zeile.heute {
    font-weight: 700;
}

.ws-zeile small {
    font-weight: 600;
    font-size: .78rem;
    white-space: nowrap;
    background: var(--akzent);
    color: var(--auf-akzent);
    border-radius: 999px;
    padding: .05rem .45rem;
    margin-left: .3rem;
    vertical-align: .1em;
}

.ws-sonder {
    list-style: none;
    padding: .75rem 0 0;
    margin: .5rem 0 0;
    border-top: 1px solid var(--rand);
    font-size: .95rem;
}

.ws-sonder li {
    padding: .2rem 0;
}

/* Anfahrt, Ueber uns */

.ws-anschrift {
    font-style: normal;
    margin-bottom: 1rem;
}

.ws-knopf-rand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 3rem;
    border: 2px solid var(--tinte);
    border-radius: 12px;
    color: var(--tinte);
    text-decoration: none;
    font-weight: 700;
}

.ws-text {
    color: #33373d;
    margin: 0;
    overflow-wrap: anywhere;
}

/* Bewertung auf der Werkstattseite */

.ws .knopf {
    color: #fff;
    background: var(--tinte);
    border-color: var(--tinte);
}

.ws .link-knopf {
    color: var(--tinte);
}

/* ======================================================== Bearbeiten-Modus */

body.bearbeiten {
    background: #eef2f8;
}

.b-leiste {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--primary);
    color: #fff;
}

.b-leiste-innen {
    max-width: 40rem;
    margin: 0 auto;
    padding: .75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.75rem;
}

.b-leiste-innen strong {
    display: block;
    font-size: 1.05rem;
}

.b-leiste-innen span {
    font-size: .85rem;
    color: #dce6f7;
}

.b-fertig {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0 1.2rem;
    border-radius: 999px;
    background: #fff;
    color: var(--primary);
    font-weight: 700;
    text-decoration: none;
}

.b-zurueck {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    min-height: 2.75rem;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}

.b-leiste .reiter {
    max-width: 40rem;
}

.b-leiste .reiter a {
    color: #dce6f7;
}

.b-leiste .reiter a.aktiv {
    color: #fff;
    border-bottom-color: #fff;
}

.b-inhalt {
    width: 100%;
    max-width: 40rem;
    margin: 0 auto;
    padding: 1rem 1rem 0;
    flex: 1;
}

.b-zeile {
    display: flex;
    align-items: center;
    gap: .9rem;
    background: #fff;
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
    color: var(--text);
    text-decoration: none;
}

.b-zeile-symbol {
    width: 2.75rem;
    height: 2.75rem;
    flex: none;
    border-radius: 50%;
    background: var(--grund);
    color: #5b6068;
    display: flex;
    align-items: center;
    justify-content: center;
}

.b-zeile-symbol.gelb {
    background: #fff4cc;
    color: #7a5a00;
}

.b-zeile-text {
    flex: 1;
    min-width: 0;
}

.b-zeile-text strong,
.b-zeile-text span {
    display: block;
}

.b-zeile-text span {
    font-size: .875rem;
    color: var(--text-leise);
}

.b-block {
    background: #fff;
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
    outline: 2px dashed var(--primary);
    outline-offset: -2px;
}

.b-block.b-aus {
    outline-color: #9aa0a8;
    background: #f6f7f9;
}

.b-block.b-aus .b-zusammenfassung,
.b-block.b-aus h2 {
    color: var(--text-leise);
}

.b-kopf {
    background: var(--graphit);
    color: #fff;
}

.b-kopf .b-zusammenfassung {
    color: #d5d8dd;
}

.b-kopf-inhalt {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin: .75rem 0 .5rem;
    font-size: 1.15rem;
}

.b-kopf .ws-logo {
    width: 3rem;
    height: 3rem;
}

.b-marke {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #afc6f0;
}

.b-block-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .6rem .75rem;
}

.b-block-kopf h2 {
    margin: 0;
    font-size: 1.1rem;
}

.b-knoepfe {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.b-knoepfe form {
    margin: 0;
}

.b-pfeil {
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid #c9cdd3;
    border-radius: 50%;
    background: #fff;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}

.b-pfeil:disabled {
    color: #c9cdd3;
    border-color: #e4e6ea;
    cursor: default;
}

.b-aendern {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 2.75rem;
    padding: 0 1rem;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
}

.b-zusammenfassung {
    margin-top: .6rem;
    font-size: .925rem;
    color: #33373d;
}

.b-zusammenfassung p {
    margin: 0 0 .25rem;
    overflow-wrap: anywhere;
}

.b-wert {
    color: var(--text);
    font-weight: 600;
}

.b-warnung {
    color: var(--warn);
}

.b-zeitzeile {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.b-block-fuss {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid var(--rand);
}

.b-block-fuss form {
    margin: 0;
}

.b-hinweis {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .85rem;
    color: var(--text-leise);
}

.b-hinweis.b-an {
    color: var(--gut);
}

.b-abmelden {
    display: flex;
    justify-content: center;
    margin: 1.5rem 0 0;
}

.b-formular .karte {
    padding: 1.25rem;
}

.b-formular .speichern-leiste {
    gap: .5rem;
}

/* Schalter "Auf der Seite zeigen" */

.schalter {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: 2.75rem;
    margin-top: .5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--rand);
    font-weight: 600;
}

.schalter input {
    width: 1.35rem;
    height: 1.35rem;
    accent-color: var(--primary);
}

/* Farbwahl */

.farben {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: .5rem;
}

.farbe {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 2.75rem;
    padding: .35rem .6rem;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
}

.farbe:has(input:checked) {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary);
}

.farbe input {
    accent-color: var(--primary);
}

.farbe-feld {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 6px;
    flex: none;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
}

/* Oeffnungszeiten im Formular */

.tage {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.tag {
    border: 1px solid var(--rand);
    border-radius: 12px;
    padding: .6rem .75rem;
}

.tag-zeile {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: .4rem;
}

.tag-name {
    font-weight: 600;
}

.tag-name.klein {
    font-weight: 400;
}

.tag-bis {
    color: var(--text-leise);
}

.tag-extra {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: .25rem 1rem;
    margin-top: .4rem;
    font-size: .9rem;
}

.tag-extra details {
    flex: 1 1 100%;
}

.tag-extra summary {
    cursor: pointer;
    color: var(--primary);
    font-weight: 600;
    min-height: 1.75rem;
}

.tag-extra details .tag-zeile {
    margin-top: .4rem;
}

@media (max-width: 24rem) {
    .tag-zeile {
        grid-template-columns: 1fr auto 1fr;
    }

    .tag-zeile .tag-name {
        grid-column: 1 / -1;
    }
}

.sonderliste {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-bottom: .5rem;
}

.sonder {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
    border: 1px solid var(--rand);
    border-radius: 12px;
    padding: .75rem;
}

.sonder .feld {
    margin: 0;
}

.sonder .sonder-text,
.sonder > .auswahl {
    grid-column: 1 / -1;
}

.feld-reihe {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: .75rem;
}

/* Google-Suche im Bewertungsblock */

.suchzeile {
    display: flex;
    gap: .5rem;
    align-items: flex-end;
}

.suchzeile .feld {
    flex: 1;
    margin: 0;
}

/* Titelbild */

.ws-titelbild {
    height: 12rem;
    background: var(--graphit);
    overflow: hidden;
}

.ws-titelbild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (min-width: 40rem) {
    .ws-titelbild {
        height: 16rem;
    }
}

.ws-kopf.mit-titelbild {
    padding-top: 0;
}

.ws-kopf.mit-titelbild .ws-logo {
    margin-top: -1.9rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
    border: 3px solid #fff;
}

.ws-kopf.mit-titelbild .ws-kopf-innen {
    align-items: flex-end;
}

.ws-kopf.mit-titelbild .ws-kopf-text {
    padding-top: .9rem;
}

.bildfeld-breit {
    width: 100%;
    height: 7rem;
    object-fit: cover;
}

.b-titelbild {
    display: block;
    width: 100%;
    height: 5rem;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: .5rem;
}

/* Eigene Links */

.ws-links {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.ws-link {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-height: 3.25rem;
    padding: .6rem 1rem;
    border: 1px solid var(--rand);
    border-radius: 12px;
    color: var(--tinte);
    text-decoration: none;
    font-weight: 600;
}

.ws-link span {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.ws-link .sym:last-child {
    color: #9aa0a8;
}

.ws-link:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}

.ln-liste {
    margin-bottom: .75rem;
}

.ln-zeile {
    display: grid;
    gap: .4rem;
    padding: .75rem;
    border: 1px solid var(--rand);
    border-radius: 12px;
    margin-bottom: .5rem;
}

/* Social Media */

.ws-social {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
    gap: .75rem .5rem;
}

.ws-social-knopf {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    color: var(--tinte);
    text-decoration: none;
    font-size: .8rem;
    font-weight: 600;
}

.ws-social-rund {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: var(--tinte);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ws-social-rund .sym {
    width: 1.5rem;
    height: 1.5rem;
}

.ws-social-knopf:focus-visible .ws-social-rund {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}

.feld > .social-name {
    display: flex;
    align-items: center;
    gap: .4rem;
}

/* .feld > span (Feldbeschriftung) wuerde sonst display:block und Fettschrift erzwingen */
.feld > .praefix-feld {
    display: flex;
    font-weight: 400;
    margin-bottom: 0;
    align-items: stretch;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.praefix-feld .praefix {
    display: flex;
    align-items: center;
    padding: 0 .6rem;
    background: var(--grund);
    color: var(--text-leise);
    font-size: .85rem;
    white-space: nowrap;
}

.praefix-feld input {
    border: 0;
    border-radius: 0;
    min-width: 0;
}

/* Plattformfarben. Instagram ist ein Verlauf - steht hier, weil es keine
   einzelne Farbe gibt; die Inline-Farbe darunter ist nur der Rueckfall. */

.sf-instagram {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%) !important;
}

.ws-social-mini {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.ws-social-mini .sym {
    width: .95rem;
    height: .95rem;
}

/* Wetter im Kopf, Reifen-Hinweis */

.ws-kopf-zeile {
    max-width: 34rem;
    margin: 1rem auto 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .35rem 1rem;
}

.ws-kopf .ws-kopf-zeile .ws-status {
    margin: 0;
}

.ws-wetter {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin: 0;
    font-size: .95rem;
    color: #e6e8eb;
}

.ws-hinweis {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: .6rem .8rem;
    padding: 1rem 1.1rem;
    border-radius: var(--radius);
    background: #e3eefc;
    color: #0b2e5c;
}

.ws-hinweis p {
    margin: 0;
    font-weight: 700;
    line-height: 1.35;
}

.ws-hinweis-symbol {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: #fff;
    color: #1d5fd1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ws-hinweis-sommer {
    background: #fff4cc;
    color: #4a3b00;
}

.ws-hinweis-sommer .ws-hinweis-symbol {
    color: #b7791f;
}

.ws-hinweis-knopf {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.9rem;
    border-radius: 12px;
    background: var(--tinte);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

.schalter-oben {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* Angebot als Aktion */

.ws-angebot-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .25rem;
}

.ws-angebot-kopf .ws-marke {
    margin: 0;
}

.ws-frist {
    color: #b42318;
}

.ws-rabatt {
    flex: none;
    padding: .2rem .7rem;
    border-radius: 999px;
    background: #b42318;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 800;
    white-space: nowrap;
}

.ws-gutschein {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    margin-top: .9rem;
    padding: .8rem;
    border: 2px dashed #8a6d00;
    border-radius: 12px;
    background: #fff;
    text-align: center;
}

.ws-gutschein-titel {
    font-size: .8rem;
    color: #5b6068;
}

.ws-gutschein-code {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 1.5rem;
    letter-spacing: .08em;
    overflow-wrap: anywhere;
}

.ws-gutschein-hinweis {
    font-size: .8rem;
    color: #5b6068;
}

.ws-angebot .ws-bedingungen {
    margin: .75rem 0 0;
    font-size: .8rem;
    color: #5b6068;
}

.feld-reihe-gleich {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Bearbeiten-Modus: in jedem Block dieselbe Anordnung - Ueberschrift allein
   in ihrer Zeile, darunter links die Pfeile, rechts aussen "Aendern".
   Vorher entschied die Laenge der Ueberschrift, ob alles in eine Zeile
   passte; die Knoepfe sprangen von Block zu Block (vom User bemerkt). */

.b-block-kopf h2 {
    flex: 1 1 100%;
}

.b-knoepfe {
    flex: 1 1 100%;
}

.b-knoepfe .b-aendern {
    margin-left: auto;
}

/* ============================================== Persoenliche Vorschau */

.vs-streifen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .35rem 1rem;
    padding: .75rem 1rem;
    background: var(--primary);
    color: #fff;
    font-size: .95rem;
    line-height: 1.4;
}

.vs-streifen a {
    color: #fff;
    font-weight: 700;
    white-space: nowrap;
}

.vs {
    width: 100%;
    max-width: 34rem;
    margin: 2rem auto 0;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    scroll-margin-top: 1rem;
}

.vs-abschnitt {
    background: #fff;
    border-radius: var(--radius);
    padding: 1.4rem 1.25rem;
}

.vs-abschnitt h2 {
    font-size: 1.35rem;
    font-weight: 800;
    margin-bottom: .6rem;
}

.vs-marke {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: .3rem;
}

.vs-zwei {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
}

.vs-karte {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: .9rem;
    border-radius: 12px;
    background: #f4f3ef;
    font-size: .9rem;
    color: #33373d;
}

.vs-karte strong {
    color: var(--tinte);
    font-size: 1rem;
}

.vs-symbol {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: var(--akzent);
    color: var(--auf-akzent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.vs-liste {
    list-style: none;
    padding: 0;
    margin: 0;
}

.vs-liste li {
    position: relative;
    padding: .55rem 0 .55rem 1.9rem;
    border-top: 1px solid var(--rand);
    color: #33373d;
}

.vs-liste li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: .55rem;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    background: #e3f5e9;
    color: #1e7a3c;
    font-size: .8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vs-liste strong {
    color: var(--tinte);
}

.vs-klein {
    font-size: .85rem;
    color: #5b6068;
    margin: .75rem 0 0;
}

.vs-anfrage {
    background: var(--graphit);
    color: #fff;
}

.vs-anfrage .vs-klein {
    color: #c9cdd3;
}

.vs-preis {
    font-size: 1.1rem;
    font-weight: 700;
}

.vs-knoepfe {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.vs-knopf {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 3.25rem;
    border-radius: 14px;
    background: var(--akzent);
    color: var(--auf-akzent);
    font-weight: 800;
    font-size: 1.05rem;
    text-decoration: none;
}

.vs-knopf.vs-whatsapp {
    background: #25d366;
    color: #0b2e17;
}

.vs-knopf.vs-zweit {
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
}

.vs-fuss {
    font-size: .8rem;
    color: #5b6068;
    text-align: center;
    margin: 0;
}

/* Admin: Vorschau-Karten */

.vs-admin-kopf {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: .75rem;
}

.vs-admin-kopf h2 {
    margin: 0;
}

.vs-admin .angaben {
    margin-bottom: 1rem;
}

.knopf.vs-wa {
    background: #25d366;
    border-color: #25d366;
    color: #0b2e17;
}

/* Weiterempfehlen */

.ws-dankeschoen {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem .9rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--akzent) 16%, #fff);
    font-weight: 700;
}

.ws-teilen-knopf {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    min-height: 3.25rem;
    border: 0;
    border-radius: 14px;
    background: var(--tinte);
    color: #fff;
    font: inherit;
    font-weight: 800;
    font-size: 1.05rem;
    cursor: pointer;
}

.ws-teilen-wege {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
}

/* Empfehlungscode */

.ws-empfehlen-form .feld {
    margin-bottom: .6rem;
}

.ws-empfehlen-code {
    margin: .75rem 0;
}

[data-empfehlen-teilen] {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.suchzeile + .hinweis,
.suchzeile + form {
    margin-top: .9rem;
}