/*
 * kulturmoni.de - Gestaltung der oeffentlichen Seiten
 *
 * Die Farben stammen unveraendert aus der bisherigen Seite:
 *   #FFCC00  Grundton (gelb)
 *   #BB2A25  Navigationsbalken (rot)
 *   #F8BF24  Schrift auf Rot (gold)
 * Neu ist nur, dass das Ganze mitwaechst statt in absolut positionierten
 * Ebenen mit festen Pixelmassen zu stehen.
 */

:root {
    --gelb:       #FFCC00;
    --rot:        #BB2A25;
    --gold:       #F8BF24;
    --dunkelrot:  #8E1F1B;
    --text:       #1A1A1A;
    --karte:      #FFF7DD;
    --linie:      rgba(0, 0, 0, .18);
}

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

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--gelb);
    color: var(--text);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.55;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--dunkelrot);
}

a:hover,
a:focus {
    color: #000;
}

.skip {
    position: absolute;
    left: -9999px;
}

.skip:focus {
    left: .5rem;
    top: .5rem;
    z-index: 10;
    background: #fff;
    padding: .5rem .75rem;
}

/* --- Kopf ---------------------------------------------------------------- */

.kopf {
    max-width: 1000px;
    margin: 0 auto;
    padding: .75rem .75rem 0;
}

.kopf__logo {
    display: block;
}

.kopf__logo img {
    display: block;
    width: 100%;
    height: auto;
}

/* --- Navigation ---------------------------------------------------------- */

.nav {
    max-width: 1000px;
    margin: .75rem auto 0;
    padding: 0 .75rem;
}

.nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav li {
    flex: 1 1 auto;
}

.nav a {
    display: block;
    padding: .85rem .6rem;
    background: var(--rot);
    color: var(--gold);
    font-size: .78rem;
    font-weight: bold;
    letter-spacing: .04em;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
}

.nav a:hover,
.nav a:focus {
    background: var(--dunkelrot);
    color: #fff;
}

.nav a.ist-aktiv {
    background: var(--dunkelrot);
    color: #fff;
    box-shadow: inset 0 -3px 0 var(--gold);
}

/* --- Rahmen mit dem roten Seitenstreifen --------------------------------- */

.rahmen {
    display: flex;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 .75rem;
}

.rahmen__streifen {
    flex: 0 0 38px;
    background: url("/Images/left.jpg") repeat-y left top;
    background-size: 38px auto;
}

.inhalt {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1.25rem 0 2rem 1.25rem;
}

@media (max-width: 700px) {
    .rahmen__streifen {
        display: none;
    }

    .inhalt {
        padding-left: 0;
    }
}

/* --- Fliesstext ---------------------------------------------------------- */

h1 {
    margin: 0 0 1rem;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 1.6rem;
    line-height: 1.2;
}

h2 {
    margin: 2rem 0 .75rem;
    font-size: 1.25rem;
}

h3 {
    margin: 1.5rem 0 .5rem;
    font-size: 1.05rem;
}

p {
    margin: 0 0 1rem;
}

hr {
    border: 0;
    border-top: 1px solid var(--linie);
    margin: 1.5rem 0;
}

.hinweis {
    font-size: .9rem;
}

/* Technische Bezeichnungen im Fliesstext, etwa der Name des Cookies. */
code {
    padding: .05em .3em;
    border-radius: 3px;
    background: rgba(0, 0, 0, .06);
    font-size: .95em;
}

.text-mitte {
    text-align: center;
}

/* Redaktionelle Texte aus der Datenbank duerfen HTML enthalten. */
.fliesstext {
    margin: 0 0 1rem;
    max-width: 46rem;
}

.fliesstext img {
    height: auto;
}

.anfahrt table.vorschau {
    max-width: 34rem;
}

.partnerliste {
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
    font-size: 1.05rem;
}

.partnerliste li {
    margin: 0 0 .5rem;
}

ul,
ol {
    margin: 0 0 1rem;
    padding-left: 1.4rem;
}

fieldset {
    margin: 0 0 1rem;
    padding: .75rem 1rem;
    border: 1px solid var(--linie);
    border-radius: 3px;
}

legend {
    padding: 0 .4rem;
    font-weight: bold;
    font-size: .92rem;
}

.feld--wahl label {
    display: block;
    margin: 0 0 .5rem;
    font-weight: normal;
    font-size: .95rem;
}

/* --- Meldungen ----------------------------------------------------------- */

.meldungen {
    margin: 0 0 1.25rem;
}

.meldung {
    margin: 0 0 .5rem;
    padding: .7rem .9rem;
    border-left: 5px solid;
    border-radius: 3px;
    background: #fff;
}

.meldung--ok {
    border-color: #2E7D32;
}

.meldung--fehler {
    border-color: var(--rot);
}

.meldung--hinweis {
    border-color: #E6A700;
    background: #FFFBF0;
}

.meldung--hinweis p {
    margin: 0 0 .5rem;
}

.meldung--hinweis p:last-child {
    margin-bottom: 0;
}

/* --- Termine ------------------------------------------------------------- */

.monat {
    margin: 0 0 2rem;
}

.monat__titel {
    margin: 0 0 .75rem;
    padding: .35rem .75rem;
    background: var(--rot);
    color: var(--gold);
    font-size: 1.05rem;
}

.termin {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin: 0 0 1.25rem;
    padding: 1rem;
    background: var(--karte);
    border-radius: 4px;
}

.termin__bild {
    flex: 0 0 200px;
}

.termin__bild img {
    display: block;
    width: 100%;
    border-radius: 3px;
}

.termin__text {
    flex: 1 1 260px;
    min-width: 0;
}

.termin__datum {
    margin: 0 0 .25rem;
    font-weight: bold;
}

.termin__titel {
    margin: 0 0 .5rem;
    font-size: 1.15rem;
}

.termin__meta {
    margin: .75rem 0 0;
    font-size: .9rem;
}

@media (max-width: 560px) {
    .termin__bild {
        flex: 1 1 100%;
    }
}

/* Kompakte Vorschau-Liste */

.vorschau {
    width: 100%;
    border-collapse: collapse;
}

.vorschau th,
.vorschau td {
    padding: .5rem .6rem;
    border-bottom: 1px solid var(--linie);
    text-align: left;
    vertical-align: top;
}

.vorschau th {
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.vorschau__datum {
    white-space: nowrap;
}

/* --- Galerie ------------------------------------------------------------- */

.abc {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
}

.abc a {
    display: block;
    min-width: 2rem;
    padding: .3rem .5rem;
    background: var(--rot);
    color: var(--gold);
    font-weight: bold;
    text-align: center;
    text-decoration: none;
}

.galerie-gruppe {
    margin: 0 0 2rem;
}

.galerie {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.galerie li {
    background: var(--karte);
    border-radius: 4px;
    padding: .6rem;
    text-align: center;
}

.galerie img {
    display: block;
    width: 100%;
    border-radius: 3px;
    margin: 0 0 .5rem;
}

.galerie__name {
    font-weight: bold;
    font-size: .95rem;
}

/* --- Formulare ----------------------------------------------------------- */

.formular {
    max-width: 40rem;
    margin: 0 0 2rem;
    padding: 1.25rem;
    background: var(--karte);
    border-radius: 4px;
}

.feld {
    margin: 0 0 1rem;
}

.feld label {
    display: block;
    margin: 0 0 .25rem;
    font-weight: bold;
    font-size: .92rem;
}

.feld input[type="text"],
.feld input[type="email"],
.feld input[type="tel"],
.feld input[type="number"],
.feld select,
.feld textarea {
    width: 100%;
    padding: .55rem .6rem;
    border: 1px solid #9A8A55;
    border-radius: 3px;
    background: #fff;
    font: inherit;
}

.feld textarea {
    min-height: 7rem;
}

.feld--zeile {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.feld--zeile > * {
    flex: 1 1 12rem;
}

.feld--wahl label {
    font-weight: normal;
}

.pflicht {
    color: var(--rot);
}

.knopf {
    display: inline-block;
    padding: .65rem 1.4rem;
    border: 0;
    border-radius: 3px;
    background: var(--rot);
    color: var(--gold);
    font: inherit;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
}

.knopf:hover,
.knopf:focus {
    background: var(--dunkelrot);
    color: #fff;
}

.knopf--schlicht {
    background: transparent;
    border: 1px solid var(--rot);
    color: var(--rot);
}

.knopf--schlicht:hover,
.knopf--schlicht:focus {
    background: var(--rot);
    color: var(--gold);
}

/* --- Karte (Anfahrt) ----------------------------------------------------- */

.karte-einbettung {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    margin: 0 0 1.5rem;
}

.karte-einbettung iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* --- Fuss ---------------------------------------------------------------- */

.fuss {
    max-width: 1000px;
    margin: 2rem auto 0;
    padding: 1rem .75rem 2rem;
    border-top: 1px solid var(--linie);
    font-size: .85rem;
}

.fuss p {
    margin: 0;
}