/* ===========================================================================
   Anmeldung im elbe-Design
   ---------------------------------------------------------------------------
   pretix laesst per Einstellung nur Primaerfarbe, drei Themenfarben,
   Eckenrundung und ein Logo zu; eigene Schriften braeuchten das Fontpack-Plugin.
   Dieses Stylesheet wird per nginx sub_filter eingehaengt und formt die
   Bootstrap-3-Oberflaeche so um, dass der Uebergang von der Landingpage nicht
   wie ein Systemwechsel wirkt.

   Leitbild: die Firmenwebsite ist durchgehend blau (base #38629F als Rahmen,
   base-2 #244E8A als Inhaltsflaeche). Genau das wird hier nachgebaut — blauer
   Grund, weisse Inhaltsflaeche darauf, dunkelblauer Kopf wie die Buehne der
   Landingpage.
   =========================================================================== */

@font-face{font-family:'Jost';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/fonts/jost-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Jost';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/fonts/jost-400-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Cardo';font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/cardo-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cardo';font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/cardo-400-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Cardo';font-style:normal;font-weight:700;font-display:swap;
  src:url(/fonts/cardo-700-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cardo';font-style:italic;font-weight:400;font-display:swap;
  src:url(/fonts/cardo-400-italic-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --blau:#38629F; --blau-tief:#244E8A; --eis:#D5E0F0; --weiss:#fff;
  --linie:rgba(56,98,159,.25); --gedaempft:rgba(36,78,138,.88);
}

/* --- Grundflaeche: blauer Rahmen wie auf elbe-innovations.de -------------- */
body, body.nojs{
  background:var(--blau) !important;
  font-family:Cardo, Georgia, serif !important;
  font-size:17px; line-height:1.72; color:var(--blau-tief);
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,legend,.panel-title,
.modal-card-title, .content-header, .item-category > h3{
  font-family:Jost, system-ui, sans-serif !important;
  font-weight:600 !important; letter-spacing:0;
}

/* --- Die weisse Inhaltsflaeche schwebt auf dem Blau ---------------------- */
.container.main-box{
  background:var(--weiss);
  max-width:62rem; margin:0 auto 3rem; padding:0 !important;
  border:0; border-radius:0; box-shadow:0 2px 24px rgba(0,0,0,.13);
}
.container.main-box > main,
.container.main-box > #content{ display:block; padding:0 2.6rem 2.6rem }

/* Kopfbereich als dunkelblaue Buehne — dasselbe Bild wie oben auf der Seite */
.page-header, .page-header.pager-header-with-logo{
  background:var(--blau-tief);
  margin:0 -2.6rem 2.4rem; padding:1.5rem 2.6rem;
  border:0; border-bottom:5px solid var(--blau);
  display:block; overflow:hidden;
}
.page-header h1, .page-header .h1{
  color:var(--weiss) !important; font-size:2.1rem; margin:0; line-height:1.25;
}
.page-header h1 small, .page-header small, .page-header .text-muted{
  display:block; margin-top:.5rem;
  color:rgba(255,255,255,.72) !important;
  font-family:Cardo,serif !important; font-size:1.05rem; font-style:italic;
}
.page-header a{color:var(--weiss)}
.page-header img.event-logo, .page-header .pull-left img{
  /* pretix liefert die blaue Plakette aus (die braucht es fuer helle
     Hintergruende, etwa in Bestellbestaetigungen). Auf dem dunklen Band
     zeigt sie eine sichtbare Kante — hier deshalb die blanke weisse
     Wortmarke einsetzen, die ohnehin schon auf dem Host liegt. */
  content:url(/elbe-logo-weiss.png);
  height:2.35rem; max-height:2.35rem; width:auto; margin:0;
}
.page-header .pull-left.flip{float:none !important; display:block}
.page-header .clearfix{clear:both}

/* --- Kopfzeile ueber der Box: Rueckweg zur Veranstaltungsseite ------------ */
body > header{background:transparent; padding:1.4rem 0 1rem}
.page-header-links, .page-header-links-outside{
  max-width:62rem; margin:0 auto; padding:0 .4rem;
  font-family:Jost,sans-serif !important; font-size:.95rem;
}
.page-header-links a, .page-header-links-outside a{color:#fff !important; opacity:.92}
.page-header-links a:hover{opacity:1; text-decoration:underline}

/* --- Produkte ------------------------------------------------------------ */
.item-category, section.item-category{margin-bottom:2rem}
.item-category > h3{
  color:var(--blau-tief); font-size:1.3rem;
  border-bottom:2px solid var(--eis); padding-bottom:.5rem; margin:2.4rem 0 1rem;
}
h2.content-header{
  color:var(--blau-tief); font-size:2.15rem; font-weight:600 !important;
  line-height:1.2; margin:.4rem 0 1.2rem; padding:0 0 1rem;
  border-bottom:3px solid var(--eis);
}
h2.content-header small, h2.content-header .text-muted{
  display:block; margin-top:.55rem; font-family:Cardo,serif !important;
  font-style:italic; font-size:1.1rem; color:var(--gedaempft) !important;
}
/* Der Vorspann direkt unter dem Titel liest sich als Anmoderation */
.front-page > p:first-child, .event-description{
  font-size:1.08rem; color:var(--gedaempft); max-width:44rem; margin-bottom:1.8rem;
}
.product-row, .item-row, .front-page .row{border-color:var(--linie)}
.product-row{padding:1.2rem 0; border-top:1px solid var(--linie)}
.product-row:first-child{border-top:0}
.product-row strong, .item-row strong{
  font-family:Jost,sans-serif !important; font-weight:600;
  font-size:1.12rem; color:var(--blau-tief);
}
.product-description, .product-row .product-description{
  color:var(--gedaempft); font-size:1rem;
}
.price, .product-price, .cart .price{
  font-family:Jost,sans-serif !important; font-weight:500;
  color:var(--blau-tief); font-size:1.15rem;
}
/* ⚠️ .availability-box ist bei pretix NICHT nur die Verfuegbarkeitsanzeige,
   sondern der Rahmen um die gesamte Auswahlspalte — Mengenfeld bzw.
   Zusatzprodukt-Kaestchen sitzen darin. Fuellt man ihn, steht hinter jedem
   "Auswaehlen" ein dunkelblauer Klotz. Also nur zurueckhaltend absetzen. */
.availability-box{
  background:transparent !important; border:0 !important;
  color:var(--gedaempft) !important; padding:0;
}
.count-input-group .input-group-addon, .input-group-addon{
  background:var(--eis); border-color:var(--linie); color:var(--blau-tief);
}
input.form-control, select.form-control, textarea.form-control{
  border-color:var(--linie); border-radius:3px; color:var(--blau-tief);
  font-family:Cardo,serif !important; box-shadow:none;
}
input.form-control:focus, select.form-control:focus{
  border-color:var(--blau); box-shadow:0 0 0 3px rgba(56,98,159,.18);
}

/* --- Knoepfe ------------------------------------------------------------- */
.btn{font-family:Jost,sans-serif !important; font-weight:500; border-radius:3px;
  padding:.7rem 1.6rem; font-size:1rem}
.btn-primary, .btn-primary:link{
  background:var(--blau-tief) !important; border-color:var(--blau-tief) !important;
  color:#fff !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active{
  background:#1D4074 !important; border-color:#1D4074 !important;
}
.btn-default{
  background:#fff !important; border-color:var(--blau-tief) !important;
  color:var(--blau-tief) !important;
}
.btn-default:hover{background:var(--eis) !important}
.btn-lg{padding:.85rem 2rem; font-size:1.05rem}
a, a:visited{color:var(--blau-tief)}
a:hover, a:focus{color:var(--blau)}

/* --- Hinweise ------------------------------------------------------------ */
.alert{border-radius:4px; font-size:1rem}
.alert-info{background:var(--eis); border-color:var(--linie); color:var(--blau-tief)}
.alert-success{background:#EAF1E6; border-color:#B1C5A4; color:#3d5533}
/* Der Testmodus-Hinweis soll auffallen — der bleibt bewusst warm und laut. */
.alert-testmode, .alert-warning{
  background:#FFF4E0; border-color:#E8B75A; color:#7A5410; border-radius:4px;
}

/* --- Fuss ---------------------------------------------------------------- */
.container.main-box footer, main + footer, body > footer{
  background:transparent; border-top:1px solid var(--linie);
  margin:2.4rem -2.6rem -2.6rem; padding:1.6rem 2.6rem;
  font-family:Cardo,serif !important; color:var(--gedaempft); font-size:.98rem;
}
footer a{color:var(--blau-tief)}
.container.main-box footer .alert{margin:0 0 1rem}

/* --- Dialoge ------------------------------------------------------------- */
.modal-card{border-radius:6px; border:1px solid var(--linie)}
.modal-card-icon{background:var(--blau-tief); color:#fff}
.progress-bar, .progress-bar-success{background:var(--blau) !important}

/* --- Kasse: Fortschritt und Warenkorb ------------------------------------ */
.checkout-step-nav li.active, .stepnav li.active, .checkout-step.active{
  color:var(--blau-tief); font-family:Jost,sans-serif !important; font-weight:600;
}
.cart, table.cart{font-size:1rem}
table > thead > tr > th{
  font-family:Jost,sans-serif !important; color:var(--blau-tief);
  border-bottom-color:var(--linie) !important;
}
table > tbody > tr > td{border-top-color:var(--linie) !important}

/* --- Schmale Anzeigen ---------------------------------------------------- */
@media(max-width:52rem){
  .container.main-box{margin:0 0 1.5rem; box-shadow:none}
  .container.main-box > main, .container.main-box > #content{padding:0 1.2rem 1.6rem}
  .page-header, .page-header.pager-header-with-logo{margin:0 -1.2rem 1.6rem; padding:1.6rem 1.2rem 1.4rem}
  .page-header h1{font-size:1.6rem}
  .container.main-box footer, body > footer{margin:2rem -1.2rem -1.6rem; padding:1.2rem}
}

/* --- Feinschliff ---------------------------------------------------------- */
/* Die rechte Spalte im Produktraster ist schmal; mit der grosszuegigen
   Knopfpolsterung brach "Zum Warenkorb hinzufuegen" auf zwei Zeilen. */
.front-page .btn, .col-md-4 .btn, .checkout-button-row .btn{
  padding:.7rem 1.15rem; font-size:.98rem; white-space:nowrap;
}
/* Preis und Steuerhinweis gehoeren zusammen und sollen nicht auseinanderreissen */
.product-row .price, .product-price{display:block; line-height:1.3; margin-bottom:.15rem}
.product-row .price + small, .price-taxinfo, .product-row small{
  display:block; font-family:Cardo,serif !important; font-style:normal;
  font-size:.9rem; color:var(--gedaempft); line-height:1.35;
}
/* Mengenwahl: pretix setzt die Knoepfe direkt an das Feld — ohne eigene
   Rahmenfarbe entsteht dort eine sichtbare Luecke. */
.count-input-group, .input-group{border:1px solid var(--linie); border-radius:3px; overflow:hidden}
.count-input-group .btn, .input-group .btn{
  border:0 !important; border-radius:0 !important; background:var(--eis) !important;
  color:var(--blau-tief) !important; padding:.6rem 1rem;
}
.count-input-group .btn:hover, .input-group .btn:hover{background:#C2D3EA !important}
.count-input-group input, .input-group input.form-control{
  border:0 !important; text-align:center; box-shadow:none !important;
}
/* Die Verfuegbarkeitszeile ist eine Nebeninformation, kein Fliesstext */
.availability-box, .product-row .text-muted{font-size:.92rem}

/* --- Zusatzprodukt-Auswahl ----------------------------------------------- */
/* pretix baut die Wahl als <label class="btn btn-default btn-checkbox">.
   Ohne deutlichen Zustand sieht man nicht, was gewaehlt ist. */
.btn-checkbox{
  display:inline-flex; align-items:center; gap:.5rem;
  background:#fff !important; border:2px solid var(--blau-tief) !important;
  color:var(--blau-tief) !important; padding:.6rem 1.2rem; cursor:pointer;
}
.btn-checkbox:hover{background:var(--eis) !important}
.btn-checkbox.active, .btn-checkbox:has(input:checked){
  background:var(--blau-tief) !important; color:#fff !important;
}
.btn-checkbox input[type=checkbox]{margin:0; accent-color:var(--blau-tief)}

/* Warenkorb-Vorschau: pretix blendet den Fuss aus und legt einen Knopf darueber.
   Mit der grossen Knopfpolsterung wirkte das wie ein Anzeigefehler. */
.sneak-peek-content .btn, .panel-body .btn-default[aria-controls]{
  padding:.45rem 1.1rem; font-size:.92rem;
}
.panel-heading, .panel > .panel-heading, .panel-default > .panel-heading{
  background:var(--eis) !important; border-color:var(--linie) !important;
  color:var(--blau-tief) !important;
  font-family:Jost,sans-serif !important; font-weight:600;
}
/* Fortschrittsanzeige der Kasse */
.checkout-progress li.active .circle, .progress-circle.active{background:var(--blau-tief)}

/* --- Track-Wahl je Person kenntlich machen -------------------------------
   Bei mehreren Tickets wiederholt pretix denselben Block ohne jeden Hinweis,
   für welche Person er gilt: zweimal „Teilnahme am …" und zweimal „Ihre
   Track-Wahl". Ein CSS-Zähler nummeriert die Blöcke durch — das trägt auch
   bei fünf oder zehn Personen. */
.panel-group.addons{counter-reset:person}
.panel-group.addons > .panel{counter-increment:person}
.panel-group.addons fieldset > legend::before{
  content:"Person " counter(person) " · ";
  color:var(--blau); font-weight:600;
}
/* Nur bei genau einem Ticket wäre „Person 1" unnötig — dann gibt es aber auch
   nur einen Block, und die Angabe stört nicht. */

/* --- Nettobetrag aus dem Kundenblick nehmen ------------------------------
   Anika: „nettobetrag raus (außer auf rechnung)". pretix hängt an die
   Steuerzeile der Produktseite einen Tooltip `title="83,19 € netto"`, den man
   beim Überfahren mit der Maus sieht. Das Attribut lässt sich per CSS nicht
   entfernen — der Tooltip wird aber von Bootstrap aus `data-toggle="tooltip"`
   erzeugt, und den kann man stilllegen. */
.product-row small[data-toggle="tooltip"],
.product-price small[data-toggle="tooltip"]{ pointer-events:none }
.tooltip{ display:none !important }

/* Der erste Kassenschritt heißt bei pretix „Zusatzprodukte" und klingt nach
   freiwilligem Zusatzkauf — die Track-Wahl ist aber Pflicht. */
.checkout-step-nav li:first-child, .steps li:first-child{ font-weight:600 }

/* --- Bestätigungsseite: pretix' Standardsätze weg ------------------------
   In `<p class="lead">` stehen zwei Sätze der Software:
   „Ihre Bestellung war erfolgreich! Sie finden weiter unten alle Details."
   und „Bitte beachten Sie, dass wir noch Ihre Zahlung erwarten…".
   Darunter erst der eigene Text — das doppelte sich.
   `p.lead` kommt in der ganzen Buchungsstrecke NUR auf dieser Seite vor
   (in 18 erfassten Seiten geprüft), das Ausblenden trifft nichts anderes.
   Der Erfolgssatz steht jetzt im eigenen Text, damit er nicht fehlt. */
p.lead{ display:none }
/* „Bitte speichern Sie den Link zu genau dieser Seite…" — den Link schickt
   die Bestätigungsmail ohnehin mit. */
p.iframe-hidden{ display:none }