/* Haut für die öffentlichen Seiten: legt sich über die Grundbausteine und gibt ihnen die Gestaltung der Startseite.
   Gilt nur im Rahmen mit class="seitenrahmen". Farben, Schrift und Rundungen kommen aus den Variablen der Startseite. */
.seitenrahmen{--p:#111113;--pl:#c8f031;--text:#111113;--leise:#5b5f66;--linie:#e3e3e8;--grau:#f5f5f7;
  --primary:#111113;--primary-50:#f5f5f7;--primary-100:#ecfaba;--primary-200:#e0f58a;--primary-300:#d4ee5e;--primary-400:#c8f031;--primary-600:#111113;--primary-700:#111113;--primary-800:#111113;--primary-900:#111113;
  font-family:"Schibsted Grotesk",system-ui,sans-serif;font-size:17px;line-height:1.55;color:var(--text);background:#fff;-webkit-font-smoothing:antialiased}
.seitenrahmen *{font-family:inherit}
.seitenrahmen .fas,.seitenrahmen .fab,.seitenrahmen .far,.seitenrahmen svg{font-family:"Font Awesome 6 Free","Font Awesome 6 Brands",inherit}
.seitenrahmen pre,.seitenrahmen code,.seitenrahmen kbd,.seitenrahmen samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace}
.seitenrahmen :not(pre)>code{background:var(--grau);color:var(--text);padding:.15em .5em;border-radius:8px;font-size:.9em}
.seitenrahmen h1,.seitenrahmen h2,.seitenrahmen h3,.seitenrahmen h4,.seitenrahmen h5,.seitenrahmen h6,
.seitenrahmen .h1,.seitenrahmen .h2,.seitenrahmen .h3,.seitenrahmen .h4,.seitenrahmen .h5,.seitenrahmen .h6{font-weight:700;letter-spacing:-.02em;line-height:1.15;color:var(--text)}
.seitenrahmen h1,.seitenrahmen .h1{font-size:clamp(34px,5vw,56px);letter-spacing:-.035em;line-height:1.06}
.seitenrahmen h2,.seitenrahmen .h2{font-size:clamp(26px,3.4vw,40px);letter-spacing:-.03em}
.seitenrahmen h3,.seitenrahmen .h3{font-size:clamp(21px,2.2vw,28px)}
.seitenrahmen a:not(.knopf):not(.btn){color:inherit;text-decoration-color:var(--pl);text-decoration-thickness:2px;text-underline-offset:3px}
.seitenrahmen a:not(.knopf):not(.btn):hover{color:var(--text)}
.seitenrahmen .kopf a,.seitenrahmen .fuss a,.seitenrahmen .marke{text-decoration:none}
.seitenrahmen .fuss .links a,.seitenrahmen .fuss-zeile a{color:var(--leise)}
.seitenrahmen .knopf{color:#fff}.seitenrahmen .knopf.hell{color:#111113}.seitenrahmen .knopf.rand{color:#111113}
.seitenrahmen .text-primary,.seitenrahmen .text-primary-600,.seitenrahmen .text-primary-700,.seitenrahmen .text-primary-800{color:var(--text)!important}
.seitenrahmen .text-muted,.seitenrahmen .text-gray-500,.seitenrahmen .text-gray-600{color:var(--leise)!important}
.seitenrahmen .text-gray-800,.seitenrahmen .text-dark{color:var(--text)!important}
.seitenrahmen .bg-primary-50,.seitenrahmen .bg-primary-100,.seitenrahmen .bg-gray-50,.seitenrahmen .bg-gray-100{background:var(--grau)!important}
.seitenrahmen .bg-primary{background:var(--p)!important;color:#fff}

/* Inhaltsbereich */
.seite{padding:clamp(36px,5vw,72px) 0 clamp(48px,6vw,96px);min-height:60vh}
.seite>.innen>.container,.seite>.innen>.row,.seite .container{width:100%;max-width:none;padding-left:0;padding-right:0}
.seite .row{margin-left:-12px;margin-right:-12px}
.seite .row>[class*="col"]{padding-left:12px;padding-right:12px}

/* Knöpfe: ganz rund, ein Gewicht */
.seitenrahmen .btn{border-radius:99px;font-weight:600;font-size:16px;padding:.7rem 1.5rem;border-width:2px;box-shadow:none;transition:transform .15s}
.seitenrahmen .btn:hover{transform:translateY(-1px)}
.seitenrahmen .btn:focus,.seitenrahmen .btn.focus{box-shadow:0 0 0 3px rgba(200,240,49,.55)}
.seitenrahmen .btn-sm{padding:.45rem 1.1rem;font-size:15px}
.seitenrahmen .btn-lg{padding:.9rem 1.9rem;font-size:17px}
.seitenrahmen .btn-primary,.seitenrahmen .btn-dark{background:var(--p);border-color:var(--p);color:#fff}
.seitenrahmen .btn-primary:hover,.seitenrahmen .btn-primary:focus,.seitenrahmen .btn-dark:hover{background:#2a2b30;border-color:#2a2b30;color:#fff}
.seitenrahmen .btn-outline-primary,.seitenrahmen .btn-outline-dark,.seitenrahmen .btn-outline-secondary{background:transparent;border-color:var(--p);color:var(--p)}
.seitenrahmen .btn-outline-primary:hover,.seitenrahmen .btn-outline-dark:hover,.seitenrahmen .btn-outline-secondary:hover{background:var(--p);border-color:var(--p);color:#fff}
.seitenrahmen .btn-light,.seitenrahmen .btn-secondary,.seitenrahmen .btn-gray-100,.seitenrahmen .btn-gray-200{background:var(--grau);border-color:var(--grau);color:var(--text)}
.seitenrahmen .btn-light:hover,.seitenrahmen .btn-secondary:hover{background:#ebebee;border-color:#ebebee;color:var(--text)}
.seitenrahmen .btn-success{background:var(--pl);border-color:var(--pl);color:var(--text)}
.seitenrahmen .btn-link{color:var(--text);text-decoration:underline;text-decoration-color:var(--pl);text-decoration-thickness:2px}

/* Karten: große Rundung, Haarlinie, kein Schatten */
.seitenrahmen .card{border:1px solid var(--linie);border-radius:28px;background:#fff;box-shadow:none}
.seitenrahmen .card.bg-gray-100,.seitenrahmen .card.bg-gray-50{background:var(--grau)!important;border-color:transparent}
.seitenrahmen .card-body{padding:clamp(20px,2.4vw,32px)}
.seitenrahmen .rounded-2x,.seitenrahmen .rounded-3x,.seitenrahmen .rounded{border-radius:20px!important}
.seitenrahmen .index-highly-rounded{border-radius:28px}
.seitenrahmen .card-footer{background:transparent;border-top:1px solid var(--linie)}

/* Formulare */
.seitenrahmen label{font-weight:600;font-size:15px;margin-bottom:.4rem}
.seitenrahmen .form-control,.seitenrahmen .custom-select{height:auto;min-height:50px;padding:.7rem 1rem;border:1.5px solid #cfd0d6;border-radius:14px;background-color:#fff;color:var(--text);font-size:17px;box-shadow:none}
.seitenrahmen textarea.form-control{min-height:120px}
.seitenrahmen .form-control:focus,.seitenrahmen .custom-select:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(200,240,49,.55)}
.seitenrahmen .form-control::placeholder{color:#8b8e96}
.seitenrahmen .form-control.is-invalid{border-color:#c0392b;background-image:none}
.seitenrahmen .invalid-feedback{color:#b0301f;font-size:14px}
.seitenrahmen .input-group-text{border:1.5px solid #cfd0d6;border-radius:14px;background:var(--grau);color:var(--leise)}
.seitenrahmen .input-group>.form-control:not(:last-child),.seitenrahmen .input-group>.input-group-prepend>.input-group-text{border-top-right-radius:0;border-bottom-right-radius:0}
.seitenrahmen .input-group>.form-control:not(:first-child),.seitenrahmen .input-group>.input-group-append>.input-group-text{border-top-left-radius:0;border-bottom-left-radius:0}
.seitenrahmen .custom-control-input:checked~.custom-control-label::before{background:var(--p);border-color:var(--p)}
.seitenrahmen .form-text{color:var(--leise)}

/* Hinweise */
.seitenrahmen .alert{border:1px solid var(--linie);border-radius:18px;background:var(--grau);color:var(--text);padding:.9rem 1.2rem}
.seitenrahmen .alert-success{background:#f1fbd0;border-color:#c8f031}
.seitenrahmen .alert-danger{background:#fde8e8;border-color:#f0b3b3}
.seitenrahmen .alert-warning{background:#fff4d6;border-color:#f1d68a}
.seitenrahmen .alert-info{background:#eef2f7;border-color:#cfd8e3}
.seitenrahmen .text-success{color:#4d7a00!important}
.seitenrahmen .text-danger{color:#b0301f!important}

/* Kleinteile */
.seitenrahmen .badge{border-radius:99px;font-weight:600;padding:.4em .9em}
.seitenrahmen .badge-success{background:var(--pl);color:var(--text)}
.seitenrahmen .badge-primary,.seitenrahmen .badge-dark{background:var(--p);color:#fff}
.seitenrahmen .badge-light{background:var(--grau);color:var(--text)}
.seitenrahmen .dropdown-menu{border:1px solid var(--linie);border-radius:18px;box-shadow:0 12px 40px rgba(17,17,19,.1);padding:8px}
.seitenrahmen .dropdown-item{border-radius:10px}
.seitenrahmen .dropdown-item:hover,.seitenrahmen .dropdown-item.active{background:var(--grau);color:var(--text)}
.seitenrahmen .page-link{border-radius:99px;margin:0 3px;border:1px solid var(--linie);color:var(--text)}
.seitenrahmen .page-item.active .page-link{background:var(--p);border-color:var(--p);color:#fff}
.seitenrahmen .custom-breadcrumbs a{color:var(--leise)}
.seitenrahmen hr{border-top:1px solid var(--linie)}
.seitenrahmen table{border-collapse:collapse}
.seitenrahmen .table td,.seitenrahmen .table th{border-top:1px solid var(--linie)}
.seitenrahmen .table thead th{border-bottom:2px solid var(--p)}
.seitenrahmen pre,.seitenrahmen code{border-radius:12px}
.seitenrahmen .api-widget-icon{border-radius:14px}
.seitenrahmen .pricing-price-amount{font-weight:800;letter-spacing:-.04em}
.seitenrahmen .modal-content{border-radius:28px;border:0}

/* Anmeldung und Zugangsseiten: Marke, Karte, Rückweg */
.anmeldung .innen{width:min(1260px,100% - 48px)}
.anmeldung-seite{display:flex;flex-direction:column;align-items:center;padding:clamp(40px,7vw,96px) 24px clamp(36px,5vw,64px);min-height:70vh}
.marke-gross{font-size:34px}
.anmeldung-karte{width:min(480px,100%);margin-top:clamp(24px,3.5vw,44px);padding:clamp(24px,4vw,44px);border:1px solid var(--linie);border-radius:32px;background:#fff}
.anmeldung-karte h1,.anmeldung-karte .h5{font-size:clamp(26px,3.2vw,34px);letter-spacing:-.03em;font-weight:700;line-height:1.1}
.anmeldung-karte .btn-block{margin-top:6px}
.anmeldung-zurueck{margin:22px 0 0;font-size:15px}
.anmeldung-zurueck a{color:var(--leise)}
@media(max-width:600px){.seitenrahmen{font-size:16px}.anmeldung-karte{border-radius:26px}}