/* ===========================================================================
   Oeffentliche Seiten der Base-App im Aussehen von posttick.com (seit
   01.10.2026): Startseite / (Views/home.php, Karte _startseite_karte.php),
   Rechtstexte (rechtstexte.php) und Konto reiner Kunden (layout_kunde.php).
   Kopf: seit 02.10.2026 die Kopfleiste der Shops (_oeffentlich_kopf.php,
   Stylesheet events/assets/css/kopfleiste.css, Praefix kl-); lila
   Wellen-Fuss (_oeffentlich_fuss.php).

   Vorlage: posttick.com (new_design/css/scss/base.css und die Inline-Stile
   der Startseite) - Farben, Schriften (Lato fuer Text, Raleway fuer
   Ueberschriften: schrift-lato-raleway.css), Wellen, Karten, Suche. Statt
   des Videos oben dessen Standbild (Entscheidung 01.10.2026). Grafiken in
   ../img/oeffentlich/ (von posttick.com uebernommen).

   Bootstrap traegt Raster, Abstaende, Knoepfe, Abzeichen und den gelben
   Kasten "Verschoben" (alert-warning); hier nur, was Bootstrap nicht kann.
   Praefix ptc-. Keine style-Attribute (CSP von Base).
   =========================================================================== */

:root {
	--ptc-grund: #eef4f8;                 /* Seite (posttick.com color-2) */
	--ptc-blass: #d6e0e7;                 /* riesige Ueberschriften (color-8) */
	--ptc-text: #353945;
	--ptc-lila: #8a1286;                  /* Fuss, Hover, Ausverkauft (bgcolor-3) */
	--ptc-gruen: #39b164;                 /* Support-Knopf (bgcolor-10) */
	--ptc-suche: #6c63ff;                 /* Lupe und Vorschlaege */
	--ptc-schatten: 10px 20px 40px 3px rgba(0, 0, 0, .11);
	--ptc-schein: 0 0 40px 3px rgba(138, 18, 134, .2);
}

body.ptc {
	background: var(--ptc-grund);
	color: var(--ptc-text);
	font-family: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

/* Inhaltsbreite wie auf posttick.com (Bootstrap 4: hoechstens 1140 px) */
@media (min-width: 1400px) {
	body.ptc .container { max-width: 1140px; }
}

.ptc h1, .ptc h2, .ptc h3, .ptc h4, .ptc h5, .ptc h6, .ptc-raleway { font-family: "Raleway", "Lato", sans-serif; }

/* Wellen: dieselbe Grafik ueberall, in der Farbe der Seite (unten deckend);
   um 180 Grad gedreht schliesst sie oben an die Seite an */
.ptc-welle-rand { overflow: hidden; line-height: 0; }
.ptc-welle { display: block; width: 104%; max-width: none; height: auto; margin-left: -2%; }
.ptc-welle--gedreht { transform: rotate(180deg); margin-top: -4px; }
.ptc-welle--unten { margin-bottom: -4px; }

/* ---- Riesige blasse Ueberschrift ("Aktuelle Events", "Zahlarten") - seit 06.10.2026 rund 35 % kleiner
        (vorher 30 / 48 / 73 / 98 / 118 px) ---- */
.ptc-riesig {
	margin: 30px 0 0;
	font-family: "Raleway", sans-serif;
	font-weight: 800;
	font-size: 24px;
	line-height: 1.2;
	color: var(--ptc-blass);
	text-transform: uppercase;
	text-align: center;
	overflow-wrap: anywhere;
}
@media (min-width: 480px) { .ptc-riesig { font-size: 34px; } }
@media (min-width: 768px) { .ptc-riesig { font-size: 48px; } }
@media (min-width: 992px) { .ptc-riesig { font-size: 64px; } }
@media (min-width: 1200px) { .ptc-riesig { font-size: 76px; } }

/* ---- Suche mit Staedte-Vorschlaegen (base-oeffentlich.js) ---- */
.ptc-suche { position: relative; padding: 8px 30px 8px 8px; background: #fff; border-radius: 35px; box-shadow: 0 4px 15px rgba(0, 0, 0, .1); color: var(--ptc-text); }
.ptc-suche-feld { position: relative; display: flex; align-items: center; }
.ptc-suche-feld .form-control { padding: 12px 20px 12px 55px; border: 0; border-radius: 30px; font-size: 16px; }
.ptc-suche-feld .form-control:focus { box-shadow: none; }
.ptc-suche-symbol { position: absolute; left: 5px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; color: var(--ptc-suche); font-size: 24px; pointer-events: none; }
.ptc-suche-leeren { position: absolute; right: -15px; z-index: 2; padding: 4px 5px 5px; border: 0; background: none; color: #c5c5c5; font-size: 30px; line-height: 1; }
.ptc-suche-leeren:hover, .ptc-suche-leeren:focus-visible { color: #333; }
.ptc-vorschlaege { position: absolute; top: 100%; left: 0; right: 0; z-index: 1000; margin-top: 5px; padding: 10px 0; background: #fff; border-radius: 20px; box-shadow: 0 4px 15px rgba(0, 0, 0, .1); }
.ptc-vorschlag { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 20px; border: 0; background: none; color: inherit; text-align: start; }
.ptc-vorschlag:hover, .ptc-vorschlag:focus-visible { background: #f8f9fa; }
.ptc-vorschlag .bi { color: var(--ptc-suche); }
/* Suche mit Animation (seit 06.10.2026, ptcRaster in base-oeffentlich.js): Kopie einer
   verschwindenden Karte blendet an der alten Stelle aus - ausserhalb des Rasters (absolut, Lage und
   Groesse setzt das Skript), ohne Klicks; margin 0 gegen den Abstand von .row > * */
.ptc-geist { position: absolute; z-index: 0; margin: 0; pointer-events: none; }
/* Vorschlaege in zwei Spalten wie posttick.com (seit 06.10.2026): links Arten, rechts Staedte -
   Trennlinie am Handy unten (Spalten untereinander), ab md rechts; Bootstrap hat keine border-md-* */
.ptc-vorschlaege-art { border-bottom: 1px solid var(--bs-border-color); }
@media (min-width: 768px) {
	.ptc-vorschlaege-art { border-bottom: 0; border-right: 1px solid var(--bs-border-color); }
}

/* ---- Event-Karte (_startseite_karte.php) ---- */
.ptc-karte { box-shadow: var(--ptc-schatten); transition: box-shadow .3s ease; }
.ptc-karte:hover, .ptc-karte:focus-within { box-shadow: var(--ptc-schein); }
.ptc-karte-bild { position: relative; overflow: hidden; }
.ptc-karte-bild > .ratio { --bs-aspect-ratio: 57.931%; }  /* 725 x 420 wie die Kartenbilder von posttick.com */
.ptc-karte-img { transition: transform .3s ease-in-out; }
.ptc-karte:hover .ptc-karte-img { transform: scale(1.2) rotate(5deg); }
.ptc-karte-ohnebild { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #8a1286, #e10168); color: rgba(255, 255, 255, .75); font-size: 3rem; }
.ptc-karte-welle { position: absolute; left: 0; bottom: 0; width: 102%; max-width: none; height: auto; margin: 0 0 -2px -2px; }
.ptc-hinweis { background: var(--ptc-lila); }
.ptc-countdown { position: absolute; top: -20px; left: 15px; z-index: 1; display: flex; align-items: center; gap: 5px; margin: 0; font-size: 10px; }
.ptc-countdown img { width: 15px; height: 15px; }
.ptc-karte-titel { margin: 0; padding: 5px 20px 20px; font-size: 1.1rem; font-weight: 500; line-height: 1.4; }   /* bis 06.10.2026 1.2rem */
.ptc-linie { color: var(--ptc-grund); }
.ptc-karte-details { padding: 20px; font-size: 14px; line-height: 1.6; }
.ptc-karte-symbol { flex: 0 0 auto; width: 30px; font-size: 1rem; }
.ptc-karte-fuss { background: rgba(0, 0, 0, .03); border-top: 1px solid var(--ptc-grund); }
.ptc-kaufen { padding: 10px; color: #000; }
.ptc-vorverkauf { font-size: .75rem; line-height: 1.5; }   /* "Vorverkauf ab ..." statt des Kaufen-Knopfs (seit 04.10.2026) */
.ptc-kaufen .bi-ticket-perforated { display: inline-block; margin-right: 5px; font-size: 1.3em; vertical-align: -3px; transform: rotate(-70deg); }
.ptc-karte:hover .ptc-kaufen, .ptc-kaufen:focus-visible { background: var(--ptc-lila); color: #fff; }
/* Coming soon (seit 04.10.2026): nicht anklickbar - Mauszeiger "nicht erlaubt" auf der ganzen
   Karte (auch ueber .btn, das sonst pointer setzt); der Knopf "Coming soon" faerbt sich wie der Kaufen-Knopf */
.ptc-karte--demnaechst, .ptc-karte--demnaechst * { cursor: not-allowed; }
.ptc-ausverkauft { z-index: 2; padding-top: 20%; border-radius: 0; background: rgba(138, 18, 134, .6); text-align: center; pointer-events: none; }
.ptc-ausverkauft-text { font-family: "Raleway", sans-serif; font-weight: 600; font-size: 2.6rem; line-height: 1.2; color: var(--ptc-grund); text-transform: uppercase; }

/* Hervorgehoben: breite Karte, ab lg Bild links ueber die ganze Hoehe */
@media (min-width: 992px) {
	.ptc-karte--gross .ptc-karte-bild, .ptc-karte--gross .ptc-karte-bild > .ratio { height: 100%; min-height: 340px; }
	.ptc-karte--gross .ptc-karte-bild > .ratio::before { padding-top: 0; }
	.ptc-karte--gross .ptc-karte-welle { display: none; }
	.ptc-karte--gross .ptc-countdown { position: static; padding: 20px 20px 0; }
	.ptc-karte--gross .ptc-karte-titel { font-size: 1.35rem; }   /* bis 06.10.2026 1.6rem */
	.ptc-karte--gross .ptc-ausverkauft { padding-top: 10%; }
}

/* ---- Schwarzer Abschnitt "posttick Event Management" ---- */
.ptc-schwarz { margin-top: 120px; background: #000; color: #fff; }
.ptc-schwarz-titel { margin: 70px 0 20px; font-weight: 600; text-transform: uppercase; }
.ptc-schwarz-text { font-size: 1.2rem; font-weight: 400; }
.ptc-schwarz-linie { margin: 80px 0 60px; border-top: 2px solid #131314; }

/* ---- Zahlarten ---- */
.ptc-zahl-text { font-family: "Raleway", sans-serif; font-size: 1.3rem; }
.ptc-blase { display: flex; align-items: center; justify-content: center; width: 100px; height: 100px; border-radius: 50%; background: #fff; box-shadow: -4px 11px 26px 0 rgba(0, 0, 0, .1); }
.ptc-blase img { width: 62%; height: 40%; object-fit: contain; }
/* ab lg ueberlappen die Blasen leicht wie auf posttick.com */
@media (min-width: 992px) {
	.ptc-blase + .ptc-blase { margin-left: -12px; }
}

/* ---- Fuss ---- */
.ptc-fuss { margin-top: 80px; background: var(--ptc-lila); color: #fff; }
.ptc-fuss a { color: #fff; text-decoration: none; }
.ptc-fuss a:hover, .ptc-fuss a:focus-visible { color: #000; }

/* ---- Support-Knopf unten links (Startseite) ---- */
.ptc-support {
	--bs-btn-bg: var(--ptc-gruen); --bs-btn-border-color: var(--ptc-gruen); --bs-btn-color: #fff;
	--bs-btn-hover-bg: #2f9656; --bs-btn-hover-border-color: #2f9656; --bs-btn-hover-color: #fff;
	--bs-btn-active-bg: #2a874d; --bs-btn-active-border-color: #2a874d; --bs-btn-active-color: #fff;
	--bs-btn-focus-shadow-rgb: 57, 177, 100;
	z-index: 1020;
	font-weight: 900;
}
.ptc-support .bi { font-size: 1.6rem; line-height: 1; vertical-align: -.2em; }

@media (prefers-reduced-motion: reduce) {
	.ptc-karte, .ptc-karte-img { transition: none; }
	.ptc-karte:hover .ptc-karte-img { transform: none; }
}

@media print {
	.ptc-suche, .ptc-fuss, .ptc-support { display: none; }
}