/* ImmoDigit — Erscheinungsbild des oeffentlichen Ticketshops. Wird von pretix-skin (nginx) in den jeder Presale-Seite gehaengt. Greift NICHT ins Backend (/control/) ein. Grundsatz: pretix' Akzentfarbe (primary_color, je Organizer verschieden) bleibt unangetastet. Geaendert werden nur Typografie, Form und Abstaende. Deshalb ueberall background-image:none statt background-color:... */ :root{ --id-fg:#1d1d1f; --id-fg-muted:#6e6e73; --id-bg:#f5f5f7; --id-card:#ffffff; --id-hairline:rgba(0,0,0,.10); --id-hairline-strong:rgba(0,0,0,.18); --id-radius:16px; --id-radius-sm:12px; --id-shadow:0 1px 2px rgba(0,0,0,.04), 0 10px 32px rgba(0,0,0,.07); } /* ---------- Grundlagen ---------- */ body{ background:var(--id-bg)!important; color:var(--id-fg); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display", "Helvetica Neue",Inter,system-ui,"Segoe UI",Roboto,Arial,sans-serif!important; font-size:16px; line-height:1.47059; letter-spacing:-.018em; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4,.h5{ font-family:inherit!important; font-weight:600; letter-spacing:-.022em; color:var(--id-fg); } a{text-underline-offset:.18em} a:hover{text-decoration:underline} small,.text-muted{color:var(--id-fg-muted)!important} hr{border-top:1px solid var(--id-hairline)} /* ---------- Karte ---------- */ .container.main-box{ background:var(--id-card); border:1px solid var(--id-hairline); border-radius:var(--id-radius); box-shadow:var(--id-shadow); padding:40px 40px 34px; margin-top:28px; margin-bottom:28px; } @media (max-width:600px){ .container.main-box{ padding:26px 20px 22px; border-radius:14px; margin-top:14px; } } /* ---------- Kopfbereich ---------- */ .page-header{ margin:0 0 26px; padding-bottom:22px; border-bottom:1px solid var(--id-hairline); } .page-header h1,.page-header .h1{ font-size:clamp(1.75rem,1.3rem + 1.6vw,2.375rem); line-height:1.1; letter-spacing:-.025em; margin:0; } .page-header small{ display:block; margin-top:6px; font-size:1rem; letter-spacing:-.012em; color:var(--id-fg-muted)!important; } .page-header-links{font-size:.875rem} /* ---------- Eckdaten (Ort, Zeit) ---------- */ .info-row{ display:flex;gap:14px;align-items:flex-start; padding:12px 0; border-bottom:1px solid var(--id-hairline); font-size:.9375rem; } .info-row:last-of-type{border-bottom:0} .info-row-icon{ flex:0 0 22px;text-align:center; color:var(--id-fg-muted);opacity:.75; font-size:1rem;line-height:1.5; } /* ---------- Produktzeile ---------- */ .product-row{ align-items:center; padding:22px 0; border-bottom:1px solid var(--id-hairline); margin-left:0;margin-right:0; } .product-row:last-child{border-bottom:0} .product-row h4,.product-row .h4{ font-size:1.0625rem;margin:0 0 4px;letter-spacing:-.016em; } .product-description{color:var(--id-fg-muted);font-size:.9375rem} .product-row .price{font-size:1rem;font-weight:500;letter-spacing:-.01em} .item-category > h3{margin-top:0} /* ---------- Schaltflaechen ---------- */ .btn{ border-radius:980px; /* Pillenform wie in Apples Oberflaechen */ border:1px solid transparent; background-image:none; /* Bootstrap-Verlauf weg */ box-shadow:none; text-shadow:none; font-weight:500; letter-spacing:-.012em; padding:9px 20px; transition:filter .2s ease, background-color .2s ease, border-color .2s ease, transform .12s ease; } .btn:active{transform:scale(.985)} .btn:focus-visible{outline:2px solid currentColor;outline-offset:3px;box-shadow:none} .btn-lg{padding:13px 28px;font-size:1.0625rem;border-radius:980px} .btn-block{display:block;width:100%} /* Akzentfarbe kommt weiterhin aus pretix, nur Kanten und Verlauf entfernt. */ .btn-primary{border-color:transparent!important;box-shadow:none!important} .btn-primary:hover,.btn-primary:focus{filter:brightness(1.08)} .btn-default{ background:#fff; border-color:var(--id-hairline-strong); color:var(--id-fg); } .btn-default:hover,.btn-default:focus{background:#fafafa;border-color:rgba(0,0,0,.28)} .btn-checkbox{border-radius:var(--id-radius-sm);display:inline-flex; align-items:center;gap:9px;justify-content:center} .btn-checkbox input[type=checkbox]{margin:0} /* Einkaufswagen-Symbole weg. Bei kostenlosen Webinaren ist die Shop-Anmutung das eigentliche Problem: der Teilnehmer kauft nichts, er meldet sich an. Die Beschriftung stellt pretix bei einem freien Warenkorb schon selbst um ("Anmelden" statt "Zum Warenkorb hinzufuegen"), die Symbole bleiben aber. */ .btn .fa-shopping-cart{display:none} .btn .fa-shopping-cart + *{margin-left:0} /* ---------- Formulare ---------- */ .form-control,select.form-control,textarea.form-control{ height:auto; padding:11px 14px; border-radius:var(--id-radius-sm); border:1px solid var(--id-hairline-strong); box-shadow:none; font-size:1rem; color:var(--id-fg); background-color:#fff; transition:border-color .18s ease, box-shadow .18s ease; } .form-control:focus{ border-color:rgba(0,0,0,.42); box-shadow:0 0 0 4px rgba(0,0,0,.06); outline:none; } label,.control-label{font-weight:500;letter-spacing:-.012em;margin-bottom:6px} .help-block{color:var(--id-fg-muted);font-size:.8125rem;line-height:1.45} .form-group{margin-bottom:20px} fieldset legend,.panel-title{letter-spacing:-.018em} /* ---------- Hinweisflaechen ---------- */ /* Nur Rahmen und Rundung. Das Padding bleibt bei pretix: .alert-success/.alert-danger/... setzen padding-left:65px und legen darauf ein ::before-Symbol. Ein eigener padding-Wert ueberschreibt das und das Symbol schiebt sich ueber den Text. */ .alert{ border:1px solid var(--id-hairline); border-radius:var(--id-radius-sm); box-shadow:none; } .panel,.thumbnail,.well{ border:1px solid var(--id-hairline); border-radius:var(--id-radius-sm); box-shadow:none; background:#fff; } .panel-heading{ background:#fafafa; border-bottom:1px solid var(--id-hairline); border-radius:var(--id-radius-sm) var(--id-radius-sm) 0 0; letter-spacing:-.014em; } .table > thead > tr > th{ border-bottom:1px solid var(--id-hairline); font-size:.75rem;text-transform:uppercase;letter-spacing:.05em; color:var(--id-fg-muted);font-weight:600; } .table > tbody > tr > td{border-top:1px solid var(--id-hairline);padding:12px 8px} /* ---------- Fortschritt im Checkout ---------- */ .checkout-step-head,.stepbar{letter-spacing:-.014em} /* ---------- Fuss ---------- */ footer,.footer{ color:var(--id-fg-muted); font-size:.8125rem; padding:22px 0 34px; } footer a,.footer a{color:var(--id-fg-muted)} /* ---------- Modal ---------- */ .modal-card,.modal-content{ border-radius:var(--id-radius); border:1px solid var(--id-hairline); box-shadow:0 24px 64px rgba(0,0,0,.22); } @media (prefers-reduced-motion:reduce){ *{transition:none!important} .btn:active{transform:none} }