/* The look of Plan-your-events (features/195, S01).

   Loaded by both frames, site.html.twig and base.html.twig, and by nothing else.
   Everything in here is shared: fonts, colour tokens, focus, buttons, fields,
   cards, status pills. What belongs to one frame stays with that frame -
   typography and element styles in landing.css (body.site) and main.css
   (body.app), because base.html.twig carries 58 templates that bring their own
   formatting and must not be caught by an element selector from here. */

@font-face {
    font-family: 'Bricolage Grotesque';
    src: url('/fonts/bricolage-grotesque-latin-wght.woff2') format('woff2');
    font-weight: 200 800;
    font-display: swap; }
@font-face {
    font-family: 'Public Sans';
    src: url('/fonts/public-sans-latin-wght.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap; }

:root {
    --yellow:    #FFCE3A;
    --ink:       #1B2A4A;
    --ink-soft:  #4A5878;
    --paper:     #F5F6FA;
    --white:     #FFFFFF;
    --line:      #D9DEE9;
    --ok:        #0E7C70;
    --ok-bg:     #DDF1EE;
    --wait:      #B8325A;
    --wait-bg:   #F9E2EA;
    --on-ink:    #C9D1E3;

    --display: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
    --text:    'Public Sans', 'Helvetica Neue', 'Segoe UI', Arial, sans-serif;

    --wrap: 1180px;
    --gutter: clamp(16px, 4vw, 40px);
    --section: clamp(64px, 9vw, 120px); }

*, *::before, *::after { box-sizing: border-box; }

:focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 3px;
    border-radius: 4px; }
.privacy :focus-visible { outline-color: var(--yellow); }

.skip {
    position: absolute;
    left: 16px;
    top: -60px;
    background: var(--ink);
    color: var(--white) !important;
    padding: 10px 16px;
    border-radius: 8px;
    z-index: 10; }
.skip:focus { top: 12px; }

/* Buttons */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 26px;
    border-radius: 12px;
    border: 2px solid var(--ink);
    font-family: var(--display);
    font-size: 1.08rem;
    font-weight: 650;
    text-decoration: none;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; }
.button--ink {
    background: var(--ink);
    color: var(--white) !important; }
.button--ink:hover {
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 rgba(27, 42, 74, .28); }
.button--line {
    background: transparent;
    color: var(--ink); }
.button--line:hover { background: rgba(27, 42, 74, .07); }
.button--small {
    min-height: 40px;
    padding: 0 16px;
    border-radius: 10px;
    font-size: 0.95rem; }

/* Status pills. Shared with the admin area, which adds .pill--muted in
   main.css (S01, folded in from S04). */

.pill {
    flex: none;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 20px; }
.pill--ok   { color: var(--ok);   background: var(--ok-bg); }
.pill--wait { color: var(--wait); background: var(--wait-bg); }

/* Card with a form in it: login, register, error pages (S07) */

.auth-card {
    max-width: 440px;
    margin: 0 auto;
    background: var(--white);
    border: 1.5px solid var(--line);
    border-radius: 18px;
    padding: clamp(24px, 5vw, 40px); }
.auth-card--inline {
    margin: 0;
    max-width: none;
    padding: clamp(22px, 3vw, 32px); }
.auth-card--inline form { margin-top: 18px; }
.auth-card__title { font-size: 1.4rem !important; letter-spacing: -0.02em; }
.auth-card--inline > .button { margin-top: 18px; }
/* Die Groesse der Ueberschrift in der Karte steht in landing.css: dort stehen
   auch .site h1 und .page h1, die bei gleicher Spezifitaet spaeter kaemen. */
.auth-card__lead {
    margin-top: 10px !important;
    color: var(--ink-soft); }
.auth-card form { margin-top: 26px; }
.field { margin-bottom: 18px; }
.field label {
    display: block;
    font-weight: 600;
    font-size: 0.92rem;
    margin-bottom: 6px; }
.field input {
    width: 100%;
    font: inherit;
    padding: 12px 14px;
    border: 1.5px solid #B9C1D3;
    border-radius: 10px;
    color: var(--ink);
    background: var(--white); }
.field input:focus-visible { outline-offset: 0; border-color: var(--ink); }
.auth-card .button { width: 100%; margin-top: 6px; }
.auth-card__cta { margin-top: 24px !important; }
.form-error {
    margin-top: 20px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--wait-bg);
    color: var(--wait);
    font-weight: 600;
    font-size: 0.95rem; }
.form-success {
    margin-top: 20px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--ok-bg);
    color: var(--ok);
    font-weight: 600;
    font-size: 0.95rem; }
.auth-card__links {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.95rem; }
.auth-card__links a { text-underline-offset: 3px; }

/* Lesesatz: Text, der ueber die ganze Breite laeuft, liest sich schlecht.
   Hilfe, Datenschutz, Impressum (S05) und die Beschreibung einer
   Veranstaltung (S03) benutzen ihn. */

.prose { max-width: 72ch; }
.prose p { line-height: 1.65; }

/* Eine oeffentliche Seite ohne eigenes Bild: Inhalt in einem Satzspiegel,
   Luft darueber und darunter (S05, S07). */

.page { padding: clamp(32px, 5vw, 72px) 0 clamp(48px, 7vw, 96px); }
.page--paper { background: var(--paper); }

/* Outside production every page says so (S00 D8). Bottom left, where no page
   puts anything, and transparent to the mouse. */

.devRibbon {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 50;
    padding: 2px 10px 3px;
    border-top-right-radius: 6px;
    background: var(--yellow);
    color: var(--ink);
    font-family: var(--display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    pointer-events: none; }