/*
Theme Name: Tickefy Child
Description: Tickefy branded child theme for the WooCommerce ticket shop.
Author: Tickefy
Template: storefront
Version: 0.3.4
Text Domain: tickefy-child
*/
@font-face {
font-family: "Inter";
src: url("assets/fonts/InterVariable.woff2") format("woff2-variations"), url("assets/fonts/InterVariable.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
:root {
--tfy-primary: #102033;
--tfy-accent: #16c7b7;
--tfy-bg: #f5f7fa;
--tfy-surface: #ffffff;
--tfy-text: #24313f;
--tfy-muted: #6b7280;
--tfy-border: #dde3ea;
--tfy-radius: 18px;
--tfy-shadow: 0 18px 45px rgba(16, 32, 51, 0.12);
}
* { box-sizing: border-box; }
body { background: var(--tfy-bg); color: var(--tfy-text); font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: var(--tfy-primary); }
a:hover, a:focus { color: var(--tfy-accent); }
.col-full { max-width: 1180px; }
.site-content { padding-top: 2.5rem; }
.site-main { margin-bottom: 3.75rem; }
.right-sidebar .content-area, .left-sidebar .content-area { float: none; margin-right: 0; width: 100%; }
.widget-area, .widget_search, .widget_recent_entries, .widget_recent_comments, .widget_archive, .widget_categories, .widget_meta, .storefront-handheld-footer-bar { display: none; }
.site-header { background: var(--tfy-primary); border-bottom: 3px solid var(--tfy-accent); box-shadow: 0 8px 24px rgba(16, 32, 51, 0.18); color: var(--tfy-surface); left: 0; margin-bottom: 0; padding: 0; position: fixed; right: 0; top: 0; z-index: 200; }
.site-content { padding-top: 79px; }
.site-header .col-full { max-width: 1180px; }
.tickefy-header-bar { align-items: center; display: flex; flex-wrap: wrap; justify-content: space-between; min-height: 76px; }
.tickefy-wordmark { align-items: center; background: var(--tfy-surface); border-radius: 999px; display: inline-flex; gap: 0.55rem; padding: 0.32rem 0.7rem; text-decoration: none; }
.tickefy-logo-mark { display: block; height: 2.35rem; width: auto; }
.tickefy-wordmark-image { display: block; height: 2.35rem; width: auto; }
.tickefy-main-navigation { align-items: center; display: flex; flex-wrap: wrap; gap: 1.6rem; justify-content: flex-end; }
.tickefy-main-navigation a { color: var(--tfy-surface); font-size: 0.91rem; font-weight: 750; text-decoration: none; }
.tickefy-main-navigation a:hover, .tickefy-main-navigation a:focus { color: var(--tfy-accent); }
.tickefy-nav-cart { align-items: center; display: inline-flex; gap: 0.4rem; }
.tickefy-cart-badge { background: var(--tfy-accent); border-radius: 999px; color: var(--tfy-primary); font-size: 0.68rem; font-weight: 850; line-height: 1; min-width: 1.35em; padding: 0.2rem 0.45rem; text-align: center; }
.site-footer { background: var(--tfy-primary); color: var(--tfy-surface); padding: 2.5rem 0; }
.site-footer a { color: var(--tfy-accent); }
.tickefy-footer-links ul { align-items: center; display: flex; flex-wrap: wrap; gap: 0.85rem 1.4rem; justify-content: center; list-style: none; margin: 0; padding: 0; }
.site-footer .tickefy-footer-links a,
.site-footer .tickefy-footer-links a:visited { color: var(--tfy-surface) !important; font-size: 0.91rem; font-weight: 750; text-decoration: none; }
.site-footer .tickefy-footer-links a:hover,
.site-footer .tickefy-footer-links a:focus { color: var(--tfy-surface) !important; text-decoration: underline; }
button, input[type="button"], input[type="reset"], input[type="submit"], .button, .added_to_cart, .wc-block-components-button { background-color: var(--tfy-accent); border: 0; border-radius: 999px; box-shadow: none; color: var(--tfy-primary); font-weight: 800; padding: 0.9em 1.45em; }
button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, .button:hover, .added_to_cart:hover, .wc-block-components-button:hover { background-color: var(--tfy-primary); color: var(--tfy-surface); }
input[type="text"], input[type="number"], input[type="email"], input[type="tel"], textarea, select { background: var(--tfy-surface); border: 1px solid var(--tfy-border); border-radius: 10px; box-shadow: none; }
.home .entry-header { display: none; }
.home .site-content { padding-top: 79px; }
.home .hentry { margin: 0; }
.home .entry-content { margin: 0; }
.tickefy-demo-home { margin: 0 auto 4rem; max-width: 1100px; padding-top: clamp(3rem, 7vw, 6.6rem); }
.tickefy-home-hero-image { border-radius: var(--tfy-radius); margin-bottom: 2.5rem; max-height: 480px; overflow: hidden; }
.tickefy-home-hero-img { display: block; height: 100%; object-fit: cover; width: 100%; }
.tickefy-demo-hero { max-width: 790px; }
.tickefy-demo-eyebrow { color: var(--tfy-accent); font-size: 0.75rem; font-weight: 850; letter-spacing: 0.15em; margin-bottom: 0.8rem; text-transform: uppercase; }
.tickefy-demo-home h1 { color: var(--tfy-primary); font-size: clamp(3rem, 7vw, 5.7rem); font-weight: 850; letter-spacing: -0.02em; line-height: 0.91; margin: 0 0 1.35rem; }
.tickefy-demo-intro { color: var(--tfy-muted); font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.7; max-width: 720px; }
.tickefy-demo-card { align-items: stretch; background: var(--tfy-surface); border: 1px solid var(--tfy-border); border-radius: var(--tfy-radius); box-shadow: var(--tfy-shadow); display: grid; gap: 0; grid-template-columns: minmax(245px, 37%) 1fr; margin-top: 3rem; max-width: 990px; overflow: hidden; }
.tickefy-demo-card-media { background: var(--tfy-primary); display: block; max-height: 370px; overflow: hidden; }
.tickefy-demo-card img { aspect-ratio: 1; display: block; height: 100%; object-fit: cover; width: 100%; }
.tickefy-demo-card-content { align-self: center; padding: clamp(1.5rem, 4vw, 2.8rem); }
.tickefy-demo-card h2 { color: var(--tfy-primary); font-size: clamp(2rem, 4vw, 3rem); font-weight: 850; letter-spacing: -0.015em; line-height: 1; margin: 0 0 0.85rem; }
.tickefy-demo-card p { color: var(--tfy-muted); }
.tickefy-demo-card .button { margin-top: 0.3rem; }
.tickefy-demo-card small { color: var(--tfy-muted); display: block; font-size: 0.8rem; margin-top: 1.2rem; }
.tickefy-card-meta { color: var(--tfy-primary); display: flex; flex-wrap: wrap; font-size: 0.86rem; font-weight: 750; gap: 0.4rem 1.1rem; margin-bottom: 1rem; }
.tickefy-card-meta span::before { color: var(--tfy-accent); content: "•"; margin-right: 0.35rem; }
.tickefy-landing-paths { display: grid; gap: 1.5rem; grid-template-columns: repeat(2, 1fr); margin-top: 2.8rem; max-width: 860px; }
.tickefy-landing-path { background: var(--tfy-surface); border: 2px solid var(--tfy-border); border-radius: var(--tfy-radius); box-shadow: var(--tfy-shadow); display: flex; flex-direction: column; gap: 0.55rem; padding: clamp(1.4rem, 3vw, 2.2rem); text-decoration: none; transition: border-color 0.18s; }
.tickefy-landing-path:hover, .tickefy-landing-path:focus { border-color: var(--tfy-accent); color: inherit; }
.tickefy-landing-path__eyebrow { color: var(--tfy-accent); font-size: 0.72rem; font-weight: 850; letter-spacing: 0.13em; text-transform: uppercase; }
.tickefy-landing-path__title { color: var(--tfy-primary); font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 850; letter-spacing: -0.01em; line-height: 1.05; }
.tickefy-landing-path__desc { color: var(--tfy-muted); flex: 1; font-size: 0.95rem; line-height: 1.55; margin-top: 0.2rem; }
.tickefy-landing-path .button { align-self: flex-start; margin-top: 0.6rem; }
/* ── Landing page (tfy-lp) ───────────────────────────────────────────── */
.tfy-lp { padding-bottom: 4rem; }
.tfy-lp__hero-wrap { margin: 0 auto; max-width: 1180px; padding: clamp(1.4rem, 3vw, 2.2rem) 1rem 0; }
.tfy-lp__hero { background-position: center; background-size: cover; border-radius: var(--tfy-radius); box-shadow: var(--tfy-shadow); min-height: clamp(360px, 48vh, 520px); overflow: hidden; }
.tfy-lp__hero-content { color: var(--tfy-surface); max-width: 700px; padding: clamp(2rem, 6vw, 5rem); }
.tfy-lp__hero-brand { align-items: center; display: inline-flex; gap: 0.7rem; margin-bottom: 1.2rem; }
.tfy-lp__hero-mark { background: rgba(255,255,255,.94); border-radius: 16px; display: inline-flex; padding: 0.5rem 0.65rem; }
.tfy-lp__hero-mark img { display: block; height: 2.25rem; width: auto; }
.tfy-lp__hero-kicker { color: var(--tfy-accent); font-size: 0.75rem; font-weight: 850; letter-spacing: 0.15em; text-transform: uppercase; }
.tfy-lp__hero-content h1 { color: var(--tfy-surface); font-size: clamp(3.1rem, 7vw, 5.7rem); font-weight: 850; letter-spacing: -0.02em; line-height: 0.91; margin: 0 0 1.05rem; }
.tfy-lp__hero-content p { font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.65; margin: 0 0 1.35rem; max-width: 620px; }
.tfy-lp__section { margin: 0 auto; max-width: 1180px; padding: clamp(2.4rem, 5vw, 4rem) 1rem 0; }
.tfy-lp__section-head { margin-bottom: 1.35rem; max-width: 720px; }
.tfy-lp__eyebrow { color: var(--tfy-accent); font-size: 0.75rem; font-weight: 850; letter-spacing: 0.15em; margin-bottom: 0.8rem; text-transform: uppercase; }
.tfy-lp__section-head h2 { color: var(--tfy-primary); font-size: clamp(2.25rem, 5vw, 4rem); font-weight: 850; letter-spacing: -0.02em; line-height: 0.95; margin: 0 0 0.7rem; }
.tfy-lp__section-head p { color: var(--tfy-muted); font-size: 1.03rem; line-height: 1.65; margin: 0; }
.tfy-lp__event-row { display: grid; gap: 1.1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tfy-lp__event-card { background: var(--tfy-surface); border: 1px solid var(--tfy-border); border-radius: var(--tfy-radius); box-shadow: var(--tfy-shadow); overflow: hidden; position: relative; }
.tfy-lp__event-card-image { align-items: center; background: linear-gradient(135deg,rgba(22,199,183,.22),rgba(16,32,51,.08)); display: flex; justify-content: center; min-height: 150px; overflow: hidden; }
.tfy-lp__event-card-image img { display: block; height: 100%; object-fit: cover; width: 100%; }
.tfy-lp__event-card-image--placeholder img { height: 4.25rem; object-fit: contain; opacity: 0.82; width: auto; }
.tfy-lp__event-card-content { padding: 1rem; }
.tfy-lp__event-card-meta {
display: grid;
gap: 0.18rem;
margin: 0 0 0.5rem;
}
.tfy-lp__event-card-meta-row {
align-items: baseline;
display: grid;
font-size: 0.72rem;
font-weight: 850;
gap: 0.35em;
grid-template-columns: auto minmax(0, 1fr);
line-height: 1.55;
text-transform: uppercase;
}
.tfy-lp__event-card-meta-label {
color: var(--tfy-muted);
font-weight: 750;
margin: 0;
white-space: nowrap;
}
.tfy-lp__event-card-meta-value {
color: var(--tfy-primary);
margin: 0;
min-width: 0;
overflow-wrap: anywhere;
}
.tfy-lp__event-card-content h3 { color: var(--tfy-primary); font-size: 1.2rem; font-weight: 850; letter-spacing: -0.01em; line-height: 1.08; margin: 0 0 0.55rem; }
.tfy-lp__event-card-description { color: var(--tfy-muted); font-size: 0.9rem; line-height: 1.45; margin: 0 0 0.9rem; }
.tfy-lp__event-card-link { color: var(--tfy-primary); font-size: 0.9rem; font-weight: 850; }
/* Stretched link — makes the whole gallery card clickable (context='gallery') */
.tfy-lp__event-card-link--card { inset: 0; outline-offset: -3px; position: absolute; z-index: 1; }
.tfy-lp__organizer-card { align-items: stretch; background: var(--tfy-surface); border: 1px solid var(--tfy-border); border-radius: var(--tfy-radius); box-shadow: var(--tfy-shadow); display: grid; grid-template-columns: minmax(160px, 26%) 1fr; max-width: 990px; overflow: hidden; }
.tfy-lp__organizer-media { align-items: center; background: #eef0f3; display: flex; justify-content: center; min-height: 160px; }
.tfy-lp__organizer-media img { height: 7rem; width: auto; }
.tfy-lp__organizer-content { align-self: center; padding: clamp(1.1rem, 3vw, 1.8rem); }
.tfy-lp__organizer-content h2 { color: var(--tfy-primary); font-size: clamp(1.55rem, 3.5vw, 2.2rem); font-weight: 850; letter-spacing: -0.015em; line-height: 1.02; margin: 0 0 0.6rem; }
.tfy-lp__organizer-content p { color: var(--tfy-muted); font-size: 0.97rem; line-height: 1.6; margin: 0; }
.tfy-lp__organizer-content p + p { margin-top: 1.25rem; }
.tfy-lp__btn-secondary { background: var(--tfy-primary) !important; color: var(--tfy-surface) !important; }
.tfy-lp__empty { color: var(--tfy-muted); font-size: 1rem; padding: 1.5rem 0; }
/* Compact CTA block — links to the full ticket gallery. Modelled on .tfy-lp__organizer-card. */
.tfy-lp__tickets-cta {
align-items: stretch;
background: var(--tfy-surface);
border: 1px solid var(--tfy-border);
border-radius: var(--tfy-radius);
box-shadow: var(--tfy-shadow);
display: grid;
grid-template-columns: minmax(160px, 26%) 1fr;
max-width: 990px;
overflow: hidden;
}
.tfy-lp__tickets-cta-media {
align-items: center;
background: var(--tfy-primary);
display: flex;
justify-content: center;
min-height: 160px;
}
.tfy-lp__tickets-cta-media img {
display: block;
height: 100%;
object-fit: cover;
width: 100%;
}
.tfy-lp__tickets-cta-content {
align-self: center;
padding: clamp(1.1rem, 3vw, 1.8rem);
}
.tfy-lp__tickets-cta-content h2 {
color: var(--tfy-primary);
font-size: clamp(1.55rem, 3.5vw, 2.2rem);
font-weight: 850;
letter-spacing: -0.015em;
line-height: 1.02;
margin: 0 0 0.6rem;
}
.tfy-lp__tickets-cta-content p { color: var(--tfy-muted); font-size: 0.97rem; line-height: 1.6; margin: 0; }
.tfy-lp__tickets-cta-content p + p { margin-top: 1rem; }
@media (max-width: 840px) {
.tfy-lp__event-row { grid-template-columns: 1fr 1fr; }
.tfy-lp__organizer-card { grid-template-columns: 1fr; }
.tfy-lp__tickets-cta { grid-template-columns: 1fr; }
.tfy-lp__tickets-cta-media { min-height: 110px; }
.tfy-lp__hero-content h1 { font-size: clamp(3rem, 12vw, 4.4rem); }
}
@media (max-width: 560px) {
/* Landing page teaser row and ticket gallery (#tfy-tickets-grid) both use
.tfy-lp__event-row and now behave identically on small screens: 3 columns,
relying on the compact-card rules below (title wraps, only date shown). */
.tfy-lp__event-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
/* Compact event card, in effect from the same breakpoint the row switches to 3
columns: smaller image, keep only title + date — "Beginn"/"Ort" meta rows and the
description are hidden via dedicated selectors (data-field on the meta row, a
dedicated class on the description paragraph) rather than :not(:first-child) or a
bare "p" selector, so the rule keeps targeting exactly these elements even if the
row order changes or an unrelated (price, status, notice) is added later. */
.tfy-lp__event-card-image { min-height: 90px; }
.tfy-lp__event-card-meta-row[data-field="time"],
.tfy-lp__event-card-meta-row[data-field="location"] { display: none; }
.tfy-lp__event-card-description { display: none; }
.tfy-lp__event-card-content { padding: 0.7rem; }
.tfy-lp__event-card-content h3 { font-size: 1.02rem; margin-bottom: 0.3rem; overflow-wrap: break-word; }
/* Stack label/value instead of the two-column grid so "Datum:" always ends its
own line — at this width the shared two-column row (auto minmax(0, 1fr)) left
too little space for the value, and overflow-wrap: anywhere broke mid-date
(e.g. mid-weekday or mid-day-number) instead of after the "Datum:" label.
grid-template-columns: none on the row itself is required in addition to
display: block on the children — otherwise the value
keeps its original
second-column grid placement and renders indented instead of starting at the
card's left edge on its own line. */
.tfy-lp__event-card-meta-row[data-field="date"] {
display: block;
grid-template-columns: none;
}
.tfy-lp__event-card-meta-row[data-field="date"] .tfy-lp__event-card-meta-label {
display: block;
margin: 0;
}
.tfy-lp__event-card-meta-row[data-field="date"] .tfy-lp__event-card-meta-value {
display: block;
margin: 0;
/* Keep the whole date on one line (no wrap between weekday and day number
either) — overrides the shared "anywhere" rule (line ~140). If a longer
date ("Mi, 30. September") doesn't fit the card width, truncate with an
ellipsis instead of wrapping or overflowing the card. width: 100% gives
text-overflow: ellipsis a box to truncate against.
Known limitation: at the 3-column/560px breakpoint the outer
.tfy-lp__event-card already clips overflow (line ~110) before this rule's
ellipsis can render — an unusually long date is cut off cleanly at the
card edge but without a visible "…". The real date format (short weekday +
day + full month, e.g. "Mo, 3. Aug") fits comfortably in normal cases; only
pathological inputs hit this edge case, so it's left as a known gap rather
than adding further layout changes for a rarely-hit case. */
width: 100%;
white-space: nowrap;
overflow-wrap: normal;
word-break: normal;
overflow: hidden;
text-overflow: ellipsis;
}
}
/* ── Persona selector (/event-anlegen/) ──────────────────────────────── */
.tfy-persona-select { margin: 0 auto; max-width: 1180px; padding: clamp(1.6rem, 3vw, 2.2rem) 1rem 0; }
.tfy-persona-pills { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.tfy-pill {
align-items: center;
background: var(--tfy-surface);
border: 1.5px solid var(--tfy-border);
border-radius: 999px;
color: var(--tfy-text);
cursor: pointer;
display: inline-flex;
font-family: inherit;
font-size: 0.92rem;
font-weight: 700;
gap: 0.5rem;
padding: 0.65rem 1.15rem;
transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.tfy-pill:hover, .tfy-pill:focus-visible { border-color: var(--tfy-accent); }
.tfy-pill:focus-visible { outline: 2px solid var(--tfy-accent); outline-offset: 2px; }
.tfy-pill--active { background: var(--tfy-primary); border-color: var(--tfy-primary); color: var(--tfy-surface); }
/* Inline SVG icons (persona pills, card eyebrow, feature bullets, price badge) — all inherit
currentColor and are sized purely via width/height per context, no separate icon font. */
.tfy-icon { display: inline-flex; flex: none; }
.tfy-icon svg { display: block; height: 100%; width: 100%; }
.tfy-icon--pill { color: var(--tfy-accent); height: 1.15rem; width: 1.15rem; }
.tfy-pill--active .tfy-icon--pill { color: var(--tfy-surface); }
.tfy-icon--eyebrow { color: var(--tfy-accent); height: 1rem; width: 1rem; }
.tfy-icon--feature { color: var(--tfy-accent); height: 1.15rem; margin-top: 0.05rem; width: 1.15rem; }
.tfy-icon--badge { color: var(--tfy-accent); height: 0.95rem; width: 0.95rem; }
.tfy-persona-card-wrap { margin: 0 auto; max-width: 1180px; padding: clamp(1.4rem, 3vw, 2rem) 1rem 0; }
.tfy-persona-card {
background: var(--tfy-surface);
border: 1px solid var(--tfy-border);
border-radius: var(--tfy-radius);
box-shadow: var(--tfy-shadow);
display: none;
overflow: hidden;
}
.tfy-persona-card--visible { display: block; }
.tfy-persona-card__top {
background: var(--tfy-primary);
color: var(--tfy-surface);
padding: clamp(1.6rem, 4vw, 2.4rem) clamp(1.6rem, 4vw, 2.6rem) clamp(1.3rem, 3vw, 1.9rem);
}
.tfy-persona-card__eyebrow {
align-items: center;
color: var(--tfy-accent);
display: inline-flex;
font-size: 0.75rem;
font-weight: 850;
gap: 0.5rem;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.tfy-persona-card__top h2 { color: var(--tfy-surface); font-size: clamp(1.7rem, 3.8vw, 2.5rem); font-weight: 850; letter-spacing: -0.015em; line-height: 1.05; margin: 0.6rem 0 0.7rem; max-width: 640px; }
.tfy-persona-card__top p { color: rgba(255, 255, 255, 0.82); font-size: 1rem; line-height: 1.55; margin: 0; max-width: 560px; }
.tfy-price-badge {
align-items: center;
background: rgba(22, 199, 183, 0.16);
border: 1px solid rgba(22, 199, 183, 0.4);
border-radius: 999px;
color: var(--tfy-accent);
display: inline-flex;
font-size: 0.78rem;
font-weight: 750;
gap: 0.4rem;
margin-top: 1rem;
padding: 0.4rem 0.85rem;
}
.tfy-persona-card__body { padding: clamp(1.4rem, 3.5vw, 2.2rem) clamp(1.6rem, 4vw, 2.6rem); }
.tfy-feature-grid { display: grid; gap: 0.7rem 1.4rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 1.5rem; }
.tfy-feature-item { align-items: flex-start; color: var(--tfy-text); display: flex; font-size: 0.93rem; font-weight: 600; gap: 0.55rem; line-height: 1.4; }
.tfy-quote {
background: var(--tfy-bg);
border-left: 4px solid var(--tfy-accent);
border-radius: 0 12px 12px 0;
color: var(--tfy-muted);
font-size: 0.92rem;
font-style: italic;
line-height: 1.6;
margin: 0 0 1.6rem;
padding: 0.9rem 1.1rem;
}
.tfy-cta-row { border-top: 1px solid var(--tfy-border); display: flex; flex-wrap: wrap; gap: 0.8rem; padding-top: 1.4rem; }
.tfy-cta-btn {
align-items: center;
background: var(--tfy-accent);
border: 0;
border-radius: 999px;
color: var(--tfy-primary);
display: inline-flex;
flex: 1 1 220px;
font-size: 0.95rem;
font-weight: 800;
gap: 0.5rem;
justify-content: center;
padding: 0.9em 1.4em;
text-align: center;
text-decoration: none;
}
.tfy-cta-btn:hover, .tfy-cta-btn:focus-visible { background: var(--tfy-primary); color: var(--tfy-surface); }
.tfy-cta-btn--secondary { background: var(--tfy-primary); color: var(--tfy-surface); }
.tfy-cta-btn--secondary:hover, .tfy-cta-btn--secondary:focus-visible { background: var(--tfy-accent); color: var(--tfy-primary); }
@media (max-width: 700px) {
.tfy-feature-grid { grid-template-columns: 1fr; }
.tfy-cta-btn { flex: 1 1 100%; }
}
.single-product .site-content { padding-top: clamp(1.6rem, 4vw, 3.5rem); }
.single-product div.product { background: var(--tfy-surface); border: 1px solid var(--tfy-border); border-radius: var(--tfy-radius); box-shadow: var(--tfy-shadow); padding: clamp(1rem, 3vw, 2.3rem); }
.single-product div.product .woocommerce-product-gallery { margin-bottom: 1.5rem; }
.single-product div.product .woocommerce-product-gallery img { border-radius: 14px; }
.tickefy-demo-event-image { aspect-ratio: 1; max-height: 470px; overflow: hidden; }
.tickefy-demo-event-image img { display: block; height: 100%; object-fit: cover; width: 100%; }
.tickefy-visitor-ticket-image { margin-bottom: 1.5rem; max-height: 470px; overflow: hidden; }
.tickefy-visitor-ticket-image img { border-radius: 14px; display: block; height: 100%; object-fit: cover; width: 100%; }
.tickefy-service-product-gallery { margin-bottom: 1.5rem; }
.tickefy-service-product-img { aspect-ratio: 1; background: var(--tfy-bg); border-radius: 14px; display: block; object-fit: contain; padding: 2rem; width: 100%; }
.tickefy-service-cart-img { border-radius: 10px; display: block; height: auto; width: 100%; }
.woocommerce-cart .product-thumbnail .tickefy-service-product-img,
.woocommerce-checkout .product-thumbnail .tickefy-service-product-img { background: transparent; padding: 0; }
.single-product div.product .product_title { color: var(--tfy-primary); font-size: clamp(2.25rem, 5vw, 4rem); font-weight: 850; letter-spacing: -0.02em; line-height: 0.95; margin-bottom: 0.6rem; }
.single-product div.product .price { color: var(--tfy-primary); font-size: 1.85rem; font-weight: 850; margin: 0.8rem 0 0.15rem; }
.tickefy-vat-note { color: var(--tfy-muted); font-size: 0.78rem; margin: 0 0 0.9rem; }
.single-product div.product .woocommerce-product-details__short-description { border-bottom: 1px solid var(--tfy-border); color: var(--tfy-muted); font-size: 1.01rem; line-height: 1.65; padding-bottom: 0.9rem; }
.single-product div.product form.cart { background: var(--tfy-bg); border: 1px solid var(--tfy-border); border-radius: 14px; display: flex; flex-direction: column; gap: 1rem; margin: 1rem 0 0.7rem; padding: 1.1rem; }
.single-product div.product form.cart .woocommerce-variation-add-to-cart { align-items: center; display: flex; gap: 1.4rem; flex-wrap: wrap; }
.single-product div.product form.cart .quantity { margin: 0; }
.single-product div.product form.cart .quantity[hidden] { display: none; }
.single-product div.product .woocommerce-tabs { padding-top: 2.2rem; }
.tickefy-organizer-placeholder { color: var(--tfy-muted); font-size: 0.82rem; margin: 0 0 0.6rem; }
/* Storefront sticky add-to-cart: enforce full viewport width on product pages. */
.storefront-sticky-add-to-cart { left: 0; right: 0; width: 100%; }
.tickefy-product-event { background: var(--tfy-bg); border-left: 4px solid var(--tfy-accent); border-radius: 0 14px 14px 0; margin: 0.8rem 0 1rem; padding: 1rem 1rem 0.45rem; }
.tickefy-product-event h2 { color: var(--tfy-primary); font-size: 0.8rem; font-weight: 850; letter-spacing: 0.13em; margin-bottom: 0.8rem; text-transform: uppercase; }
.tickefy-product-event dl { display: grid; font-size: 0.92rem; gap: 0.35rem 0.8rem; grid-template-columns: minmax(7.2rem, auto) 1fr; margin: 0; }
.tickefy-product-event dt { color: var(--tfy-muted); font-weight: 650; }
.tickefy-product-event dd { color: var(--tfy-text); font-weight: 750; margin: 0; }
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews, p.no-comments { background-color: var(--tfy-primary); border-radius: 12px; }
.woocommerce table.shop_table, .woocommerce-cart-form, .cart_totals, .woocommerce-checkout-review-order, .woocommerce-billing-fields, .woocommerce-additional-fields { background: var(--tfy-surface); border-radius: 14px; }
@media (max-width: 767px) {
.col-full { margin-left: 1rem; margin-right: 1rem; padding: 0; }
.site-content, .home .site-content { padding-top: 145px; }
.tickefy-header-bar { gap: 1.4rem; justify-content: center; min-height: 66px; }
.tickefy-main-navigation { justify-content: center; width: 100%; }
.tickefy-wordmark { gap: 0.3rem; padding: 0.24rem 0.45rem; }
.tickefy-logo-mark { height: 1.75rem; }
.tickefy-wordmark-image { height: 1.65rem; }
.tickefy-main-navigation { gap: 0.7rem; }
.tickefy-main-navigation a { font-size: 0.92rem; }
.tickefy-demo-home { padding-top: 3.4rem; }
.tickefy-demo-home h1 { font-size: clamp(3.2rem, 17vw, 4.6rem); }
.tickefy-landing-paths { grid-template-columns: 1fr; margin-top: 2rem; }
.tickefy-demo-card { grid-template-columns: 1fr; margin-top: 2.2rem; }
.tickefy-demo-card-media { max-height: 310px; }
.tickefy-demo-card-content { padding: 1.35rem; }
.single-product div.product { padding: 0.85rem; }
.single-product div.product .product_title { font-size: 2.75rem; }
.single-product div.product form.cart .woocommerce-variation-add-to-cart { flex-wrap: wrap; gap: 0.9rem; }
.single-product div.product form.cart .woocommerce-variation-add-to-cart .single_add_to_cart_button { flex: 1; min-width: 10rem; }
.tickefy-product-event dl { gap: 0.1rem; grid-template-columns: 1fr; }
.tickefy-product-event dd { margin-bottom: 0.55rem; }
}
/* ── Shared shop page header ─────────────────────────────────────────── */
.tickefy-page-header { margin: 0 0 2rem; max-width: 680px; }
.tickefy-page-title { color: var(--tfy-primary); font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 850; letter-spacing: -0.02em; line-height: 0.95; margin: 0 0 0.65rem; }
.tickefy-page-description { color: var(--tfy-accent); font-size: 0.95rem; font-weight: 650; letter-spacing: 0.015em; line-height: 1.6; margin: 0; }
/* Ticket gallery search field */
.tfy-lp__gallery-search { margin-bottom: 1.5rem; }
.tfy-lp__gallery-search__input { background: var(--tfy-surface); border: 1px solid var(--tfy-border); border-radius: 999px; color: var(--tfy-text,var(--tfy-primary)); font-size: 0.97rem; max-width: 460px; padding: 0.65rem 1.2rem; width: 100%; }
.tfy-lp__gallery-search__input:focus { border-color: var(--tfy-accent); outline: 2px solid rgba(22,199,183,.25); outline-offset: 2px; }
/* Ticketübersicht / WooCommerce shop archive */
.woocommerce-shop .entry-header,
.tickefy-tickets-page .entry-header { display: none; }
.woocommerce-shop .site-content,
.tickefy-tickets-page .site-content { padding-top: clamp(1.7rem, 4vw, 3.4rem); }
.woocommerce ul.products li.product { background: var(--tfy-surface); border: 1px solid var(--tfy-border); border-radius: var(--tfy-radius); box-shadow: 0 8px 24px rgba(16, 32, 51, 0.07); overflow: hidden; padding: 0; transition: box-shadow 0.18s, border-color 0.18s; }
.woocommerce ul.products li.product:hover { border-color: var(--tfy-accent); box-shadow: var(--tfy-shadow); }
.woocommerce ul.products li.product a img { border-radius: 0; display: block; width: 100%; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { color: var(--tfy-primary); font-size: 1.05rem; font-weight: 800; padding: 0.9rem 1rem 0.3rem; }
.woocommerce ul.products li.product .price { color: var(--tfy-primary); font-size: 1.05rem; font-weight: 800; padding: 0 1rem 0.6rem; }
.woocommerce ul.products li.product .button { border-radius: 0; display: block; margin: 0; text-align: center; width: 100%; }
/* Tickefy cart and checkout foundation. WooCommerce remains responsible for the flow. */
.woocommerce-cart .entry-header,
.woocommerce-checkout .entry-header { display: none; }
.woocommerce-cart .site-content,
.woocommerce-checkout .site-content { padding-top: clamp(1.7rem, 4vw, 3.4rem); }
.tickefy-commerce-intro { margin: 0 0 1.6rem; max-width: 760px; }
.tickefy-commerce-intro .tickefy-demo-eyebrow { margin-bottom: 0.55rem; }
.tickefy-commerce-intro h1 { color: var(--tfy-primary); font-size: clamp(2.5rem, 6vw, 4.25rem); font-weight: 850; letter-spacing: -0.02em; line-height: 0.95; margin: 0 0 0.65rem; }
.tickefy-commerce-intro p:last-child { color: var(--tfy-muted); font-size: 1.02rem; line-height: 1.65; margin: 0; }
.woocommerce-cart-form,
.cart_totals,
.woocommerce-checkout-review-order,
.woocommerce-billing-fields,
.woocommerce-additional-fields { background: var(--tfy-surface); border: 1px solid var(--tfy-border); border-radius: var(--tfy-radius); box-shadow: 0 12px 32px rgba(16, 32, 51, 0.07); }
.woocommerce-cart-form { overflow: hidden; padding: 0.4rem 1rem 1rem; }
.woocommerce table.shop_table { border: 0; border-collapse: separate; border-spacing: 0; margin-bottom: 0; }
.woocommerce table.shop_table th { color: var(--tfy-primary); font-size: 0.76rem; font-weight: 850; letter-spacing: 0.1em; padding: 1rem 0.75rem; text-transform: uppercase; }
.woocommerce table.shop_table td { border-top: 1px solid var(--tfy-border); padding: 1rem 0.75rem; vertical-align: top; }
.woocommerce-cart table.cart td.product-name a,
.woocommerce-checkout-review-order-table .product-name { color: var(--tfy-primary); font-weight: 800; }
.woocommerce-cart table.cart img { border-radius: 10px; }
.woocommerce-cart table.cart td.actions { padding-top: 1rem; }
.woocommerce-cart table.cart td.actions .coupon { align-items: center; display: flex; gap: 0.55rem; }
.woocommerce-cart table.cart td.actions .coupon .input-text { min-width: 10rem; width: auto; }
.cart-collaterals { margin-top: 1.25rem; }
.cart_totals { padding: 1.15rem; }
.cart_totals h2,
.woocommerce-billing-fields h3,
.woocommerce-additional-fields h3,
#order_review_heading { color: var(--tfy-primary); font-size: 1.35rem; font-weight: 850; letter-spacing: -0.01em; margin: 0 0 1rem; }
.cart_totals .wc-proceed-to-checkout { padding: 1rem 0 0; }
.cart_totals .checkout-button { display: block; font-size: 1rem; margin: 0; text-align: center; }
.tickefy-cart-item-event,
.tickefy-checkout-item-event { background: transparent; border: 0; border-top: 1px solid var(--tfy-border); border-radius: 0; margin-top: 0.55rem; padding: 0.55rem 0 0.45rem; }
.tickefy-line-item-badge { color: var(--tfy-muted); font-size: 0.68rem; font-weight: 400; letter-spacing: 0.06em; margin: 0 0 0.4rem; text-transform: uppercase; }
.tickefy-cart-item-event dl,
.tickefy-checkout-item-event dl { display: grid; font-size: 0.8rem; gap: 0.16rem 0.6rem; grid-template-columns: minmax(5.7rem, auto) 1fr; margin: 0; }
.tickefy-cart-item-event dt,
.tickefy-checkout-item-event dt { color: var(--tfy-muted); font-weight: 650; }
.tickefy-cart-item-event dd,
.tickefy-checkout-item-event dd { color: var(--tfy-text); font-weight: 750; margin: 0; }
.tickefy-checkout-item-event dd { overflow-wrap: normal; word-break: normal; }
/* Classic Checkout two-column grid.
* Storefront uses float-based layout (width: 38% on #order_review, width: 58% on
* #customer_details). When the parent form becomes a grid container those floats are
* ignored by the browser, but an explicit `width` on a grid item still constrains it.
* We override with width: 100% + float: none so each item fills its grid track.
*/
.woocommerce-checkout form.checkout {
align-items: start;
display: grid;
gap: 0.75rem 1.5rem;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.woocommerce-checkout #customer_details {
float: none;
grid-column: 1;
grid-row: 1 / span 2;
min-width: 0;
width: 100%;
}
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review {
float: none;
grid-column: 2;
min-width: 0;
width: 100%;
}
.woocommerce-checkout #order_review_heading { align-self: end; grid-row: 1; margin: 0; padding: 0 1.15rem; }
.woocommerce-checkout #order_review { grid-row: 2; overflow-wrap: break-word; padding: 0.35rem 1.15rem 1.15rem; word-break: normal; }
.woocommerce-billing-fields,
.woocommerce-additional-fields { margin-bottom: 1.25rem; padding: 1.15rem; }
.woocommerce form .form-row { margin-bottom: 0.85rem; padding: 0; }
.woocommerce form .form-row label { color: var(--tfy-primary); font-size: 0.84rem; font-weight: 750; }
.woocommerce form .form-row .required { color: #b42318; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.select2-container--default .select2-selection--single { background: var(--tfy-surface); border: 1px solid var(--tfy-border); border-radius: 10px; box-shadow: none; min-height: 43px; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 41px; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 41px; }
#payment { background: transparent; border: 0; border-top: 1px solid var(--tfy-border); border-radius: 0; margin-top: 0.25rem; }
#payment ul.payment_methods { list-style: none; margin: 0; padding: 0; }
/* Nur für tickefy_connect_ticket ausblenden: dieses Gateway ist die einzige Option bei reinen
Besuchertickets, daher braucht es keine Auswahl-UI (eigener Hinweistext ersetzt sie, siehe
tickefy_child_render_checkout_payment_note()). Event-Setup-Käufe (organizer_event_setup) nutzen
normale WooCommerce-Gateways (Stripe Kreditkarte, SEPA, ...) mit echter Auswahl zwischen mehreren
Optionen — Label/Radio-Button dürfen dort nicht ausgeblendet werden, sonst ist der Checkout
unbedienbar (gefunden 2026-07-05: Event-Setup-Kauf zeigte "Bitte wählen Sie eine Zahlungsmethode"
ohne jede sichtbare Auswahlmöglichkeit). */
#payment ul.payment_methods li.payment_method_tickefy_connect_ticket > label { display: none !important; }
#payment ul.payment_methods li.payment_method_tickefy_connect_ticket .payment_box { display: none !important; }
#payment ul.payment_methods li.payment_method_tickefy_connect_ticket > input[type="radio"] { left: -9999px; position: absolute; top: auto; }
#payment .woocommerce-privacy-policy-text { overflow-wrap: break-word; }
#payment .place-order { padding: 0.75rem 0 0; }
#payment #place_order { float: none; line-height: 1.35; white-space: normal; width: 100%; }
.tickefy-checkout-payment-note { color: var(--tfy-muted); font-size: 0.82rem; margin: 0.65rem 0 0; }
@media (max-width: 900px) {
.woocommerce-checkout form.checkout { display: block; }
.woocommerce-checkout #order_review_heading { margin: 1.4rem 0 0.8rem; padding: 0; }
.woocommerce-checkout #order_review { padding: 0.35rem 0.75rem 0.75rem; }
}
.woocommerce-info,
.woocommerce-message,
.woocommerce-error { border-left: 4px solid var(--tfy-accent); box-shadow: 0 8px 20px rgba(16, 32, 51, 0.08); }
@media (max-width: 767px) {
/* .single-product/.woocommerce-cart/.woocommerce-checkout/.tickefy-tickets-page each set
a smaller desktop-tuned .site-content padding-top (clamp(...) ~= 56-60px) further up in
this stylesheet. On narrow viewports the fixed .site-header wraps to two rows and needs
145px (see the generic .site-content rule above) — without this override the smaller
desktop value wins here too (same specificity, later in source order), so the fixed
header overlaps the product image / first cart row on mobile. */
.single-product .site-content,
.woocommerce-cart .site-content,
.woocommerce-checkout .site-content,
.tickefy-tickets-page .site-content { padding-top: 145px; }
.tickefy-page-title { font-size: 2.5rem; }
.tickefy-commerce-intro h1 { font-size: 3rem; }
.woocommerce-cart-form { padding: 0.2rem 0.7rem 0.7rem; }
.woocommerce table.shop_table_responsive tr td { padding: 0.75rem 0.25rem; }
.woocommerce table.shop_table_responsive tr td.product-name { text-align: left; }
.woocommerce table.shop_table_responsive tr td.product-name::before { display: none; }
/* Narrow cart layout: WooCommerce's default product-remove ("×") float collides with
the event thumbnail below it once rows stack to full width. Pin the remove button
to the top-right corner of the thumbnail cell instead of relying on the float. */
.woocommerce-cart table.cart tr.cart_item { position: relative; }
.woocommerce-cart table.cart td.product-remove { border-top: 0; padding: 0; position: absolute; right: 0.25rem; top: 0.75rem; z-index: 1; }
.woocommerce-cart table.cart td.product-thumbnail { padding-top: 0.75rem; }
.tickefy-cart-item-event dl,
.tickefy-checkout-item-event dl { grid-template-columns: 1fr; }
.tickefy-cart-item-event dd,
.tickefy-checkout-item-event dd { margin-bottom: 0.28rem; }
.woocommerce-cart table.cart td.actions .coupon { align-items: stretch; flex-direction: column; }
.woocommerce-cart table.cart td.actions .coupon .input-text { margin: 0; width: 100%; }
.woocommerce-cart table.cart td.actions .coupon .button,
.woocommerce-cart table.cart td.actions > .button { margin-top: 0.55rem; width: 100%; }
}
/* -------------------------------------------------------------------------
Tickefy legal-acceptance checkbox — checkout display fix
Ensures the checkbox label wraps as a readable block, not character-by-character.
------------------------------------------------------------------------- */
.tickefy-legal-acceptance { margin: 0.75rem 0 0; }
.tickefy-legal-acceptance .tickefy-legal-checkbox-row { margin-bottom: 0; }
.tickefy-legal-acceptance .tickefy-legal-label {
align-items: flex-start;
display: flex;
flex-wrap: nowrap;
gap: 0.55rem;
line-height: 1.55;
}
.tickefy-legal-acceptance .tickefy-legal-label input[type="checkbox"] {
flex-shrink: 0;
margin-top: 0.22em;
}
.tickefy-legal-acceptance .tickefy-legal-label span {
display: block;
min-width: 0;
overflow-wrap: break-word;
word-break: normal;
}
.tickefy-legal-acceptance .tickefy-event-buyer-notices {
background: var(--tfy-bg);
border-left: 3px solid var(--tfy-accent);
border-radius: 0 10px 10px 0;
margin-bottom: 0.75rem;
padding: 0.75rem 0.9rem;
}
.tickefy-legal-acceptance .tickefy-event-buyer-notice { margin: 0 0 0.35rem; }
/* Event-Setup ticket fee info box — product page only.
* Modelled after .tickefy-product-event: accent border-left, tinted background, no alarm colour. */
.tickefy-event-setup-fees { background: var(--tfy-bg); border-left: 4px solid var(--tfy-accent); border-radius: 0 14px 14px 0; margin: 1rem 0 1.1rem; padding: 0.9rem 1rem 0.6rem; }
.tickefy-event-setup-fees__heading { color: var(--tfy-primary); font-size: 0.78rem; font-weight: 850; letter-spacing: 0.13em; margin: 0 0 0.65rem; text-transform: uppercase; }
.tickefy-event-setup-fees__list { color: var(--tfy-text); font-size: 0.96rem; font-weight: 750; list-style: none; margin: 0 0 0.55rem; padding: 0; }
.tickefy-event-setup-fees__list li { margin: 0 0 0.25rem; padding: 0; }
.tickefy-event-setup-fees__list li::before { color: var(--tfy-accent); content: "•"; margin-right: 0.45rem; }
.tickefy-event-setup-fees__note { color: var(--tfy-muted); font-size: 0.82rem; margin: 0; }
.tickefy-seat-selection { margin: 0 0 1rem; }
.tickefy-seat-selection label { display: block; font-weight: 700; margin: 0 0 0.35rem; }
.tickefy-seat-selection select { max-width: 14rem; width: 100%; }
.tickefy-ticket-notes { background: #f8fbfd; border: 1px solid var(--tfy-border); border-radius: 12px; color: var(--tfy-muted); font-size: 0.83rem; line-height: 1.55; margin: 0.85rem 0 0; padding: 0.85rem 1rem; }
.tickefy-ticket-notes ul { margin: 0; padding-left: 1.15rem; }
.tickefy-ticket-notes li { margin: 0.2rem 0; }
.tickefy-ticket-notes a { font-weight: 750; }
.tickefy-variation-note { color: var(--tfy-muted); font-size: 0.9rem; margin: 0.4rem 0 0.8rem; }
.tickefy-variation-note strong { color: var(--tfy-primary); }
/* ── Event-Setup product page ─────────────────────────────────────────── */
/* The custom template (woocommerce/content-single-product.php) emits
* .tickefy-event-setup-product-root instead of the standard WooCommerce
* div.product wrapper with gallery + .summary.entry-summary columns.
* No Storefront float/grid layout is ever applied, so no overrides needed. */
.tickefy-event-setup-product-root {
background: var(--tfy-surface);
border: 1px solid var(--tfy-border);
border-radius: 22px;
box-shadow: var(--tfy-shadow);
overflow: hidden;
}
/* Hero: two-column grid — logo stage left, summary right. No separate card styling. */
.tickefy-event-setup-hero {
background: var(--tfy-surface);
display: grid;
gap: clamp(2rem, 5vw, 4rem);
grid-template-columns: minmax(240px, 38%) 1fr;
padding: clamp(1.5rem, 4vw, 3rem);
}
.tickefy-event-setup-kicker {
color: var(--tfy-accent);
font-size: 0.75rem;
font-weight: 850;
letter-spacing: 0.15em;
margin-bottom: 0.9rem;
text-transform: uppercase;
}
.tickefy-event-setup-logo-stage {
align-items: center;
background: #f0f4f8;
border-radius: 18px;
display: flex;
justify-content: center;
min-height: clamp(240px, 28vw, 400px);
padding: clamp(1.2rem, 3vw, 2.5rem);
}
.tickefy-event-setup-logo-img {
display: block;
filter: drop-shadow(0 14px 20px rgba(16, 32, 51, 0.12));
max-width: 92%;
width: 340px;
}
.tickefy-event-setup-badge {
background: var(--tfy-accent);
border-radius: 999px;
color: var(--tfy-primary);
display: inline-block;
font-size: 0.72rem;
font-weight: 850;
letter-spacing: 0.1em;
margin-bottom: 1rem;
padding: 0.38rem 0.85rem;
text-transform: uppercase;
}
.tickefy-event-setup-title {
color: var(--tfy-primary);
font-size: clamp(2.6rem, 5.5vw, 4.5rem);
font-weight: 900;
letter-spacing: -0.02em;
line-height: 0.95;
margin: 0 0 0.7rem;
}
.tickefy-event-setup-price { color: var(--tfy-primary); font-size: 1.75rem; font-weight: 850; margin: 0 0 0.85rem; }
.tickefy-event-setup-lead { color: var(--tfy-muted); font-size: 1.01rem; line-height: 1.65; margin: 0 0 1.4rem; }
.tickefy-event-setup-info-grid {
display: grid;
gap: 0.85rem;
grid-template-columns: 1fr 1fr;
margin-top: 0.5rem;
}
.tickefy-event-setup-info-box {
background: #f0f4f8;
border-left: 4px solid var(--tfy-accent);
border-radius: 14px;
font-size: 0.92rem;
line-height: 1.5;
padding: 1rem 1.1rem;
}
.tickefy-event-setup-info-box strong { color: var(--tfy-primary); display: block; font-weight: 850; margin-bottom: 0.45rem; }
.tickefy-event-setup-info-box p { color: var(--tfy-muted); margin: 0; }
.tickefy-event-setup-fees-list { color: var(--tfy-text); font-weight: 750; list-style: none; margin: 0; padding: 0; }
.tickefy-event-setup-fees-list li { margin: 0 0 0.2rem; padding: 0; }
.tickefy-event-setup-fees-list li::before { color: var(--tfy-accent); content: "•"; margin-right: 0.4rem; }
/* Full-width note between the hero and the form band. */
.tickefy-event-setup-fees-payout-note {
background: var(--tfy-surface);
padding: 1rem clamp(1.5rem, 4vw, 3rem);
}
.tickefy-event-setup-fees-payout-note p {
color: var(--tfy-muted);
font-size: 0.9rem;
line-height: 1.55;
margin: 0;
}
/* Form band section: semantic wrapper output by tickefy_child_open_event_setup_form_band(). */
.tickefy-event-setup-form-band {
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
border-top: 1px solid var(--tfy-border);
padding: clamp(1.5rem, 4vw, 3rem);
}
/* Two-column grid: form-card (1fr) + purchase-card sidebar (280px). */
.tickefy-event-setup-form-layout {
align-items: start;
display: grid;
gap: clamp(1.4rem, 4vw, 2.2rem);
grid-template-columns: minmax(0, 1fr) 280px;
}
.tickefy-visitor-ticket-product .tickefy-event-setup-form-layout {
grid-template-columns: minmax(0, 1fr) 420px;
}
/* Form card: contains form-head + WooCommerce add-to-cart form. */
.tickefy-event-setup-form-card {
background: var(--tfy-surface);
border: 1px solid var(--tfy-border);
border-radius: 18px;
min-width: 0;
padding: clamp(1.2rem, 3vw, 2rem);
}
/* Reset WooCommerce form.cart inside the form-card — quantity and submit button are hidden,
* the visible submit action is the purchase card button. */
.tickefy-event-setup-product .tickefy-event-setup-form-card form.cart {
background: transparent;
border: none;
border-radius: 0;
box-shadow: none;
display: block;
margin: 0;
padding: 0;
}
.tickefy-event-setup-product .tickefy-event-setup-form-card form.cart .quantity { display: none; }
.tickefy-event-setup-product .tickefy-event-setup-form-card form.cart .single_add_to_cart_button { display: none; }
/* Hide the plugin fieldset legend/description — replaced by tickefy-event-setup-form-head above the form. */
.tickefy-event-setup-product .tickefy-organizer-event-setup > legend,
.tickefy-event-setup-product .tickefy-organizer-event-setup > p:first-of-type { display: none; }
.tickefy-event-setup-form-head { max-width: 580px; }
.tickefy-event-setup-form-eyebrow {
color: var(--tfy-accent);
font-size: 0.73rem;
font-weight: 850;
letter-spacing: 0.14em;
margin-bottom: 0.6rem;
text-transform: uppercase;
}
.tickefy-event-setup-form-head h2 {
color: var(--tfy-primary);
font-size: clamp(1.6rem, 3vw, 2.2rem);
font-weight: 850;
letter-spacing: -0.01em;
line-height: 1.08;
margin: 0 0 0.55rem;
}
.tickefy-event-setup-form-head > p { color: var(--tfy-muted); font-size: 0.97rem; line-height: 1.6; margin: 0; }
/* Purchase card — dark sidebar, sticky. */
.tickefy-event-setup-purchase-card {
align-self: start;
background: var(--tfy-primary);
border-radius: 18px;
box-shadow: 0 6px 18px rgba(16, 32, 51, 0.16);
color: var(--tfy-surface);
padding: 1.4rem;
position: sticky;
top: 1.2rem;
}
.tickefy-event-setup-purchase-card h3 {
color: var(--tfy-surface);
font-size: 1.1rem;
font-weight: 850;
letter-spacing: -0.01em;
margin: 0 0 0.55rem;
}
.tickefy-event-setup-purchase-card > p {
color: rgba(255, 255, 255, 0.75);
font-size: 0.86rem;
line-height: 1.55;
margin: 0 0 1rem;
}
.tickefy-event-setup-purchase-row {
align-items: baseline;
border-top: 1px solid rgba(255, 255, 255, 0.18);
display: flex;
font-size: 0.88rem;
justify-content: space-between;
margin-bottom: 1rem;
padding-top: 0.8rem;
}
.tickefy-event-setup-purchase-price { font-size: 1.2rem; font-weight: 850; }
.tickefy-event-setup-submit-trigger { display: block; margin: 0; text-align: center; width: 100%; }
.tickefy-event-setup-trust-line {
color: rgba(255, 255, 255, 0.6);
font-size: 0.73rem;
line-height: 1.55;
margin: 0.8rem 0 0;
text-align: center;
}
/* Details section below the product. */
.tickefy-event-setup-details { margin-top: 2rem; }
.tickefy-event-setup-detail-block {
background: #f0f4f8;
border-radius: 18px;
max-width: 820px;
padding: 1.4rem 1.6rem;
}
.tickefy-event-setup-detail-block h2 {
color: var(--tfy-primary);
font-size: 1.2rem;
font-weight: 850;
letter-spacing: -0.01em;
margin: 0 0 0.7rem;
}
.tickefy-event-setup-detail-block p { color: var(--tfy-muted); font-size: 0.97rem; line-height: 1.65; margin: 0; }
.tickefy-event-setup-roadmap { counter-reset: roadmap; display: flex; flex-direction: column; gap: 1.1rem; list-style: none; margin: 0; padding: 0; }
.tickefy-event-setup-roadmap__step { align-items: baseline; counter-increment: roadmap; display: grid; gap: 0.2rem 0.85rem; grid-template-areas: "num title" "num body"; grid-template-columns: 1.6rem 1fr; }
.tickefy-event-setup-roadmap__step::before { color: var(--tfy-accent); content: counter(roadmap); font-size: 0.8rem; font-weight: 850; grid-area: num; line-height: 1.55; padding-top: 0.05em; }
.tickefy-event-setup-roadmap__title { color: var(--tfy-primary); font-size: 0.97rem; font-weight: 800; grid-area: title; line-height: 1.45; }
.tickefy-event-setup-roadmap__body { color: var(--tfy-muted); font-size: 0.9rem; grid-area: body; line-height: 1.65; }
.tickefy-event-setup-detail-howto { border-top: 1px solid var(--tfy-border); color: var(--tfy-muted); font-size: 0.88rem; margin: 1.1rem 0 0; padding-top: 0.9rem; }
.tickefy-event-setup-detail-howto a { color: var(--tfy-accent); font-weight: 750; text-decoration: none; }
.tickefy-event-setup-detail-howto a:hover { color: var(--tfy-primary); text-decoration: underline; }
/* Suppress Storefront prev/next product pagination on event-setup pages (CSS fallback;
* remove_action in functions.php is the primary guard). */
.tickefy-event-setup-product .storefront-product-section,
.tickefy-event-setup-product .woocommerce-product-pagination { display: none !important; }
/* ── Visitor ticket product page ────────────────────────────────────────────────────────────────── */
/* Hero image fills the media column without white padding. */
.tickefy-visitor-ticket-hero .tickefy-event-setup-media { overflow: hidden; padding: 0; }
.tickefy-visitor-ticket-hero-image { margin: 0; }
.tickefy-visitor-ticket-hero-image img { border-radius: 18px; display: block; height: 100%; object-fit: cover; width: 100%; }
/* Date / time / location metadata list. */
.tickefy-visitor-ticket-meta { display: flex; flex-direction: column; gap: 0.3rem; list-style: none; margin: 0 0 1.1rem; padding: 0; }
.tickefy-visitor-ticket-meta-row { display: flex; font-size: 0.95rem; gap: 0.55rem; }
.tickefy-visitor-ticket-meta-row dt { color: var(--tfy-muted); font-weight: 500; min-width: 3.8rem; }
.tickefy-visitor-ticket-meta-row dd { color: var(--tfy-text); font-weight: 750; }
/* Organizer name: inherit size from event-setup-summary, but bump weight. */
.tickefy-visitor-ticket-hero .tickefy-organizer-name,
.tickefy-visitor-ticket-hero .tickefy-organizer-placeholder { color: var(--tfy-muted); font-size: 1rem; font-weight: 600; margin: 0 0 0.5rem; }
/* Ticket type list: same weight as body text (not bold like the fee list on event-setup pages). */
.tickefy-visitor-ticket-hero .tickefy-event-setup-fees-list { font-weight: 400; }
/* Long event description in the left form-card column. */
.tickefy-visitor-ticket-description { color: var(--tfy-muted); font-size: 0.97rem; line-height: 1.65; margin-top: 0.7rem; }
.tickefy-visitor-ticket-description p { margin-bottom: 0.75rem; }
.tickefy-visitor-ticket-description p:last-child { margin-bottom: 0; }
/* Reset WooCommerce form inside the dark purchase card. */
.single-product div.product .tickefy-visitor-ticket-purchase-card form.cart {
background: transparent;
border: none;
box-shadow: none;
gap: 1rem;
margin: 0;
padding: 0;
}
.tickefy-visitor-ticket-purchase-card form.cart .single_variation_wrap {
background: transparent;
border: none;
border-radius: 0;
padding: 0;
}
.tickefy-visitor-ticket-purchase-card form.cart .variations { border: none; border-collapse: collapse; margin: 0 0 0.8rem; width: 100%; }
.tickefy-visitor-ticket-purchase-card form.cart .variations th,
.tickefy-visitor-ticket-purchase-card form.cart .variations td { background: transparent; border: none; font-size: 0.85rem; padding: 0 0 0.35rem; }
.tickefy-visitor-ticket-purchase-card form.cart .variations th.label { color: rgba(255, 255, 255, 0.94); font-weight: 800; padding-bottom: 0.45rem; width: 40%; }
.tickefy-visitor-ticket-purchase-card form.cart .variations th.label label { color: inherit; font-weight: inherit; }
.tickefy-visitor-ticket-purchase-card form.cart .variations select {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 8px;
color: #fff;
font-size: 0.88rem;
padding: 0.45rem 0.65rem;
width: 100%;
}
.tickefy-visitor-ticket-purchase-card form.cart .variations select option { background: var(--tfy-primary); color: #fff; }
.tickefy-visitor-ticket-purchase-card form.cart .variations .reset_variations { display: none; }
.tickefy-visitor-ticket-purchase-card form.cart .single_variation { color: rgba(255, 255, 255, 0.86); font-size: 0.88rem; line-height: 1.55; margin-bottom: 0.8rem; overflow-wrap: anywhere; }
.tickefy-visitor-ticket-purchase-card form.cart .woocommerce-variation-price { color: rgba(255, 255, 255, 0.9); font-size: 0.88rem; margin-bottom: 0.6rem; }
.tickefy-visitor-ticket-purchase-card form.cart .woocommerce-variation-price .price { color: #fff; }
.tickefy-visitor-ticket-purchase-card form.cart .woocommerce-variation-description { color: rgba(255, 255, 255, 0.84); line-height: 1.65; margin-bottom: 0.9rem; }
.tickefy-visitor-ticket-purchase-card form.cart .woocommerce-variation-description p { color: inherit; line-height: inherit; margin-bottom: 0.55rem; }
.tickefy-visitor-ticket-purchase-card form.cart .woocommerce-variation-availability,
.tickefy-visitor-ticket-purchase-card form.cart .woocommerce-variation-availability p { color: rgba(255, 255, 255, 0.78); }
.tickefy-visitor-ticket-purchase-card form.cart .woocommerce-variation-add-to-cart,
.tickefy-visitor-ticket-purchase-card form.cart .variations_button {
background: transparent;
border: none;
box-shadow: none;
color: rgba(255, 255, 255, 0.86);
padding: 0;
width: 100%;
}
.tickefy-visitor-ticket-purchase-card form.cart .tickefy-seat-selection {
background: transparent;
border: none;
box-shadow: none;
color: rgba(255, 255, 255, 0.86);
margin: 0 0 1rem;
padding: 0;
width: 100%;
}
.tickefy-visitor-ticket-purchase-card form.cart .tickefy-seat-selection label {
color: rgba(255, 255, 255, 0.72);
font-weight: 700;
}
.tickefy-visitor-ticket-purchase-card form.cart .tickefy-seat-selection select,
.tickefy-visitor-ticket-purchase-card form.cart select#shop_seats_requested {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 8px;
color: #fff;
font-size: 0.88rem;
max-width: none;
padding: 0.45rem 0.65rem;
width: 100%;
}
.tickefy-visitor-ticket-purchase-card form.cart .tickefy-seat-selection select option,
.tickefy-visitor-ticket-purchase-card form.cart select#shop_seats_requested option {
background: var(--tfy-primary);
color: #fff;
}
.tickefy-visitor-ticket-purchase-card form.cart table,
.tickefy-visitor-ticket-purchase-card form.cart tbody,
.tickefy-visitor-ticket-purchase-card form.cart tr,
.tickefy-visitor-ticket-purchase-card form.cart th,
.tickefy-visitor-ticket-purchase-card form.cart td,
.tickefy-visitor-ticket-purchase-card form.cart .woocommerce-variation,
.tickefy-visitor-ticket-purchase-card form.cart .single_variation,
.tickefy-visitor-ticket-purchase-card form.cart .woocommerce-variation-add-to-cart,
.tickefy-visitor-ticket-purchase-card form.cart .variations_button {
background: transparent;
background-color: transparent;
border-color: transparent;
box-shadow: none;
}
.tickefy-visitor-ticket-purchase-card form.cart .quantity,
.tickefy-visitor-ticket-purchase-card form.cart .quantity input.qty {
background: rgba(255, 255, 255, 0.1);
background-color: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 8px;
color: #fff;
}
.tickefy-visitor-ticket-purchase-card form.cart .quantity { display: flex; flex-direction: column; gap: 0.35rem; margin: 0 0 1rem; padding: 0; }
.tickefy-visitor-ticket-purchase-card form.cart .quantity::before { color: rgba(255, 255, 255, 0.9); content: "Anzahl Tickets"; font-size: 0.85rem; font-weight: 800; line-height: 1.35; }
.tickefy-visitor-ticket-purchase-card form.cart .quantity[hidden] { display: none; }
.tickefy-visitor-ticket-purchase-card form.cart .single_add_to_cart_button {
background: var(--tfy-accent);
border: none;
border-radius: 10px;
color: var(--tfy-primary);
cursor: pointer;
display: block;
font-size: 1rem;
font-weight: 850;
margin: 0;
padding: 0.8rem 1rem;
text-align: center;
width: 100%;
}
.tickefy-visitor-ticket-purchase-card form.cart .single_add_to_cart_button:hover { opacity: 0.88; }
.tickefy-visitor-ticket-purchase-card form.cart .single_add_to_cart_button.disabled,
.tickefy-visitor-ticket-purchase-card form.cart .single_add_to_cart_button:disabled { opacity: 0.45; cursor: not-allowed; }
/* Suppress unused WC elements on visitor ticket pages. */
.tickefy-visitor-ticket-product .storefront-product-section,
.tickefy-visitor-ticket-product .woocommerce-product-pagination { display: none !important; }
.tickefy-visitor-ticket-product .after_single_product_summary { display: none; }
/* Landing page event cards: make the anchor a block element. */
a.tfy-lp__event-card { color: inherit; display: block; text-decoration: none; transition: border-color 0.18s, box-shadow 0.18s; }
a.tfy-lp__event-card:hover, a.tfy-lp__event-card:focus { border-color: var(--tfy-accent); box-shadow: 0 8px 28px rgba(16, 32, 51, 0.12); color: inherit; }
/* Hero single-column at 920px; form/purchase-card remain side-by-side until 680px. */
@media (max-width: 920px) {
.tickefy-event-setup-hero { gap: 1.5rem; grid-template-columns: 1fr; }
.tickefy-event-setup-logo-stage { min-height: 200px; }
.tickefy-event-setup-info-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
.tickefy-event-setup-form-layout,
.tickefy-visitor-ticket-product .tickefy-event-setup-form-layout { grid-template-columns: 1fr; }
.tickefy-event-setup-product .tickefy-event-setup-purchase-card {
grid-column: 1;
grid-row: auto;
position: static;
}
}
/* Hide the Additional Information / order notes wrapper — order notes are disabled
because Tickefy does not currently process customer order notes in the ticket backend.
The PHP hook removes the order field group; this CSS is a safety net in case
WooCommerce still renders the empty wrapper element. */
.woocommerce-additional-fields {
display: none;
}
.tickefy-withdrawal-notice {
font-size: 0.82rem;
color: var(--tfy-muted);
line-height: 1.55;
margin: 0.75rem 0 0;
padding: 0.6rem 0.9rem;
background: #f5f7fa;
border-left: 3px solid var(--tfy-border);
border-radius: 0 6px 6px 0;
}
.tickefy-withdrawal-notice--checkout {
background: transparent;
border-left: 0;
border-radius: 0;
border-top: 1px solid var(--tfy-border);
margin-bottom: 1rem;
padding: 0.5rem 0 0;
}
/* ── Warum-Tickefy page (tickefy-warum) ─────────────────────────────── */
.tickefy-warum__hero .tfy-lp__hero-content h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.tickefy-warum__card { background: var(--tfy-surface); border: 1px solid var(--tfy-border); border-radius: var(--tfy-radius); box-shadow: var(--tfy-shadow); margin: clamp(2.4rem, 5vw, 3.6rem) auto 4rem; max-width: 760px; padding: clamp(2rem, 5vw, 3.2rem); }
.tickefy-warum__eyebrow { color: var(--tfy-accent); font-size: 0.75rem; font-weight: 850; letter-spacing: 0.15em; margin: 0 0 0.9rem; text-transform: uppercase; }
.tickefy-warum__card h1 { color: var(--tfy-primary); font-size: clamp(2rem, 4.5vw, 2.9rem); font-weight: 850; letter-spacing: -0.015em; line-height: 1.08; margin: 0 0 1.6rem; }
.tickefy-warum__card p { color: var(--tfy-text); font-size: 1.05rem; line-height: 1.75; margin: 0 0 1.35rem; max-width: 62ch; }
.tickefy-warum__card p:first-of-type { color: var(--tfy-primary); font-size: 1.18rem; }
.tickefy-warum__card p:last-child { margin-bottom: 0; }
/* ── Contact page (tickefy-contact) ─────────────────────────────────── */
.tickefy-contact { padding: clamp(2rem, 5vw, 3.5rem) 0 4rem; }
.tickefy-contact__card { background: var(--tfy-surface); border: 1px solid var(--tfy-border); border-radius: var(--tfy-radius); box-shadow: var(--tfy-shadow); margin: 0 auto; max-width: 760px; padding: clamp(1.5rem, 4vw, 2.6rem); }
.tickefy-contact__intro { margin-bottom: 1.5rem; }
.tickefy-contact__eyebrow { color: var(--tfy-accent); font-size: 0.75rem; font-weight: 850; letter-spacing: 0.15em; margin: 0 0 0.8rem; text-transform: uppercase; }
.tickefy-contact h1 { color: var(--tfy-primary); font-size: clamp(2.25rem, 5vw, 4rem); font-weight: 850; letter-spacing: -0.02em; line-height: 0.95; margin: 0 0 0.8rem; }
.tickefy-contact__intro p:last-child, .tickefy-contact__privacy { color: var(--tfy-muted); font-size: 1rem; line-height: 1.65; }
.tickefy-contact__form { display: grid; gap: 1rem; margin: 0; }
.tickefy-contact__field { margin: 0; }
.tickefy-contact__field label { color: var(--tfy-primary); display: block; font-weight: 800; margin-bottom: 0.35rem; }
.tickefy-contact__field input, .tickefy-contact__field textarea { width: 100%; }
.tickefy-contact__notice { border-radius: 14px; margin: 0 0 1rem; padding: 0.9rem 1rem; }
.tickefy-contact__notice ul { margin: 0; padding-left: 1.2rem; }
.tickefy-contact__notice--success { background: rgba(22, 199, 183, 0.12); border: 1px solid rgba(22, 199, 183, 0.35); color: var(--tfy-primary); }
.tickefy-contact__notice--error { background: #fef2f2; border: 1px solid #fecaca; color: #b42318; }
.tickefy-contact__actions, .tickefy-contact__privacy { margin: 0; }
/* ── Verkauf-beendet-Badge (event card, landing page + gallery) ─────── */
.tfy-lp__event-card-sold-out { background: #c62828; border-radius: 20px; color: #fff; font-size: 11px; font-weight: 500; left: 10px; letter-spacing: .03em; line-height: 1.2; padding: 4px 10px; pointer-events: none; position: absolute; top: 10px; }
/* ── Sale-closed notice (visitor ticket product page) ────────────────── */
.tickefy-sale-closed-notice { border: 2px solid #e57373; border-radius: var(--tfy-radius); margin-bottom: 1.25rem; overflow: hidden; }
.tickefy-sale-closed-notice__stripe { background: #c62828; height: 4px; }
.tickefy-sale-closed-notice__body { align-items: flex-start; display: flex; gap: 0.9rem; padding: 1.1rem 1.25rem 1.25rem; }
.tickefy-sale-closed-notice__icon { background: #fde8e8; border-radius: 50%; color: #c62828; flex-shrink: 0; font-size: 1.2rem; height: 2.2rem; line-height: 2.2rem; margin-top: 1px; text-align: center; width: 2.2rem; }
.tickefy-sale-closed-notice__main { font-size: 1rem; font-weight: 800; line-height: 1.35; margin: 0 0 0.1rem; }
.tickefy-sale-closed-notice__sub { border-top: 1px solid var(--tfy-border); color: var(--tfy-muted); font-size: 0.88rem; line-height: 1.6; margin-top: 0.65rem; padding-top: 0.65rem; }
/* ── Legal-PDF floating overlay (footer + checkout legal links) ──────── */
.tickefy-pdf-modal-overlay { align-items: flex-start; background: rgba(16, 32, 51, 0.55); display: flex; inset: 0; justify-content: center; overflow-y: auto; padding: 4vh 1rem; position: fixed; z-index: 10000; }
.tickefy-pdf-modal-overlay[hidden] { display: none; }
body.tickefy-pdf-modal-open { overflow: hidden; }
.tickefy-pdf-modal { background: var(--tfy-surface); border-radius: var(--tfy-radius); box-shadow: var(--tfy-shadow); display: flex; flex-direction: column; max-height: 92vh; max-width: 760px; width: 100%; }
.tickefy-pdf-modal__header { align-items: center; border-bottom: 1px solid var(--tfy-border); display: flex; gap: 1rem; justify-content: space-between; padding: 1rem 1.25rem; }
.tickefy-pdf-modal__title { color: var(--tfy-primary); font-weight: 800; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tickefy-pdf-modal__close { background: none; border: none; border-radius: 50%; color: var(--tfy-muted); cursor: pointer; flex-shrink: 0; font-size: 1.6rem; height: 2.2rem; line-height: 1; width: 2.2rem; }
.tickefy-pdf-modal__close:hover, .tickefy-pdf-modal__close:focus-visible { background: var(--tfy-bg); color: var(--tfy-primary); }
.tickefy-pdf-modal__body { overflow-y: auto; padding: 1rem 1.25rem 1.5rem; }
.tickefy-pdf-modal__status { color: var(--tfy-muted); margin: 0 0 1rem; text-align: center; }
.tickefy-pdf-modal__status:empty { display: none; }
.tickefy-pdf-modal__fallback-link { color: var(--tfy-accent); font-weight: 800; text-decoration: underline; }
.tickefy-pdf-modal__viewer { display: flex; flex-direction: column; gap: 1rem; }
.tickefy-pdf-modal__page { border: 1px solid var(--tfy-border); border-radius: 8px; max-width: 100%; }