/*
 * Bewertungstool
 *
 * Systemschriften statt Google Fonts: kein Aufruf fremder Server, nichts
 * fuer die Datenschutzerklaerung, schneller auf dem Handy.
 * --primary kommt pro Seite aus der Farbe des Unternehmens (style am body).
 */

:root {
    --primary: #2563eb;
    --auf-primary: #ffffff;
    --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);
    min-height: 100vh;
    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 */
.verwaltung .karte {
    scroll-margin-top: 7.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;
}

/* ------------------------------------------------------------ Bewertungsseite */

.titelbild {
    margin: -1rem -1rem 0;
    height: 11rem;
    overflow: hidden;
    background: var(--rand);
}

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

@media (min-width: 34rem) {
    .titelbild {
        margin: 0;
        border-radius: var(--radius) var(--radius) 0 0;
    }
}

.kopfkarte {
    text-align: center;
    padding-top: 2rem;
}

.kopfkarte.unter-titelbild {
    margin-top: -2.5rem;
    position: relative;
}

.logo {
    width: 5rem;
    height: 5rem;
    object-fit: contain;
    border-radius: 18px;
    background: var(--karte);
    display: block;
    margin: 0 auto .75rem;
}

.unter-titelbild .logo {
    margin-top: -4rem;
    box-shadow: var(--schatten);
    border: 3px solid var(--karte);
}

.logo-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    background: var(--primary);
    color: var(--auf-primary);
}

.firma {
    font-weight: 600;
    color: var(--text-leise);
    margin-bottom: .25rem;
}

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

.sterne {
    display: flex;
    justify-content: center;
    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(--primary);
    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 die Karte sofort da. */
.antwort .karte.eingeblendet {
    animation: einblenden .25s ease;
}

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

@media (prefers-reduced-motion: reduce) {
    .antwort .karte.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"],
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;
}

.kopfkarte form.links {
    text-align: left;
}

/* ------------------------------------------------------------- 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 */

.farbwahl {
    display: flex;
    gap: .5rem;
    align-items: center;
}

.farbwahl input[type="color"] {
    width: 3rem;
    height: 2.75rem;
    padding: 2px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #fff;
    flex: none;
}

.farbwahl input[type="text"] {
    max-width: 8rem;
}

.bildfeld {
    margin-bottom: 1rem;
}

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

.bildfeld-logo {
    width: 6rem;
    height: 6rem;
    object-fit: contain;
}

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

.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;
}