/* Schriftgrößen: nur Variablen aus /css/rahmen.css (--fs-h2 … --fs-small).
   Breakpoint: nur 768px, wie auf der Startseite. */

/* =====================================================================
   SF-REGISTER · PRÜFSEITE
   Gleiche Farben und Schriften wie die Landingpage, aber eigenständig,
   damit /verify/ unabhängig von der Landingpage dauerhaft funktioniert.
   ===================================================================== */

@font-face {
         font-family: 'Concrette';
         font-weight: 900;
         font-style: normal;
         font-display: swap;
         src: url('fonts/Concrette-900.woff2') format('woff2');
}

@font-face {
         font-family: 'Lato';
         font-weight: 400;
         font-style: normal;
         font-display: swap;
         src: url('fonts/Lato-400.woff2') format('woff2');
}

@font-face {
         font-family: 'Lato';
         font-weight: 700;
         font-style: normal;
         font-display: swap;
         src: url('fonts/Lato-700.woff2') format('woff2');
}

:root {
         --nero: #0D0B09;
         --nerolight: #232323;
         --neroverylight: #575757;
         --avorio: #F2EAD9;
         --avoriolight: #fffcf8;
         --oro: #C8A866;
         --bordeaux: #6B1A24;
         --verde: #1A3A28;
         --verdelight: #294c37;
}

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

html,
body {
         margin: 0;
         padding: 0;
}

body {
         background: var(--avoriolight);
         color: var(--nerolight);
         font-family: 'Lato', sans-serif;
         font-size: var(--fs-p);
         line-height: 1.75;
         min-height: 100vh;
         display: flex;
         flex-direction: column;
}

/* ---------- Kopf ---------- */
.sf-head {
         display: flex;
         flex-direction: column;
         align-items: center;
         gap: 6px;
         padding: 28px 16px 0;
}

.sf-logo {
         text-decoration: none;
}

.sf-logo span {
         display: none;
         font-family: 'Concrette', serif;
         font-weight: 900;
         font-size: var(--fs-h3);
         color: var(--nerolight);
}

.sf-logo.no-logo span {
         display: block;
}

.sf-logo img {
         display: block;
         height: 36px;
         width: auto;
}

.sf-kicker {
         font-size: var(--fs-small);
         letter-spacing: 3px;
         text-transform: uppercase;
         color: var(--neroverylight);
}

/* ---------- Inhalt ---------- */
.sf-main {
         flex: 1;
         width: 100%;
         max-width: 720px;
         margin: 0 auto;
         padding: 40px 16px 260px;   /* unten Platz für die Kugel über dem Footer (rahmen.css) */
}

.sf-card {
         background: #fff;
         border-radius: 24px;
         box-shadow: 0 0px 0 var(--avorio), 0 18px 40px rgba(13, 11, 9, 0.08);
         padding: 56px 48px 48px;
         text-align: center;
         position: relative;
         animation: sf-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

h1,
h2 {
         font-family: 'Concrette', serif;
         font-weight: 900;
         color: var(--nerolight);
}

h1 {
         font-size: var(--fs-h2);
         line-height: 1.15;
         margin: 0 0 18px;
         text-shadow:
                  1.5px 1.5px 0 var(--avoriolight),
                  3px 3px 0 var(--oro);
}

h2 {
         font-size: var(--fs-small);
         letter-spacing: 2px;
         text-transform: uppercase;
         margin: 0 0 14px;
         color: var(--oro);
}

p {
         margin: 0 0 18px;
}

.sf-hint {
         font-size: var(--fs-small);
         color: var(--neroverylight);
         margin: 18px 0 0;
}

/* ---------- Siegel ---------- */
.sf-seal {
         width: 96px;
         height: 96px;
         margin: 0 auto 18px;
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         box-shadow:
                  0 0 0 4px #fff,
                  0 0 0 7px var(--oro);
         animation: sf-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s both;
}

.sf-seal svg {
         width: 54px;
         height: 54px;
         fill: none;
         stroke: var(--avoriolight);
         stroke-width: 5;
         stroke-linecap: round;
         stroke-linejoin: round;
         stroke-dasharray: 60;
         stroke-dashoffset: 60;
         animation: sf-draw 0.6s ease 0.7s forwards;
}

.sf-seal--ok {
         background: var(--verde);
}

.sf-seal--warn {
         background: var(--bordeaux);
}

.sf-seal--neutral {
         background: var(--neroverylight);
}

.sf-status {
         display: inline-block;
         font-size: var(--fs-small);
         font-weight: 700;
         letter-spacing: 3px;
         text-transform: uppercase;
         color: var(--verde);
         margin-bottom: 8px;
}

.sf-status--warn {
         color: var(--bordeaux);
}

/* ---------- Seriennummer ---------- */
.sf-serial {
         display: inline-block;
         max-width: 100%;
         font-family: 'Concrette', serif;
         font-weight: 900;
         font-size: var(--fs-h4);
         letter-spacing: 1.5px;
         color: var(--nerolight);
         background: var(--avoriolight);
         border: 2px solid var(--avorio);
         border-radius: 30px;
         padding: 10px 22px;
         margin: 0 0 32px;
         overflow-wrap: anywhere;
}

.sf-serial--muted {
         color: var(--neroverylight);
}

/* ---------- Fakten ---------- */
.sf-facts {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
         gap: 14px;
         margin: 0 0 32px;
}

.sf-facts div {
         background: var(--avoriolight);
         border-radius: 16px;
         padding: 16px;
}

.sf-facts dt {
         font-size: var(--fs-small);
         letter-spacing: 2px;
         text-transform: uppercase;
         color: var(--neroverylight);
}

.sf-facts dd {
         margin: 4px 0 0;
         font-family: 'Concrette', serif;
         font-weight: 900;
         font-size: var(--fs-h4);
         white-space: nowrap;
}

.sf-block {
         margin: 0 0 32px;
}

.sf-values {
         list-style: none;
         margin: 0 auto;
         padding: 0;
         max-width: 420px;
}

.sf-values li {
         display: flex;
         justify-content: space-between;
         gap: 16px;
         padding: 9px 4px;
         border-bottom: 1px solid var(--avorio);
         text-align: left;
}

.sf-values li:last-child {
         border-bottom: 0;
}

.sf-contents {
         max-width: 480px;
         margin: 0 auto;
}

/* ---------- Historie ---------- */
.sf-history {
         list-style: none;
         margin: 0 auto;
         padding: 0;
         max-width: 420px;
         text-align: left;
         position: relative;
}

.sf-history:before {
         content: "";
         position: absolute;
         left: 6px;
         top: 10px;
         bottom: 10px;
         width: 2px;
         background: var(--avorio);
}

.sf-history li {
         position: relative;
         padding: 0 0 18px 30px;
         display: flex;
         flex-direction: column;
}

.sf-history li:last-child {
         padding-bottom: 0;
}

.sf-history li:before {
         content: "";
         position: absolute;
         left: 0;
         top: 7px;
         width: 14px;
         height: 14px;
         border-radius: 50%;
         background: #fff;
         box-shadow: inset 0 0 0 3px var(--oro);
}

.sf-history-date {
         font-size: var(--fs-small);
         letter-spacing: 1px;
         text-transform: uppercase;
         color: var(--neroverylight);
}

.sf-history em {
         font-size: var(--fs-p);
         color: var(--neroverylight);
}

/* ---------- Galerie ---------- */
.sf-gallery {
         display: grid;
         grid-template-columns: repeat(var(--cols, 3), 1fr);
         gap: 12px;
}

.sf-gallery-item {
         display: block;
         border-radius: 14px;
         overflow: hidden;
         background: var(--avoriolight);
         aspect-ratio: 1 / 1;
}

.sf-gallery-item img {
         display: block;
         width: 100%;
         height: 100%;
         object-fit: cover;
         transition: transform 0.4s ease;
}

.sf-gallery-item:hover img {
         transform: scale(1.05);
}

.sf-note {
         font-size: var(--fs-p);
         color: var(--neroverylight);
         max-width: 500px;
         margin: 0 auto 14px;
}

.sf-sign {
         font-family: 'Concrette', serif;
         font-weight: 900;
         color: var(--oro);
         margin: 0;
}

/* ---------- Formular & Buttons ---------- */
.sf-form {
         display: flex;
         flex-direction: column;
         align-items: center;
         gap: 16px;
         margin: 28px 0 0;
}

.sf-form input {
         width: 100%;
         max-width: 520px;
         font-family: 'Concrette', serif;
         font-weight: 900;
         font-size: var(--fs-input);
         letter-spacing: 1.5px;
         text-align: center;
         text-transform: uppercase;
         color: var(--nerolight);
         background:var(--avoriolight);
         border: 0px;
         border-radius: 30px;
         padding: 14px 18px;
         outline: none;
         transition: border-color 0.2s;
}

.sf-form input:focus {
         border-color: var(--oro);
}

.sf-form input::placeholder {
         color: #bdb5a6;
         text-transform: none;
}

.sf-button {
         position: relative;
         display: inline-block;
         background: var(--verde);
         color: var(--avoriolight);
         font-family: 'Concrette', serif;
         font-weight: 900;
         font-size: var(--fs-button);
         line-height: 28px;      /* Maße wie .button der Startseite */
         text-decoration: none;
         border: 0;
         border-radius: 30px;
         padding: 15px 30px;
         cursor: pointer;
         box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.25);
         text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
         transition: background 0.25s;
}

.sf-button:after {
         box-sizing: content-box;   /* wie auf der Startseite: Ring rundum 4px Abstand */
         position: absolute;
         top: 4px;
         left: 4px;
         width: calc(100% - 12px);
         height: calc(100% - 12px);
         border: 2px solid var(--avoriolight);
         border-radius: 25px;
         content: "";
}

.sf-button:hover {
         background: var(--verdelight);
}

.sf-link {
         display: inline-block;
         margin-top: 22px;   /* Farbe und Unterstrich: rahmen.css */
}

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

/* ---------- Besitzerwechsel ---------- */
.sf-transfer-link {
         margin: 28px 0 0;
         padding-top: 22px;
         border-top: 1px solid var(--avorio);
         font-size: var(--fs-p);
}

.sf-transfer-link a {
         color: var(--neroverylight);
}

.sf-transfer {
         text-align: left;
         max-width: 480px;
         margin: 28px auto 0;
}

.sf-transfer fieldset {
         border: 0;
         padding: 0;
         margin: 0 0 22px;
}

.sf-transfer legend {
         font-family: 'Concrette', serif;
         font-weight: 900;
         font-size: var(--fs-p);
         letter-spacing: 2px;
         text-transform: uppercase;
         color: var(--oro);
         margin-bottom: 8px;
}

.sf-transfer label {
         display: block;
         font-size: var(--fs-small);
         font-weight: 700;
         margin-bottom: 14px;
}

.sf-transfer input[type="text"],
.sf-transfer input[type="email"],
.sf-transfer input[type="tel"],
.sf-transfer textarea {
         display: block;
         width: 100%;
         margin-top: 5px;
         padding: 12px 16px;
         font: 400 15px 'Lato', sans-serif;
         color: var(--nerolight);
         background:#f4f4f4;
         border: 0px;
         border-radius: 10px;
         outline: none;
         transition: border-color 0.2s;
}

.sf-transfer input:focus,
.sf-transfer textarea:focus {
         border-color: var(--oro);
}

.sf-transfer .sf-code {
         font-family: 'Concrette', serif;
         font-weight: 900;
         letter-spacing: 2px;
         text-transform: uppercase;
         font-size: var(--fs-input);
}

.sf-person {
         display: grid;
         grid-template-columns: repeat(6, 1fr);
         gap: 0 12px;
}

.sf-person label {
         grid-column: span 3;
}

.sf-person .f-street {
         grid-column: span 4;
}

.sf-person .f-house_no {
         grid-column: span 2;
}

.sf-person .f-zip {
         grid-column: span 2;
}

.sf-person .f-city {
         grid-column: span 4;
}

.sf-person .f-country,
.sf-person .f-phone,
.sf-person .f-email {
         grid-column: span 6;
}

.sf-lost,
.sf-fieldnote {
         font-size: var(--fs-small);
         color: var(--neroverylight);
         margin: -4px 0 0;
}

.sf-fieldnote {
         margin: 0 0 12px;
}

.sf-confirm {
         display: flex !important;
         gap: 12px;
         align-items: flex-start;
         font-weight: 400 !important;
         font-size: var(--fs-small) !important;
         line-height: 1.6;
         color: var(--neroverylight);
         margin: 6px 0 24px !important;
}

.sf-confirm input {
         margin-top: 4px;
         flex-shrink: 0;
}

.sf-transfer .sf-button {
         display: block;
         margin: 0 auto;
}

.sf-error {
         background: var(--bordeaux);
         color: var(--avoriolight);
         border-radius: 12px;
         padding: 10px 16px;
         font-size: var(--fs-p);
         line-height: 1.6;
         margin: 18px auto 0;
         max-width: 480px;
         text-align: left;
}

.sf-hp {
         position: absolute;
         left: -9999px;
         width: 1px;
         height: 1px;
         overflow: hidden;
}

.sf-button--paypal {
         background: #003087;
}

.sf-button--paypal:hover {
         background: #00246a;
}

/* ---------- Bezahlen ---------- */
.sf-pay {
         max-width: 360px;
         margin: 22px auto 0;
}

.sf-pay-amount {
         font-family: 'Concrette', serif;
         font-weight: 900;
         font-size: var(--fs-h3);
         margin-bottom: 14px;
}

.sf-pay-msg {
         font-size: var(--fs-p);
         margin-top: 10px;
}

.sf-pay-msg.is-ok {
         color: var(--verde);
         font-weight: 700;
}

.sf-pay-msg.is-error {
         color: var(--bordeaux);
         font-weight: 700;
}

.sf-paid {
         display: inline-block;
         background: #dfe9e2;
         color: var(--verde);
         font-weight: 700;
         border-radius: 30px;
         padding: 10px 22px;
         margin-top: 16px;
}

/* ---------- Fuß ---------- */
.sf-foot {
         display: flex;
         justify-content: center;
         flex-wrap: wrap;
         gap: 10px 28px;
         padding: 18px 16px 24px;
         border-bottom: 30px solid var(--oro);
}

.sf-foot a {
         font-size: var(--fs-small);
         letter-spacing: 1px;
         text-transform: uppercase;
         color: var(--nerolight);
         text-decoration: none;
}

/* ---------- Lightbox ---------- */
.sf-lightbox {
         position: fixed;
         inset: 0;
         z-index: 100;
         display: flex;
         align-items: center;
         justify-content: center;
         background: rgba(13, 11, 9, 0.92);
         padding: 24px;
         opacity: 0;
         transition: opacity 0.3s ease;
}

.sf-lightbox.is-open {
         opacity: 1;
}

.sf-lightbox img {
         max-width: 100%;
         max-height: 100%;
         border-radius: 12px;
}

.sf-lightbox button {
         position: absolute;
         top: 16px;
         right: 16px;
         width: 44px;
         height: 44px;
         border: 0;
         border-radius: 50%;
         background: var(--avoriolight);
         font-size: var(--fs-h3);
         line-height: 44px;
         cursor: pointer;
}

/* ---------- Animationen ---------- */
@keyframes sf-rise {
         from {
                  opacity: 0;
                  transform: translateY(24px);
         }
         to {
                  opacity: 1;
                  transform: none;
         }
}

@keyframes sf-pop {
         from {
                  opacity: 0;
                  transform: scale(0.4);
         }
         to {
                  opacity: 1;
                  transform: scale(1);
         }
}

@keyframes sf-draw {
         to {
                  stroke-dashoffset: 0;
         }
}

         @media (max-width: 768px) {
                  .sf-card {
                           padding: 44px 20px 32px;
                           border-radius: 20px;
                  }


                  .sf-serial {
                           padding: 8px 18px;
                  }

                  .sf-gallery {
                           grid-template-columns: repeat(2, 1fr);
                  }

                  .sf-person label,
                  .sf-person .f-street,
                  .sf-person .f-city {
                           grid-column: span 6;
                  }

                  .sf-person .f-house_no,
                  .sf-person .f-zip {
                           grid-column: span 3;
                  }

                  .sf-form input {
                           letter-spacing: 1px;
                           padding: 14px 10px;
                  }
         }

         @media (prefers-reduced-motion: reduce) {
                  .sf-card,
                  .sf-seal,
                  .sf-seal svg {
                           animation: none;
                           stroke-dashoffset: 0;
                  }
         }

/* ---------- L'Invito ---------- */
.state-invite .sf-transfer {
         max-width: 540px;
}

.sf-tiers {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 12px;
}

.sf-tier {
         margin: 0 !important;
         cursor: pointer;
}

.sf-tier input {
         position: absolute;
         opacity: 0;
         pointer-events: none;
}

.sf-tier-box {
         display: flex;
         flex-direction: column;
         align-items: center;
         gap: 2px;
         padding: 16px 8px 14px;
         border: 2px solid #e3e3e3;
         border-radius: 10px;
         background: #f4f4f4;
         text-align: center;
         transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.sf-tier-box img {
         width: 74px;
         height: 74px;
         margin-bottom: 8px;
         filter: drop-shadow(2px 4px 0 rgba(13, 11, 9, 0.12));
}

.sf-tier-box strong {
         font-size: var(--fs-small);
}

.sf-tier-box span {
         font-family: 'Concrette', serif;
         font-weight: 900;
         font-size: var(--fs-h4);
}

.sf-tier input:checked + .sf-tier-box {
         border-color: var(--nerolight);
         background: #fff;
         box-shadow: 0 8px 22px rgba(35, 35, 35, 0.25);
         transform: translateY(-2px);
}

.sf-tier input:focus-visible + .sf-tier-box {
         outline: 2px solid var(--verde);
         outline-offset: 2px;
}

.sf-counter {
         display: block;
         text-align: right;
         font-weight: 400;
         font-size: var(--fs-small);
         color: var(--neroverylight);
         margin-top: 4px;
}

.sf-choice {
         display: grid;
         gap: 8px;
         margin-bottom: 14px;
}

.sf-choice label {
         display: flex !important;
         gap: 10px;
         align-items: center;
         font-weight: 400 !important;
         font-size: var(--fs-p) !important;
         padding: 12px 16px;
         border: 2px solid #f4f4f4;
         border-radius: 10px;
         margin: 0 !important;
         cursor: pointer;
}

.sf-choice label:has(input:checked) {
         border: 2px solid var(--neroverylight);
         background: #f4f4f4;
}

.sf-ship {
         margin-bottom: 8px;
}

.sf-transfer input[type="date"] {
         display: block;
         width: 100%;
         margin-top: 5px;
         padding: 11px 16px;
         font: 400 15px 'Lato', sans-serif;
         color: var(--nerolight);
         background:#f4f4f4;
         border: 0px;
         border-radius: 10px;
}

.sf-summary {
         background: #f4f4f4;
         border-radius: 10px;
         padding: 18px 20px;
         margin: 6px 0 20px;
         text-align: left;
         font-size: var(--fs-p);
}

.sf-summary-row {
         display: flex;
         justify-content: space-between;
         gap: 16px;
         padding: 4px 0;
}

.sf-summary-row span:last-child {
         text-align: right;
}

.sf-summary-muted {
         color: var(--neroverylight);
         font-size: var(--fs-small);
}

.sf-summary-total {
         border-top: 1px solid var(--neroverylight);
         margin-top: 8px;
         padding-top: 10px;
         font-family: 'Concrette', serif;
         font-weight: 900;
         font-size: var(--fs-h4);
}

.sf-summary-note {
         font-size: var(--fs-small);
         color: var(--neroverylight);
         text-align: right;
}

.sf-summary--order {
         max-width: 440px;
         margin: 24px auto 0;
}

.sf-summary--order .sf-summary-row span:first-child {
         color: var(--neroverylight);
}

.sf-summary-dedication {
         font-family: Georgia, serif;
         font-style: italic;
         font-size: var(--fs-p);
         line-height: 1.7;
         background: #fff;
         border-left: 3px solid var(--oro);
         padding: 10px 14px;
         margin: 10px 0 4px;
}

.sf-invite-chip {
         width: 120px;
         height: 120px;
         display: block;
         margin: -8px auto 14px;
         filter: drop-shadow(3px 6px 0 rgba(13, 11, 9, 0.12)) drop-shadow(0 12px 18px rgba(13, 11, 9, 0.15));
         animation: sf-chip-in 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes sf-chip-in {
         from {
                  opacity: 0;
                  transform: translateY(14px) rotate(-25deg) scale(0.9);
         }

         to {
                  opacity: 1;
                  transform: none;
         }
}

/* Einlöse-Seite */
.sf-invite-for {
         font-family: Georgia, serif;
         font-style: italic;
         font-size: var(--fs-h4);
         color: var(--neroverylight);
         margin: -6px 0 18px;
}

.sf-invite-card {
         background: var(--avoriolight);
         border: 1px solid var(--oro);
         border-radius: 16px;
         padding: 22px 24px;
         margin: 0 auto 22px;
         max-width: 460px;
}

.sf-invite-card .sf-summary-dedication {
         margin: 0 0 12px;
         background: transparent;
}

.sf-invite-steps {
         text-align: left;
         max-width: 460px;
         margin: 0 auto 24px;
         padding-left: 22px;
}

.sf-invite-steps li {
         margin-bottom: 6px;
}

         @media (max-width: 768px) {
                  .sf-tiers {
                           gap: 8px;
                  }

                  .sf-tier-box img {
                           width: 56px;
                           height: 56px;
                  }

         }

.sf-invite-card .sf-summary-dedication {
         border-left: 0;
         text-align: center;
         font-size: var(--fs-p);
         padding: 4px 0 14px;
         border-bottom: 1px solid var(--avorio);
         margin-bottom: 10px;
}

/* ---------- Auftrag: persönliche Statusseite ---------- */
.sf-order + .sf-card {
         margin-top: 22px;
}


.sf-steps {
         list-style: none;
         text-align: left;
         max-width: 380px;
         margin: 26px auto 30px;
         padding: 0;
         position: relative;
}

.sf-steps li {
         position: relative;
         display: flex;
         align-items: center;
         gap: 14px;
         padding: 0 0 16px;
         color: #a59d90;
         font-size: var(--fs-p);
}

.sf-steps li:not(:last-child):before {
         content: "";
         position: absolute;
         left: 14px;
         top: 30px;
         bottom: 2px;
         width: 2px;
         background: var(--avorio);
}

.sf-steps li.is-done:not(:last-child):before {
         background: var(--verde);
}

.sf-steps i {
         flex: 0 0 30px;
         height: 30px;
         line-height: 27px;
         text-align: center;
         border-radius: 50%;
         font-style: normal;
         font-size: var(--fs-small);
         font-weight: 700;
         border: 2px solid var(--avorio);
         background: #fff;
}

.sf-steps li.is-done {
         color: var(--nerolight);
}

.sf-steps li.is-done i {
         background: var(--verde);
         border-color: var(--verde);
         color: #fff;
}

.sf-steps li.is-now {
         color: var(--nerolight);
         font-weight: 700;
         font-size: var(--fs-p);
}

.sf-steps li.is-now i {
         background: var(--oro);
         border-color: var(--oro);
         color: var(--nero);
         box-shadow: 0 0 0 5px rgba(200, 168, 102, 0.25);
}

.sf-approve {
         margin: 30px 0 0;
         padding: 26px 22px;
         border: 2px solid var(--oro);
         border-radius: 18px;
         background: var(--avoriolight);
}

.sf-approve-no {
         margin-top: 18px;
}

.sf-approve-no summary {
         cursor: pointer;
         color: var(--verde);
         font-weight: 700;
         text-decoration: underline;
}

.sf-order-log,
.sf-order-msg {
         text-align: left;
         padding: 36px 34px;
}

.sf-order-log h2,
.sf-order-msg h2 {
         text-align: left;
}

.sf-log {
         list-style: none;
         margin: 0;
         padding: 0;
}

.sf-log li {
         border-left: 3px solid var(--oro);
         padding: 2px 0 2px 16px;
         margin: 0 0 26px;
}

.sf-log li.is-you {
         border-left-color: var(--verde);
         background: #f3f7f4;
         border-radius: 0 12px 12px 0;
         padding: 12px 16px;
}

.sf-log p {
         margin: 6px 0 0;
}

.sf-log-head {
         display: flex;
         justify-content: space-between;
         gap: 10px;
         font-size: var(--fs-p);
}

.sf-log-head span {
         color: var(--neroverylight);
         font-size: var(--fs-small);
         white-space: nowrap;
}

.sf-log-media {
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
         gap: 8px;
         margin-top: 12px;
}

.sf-log-media img {
         display: block;
         width: 100%;
         aspect-ratio: 4 / 3;
         object-fit: cover;
         border-radius: 10px;
}

.sf-log-media video {
         grid-column: 1 / -1;
         width: 100%;
         border-radius: 12px;
         background: #000;
}

.state-order textarea {
         display: block;
         width: 100%;
         font: inherit;
         font-size: var(--fs-input);
         padding: 12px 14px;
         border: 2px solid var(--avorio);
         border-radius: 14px;
         background: var(--avoriolight);
         margin: 10px 0 14px;
         outline: none;
}

.state-order textarea:focus {
         border-color: var(--oro);
}

@media (max-width: 768px) {
         .sf-order-log,
         .sf-order-msg {
                  padding: 28px 20px;
         }

}

/* ---------- Diebstahlschutz ---------- */
.sf-button--danger {
         background: var(--bordeaux);
}

.sf-button--danger:hover {
         background: #82222e;
}

.sf-owner-choice {
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
         gap: 14px;
         margin: 10px 0 22px;
}

.sf-buyer-check {
         margin: 34px 0 6px;
         padding: 24px 22px;
         border: 1.5px solid var(--avorio);
         border-radius: 18px;
         background: var(--avoriolight);
}

.sf-buyer-check p {
         font-size: var(--fs-p);
}

.sf-inline {
         display: flex;
         flex-wrap: wrap;
         gap: 10px;
         justify-content: center;
}

.sf-inline input {
         flex: 1 1 220px;
         max-width: 320px;
         font: inherit;
         font-size: var(--fs-input);
         padding: 12px 18px;
         border: 2px solid var(--avorio);
         border-radius: 30px;
         background: #fff;
         outline: none;
}

.sf-inline input:focus {
         border-color: var(--oro);
}

.sf-check {
         margin: 16px 0 0;
         padding: 12px 16px;
         border-radius: 12px;
         font-weight: 700;
}

.sf-check--ok {
         background: #dfe9e2;
         color: var(--verde);
}

.sf-check--no {
         background: #f3dfe2;
         color: var(--bordeaux);
}

/* ---------- Sprache ---------- */
.sf-lang {
         display: inline-flex;
         gap: 4px;
         margin-left: 10px;
         vertical-align: middle;
}

.sf-lang a {
         font-size: var(--fs-small);
         letter-spacing: 1px;
         text-decoration: none;
         color: var(--neroverylight);
         padding: 2px 6px;
         border-radius: 10px;
}

.sf-lang a.is-on {
         background: var(--nerolight);
         color: #fff;
}

/* Kollektion über die ganze Breite (lange Namen wie „Signature I · La Commissione“) */
.sf-facts .sf-fact--wide {
         grid-column: 1 / -1;
}

.sf-facts .sf-fact--wide dd {
         white-space: normal;
}

/* ---------- Kontakt und Widerruf (Update 9) ---------- */
.sf-transfer select {
         display: block;
         width: 100%;
         margin-top: 5px;
         padding: 12px 40px 12px 16px;
         font: 400 15px 'Lato', sans-serif;
         color: var(--nerolight);
         background: #f4f4f4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23232323' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 16px center;
         border: 0px;
         border-radius: 10px;
         outline: none;
         -webkit-appearance: none;
         appearance: none;
         cursor: pointer;
}

.sf-transfer select:focus,
.sf-transfer input[type="date"]:focus {
         border-color: var(--oro);
         outline: none;
}

.sf-contact .sf-channels {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 16px;
         margin: 30px 0 10px;
}

.sf-channel {
         background: var(--avoriolight);
         border-radius: 18px;
         padding: 24px 14px;
         display: flex;
         flex-direction: column;
         align-items: center;
}

.sf-channel h2,
.sf-contact-more h2 {
         font-size: var(--fs-h4);
         margin: 0 0 6px;
}

.sf-channel p {
         font-size: var(--fs-p);
         flex: 1;
         margin: 0 0 16px;
}

.sf-channel .sf-button {
         max-width: 100%;
         white-space: nowrap;
}

.sf-contact-h {
         margin: 40px 0 6px;
}

.sf-contact-form,
.sf-withdraw-form {
         text-align: left;
         margin-top: 22px;
}

.sf-contact-form .sf-person label,
.sf-withdraw-form .sf-person label {
         grid-column: span 3;
}

.sf-contact-form .sf-button,
.sf-withdraw-form .sf-button {
         display: block;
         margin: 22px auto 0;
}

.sf-contact-form .sf-fieldnote,
.sf-withdraw-form .sf-fieldnote {
         margin: -6px 0 0;
}

.sf-contact-more {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 24px;
         margin-top: 40px;
         padding-top: 28px;
         border-top: 1px solid var(--avorio);
         text-align: left;
}

.sf-contact-more p {
         font-size: var(--fs-p);
         margin: 0;
}

.sf-withdraw-info {
         text-align: left;
         font-size: var(--fs-p);
         background: var(--avoriolight);
         border-radius: 16px;
         padding: 18px 22px;
         margin: 24px 0 0;
}

.sf-withdraw-info p {
         margin: 0 0 8px;
}

.sf-withdraw-info p:last-child {
         margin: 0;
}

.sf-receipt {
         text-align: left;
         background: var(--avoriolight);
         border: 1px solid var(--oro);
         border-radius: 16px;
         padding: 18px 22px;
         margin: 22px 0;
         font-size: var(--fs-p);
}

.sf-receipt dl {
         display: grid;
         grid-template-columns: max-content 1fr;
         gap: 6px 18px;
         margin: 0;
}

.sf-receipt dt {
         font-weight: 700;
}

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

@media (max-width: 768px) {
         .sf-contact .sf-channels,
         .sf-contact-more {
                  grid-template-columns: 1fr;
         }

         .sf-contact-form .sf-person label,
         .sf-withdraw-form .sf-person label {
                  grid-column: span 6;
         }

         .sf-receipt dl {
                  grid-template-columns: 1fr;
                  gap: 0;
         }

         .sf-receipt dd {
                  margin-bottom: 8px;
         }
}

/* ---------- Header/Footer kommen aus /rahmen.css ---------- */
.sf-langbar {
         text-align: center;
         padding: 14px 16px 0;
}

.sf-langbar .sf-lang {
         margin-left: 0;
}

@media (max-width: 768px) {
         .sf-main {
                  padding-bottom: 140px;
         }
}

/* Buttons am Handy: gleiche Maße wie .button der Startseite */
@media (max-width: 768px) {
         .sf-button {
                  line-height: 20px;
                  padding: 20px 24px;   /* seitlich etwas schmaler, damit „Zahlungspflichtig bestellen“ in eine Zeile passt */
                  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.25);
         }
}