/* Custom CSS – wird nach allen anderen Stylesheets geladen und überschreibt Farben */

/* The Californication – lokal gehostet */
@font-face {
    font-family: 'the-californication';
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src: url('/fonts/the_californication.ttf') format('truetype');
}

/* Nunito Sans – lokal gehostet */
@font-face {
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('/fonts/nunito-sans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('/fonts/nunito-sans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Nunito Sans';
    font-style: italic;
    font-weight: 300 700;
    font-display: swap;
    src: url('/fonts/nunito-sans-latin-ext-italic.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Nunito Sans';
    font-style: italic;
    font-weight: 300 700;
    font-display: swap;
    src: url('/fonts/nunito-sans-latin-italic.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

[class*="theme-"] {
    /* Hintergründe */
    --color-background-header:    30 100%  4.71%;  /* #180c00 */
    --color-background-base:      29 100%  6.47%;  /* #211000 */
    --color-background-elevated:  34  44% 89%;     /* #efe4d6 – Alternate Content */
    --color-background-highlight: 29 100%  6.47%;  /* #211000 – Hover/Wechselnde */

    /* Akzentfarben */
    --color-accent-base:      81 51% 38%;   /* #719430 */
    --color-accent-hover:     81 51% 38%;   /* #719430 */
    --color-accent-muted:     81 51% 38%;   /* #719430 */
    --color-accent-contrast:  34 44% 89%;   /* #efe4d6 */

    /* Textfarben */
    --color-text-base:  34 44% 89%;   /* #efe4d6 */
    --color-text-muted: 34 44% 89%;   /* #efe4d6 */

    /* Überschriften */
    --color-heading-foreground: 34 44% 89%;   /* #efe4d6 */
    --color-heading-background: 81 51% 38%;   /* #719430 */

    /* Rahmen */
    --color-border-subtle: 30 100% 4.71%;   /* #180c00 */
}

/* Header-Schriftfarbe: #efe4d6 (überschreibt auch text-white) */
header.bg-header,
header.bg-header a {
    color: #efe4d6;
}



#home-main {
    background-image: url('/media/boho_bgr01.jpg');
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
}

/* iOS Safari unterstützt background-attachment: fixed nicht */
@supports (-webkit-touch-callout: none) {
    #home-main {
        background-attachment: scroll;
    }
}

/* Podcast-Karte auf der Follow-Seite (div, nicht article) + Premium-Unlock-Modal (form) */
div.bg-elevated,
form.bg-elevated {
    color: #211000;
    --color-text-muted: 30 70% 12%;       /* #211000 */
    --color-heading-foreground: 30 70% 12%; /* #211000 */
}

article.bg-elevated {
    background-color: #211000;
    color: #efe4d6;
    --color-border-subtle: 46 30% 55%;   /* sichtbar auf dunklem Kartengrund */
}

article.bg-elevated div.border-y {
    border-top-width: 0;
    border-bottom-width: 0;
}

/* Rahmen der Reply-Bereiche sichtbar machen */
.post-replies,
div:has(+ article.bg-elevated) {
    --color-border-subtle: 46 30% 55%;
    border-color: hsl(46deg 30% 55%);
}

input, textarea, select {
    background-color: #efe4d6;
    color: #211000;
}

input::placeholder, textarea::placeholder {
    color: #71614a;
}

nav.bg-elevated {
    color: #211000;
}

nav.bg-elevated a {
    color: #211000;
}

nav.rounded-lg.bg-elevated a:hover,
nav.rounded-lg.bg-elevated button:hover {
    background-color: #c0b38a;
}

/* Prose (Markdown-Inhalt) auf dunklem Hintergrund */
.prose {
    --tw-prose-body:          #efe4d6;
    --tw-prose-headings:      #efe4d6;
    --tw-prose-links:         #719430;
    --tw-prose-bold:          #efe4d6;
    --tw-prose-counters:      #efe4d6;
    --tw-prose-bullets:       #719430;
    --tw-prose-hr:            #180c00;
    --tw-prose-quotes:        #efe4d6;
    --tw-prose-quote-borders: #719430;
    --tw-prose-captions:      #c0b38a;
    --tw-prose-code:          #efe4d6;
    --tw-prose-th-borders:    #180c00;
    --tw-prose-td-borders:    #180c00;
    color: #efe4d6;
}

/* Kategorie-Tags auf Podcast-Seiten */
body.podcast-page .bg-highlight {
    background-color: #211000;
    color: #efe4d6;
}

nav.bg-elevated a:hover {
    color: #719430;
}

nav.bg-elevated a:focus,
#podcast-sidebar a:focus {
    outline: none;
    box-shadow: none;
}

footer a:focus,
#sortby-dropdown:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* FOLGEN-Button im Podcast-Header */
header.bg-header a.bg-white {
    background-color: #719430;
    color: #efe4d6;
}

header.bg-header a.bg-white:hover {
    background-color: #537020;
    color: #efe4d6;
}

/* Hintergrund der Post-Karten-Footer (Antworten/Teilen/Favoriten) */
article.bg-elevated footer {
    background-color: #c0b38a;
    color: #211000;
    border-bottom-left-radius: max(0px, min(1rem, calc(999900vw - 9999rem - 999900%)));
    border-bottom-right-radius: max(0px, min(1rem, calc(999900vw - 9999rem - 999900%)));
}

body.podcast-page {
    --color-background-base: 34 30% 4.5%;
}

footer.container {
    max-width: 100%;
}

footer {
    background-color: #180c00;
    color: #efe4d6;
}

footer a:hover {
    color: #719430;
}

/* ===== Polaroid-Karten ===== */
.polaroid-card {
    display: inline-block;
    background: #c1b185;
    padding: 12px 12px 16px;
    box-shadow: 3px 5px 16px rgba(0, 0, 0, 0.5);
    width: 100%;
}

.polaroid-card img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.polaroid-card small {
    display: block;
    text-align: left;
    font-family: 'the-californication', cursive;
    font-weight: 500;
    color: black;
    margin-top: 10px;
    font-size: 2.5em;
    line-height: 1.7em;
}

/* ===== Über uns – Hero ===== */
.ueber-uns-hero {
    position: relative;
    min-height: 45vh;
    display: flex;
    align-items: center;
    background-image: url('/media/boho_bgr01.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

@supports (-webkit-touch-callout: none) {
    .ueber-uns-hero { background-attachment: scroll; }
}

.ueber-uns-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(10, 5, 0, 0.6);
}

.ueber-uns-hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 2rem;
    width: 100%;
}

.ueber-uns-hero-text h1,
.ueber-uns-hero-text h4,
.ueber-uns-content h2 {
    font-family: 'Nunito Sans', Helvetica, Arial, sans-serif;
    font-weight: 300;
}

.ueber-uns-hero-text h1 {
    font-size: clamp(1.4rem, 4vw, 2.8rem);
    font-weight: 300;
    letter-spacing: 0.06em;
    color: #efe4d6;
    text-transform: uppercase;
    margin: 0 0 0.5rem;
    text-align: center;
}

.ueber-uns-hero-text h4 {
    font-size: clamp(0.9rem, 2vw, 1.2rem);
    color: #efe4d6;
    text-align: center;
    font-weight: 400;
    margin: 0;
}

.ueber-uns-hero-image {
    display: flex;
    justify-content: center;
}

.ueber-uns-hero-image .polaroid-card {
    transform: rotate(2deg);
}

/* ===== Über uns – Content ===== */
.ueber-uns-content {
    background-color: #211000;
    color: #efe4d6;
    padding: 3rem 0;
}

.ueber-uns-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.ueber-uns-content h2 {
    font-size: clamp(1.1rem, 3vw, 1.8rem);
    font-weight: 300;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #efe4d6;
    margin: 0 0 1.5rem;
}

.ueber-uns-content p {
    line-height: 1.8;
    margin-bottom: 1.25rem;
    color: #efe4d6;
}

/* Grid-Zeilen (Bild + Text) */
.ueber-uns-row {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2.5rem;
    align-items: center;
    margin-top: 2.5rem;
}

.ueber-uns-row.reverse {
    grid-template-columns: 2fr 1fr;
}

.ueber-uns-img {
    display: flex;
    justify-content: center;
}

/* Leichte Drehungen für die einzelnen Polaroids */
.ueber-uns-row:nth-of-type(1) .polaroid-card { transform: rotate(-1.5deg); }
.ueber-uns-row:nth-of-type(2) .polaroid-card { transform: rotate(2deg); }
.ueber-uns-row:nth-of-type(3) .polaroid-card { transform: rotate(-2.5deg); }

.ueber-uns-closing {
    margin-top: 2.5rem;
    font-style: italic;
    border-top: 1px solid rgba(239, 228, 214, 0.2);
    padding-top: 2rem;
}

/* ===== Kontakt-Formular ===== */
.kontakt-form {
    max-width: 700px;
    margin-top: 2rem;
}

.kontakt-heading {
    font-family: 'Nunito Sans', Helvetica, Arial, sans-serif;
    font-weight: 300;
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #efe4d6;
    margin-bottom: 1.5rem;
}

.kontakt-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    align-items: start;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.kontakt-row--textarea {
    align-items: start;
}

.kontakt-row--submit {
    margin-top: 0.5rem;
}

.kontakt-row label {
    font-family: 'Nunito Sans', Helvetica, Arial, sans-serif;
    font-size: 0.95rem;
    color: #efe4d6;
    padding-top: 0.45rem;
    line-height: 1.4;
}

.kontakt-row label abbr {
    color: #719430;
    text-decoration: none;
    margin-left: 2px;
}

.kontakt-row label small {
    display: block;
    font-size: 0.75rem;
    color: #c0b38a;
    margin-top: 0.2rem;
    line-height: 1.4;
}

.kontakt-row input[type="text"],
.kontakt-row input[type="email"],
.kontakt-row textarea,
.kontakt-row select {
    background-color: #efe4d6;
    color: #211000;
    border: none;
    padding: 0.5rem 0.7rem;
    font-size: 1rem;
    font-family: inherit;
    width: 100%;
}

.kontakt-row select {
    cursor: pointer;
}

.kontakt-row textarea {
    resize: vertical;
}

.kontakt-btn {
    background-color: #719430;
    color: #efe4d6;
    border: none;
    padding: 0.55rem 1.8rem;
    font-size: 1rem;
    font-family: 'Nunito Sans', Helvetica, Arial, sans-serif;
    cursor: pointer;
    transition: background-color 0.2s;
}

.kontakt-btn:hover {
    background-color: #537020;
}

.kontakt-alert {
    padding: 0.8rem 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
    grid-column: 1 / -1;
}

.kontakt-alert--success {
    background-color: #2d4a10;
    color: #c8e89a;
    border-left: 4px solid #719430;
}

.kontakt-alert--error {
    background-color: #4a1010;
    color: #e8a0a0;
    border-left: 4px solid #a03030;
}

@media (max-width: 600px) {
    .kontakt-row {
        grid-template-columns: 1fr;
    }
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .ueber-uns-hero-inner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .ueber-uns-row,
    .ueber-uns-row.reverse {
        grid-template-columns: 1fr;
    }

    .ueber-uns-row.reverse .ueber-uns-img {
        order: -1;
    }
}