/* Neue Komponentenklassen.

   Hier steht nur, was es im Altsystem so nicht gab: Klassen, die Inline-Styles
   aus den Views ersetzen. Alles, was aus den Legacy-Stylesheets stammt, bleibt
   in branding/shared/ -- doppelte Regeln an zwei Stellen waeren sonst die
   naechste Quelle fuer Abweichungen zwischen den Varianten.

   Neue Klassen beginnen mit c-, damit sie von den uebernommenen Namen
   unterscheidbar bleiben. Farben und Schriftstufen kommen aus
   /css/tokens.css. body.admin bindet die Leiter an Formular und Knopf,
   weil die Shop-Media-Queries .btn sonst auf 24px ziehen. */

/* --- Admin: Formular und Aktionen auf der Schriftskala --- */

body.admin {
    font-size: var(--portal-type-body);
    line-height: 1.5;
}

body.admin h4,
body.admin .h4 {
    font-size: var(--portal-type-title);
    line-height: 1.3;
}

body.admin .control-label,
body.admin .form-control,
body.admin .table,
body.admin select,
body.admin textarea {
    font-size: var(--portal-type-body);
}

body.admin .help-block,
body.admin .c-help-lead,
body.admin .c-upload-hint,
body.admin .c-upload-check {
    font-size: var(--portal-type-small);
    line-height: 1.45;
}

body.admin .btn,
body.admin input.btn {
    font-size: var(--portal-type-body);
    font-weight: 600;
    line-height: 1.4;
    padding: 0.4em 0.85em;
    height: auto;
}

/* --- Raster ohne Bootstrap-Raender; ersetzt wiederholte Inline-Styles --- */

.c-flush {
    margin: 0 !important;
    display: block;
    background-color: transparent;
}

.c-flush--flex {
    margin: 0 !important;
    display: flex;
    flex-wrap: wrap;
}

.c-col-plain {
    background-color: transparent;
}

/* --- Shop-Kachel: die beiden Schaltflaechen standen als Inline-Style
       in der View und waren dort dreimal wiederholt. --- */

.c-shop-media {
    position: relative;
}

.c-shop-action {
    position: absolute;
    bottom: 0;
    height: 100%;
    opacity: 0.9;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
}

.c-shop-action--open {
    left: 0;
    width: 58.8%;
    background-position: left bottom;
    background-image: url("/Content/img/ShopButton.png");
}

.c-shop-action--info {
    right: 0;
    width: 41.2%;
    background-position: right bottom;
    background-image: url("/Content/img/InfoButton.png");
}

/* Codefeld mit Kopier-Button im Modal */

.c-code-field {
    display: table;
    width: 80%;
    max-width: 22rem;
    margin: 1px auto 8px;
    border: 1px solid var(--portal-divider, #ccc);
    background: #fff;
    border-collapse: collapse;
}

:where([data-portal="Geno"]) .c-code-field {
    border-color: var(--portal-form-fg);
}

.c-code-field__value,
.c-code-field__action {
    display: table-cell;
    vertical-align: middle;
}

.c-code-field__value {
    width: 100%;
}

.c-code-field__action {
    width: 1%;
    white-space: nowrap;
    border-left: 1px solid var(--portal-divider, #ccc);
    background: var(--portal-chip-bg);
}

.c-code-field input {
    display: block;
    width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent;
    padding: 6px 8px;
}

.c-code-copy {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--portal-secondary);
    padding: 6px 12px;
    font-size: var(--portal-type-caption);
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}

.c-code-copy:hover,
.c-code-copy:focus {
    color: var(--portal-accent);
    outline: none;
}

.c-code-copy.is-copied {
    color: var(--portal-accent);
}

.c-code-copy-status {
    min-height: 1.3em;
    margin: 0 0 8px;
    font-size: var(--portal-type-caption);
    color: var(--portal-text);
}

a.c-shop-action {
    text-decoration: none;
    color: inherit;
}

.c-turnstile {
    margin: 12px 0 20px;
    min-height: 65px;
}

/* --- Kopf des Gutschein-Dialogs: stand als Layout-Tabelle mit
       <td width="25%"> im Markup. Auf einem 320er-Display blieben dem Text
       damit 240px. Jetzt untereinander, ab sm nebeneinander. --- */

.c-shop-intro {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
}

/* Die Kacheln haben keine einheitliche Groesse: gemessen an 68 Dateien sind 61
   quadratisch mit 283x283, eine mit 600x600, dazu Breitformate bis 2000x700
   und ein 200x64. Eine feste Obergrenze in Pixeln waere deshalb immer fuer
   einen Teil des Bestands falsch -- zu klein fuer die grossen Quellen, zu
   gross fuer die kleinen.
   Stattdessen entscheidet das Bild selbst: ohne Breitenangabe rendert ein
   <img> in seiner natuerlichen Groesse, und max-width bremst es am Container.
   Damit wird nie hochskaliert und nie ueberlaufen -- jede Kachel wird so
   gross, wie ihre Auflösung es scharf hergibt.
   Gestapelt zentriert, weil sie linksbuendig neben einer grossen Leerflaeche
   stand. */
.c-shop-intro__media {
    flex: 0 0 auto;
    align-self: center;
}

    .c-shop-intro__media img {
        max-width: 100%;
        height: auto;
    }

.c-shop-intro__text {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}

@media (min-width: 576px) {
    .c-shop-intro {
        flex-direction: row;
        gap: 1.25rem;
    }

    /* Nebeneinander zaehlt align-self senkrecht -- die Kachel gehoert nach
       oben zum Textanfang, nicht in die Mitte eines langen Absatzes. */
    .c-shop-intro__media {
        flex-basis: 25%;
        align-self: flex-start;
        padding-top: 6px;
        padding-right: 20px;
    }
}

/* --- Bild-Uploads im Admin: Sollmaße am Feld, Beanstandungen nach dem
       Speichern. Beides bewusst zurueckhaltend gestaltet -- es sind Hinweise,
       keine Fehler. --- */

.c-upload-hint {
    display: block;
    margin-top: 4px;
    font-size: var(--portal-type-small);
    line-height: 1.4;
    color: var(--portal-secondary, #666);
}

.c-upload-check {
    display: none;
    margin-top: 4px;
    font-size: var(--portal-type-small);
    line-height: 1.4;
}

    .c-upload-check.is-warn,
    .c-upload-check.is-ok {
        display: block;
    }

    .c-upload-check.is-warn {
        color: var(--portal-accent, #c00);
    }

    .c-upload-check.is-ok {
        color: #2e7d32;
    }

.c-image-hints {
    margin: 0 0 1.25rem;
    padding: 0.75rem 1rem;
    border-left: 4px solid var(--portal-accent, #c00);
    background: var(--portal-panel-bg, #f0f0f0);
}

.c-image-hints__head {
    margin: 0 0 0.5rem;
    font-weight: bold;
}

.c-image-hints ul {
    margin: 0;
    padding-left: 1.25rem;
}

.c-image-hints li + li {
    margin-top: 0.35rem;
}

#validonce {
    margin: 0.5rem auto 0;
    max-width: 36rem;
    font-size: var(--portal-type-small);
    line-height: 1.45;
    color: var(--portal-form-fg, var(--portal-text));
}

/* --- Shop-Suche ueber der Kachelliste. In der Produktion von MEG standen
       diese Werte als Inline-Styles im Markup; die ids bleiben unveraendert,
       weil das Skript an ihnen haengt. --- */

.c-shop-search {
    padding: 15px 0;
    text-align: center;
}

.c-shop-search__field {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

.c-shop-search__field input {
    width: 100%;
    padding: 10px 40px 10px 20px;
    border-radius: 20px;
}

#clearSearchBtn {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    color: var(--portal-secondary);
    font-size: var(--portal-type-lead);
    cursor: pointer;
}

/* --- Hilfe im Admin. Erklaert, was ein Feld bewirkt und was nach dem
       Speichern passiert. Klappt zu, damit die Masken fuer Geuebte kurz
       bleiben. --- */

.c-help {
    border: 1px solid var(--portal-divider);
    background: var(--portal-panel-bg);
    padding: 10px 14px;
    margin: 0 0 18px;
    font-size: var(--portal-type-small);
    color: var(--portal-text);
}

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

.c-help p {
    margin: 8px 0;
}

.c-help ul {
    margin: 8px 0;
    padding-left: 20px;
}

.c-help code {
    background: var(--portal-chip-bg);
    padding: 1px 4px;
}

.c-help table {
    width: 100%;
    margin: 8px 0;
    border-collapse: collapse;
}

.c-help th,
.c-help td {
    padding: 4px 10px 4px 0;
    border-bottom: 1px solid var(--portal-divider);
    text-align: left;
    vertical-align: top;
}

.c-help th {
    color: var(--portal-secondary);
    font-weight: 600;
}

.c-help-lead {
    margin: 0 0 14px;
    font-size: var(--portal-type-small);
    color: var(--portal-secondary);
}

/* Kennzeichen des Standardmandanten in der Organisationsliste. */
.c-org-root__hint {
    display: inline-block;
    margin-right: 8px;
    padding: 1px 6px;
    font-size: var(--portal-type-caption);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--portal-secondary);
    font-weight: 600;
    border: 1px solid var(--portal-divider);
    border-radius: 3px;
}

/* Aktionslinks in Admin-Tabellen, statt senkrechter Striche im Markup. */
.c-admin-actions {
    white-space: nowrap;
}

.c-admin-actions a + a::before {
    content: "|";
    margin: 0 0.55em;
    color: var(--portal-secondary);
    pointer-events: none;
}

/* Quelltext der Einstellungen. Kein WYSIWYG: die Seiten geben HTML
   unverändert aus, ein Editor wuerde Klassen und Umbrueche zerlegen.
   height muss gesetzt sein — Branding setzt .form-control auf height:unset
   und das Feld klappt sonst auf eine Zeile zusammen. */
textarea.c-html-editor {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: min(70vh, 42rem);
    min-height: 20rem;
    margin: 0 0 10px;
    padding: 10px 12px;
    border: 1px solid var(--portal-divider);
    border-radius: 0;
    background: var(--portal-panel-bg, #fff);
    color: var(--portal-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--portal-type-caption);
    line-height: 1.4;
    white-space: pre;
    tab-size: 2;
    resize: vertical;
}

/* Klartext für Impressum: gleiche Höhe wie der HTML-Editor, normale Schrift. */
textarea.c-dokument-editor {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: min(50vh, 28rem);
    min-height: 16rem;
    resize: vertical;
}

/* Die Admin-Leiste ist absolut und nimmt keinen Platz. Ohne Abstand
   liegt „Zurück“ auf den Tabs; das <br> im Layout hat das nicht gehalten. */
.c-admin-back {
    margin: 0 0 14px;
}

.c-admin-back:first-of-type {
    margin-top: 36px;
}

.c-dash {
    margin: 8px 0 48px;
}

.c-dash-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px 24px;
    margin-bottom: 16px;
}

.c-dash-title {
    margin: 0 0 4px;
}

.c-dash-note {
    color: var(--portal-secondary);
    margin: 0;
    font-size: var(--portal-type-small);
}

.c-dash-warn {
    margin: 8px 0 0;
    font-size: var(--portal-type-small);
    color: #8a5a00;
}

.c-dash-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
}

.c-dash-periods {
    display: flex;
    border: 1px solid var(--portal-divider);
}

.c-dash-period {
    padding: 4px 10px;
    font-size: var(--portal-type-small);
    color: var(--portal-secondary);
    text-decoration: none;
}

.c-dash-period + .c-dash-period {
    border-left: 1px solid var(--portal-divider);
}

.c-dash-period.is-on {
    background: var(--portal-chip-bg);
    color: var(--portal-text);
    font-weight: 600;
}

.c-dash-orgform,
.c-dash-orgform select {
    margin: 0;
}

.c-dash-links {
    font-size: var(--portal-type-small);
}

.c-dash-links a + a {
    margin-left: 10px;
}

.c-dash-stats {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 20px;
}

.c-dash-stat {
    position: relative;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    background: var(--portal-panel-bg);
    border: 1px solid var(--portal-divider);
    border-radius: 3px;
    padding: 10px 14px 12px;
}

.c-dash-stat__label {
    font-size: var(--portal-type-caption);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--portal-secondary);
}

.c-dash-stat__value {
    font-size: var(--portal-type-display);
    font-weight: 600;
    color: var(--portal-text);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.c-dash-stat__sub {
    font-size: var(--portal-type-small);
    font-weight: 400;
    color: var(--portal-secondary);
}

/* Drei Bewertungsstufen mit festen Schwellen (Models/DashboardTone), nicht die
   fünf blattrelativen der Heatmap. Jeder Badge trägt eine Kontur im eigenen
   Farbton: die Kachelfläche ist je Variante anders und schluckt sonst die
   blasseren Stufen. */
.c-dash-badge {
    margin-top: auto;
    padding: 2px 8px;
    border: 1px solid transparent;
    border-radius: 9px;
    font-size: var(--portal-type-caption);
    line-height: 1.6;
    white-space: nowrap;
    color: #333333;
    font-variant-numeric: tabular-nums;
}

.c-dash-badge--good {
    background: #b7d4b4;
    border-color: #8fb98c;
}

.c-dash-badge--warn {
    background: #f0dfc4;
    border-color: #d3b78d;
}

.c-dash-badge--bad {
    background: #f0d0d0;
    border-color: #d3a3a3;
}

.c-dash-badge--mute {
    border-color: var(--portal-divider);
    color: var(--portal-secondary);
}

.c-dash-badgewrap {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
}

.c-dash-badgewrap .c-dash-badge {
    margin-top: 0;
}

.c-dash-info {
    position: relative;
    display: inline-flex;
    color: var(--portal-secondary);
    cursor: help;
    font-size: var(--portal-type-small);
    line-height: 1;
}

.c-dash-info:focus {
    outline: none;
}

.c-dash-info:focus-visible {
    color: var(--portal-text);
}

.c-dash-info__tip {
    display: none;
    position: absolute;
    right: 0;
    bottom: calc(100% + 7px);
    width: max-content;
    max-width: 16.5rem;
    padding: 7px 9px;
    background: #333333;
    color: #ffffff;
    font-size: var(--portal-type-caption);
    line-height: 1.45;
    border-radius: 3px;
    white-space: normal;
    z-index: 6;
    pointer-events: none;
}

.c-dash-info:hover .c-dash-info__tip,
.c-dash-info:focus-visible .c-dash-info__tip {
    display: block;
}

.c-dash-wait {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.78);
}

.c-dash-wait.is-on {
    display: flex;
}

.c-dash-wait__box {
    text-align: center;
    color: var(--portal-secondary);
    font-size: var(--portal-type-small);
}

.c-dash-wait__box p {
    margin: 0;
}

.c-dash-wait__spin {
    width: 36px;
    height: 36px;
    margin: 0 auto 12px;
    border: 3px solid var(--portal-divider);
    border-top-color: var(--portal-text);
    border-radius: 50%;
    animation: c-dash-spin 0.7s linear infinite;
}

.c-page-login {
    display: block;
    box-sizing: border-box;
    width: 100%;
    clear: both;
    padding: 10px 15px 24px;
    background-color: rgba(102, 102, 102, 0.9);
}

.c-page-login .form-control.login,
.c-page-login input.login {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.c-login-prompt__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 16px 0 0;
}

.c-login-prompt__actions .shopInfoBtn {
    float: none;
    position: static;
}

/* Kurzer Hinweis, kein Vollbild: sonst streckt .infotext den Dialog
   auf die ganze Telefongröße und die beiden Knöpfe sitzen klein nebeneinander. */
#textInfo .infotext {
    height: auto;
}

@media (max-width: 575.98px) {
    #textInfo .modal-dialog.modal-fullscreen-sm-down {
        top: 48px;
        left: 5%;
        width: 90%;
        max-width: 90%;
        height: auto;
        margin: 0;
        max-height: calc(100dvh - 64px);
    }

    #textInfo .modal-fullscreen-sm-down .modal-content.info {
        width: 100% !important;
        height: auto !important;
        max-height: none;
        border-radius: 2px;
    }

    #textInfo .modal-content > .infotext {
        flex: 0 1 auto;
        overflow: visible;
        padding: 20px 16px 24px;
    }

    #textInfo .c-login-prompt__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-top: 20px;
    }

    #textInfo .c-login-prompt__actions .shopInfoBtn {
        width: 100%;
        box-sizing: border-box;
        font-size: 16px;
        line-height: 1.4;
        padding: 12px 40px 12px 14px;
        text-align: left;
    }
}

@media (max-width: 767.98px) {
    .stage,
    .stage .slider,
    .stage .slick-carousel,
    .stage .slick-list,
    .stage .slick-track,
    .stage .slick-slide,
    .stage .slick-slide > div,
    .stage .sliderslideimg {
        height: 183px !important;
        max-height: 183px;
    }
}

@keyframes c-dash-spin {
    to { transform: rotate(360deg); }
}

.c-dash-h {
    margin: 0 0 8px;
    font-size: var(--portal-type-small);
    font-weight: 600;
    color: var(--portal-text);
}

.c-dash-h span {
    font-weight: 400;
    color: var(--portal-secondary);
}

.c-dash-block {
    margin: 0 0 16px;
}

.c-dash-block summary {
    cursor: pointer;
    font-size: var(--portal-type-small);
    font-weight: 600;
    margin-bottom: 8px;
}

.c-dash-rank,
.c-dash-heat {
    width: 100%;
    margin: 0 0 8px;
    border-collapse: collapse;
    font-size: var(--portal-type-small);
}

.c-dash-rank th,
.c-dash-rank td,
.c-dash-heat th,
.c-dash-heat td {
    padding: 5px 8px;
    border-bottom: 1px solid var(--portal-divider);
    text-align: left;
}

.c-dash-rank th:not(:first-child),
.c-dash-rank td:not(:first-child),
.c-dash-heat td {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.c-dash-heatwrap {
    overflow-x: auto;
}

.c-dash-heat th:first-child,
.c-dash-heat td:first-child {
    position: sticky;
    left: 0;
    background: var(--portal-page-bg);
    z-index: 1;
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.c-dash-heat thead th:not(:first-child),
.c-dash-heat tr:first-child th:not(:first-child) {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    max-width: 2.4rem;
    font-size: var(--portal-type-caption);
    font-weight: 600;
    white-space: nowrap;
    text-align: left;
    overflow: hidden;
}

.c-dash-heat thead th:not(:first-child) > span,
.c-dash-heat tr:first-child th:not(:first-child) > span {
    display: inline-block;
    /* Inline-Achse ist bei vertical-rl die Höhe: begrenzt die Spaltenkopf-Länge */
    max-height: 8.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: top;
}

.c-dash-heat--1 { background: #f0d0d0; }
.c-dash-heat--2 { background: #efe0d2; }
.c-dash-heat--3 { background: #ece9dc; }
.c-dash-heat--4 { background: #d4e3d0; }
.c-dash-heat--5 { background: #b7d4b4; }

.c-dash-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}

.c-dash-series {
    margin: 0 0 20px;
}

.c-dash-series__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 10px;
}

.c-dash-series__head .c-dash-h,
.c-dash-series__head .c-dash-note {
    margin: 0;
}

.c-dash-series__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.c-dash-legend {
    display: flex;
    gap: 14px;
    font-size: var(--portal-type-caption);
    color: var(--portal-secondary);
}

.c-dash-legend__now::before,
.c-dash-legend__prev::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 0;
    margin-right: 6px;
    vertical-align: middle;
    border-top: 2px solid var(--portal-text);
}

.c-dash-legend__prev::before {
    border-top-style: dashed;
    opacity: 0.55;
}

.c-dash-chart {
    min-width: 0;
}

.c-dash-svg {
    width: 100%;
    height: auto;
    display: block;
    font-family: inherit;
    color: var(--portal-text);
}

.c-dash-svg__label {
    fill: var(--portal-secondary);
    font-size: 10px;
}

.c-dash-line__axis {
    stroke: var(--portal-divider);
    stroke-width: 1;
}

.c-dash-line__now,
.c-dash-line__prev,
.c-dash-line__axis {
    fill: none;
    vector-effect: non-scaling-stroke;
}

.c-dash-line__now {
    stroke: var(--portal-text);
    stroke-width: 1.75;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.c-dash-line__prev {
    stroke: var(--portal-secondary);
    stroke-width: 1.5;
    stroke-dasharray: 4 3;
    opacity: 0.45;
}

.c-dash-line__dot {
    fill: transparent;
    stroke: none;
}

.c-dash-svg--dots .c-dash-line__dot {
    fill: var(--portal-text);
}

.c-dash-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.c-dash-chip {
    background: var(--portal-chip-bg);
    color: var(--portal-secondary);
    font-size: var(--portal-type-caption);
    line-height: 1.6;
    padding: 2px 9px;
    border-radius: 10px;
}

@media (max-width: 1080px) {
    .c-dash-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .c-dash-stats,
    .c-dash-split {
        grid-template-columns: 1fr 1fr;
    }

    .c-dash-series__grid {
        grid-template-columns: 1fr;
    }
}

/* Kenntnisnahme und Login: Slider weg, sonst liegt das Formular unter
   dem 550px-Streifen und nach dem Absenden bleibt nur der Banner. */
body.einwilligung2 .stage,
body.no-slider .stage {
    display: none !important;
}

body.einwilligung2 .newbox,
body.einwilligung2 .shop-teaser {
    display: none !important;
}

.c-consent {
    width: 70%;
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
    padding: 64px 20px 80px;
    color: var(--portal-text);
    font-size: var(--portal-type-body);
    line-height: 1.55;
}

.c-consent .modal-title {
    margin: 0 0 1.1rem;
}

.c-consent p {
    margin: 0 0 1rem;
}

.c-consent__choice {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0.9rem 0;
    font-weight: 400;
}

.c-consent__choice input {
    width: 1.05em;
    height: 1.05em;
    margin: 0;
    flex-shrink: 0;
    appearance: none;
    border: 1px solid var(--portal-text);
    border-radius: 50%;
    background: #fff;
}

.c-consent__choice input:checked {
    box-shadow: inset 0 0 0 0.28em var(--portal-text);
}

.c-consent__mail {
    display: block;
    width: 100%;
    max-width: 28rem;
    box-sizing: border-box;
    border: 0;
    border-radius: 2rem;
    background: #fff;
    padding: 0.65rem 1.15rem;
    margin: 0.85rem 0 1rem;
    font-size: var(--portal-type-body);
    color: var(--portal-text);
}

.c-consent__submit.btn.shopInfoBtn {
    display: inline-block;
    margin-top: 0.35rem;
    background-color: var(--portal-accent);
    background-image: url(/Content/img/next_button.png);
    background-repeat: no-repeat;
    background-position: right 5px center;
    background-size: auto 55%;
    color: #fff;
    border: 0;
    border-radius: 0;
    font-weight: 200;
    padding: 3px 34px 3px 10px;
}

@media (min-width: 768px) {
    .c-consent {
        padding-top: 140px;
    }
}

@media (min-width: 1200px) {
    .c-consent {
        padding-top: 220px;
    }
}