/* =====================================================================
   BADENLIEFERT.AT - Gestaltungsgrundlage
   =====================================================================

   WOFUER DIESE DATEI DA IST
   -------------------------
   Am 4.10.2026 hatte dieses Portal 22 verschiedene Containerbreiten
   (620 px bis 1720 px) und ueber 40 Seiten mit je eigenem Stylesheet.
   Jede Seite hatte ihre eigenen Farben, Radien und Abstaende - dieselbe
   Marke in zehn Handschriften.

   Hier stehen die Werte EINMAL. Seiten benutzen sie, statt sie neu zu
   erfinden.

   WOHER DIE WERTE KOMMEN
   ----------------------
   Aus der Startseite. Sie ist die freigegebene Referenz; die Zahlen sind
   nicht neu gewaehlt, sondern abgelesen. Kopf und Fuss haben eine eigene,
   dunklere Welt (Navy + kraeftiges Gruen) - die steht hier nur als Token,
   damit niemand sie nachbaut.

   REGELN
   ------
   - Keine Seite definiert eine eigene Containerbreite. Es gibt `.pt-wrap`.
   - Keine Seite erfindet eine Farbe. Was fehlt, kommt hier dazu.
   - Keine Fremd-Ressourcen: Georgia und die Systemschriften sind auf den
     Geraeten vorhanden, es wird nichts nachgeladen.
   - Diese Datei wird VOR den Seiten-Stylesheets geladen. Eine Seite darf
     also noch ueberschreiben - sie muss es nur immer seltener.
   ===================================================================== */

:root {
    /* --- Farben: Inhaltsflaeche (Startseite) ----------------------- */
    --pt-ground:    #f6f2ea;   /* Seitenhintergrund, warmes Off-White */
    --pt-panel:     #ffffff;   /* Karten */
    --pt-ink:       #20303c;   /* Fliesstext, Ueberschriften */
    --pt-ink-soft:  #5c6b76;   /* Meta, Hilfstexte */
    --pt-hair:      #e7e0d3;   /* Linien, Kartenraender */
    --pt-cream:     #f4ecdc;   /* ruhige Flaechen */
    --pt-cream-line:#e9dcc2;

    /* --- Akzente ---------------------------------------------------- */
    --pt-teal:      #1596a3;   /* Links, sekundaere Akzente */
    --pt-teal-d:    #0f7b87;
    --pt-teal-ink:  #0b5b64;   /* Linktext auf hellem Grund */
    --pt-leaf:      #e9f3ec;   /* Flaeche positiv */
    --pt-leaf-ink:  #3f9d6b;   /* Text positiv */
    --pt-sky:       #e7f2f5;   /* Infokarten, Wetter */
    --pt-sky-line:  #cfe6ec;
    --pt-sun:       #fdf3d7;   /* Hinweis */
    --pt-sun-line:  #f0dfae;
    --pt-sun-ink:   #8a6a14;
    --pt-alarm:     #fbe9e9;   /* geschlossen, Warnung */
    --pt-alarm-line:#e6c3c3;
    --pt-alarm-ink: #9a3535;

    /* --- Kopf und Fuss. NICHT fuer Inhalte verwenden. --------------- */
    --pt-navy:      #0a2232;
    --pt-navy-d:    #071d2b;
    --pt-green:     #88d84f;

    /* --- Schrift ----------------------------------------------------- */
    --pt-serif: Georgia, "Times New Roman", serif;
    --pt-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* --- Form -------------------------------------------------------- */
    --pt-r-sm: 9px;
    --pt-r:    14px;
    --pt-r-lg: 18px;
    --pt-pill: 999px;
    --pt-shadow: 0 1px 2px rgba(20,50,60,.05), 0 10px 26px -14px rgba(20,50,60,.28);
    --pt-shadow-hover: 0 2px 4px rgba(20,50,60,.07), 0 16px 34px -16px rgba(20,50,60,.34);

    /* --- Abstaende --------------------------------------------------- */
    --pt-1: .35rem;
    --pt-2: .7rem;
    --pt-3: 1.1rem;
    --pt-4: 1.7rem;
    --pt-5: 2.6rem;
    --pt-6: 3.8rem;

    /* --- Breite ------------------------------------------------------ */
    --pt-max:        1180px;   /* Regelbreite fuer Inhaltsseiten */
    --pt-max-wide:   1380px;   /* wie Kopf und Fuss - fuer Uebersichten */
    --pt-max-read:    780px;   /* Lesebreite fuer Fliesstext */
    --pt-pad:          28px;
}

@media (max-width: 900px) { :root { --pt-pad: 22px; } }
@media (max-width: 560px) { :root { --pt-pad: 17px; } }


/* =====================================================================
   Rahmen
   ===================================================================== */

.pt-wrap        { max-width: var(--pt-max);      margin: 0 auto; padding: 0 var(--pt-pad); }
.pt-wrap--wide  { max-width: var(--pt-max-wide); }
.pt-wrap--read  { max-width: var(--pt-max-read); }

/* Eine Seite, die mit diesem Baukasten gebaut ist, setzt .pt auf ihren
   aeussersten Container. Alles darunter erbt Schrift und Farben. */
.pt {
    color: var(--pt-ink);
    font-family: var(--pt-sans);
    font-size: 1.03rem;
    line-height: 1.62;
}
.pt a { color: var(--pt-teal-ink); }
.pt a:hover { color: var(--pt-teal-d); }


/* =====================================================================
   Seitenkopf: Brotkrume, Eyebrow, H1, Lead
   ===================================================================== */

.pt-crumbs {
    font-size: .83rem;
    color: var(--pt-ink-soft);
    margin: 0 0 var(--pt-2);
}
.pt-crumbs a { color: var(--pt-ink-soft); text-decoration: none; }
.pt-crumbs a:hover { color: var(--pt-teal-d); text-decoration: underline; }
.pt-crumbs .sep { padding: 0 .35rem; color: #b9bec5; }

.pt-eyebrow {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .72rem;
    font-weight: 600;
    color: var(--pt-teal-ink);
    margin: 0 0 .4rem;
}

.pt-h1 {
    font-family: var(--pt-serif);
    font-weight: 700;
    font-size: clamp(1.95rem, 4vw, 2.85rem);
    line-height: 1.1;
    letter-spacing: -.015em;
    margin: 0 0 .5rem;
}
.pt-lead {
    color: var(--pt-ink-soft);
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 66ch;
    margin: 0 0 var(--pt-4);
}

.pt-head { padding-top: var(--pt-4); }


/* =====================================================================
   Abschnitte
   ===================================================================== */

.pt-sec { margin: 0 0 var(--pt-5); }

/* Ueberschrift links, Textlink rechts - portalweit dieselbe Zeile. */
.pt-sec-h {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--pt-2);
    margin: 0 0 var(--pt-3);
}
.pt-sec-h h2 {
    font-family: var(--pt-serif);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: -.01em;
    margin: 0;
}
.pt-sec-h h3 {
    font-family: var(--pt-serif);
    font-weight: 700;
    font-size: 1.18rem;
    margin: 0;
}


/* =====================================================================
   Karten
   ===================================================================== */

.pt-card {
    background: var(--pt-panel);
    border: 1px solid var(--pt-hair);
    border-radius: var(--pt-r);
    padding: var(--pt-3) 1.25rem;
}
.pt-card--flat   { box-shadow: none; }
.pt-card--raised { box-shadow: var(--pt-shadow); }
.pt-card--quiet  { background: var(--pt-cream); border-color: var(--pt-cream-line); }

/* Anklickbare Karte: dezent, kein Zoom, kein Farbwechsel. */
a.pt-card, .pt-card--link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: border-color .13s, box-shadow .13s, transform .13s;
}
a.pt-card:hover, .pt-card--link:hover {
    border-color: var(--pt-teal);
    box-shadow: var(--pt-shadow-hover);
    transform: translateY(-1px);
    color: inherit;
}
a.pt-card:focus-visible, .pt-card--link:focus-visible {
    outline: 2px solid var(--pt-teal); outline-offset: 2px;
}

/* Raster aus Karten - eine Klasse statt fuenf Rasterdefinitionen. */
.pt-grid   { display: grid; gap: var(--pt-3); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.pt-grid--s{ grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--pt-2); }
.pt-grid--l{ grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }


/* =====================================================================
   Bilder - feste Verhaeltnisse, damit nichts springt
   ===================================================================== */

.pt-img       { display: block; width: 100%; height: auto; border-radius: var(--pt-r-sm); object-fit: cover; background: var(--pt-cream); }
.pt-img--43   { aspect-ratio: 4 / 3; }
.pt-img--32   { aspect-ratio: 3 / 2; }
.pt-img--169  { aspect-ratio: 16 / 9; }
.pt-img--11   { aspect-ratio: 1 / 1; }


/* =====================================================================
   Knoepfe - drei Varianten, mehr nicht
   ===================================================================== */

.pt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font: inherit;
    font-size: .97rem;
    font-weight: 700;
    line-height: 1.2;
    border: 1px solid transparent;
    border-radius: var(--pt-r-sm);
    padding: .68em 1.15em;
    min-height: 44px;            /* Fingerkuppe, nicht Mausspitze */
    cursor: pointer;
    text-decoration: none;
    transition: background .13s, border-color .13s, color .13s;
}
.pt-btn--primary { background: var(--pt-teal-d); color: #fff; }
.pt-btn--primary:hover { background: var(--pt-teal-ink); color: #fff; }
.pt-btn--second  { background: var(--pt-panel); color: var(--pt-teal-ink); border-color: var(--pt-hair); }
.pt-btn--second:hover { border-color: var(--pt-teal); color: var(--pt-teal-ink); }
.pt-btn:focus-visible { outline: 2px solid var(--pt-teal); outline-offset: 2px; }

/* Textlink mit Pfeil - fuer „Alle Termine", „Mehr erfahren". */
.pt-more {
    font-size: .9rem;
    font-weight: 700;
    color: var(--pt-teal-ink);
    text-decoration: none;
    white-space: nowrap;
}
.pt-more:hover { text-decoration: underline; }
.pt-more::after { content: " →"; }


/* =====================================================================
   Abzeichen - ein System, vier Bedeutungen
   ===================================================================== */

.pt-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
    border-radius: var(--pt-pill);
    padding: .2rem .62rem;
    border: 1px solid transparent;
    white-space: nowrap;
}
.pt-badge--ok     { background: var(--pt-leaf); color: var(--pt-leaf-ink); border-color: #c9e4d4; }
.pt-badge--check  { background: var(--pt-sky);  color: var(--pt-teal-ink); border-color: var(--pt-sky-line); }
.pt-badge--hint   { background: var(--pt-sun);  color: var(--pt-sun-ink);  border-color: var(--pt-sun-line); }
.pt-badge--stop   { background: var(--pt-alarm);color: var(--pt-alarm-ink);border-color: var(--pt-alarm-line); }
.pt-badge--quiet  { background: var(--pt-cream);color: var(--pt-ink-soft); border-color: var(--pt-cream-line); }


/* =====================================================================
   Metazeile - „04.10.2026 · Baden · Veranstaltung"
   ===================================================================== */

.pt-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem .5rem;
    font-size: .85rem;
    color: var(--pt-ink-soft);
}
.pt-meta > * + *::before { content: "· "; color: #b9bec5; }


/* =====================================================================
   Filter
   ===================================================================== */

.pt-filter {
    background: var(--pt-panel);
    border: 1px solid var(--pt-hair);
    border-radius: var(--pt-r);
    padding: var(--pt-2) var(--pt-3);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pt-2);
    margin: 0 0 var(--pt-3);
}
.pt-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.pt-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .86rem;
    font-weight: 600;
    color: var(--pt-ink);
    background: var(--pt-panel);
    border: 1px solid var(--pt-hair);
    border-radius: var(--pt-pill);
    padding: .34rem .8rem;
    text-decoration: none;
}
.pt-chip:hover { border-color: var(--pt-teal); color: var(--pt-ink); }
.pt-chip--on   { background: var(--pt-teal-d); border-color: var(--pt-teal-d); color: #fff; }
.pt-chip--on:hover { color: #fff; }
.pt-chip--off  { opacity: .45; pointer-events: none; }
.pt-chip .n    { font-weight: 800; opacity: .7; }


/* =====================================================================
   Formulare
   ===================================================================== */

.pt-field { display: block; margin: 0 0 var(--pt-2); }
.pt-field > label { display: block; font-weight: 600; font-size: .93rem; margin: 0 0 .3rem; }
.pt-input, .pt-select, .pt-textarea {
    width: 100%;
    border: 1px solid #cfd6dd;
    border-radius: var(--pt-r-sm);
    padding: .64em .8em;
    font: inherit;
    font-size: .98rem;
    background: var(--pt-panel);
    color: var(--pt-ink);
    min-height: 44px;
}
.pt-textarea { min-height: 170px; resize: vertical; }
.pt-input:focus, .pt-select:focus, .pt-textarea:focus {
    outline: 2px solid var(--pt-teal); outline-offset: -1px;
}
.pt-hint { font-size: .85rem; color: var(--pt-ink-soft); }


/* =====================================================================
   Leerzustand - sagt, was los ist, und bietet einen Weg an
   ===================================================================== */

.pt-empty {
    background: var(--pt-cream);
    border: 1px solid var(--pt-cream-line);
    border-radius: var(--pt-r);
    padding: var(--pt-3) 1.25rem;
    color: var(--pt-ink);
}
.pt-empty p { margin: 0 0 var(--pt-2); }
.pt-empty p:last-child { margin-bottom: 0; }


/* =====================================================================
   Fliesstext in redaktionellen Abschnitten
   ===================================================================== */

.pt-prose { max-width: 70ch; }
.pt-prose h2 { font-family: var(--pt-serif); font-size: 1.35rem; margin: var(--pt-4) 0 var(--pt-2); }
.pt-prose h3 { font-family: var(--pt-serif); font-size: 1.1rem; margin: var(--pt-3) 0 .4rem; }
.pt-prose p  { margin: 0 0 .85rem; }
.pt-prose ul, .pt-prose ol { margin: 0 0 .9rem; padding-left: 1.25rem; }
.pt-prose li { margin: 0 0 .4rem; }


/* =====================================================================
   Kleinkram
   ===================================================================== */

.pt-vh {   /* nur fuer Vorleseprogramme */
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pt-stand { font-size: .85rem; color: var(--pt-ink-soft); margin-top: var(--pt-4); }