html { background: var(--wp--preset--color--base); }
/*
Theme Name: CLUB 19
Description: Block-Theme für CLUB 19 – DJ Collective, Rodlstraße 19, Ottensheim.
Author: CLUB 19
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 7.4
Text Domain: club19
*/

body { -webkit-font-smoothing: antialiased; }
.c19-hero { min-height: 92vh; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.c19-hero::before {
	content: ""; position: absolute; inset: -20%;
	background: radial-gradient(circle at 30% 50%, rgba(255,255,255,.05), transparent 50%);
	filter: blur(40px); z-index: 0;
	/* Oben und unten weich ausblenden: die Fläche ist 140 % so hoch wie der Hero, der Hero liegt bei ca. 14–86 % */
	-webkit-mask-image: linear-gradient(to bottom, transparent 26%, #000 72%, transparent 92%);
	mask-image: linear-gradient(to bottom, transparent 26%, #000 72%, transparent 92%);
}
.c19-hero > * { position: relative; z-index: 1; }
.c19-big { font-size: clamp(4.5rem, 20vw, 16rem); line-height: .85; letter-spacing: -.05em; font-weight: 900; margin: 0; }
.c19-big span { color: var(--wp--preset--color--accent); }
.c19-pillar { border-top: 1px solid var(--wp--preset--color--line); padding-top: 1rem; }
.c19-marquee { border-block: 1px solid var(--wp--preset--color--line); text-transform: uppercase; letter-spacing: .3em; }
.wp-block-navigation a { text-transform: uppercase; letter-spacing: .15em; font-size: .8rem; }
.wp-block-button__link { text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }
.wp-block-post-title a { text-decoration: none; }
.c19-logo { display: inline-flex; line-height: 0; }
.c19-logo img { height: 2.5rem; width: auto; display: block; }
.c19-langs { display: flex; gap: .15rem; align-items: center; }
.c19-flag { display: inline-flex; align-items: center; padding: .6rem .45rem; line-height: 1; text-decoration: none; text-transform: uppercase; letter-spacing: .15em; font-size: .8rem; font-weight: 500; color: var(--wp--preset--color--muted); transition: color .15s; }
.c19-flag:hover, .c19-flag.is-current { color: var(--wp--preset--color--contrast); }
.c19-flag:focus-visible { outline: 2px solid var(--wp--preset--color--contrast); outline-offset: 2px; }

/* Hero: alles zentriert, Logo als Hauptelement, „Club“ als leiser Zusatz */
.c19-hero .alignwide { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.75rem; }
.c19-hero .alignwide > * { margin: 0; }
.c19-herologo { display: flex; justify-content: center; }
.c19-herologo img { width: min(72vw, 360px); height: auto; display: block; }
.c19-hero .wp-block-buttons { justify-content: center; }

.c19-hero > .alignwide { width: 100%; margin-inline: auto; }

/* DJ-Profil */
.c19-dj { display: grid; gap: 1.75rem; }
.c19-dj__tagline { font-size: var(--wp--preset--font-size--large); color: var(--wp--preset--color--muted); margin: 0; }
.c19-dj__group h2 { font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--wp--preset--color--muted); font-weight: 500; margin: 0 0 .6rem; }
.c19-dj__group p { margin: 0; }
.c19-dj__chips, .c19-dj__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.c19-dj__chips li { border: 1px solid var(--wp--preset--color--line); padding: .35rem .8rem; font-size: .95rem; }
.c19-dj__links { gap: 1.25rem; }
.c19-dj__links a { text-transform: uppercase; letter-spacing: .12em; font-size: .85rem; padding-block: .6rem; }
.c19-dj__real { margin: 0; color: var(--wp--preset--color--muted); font-size: .95rem; }

/* DJ-Raster auf der Startseite */
#djs { scroll-margin-top: 4rem; }
.c19-djgrid .wp-block-post-template { gap: 1.5rem 1rem; }
.c19-djgrid .wp-block-post-featured-image { background: var(--wp--preset--color--surface); }
.c19-djgrid .wp-block-post-title { margin: .6rem 0 .2rem; }
@media (min-width: 782px) { .c19-djgrid .wp-block-post-template.is-layout-grid { grid-template-columns: repeat(4, 1fr); } }

/* Header kompakt, Burger-Menü dunkel */
.c19-logo img { height: 2.1rem; }
@media (min-width: 782px) { .c19-logo img { height: 2.25rem; } }
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close { color: var(--wp--preset--color--contrast); padding: .5rem; }
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg { width: 28px; height: 28px; fill: currentColor; }
.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast);
	padding: 1rem 1.5rem 2rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 3.5rem; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: .5rem; align-items: flex-start; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: clamp(2rem, 9vw, 3rem); font-weight: 800; letter-spacing: -.02em; text-transform: none; padding-block: .35rem;
}

/* Kein automatischer Abstand zwischen Header, Inhalt und Footer (Abstände setzen die Abschnitte selbst) */
.wp-site-blocks > * { margin-block-start: 0; }

/* Geöffnetes Mobil-Menü: seitlicher Abstand fest (überschreibt die WordPress-Standardwerte) */
html body .wp-block-navigation__responsive-container.is-menu-open {
	padding: 1rem 0 2rem !important;
}
html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding: 4rem 2rem 2rem !important;
}
html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	top: .75rem; right: 1.25rem;
}
.c19-dj__gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.c19-dj__gallery img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; }
@media (min-width: 782px) { .c19-dj__gallery { grid-template-columns: repeat(3, 1fr); } }

/* Events */
.c19-events { list-style: none; margin: 0; padding: 0; }
.c19-events li { border-top: 1px solid var(--wp--preset--color--line); }
.c19-events li:last-child { border-bottom: 1px solid var(--wp--preset--color--line); }
.c19-events__item { display: grid; gap: .25rem; padding: 1.25rem 0; text-decoration: none; color: inherit; }
.c19-events__item:hover .c19-events__title { color: var(--wp--preset--color--hover); }
.c19-events__date { font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--wp--preset--color--muted); margin: 0; }
.c19-events__title { font-size: var(--wp--preset--font-size--large); font-weight: 800; line-height: 1.15; }
.c19-events__meta, .c19-events__loc, .c19-events__none { color: var(--wp--preset--color--muted); margin: 0; }
@media (min-width: 782px) { .c19-events__item { grid-template-columns: 16rem 1fr; column-gap: 2rem; align-items: baseline; } .c19-events__item > :nth-child(n+3) { grid-column: 2; } }

/* Location größer, DJs kleiner */
.c19-events__place, .c19-events__loc { font-size: var(--wp--preset--font-size--medium); color: var(--wp--preset--color--contrast); margin: 0; }
.c19-events__acts { font-size: .875rem; color: var(--wp--preset--color--muted); margin: 0; }
.c19-events__acts a { color: inherit; }

/* Alter-Bauhof-Logo links neben dem Text */
.c19-bauhof { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 1rem; }
.c19-bauhof > p { margin: 0; }
.c19-bauhoflogo { margin: 0; flex: 0 0 auto; }
.c19-bauhoflogo a { display: inline-block; line-height: 0; transition: opacity .15s; }
.c19-bauhoflogo a:hover { opacity: .85; }
.c19-bauhoflogo img { width: 72px; height: auto; display: block; }
@media (min-width: 782px) { .c19-bauhof { gap: 2rem; } .c19-bauhoflogo img { width: 120px; } }

/* Logo als Inline-SVG im Hero */
.c19-herologo svg { width: min(72vw, 360px); height: auto; display: block; }

/* Startanimation (ca. 2,8 s): erst nur Hintergrund, dann CLUB, dann „1“ (von oben nach unten) und „9“ (wie eine Schallplatte im
   Uhrzeigersinn) gleichzeitig (Mittelpunkt erscheint schon vorher, direkt nach CLUB), danach DJ Collective, Leiste und Button. Klasse c19-intro setzt functions.php nur beim ersten Besuch. */
@keyframes c19-wipe { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes c19-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes c19-pop  { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes c19-in   { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes c19-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes c19-rise { from { transform: translateY(8px); } to { transform: none; } }
html.c19-intro #c19-club     { animation: c19-in .5s cubic-bezier(.22, .61, .36, 1) .15s both; }
html.c19-intro #c19-wipe-one { transform-box: fill-box; transform-origin: 50% 0; animation: c19-wipe 1.05s cubic-bezier(.65, 0, .3, 1) .85s both; }
html.c19-intro #c19-spiral   { stroke-dasharray: 1; stroke-dashoffset: 1; animation: c19-draw 1.05s cubic-bezier(.65, 0, .3, 1) .85s both; }
html.c19-intro #c19-dot      { transform-box: fill-box; transform-origin: center; animation: c19-pop .3s cubic-bezier(.3, 1.6, .5, 1) .5s both; }
html.c19-intro #c19-tag      { animation: c19-in .6s cubic-bezier(.22, .61, .36, 1) 2s both; }
html.c19-intro .wp-site-blocks > header { animation: c19-fade .7s ease-out 2.1s both; }
html.c19-intro .c19-hero .wp-block-buttons { animation: c19-fade 1.8s ease-in-out 2.55s both, c19-rise 1.5s cubic-bezier(.22, .61, .36, 1) 2.55s both; }

/* Nur für Screenreader und Suchmaschinen sichtbar (Hauptüberschrift der Startseite) */
.c19-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Header-Logo: Größe (ohne Hover-Animation, bewusst ruhig) */
.c19-logo svg { height: 2.1rem; width: auto; display: block; }
@media (min-width: 782px) { .c19-logo svg { height: 2.25rem; } }

/* Wissen (Knowledge Base) */
.c19-wiki-list { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.c19-wiki-list li { border-top: 1px solid var(--wp--preset--color--line); }
.c19-wiki-list li:last-child { border-bottom: 1px solid var(--wp--preset--color--line); }
.c19-wiki-list a { display: block; padding: 1.1rem 0; font-size: var(--wp--preset--font-size--large); font-weight: 800; line-height: 1.2; text-decoration: none; }
.c19-wiki-list a:hover { color: var(--wp--preset--color--hover); }
.c19-wiki-back { margin: 0; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; }
.c19-wiki-back a { text-decoration: none; padding-block: .6rem; display: inline-block; }
.c19-wiki-table { overflow-x: auto; }
.c19-wiki-table table { width: 100%; border-collapse: collapse; }
.c19-wiki-table th, .c19-wiki-table td { text-align: left; padding: .75rem 1rem .75rem 0; vertical-align: top; border: 0; border-bottom: 1px solid var(--wp--preset--color--line); }
.c19-wiki-table th { font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--wp--preset--color--muted); font-weight: 500; }
.c19-wiki-table td:first-child { font-weight: 700; }

/* Footer immer am unteren Rand: bei kurzen Seiten wächst der Inhalt, darunter bleibt keine leere Fläche */
.wp-site-blocks { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.wp-site-blocks > footer { margin-top: auto; }
body.admin-bar .wp-site-blocks { min-height: calc(100vh - 32px); min-height: calc(100dvh - 32px); }
@media (max-width: 782px) { body.admin-bar .wp-site-blocks { min-height: calc(100vh - 46px); min-height: calc(100dvh - 46px); } }

/* Hero: Logo samt Button sitzt optisch in der Mitte des sichtbaren Bildschirms (nicht der Fläche unter dem Header).
   Der Header (ca. 3,1 rem) wird oben abgezogen und unten als Polster zurückgegeben; svh = sichtbare Höhe bei ein-/ausgeblendeter Adressleiste am Handy. */
.c19-hero { min-height: calc(100vh - 3.1rem); min-height: calc(100svh - 3.1rem); padding-bottom: 3.1rem; }
body.admin-bar .c19-hero { min-height: calc(100vh - 3.1rem - 32px); min-height: calc(100svh - 3.1rem - 32px); }
@media (max-width: 782px) { body.admin-bar .c19-hero { min-height: calc(100vh - 3.1rem - 46px); min-height: calc(100svh - 3.1rem - 46px); } }

/* CLUB-Buchstaben mit der Strichstärke einer einzelnen Linie von 1 und 9 (5,5 statt 4,4 Einheiten, siehe stroke in lockup-anim.svg); Überstand der Rundungen nicht abschneiden */
.c19-herologo svg { overflow: visible; }

/* Downloads (/data/) */
.c19-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 2.5rem 1.5rem; margin-top: 2rem; }
.c19-dl__item h2 { font-size: var(--wp--preset--font-size--large); margin: 1rem 0 .4rem; }
.c19-dl__item p { margin: 0 0 .75rem; color: var(--wp--preset--color--muted); font-size: .95rem; }
.c19-dl__preview { display: grid; place-items: center; aspect-ratio: 1; padding: 1.25rem; border: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--surface); }
.c19-dl__preview.is-light { background: #f5f5f7; border-color: #f5f5f7; }
.c19-dl__preview img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }
.c19-dl__links { display: flex; flex-wrap: wrap; gap: .5rem; }
.c19-dl__links a { border: 1px solid var(--wp--preset--color--line); padding: .5rem .9rem; text-decoration: none; text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; font-weight: 600; color: var(--wp--preset--color--contrast); }
.c19-dl__links a:hover, .c19-dl__links a:focus-visible { border-color: var(--wp--preset--color--contrast); }

/* Kontaktformular */
.c19-form-wrap { margin-top: 1.5rem; scroll-margin-top: 4rem; }
.c19-form { display: grid; gap: 1.25rem; }
.c19-form label { display: block; margin-bottom: .4rem; font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--wp--preset--color--muted); font-weight: 500; }
.c19-form input[type="text"], .c19-form input[type="email"], .c19-form textarea {
	width: 100%; box-sizing: border-box; padding: .85rem 1rem; border: 1px solid var(--wp--preset--color--line); border-radius: 0;
	background: var(--wp--preset--color--surface); color: var(--wp--preset--color--contrast); font: inherit; font-size: 1rem; line-height: 1.5;
}
.c19-form textarea { resize: vertical; min-height: 9rem; }
.c19-form input:focus-visible, .c19-form textarea:focus-visible { outline: 2px solid var(--wp--preset--color--contrast); outline-offset: 2px; border-color: var(--wp--preset--color--contrast); }
.c19-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.c19-form .c19-form__consent { display: flex; gap: .75rem; align-items: flex-start; }
.c19-form__consent input { margin-top: .3rem; flex: 0 0 auto; width: 1.1rem; height: 1.1rem; accent-color: var(--wp--preset--color--contrast); }
.c19-form__consent label { margin: 0; text-transform: none; letter-spacing: 0; font-size: .9rem; line-height: 1.5; }
.c19-form__consent a { color: inherit; }
.c19-form button { cursor: pointer; border: 0; }
.c19-form__msg { margin: 0 0 1.25rem; padding: 1rem 1.25rem; border-left: 3px solid var(--wp--preset--color--contrast); background: var(--wp--preset--color--surface); }
.c19-form__msg.is-err { border-left-color: var(--wp--preset--color--accent); }
.c19-form__msg p { margin: 0; }
.c19-form__msg ul { margin: .5rem 0 0; padding-left: 1.2rem; }