/* ============================================================
   Urbaneo · Mitmachen / Förderkreis – Subdomain-Styling
   Eigenständige Seite (außerhalb des hylex-CMS).
   Layout angelehnt an urbaneo.de/ueber-uns:
   gelber Hintergrund (area--about), Lottie-Hero oben.
   Design-Tokens, Schriften & Komponenten aus styles/main.css.
   ============================================================ */

/* --- Schriften (lokal, identisch zur Hauptseite) --- */
@font-face {
    font-family: "Urbaneo";
    src: url("/assets/fonts/AGOBauformUrbaneoBeta-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: "HALMatex";
    src: url("/assets/fonts/HALMatexUrbaneo-Regular.woff2") format("woff2"),
         url("/assets/fonts/HALMatexUrbaneo-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

/* --- Design-Tokens (aus main.css :root) --- */
:root {
    --color-rose: #FFB0C6;
    --color-green: #8CE680;
    --color-green-dark: #5F9C57;
    --color-yellow: #FFE12D;
    --color-yellow-medium: #E8CD2C;
    --color-yellow-dark: #AD991F;
    --color-blue: #86D9F3;
    --color-link: #0A84FF;
    --color-black: #1D1D1F;
    --color-white: #FFFFFF;
    --color-white-a: #FFFFFFB2;
    --color-grey-light: #E5E5EA;
    --color-grey: #D1D1D6;
    --color-grey-medium: #AEAEB2;

    --color-text: var(--color-black);
    /* Bereich „about“ → gelb, wie /ueber-uns */
    --color-background-highlight: var(--color-yellow);

    --space: 1rem;
    --border-width: 2px;
    --border: var(--border-width) solid var(--color-text);

    --max-width: 1024px;
    --pad-x: 1.5rem;
    --header-height: 64px;
}

/* --- Reset (Auszug) --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font: normal normal 400 20px/1.2 "HALMatex", sans-serif;
    color: var(--color-text);
    background: var(--color-yellow);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
@media (min-width: 768px) {
    body { font-size: clamp(20px, 2.474vw + 1px, 23px); }
}
img { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }

/* --- Schrift-Hilfsklassen --- */
.headline-xl {
    font-family: "HALMatex", sans-serif;
    font-size: clamp(1.8rem, 5vw, 2.8rem);
    line-height: 1.08;
    letter-spacing: 0;
    text-wrap: balance;
}
.headline-m {
    font-family: "HALMatex", sans-serif;
    font-size: clamp(1.15rem, 3.2vw, 1.6rem);
    line-height: 1.12;
}

/* --- Layout --- */
.wrap {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding-left: var(--pad-x);
    padding-right: var(--pad-x);
}

/* Alles linksbündig – kein zentrierter Text */
main, .wrap, .prose, .donate, .section { text-align: left; }

/* --- Header: gelb, nur „zurück“-Button --- */
.page-header {
    background: var(--color-yellow);
    position: sticky;
    top: 0;
    z-index: 50;
}
.page-header .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: var(--header-height);
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}
.logo { display: block; flex: 0 1 auto; min-width: 0; }
/* Logo-SVG ist schwarz – per Filter auf Weiß umfärben */
.logo img { height: 28px; width: auto; max-width: 100%; filter: brightness(0) invert(1); }

/* --- Buttons (aus main.css .btn) --- */
.btn {
    width: auto;
    text-decoration: none;
    color: var(--color-text);
    background-color: var(--color-white);
    border: 1px solid var(--color-white);
    border-radius: 2em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0 0.9rem;
    min-height: 2.2rem;
    font-family: "HALMatex", sans-serif;
    font-size: 0.8rem;
    line-height: 1;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    flex: 0 0 auto;
}
@media (hover: hover) {
    .btn:hover { background-color: var(--color-white-a); }
}
.btn .btn__icon { display: inline-flex; transform: translateY(1px); }
.btn--back { background: var(--color-white); }
/* Hero-Buttons: einheitlich weiß mit schwarzem Text */
.btn--cta,
.btn--sec {
    background: var(--color-white);
    border: 1px solid var(--color-white);
    color: var(--color-black);
    padding: 0.7rem 1.1rem;
    min-height: 2.6rem;
    font-size: 0.95rem;
}
@media (hover: hover) {
    .btn--cta:hover,
    .btn--sec:hover { opacity: 0.85; background: var(--color-white); }
}

/* --- Inhalts-Typografie (aus .fs--tpg) --- */
.prose { line-height: 1.4; }
.prose p + p { margin-top: 1.2em; }
.prose a { text-decoration: underline; text-underline-offset: 0.22em; transition: opacity 0.3s ease-in-out; }
.prose a:hover { opacity: 0.7; }
.prose strong, .prose b { font-weight: 700; }
.prose em, .prose i { font-style: italic; }

/* --- Hero: Bild links, Text rechts --- */
.hero {
    padding-top: 1.5rem;
    padding-bottom: 1rem;
}
.hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: center;
}
@media (min-width: 768px) {
    .hero__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 2.5rem;
    }
}
.hero__media { width: 100%; }
.hero__img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 1.5rem;   /* abgerundete Ecken */
    display: block;
}
.hero__title {
    font-family: "HALMatex", sans-serif;
    font-size: clamp(1.8rem, 5vw, 2.8rem);
    line-height: 1.08;
    margin-bottom: 1rem;
}
.hero .lead {
    margin-top: 0;
    font-size: clamp(1.05rem, 2.5vw, 1.3rem);
    line-height: 1.35;
    max-width: 42ch;
}
.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1.5rem;
}

/* Ankerziele nicht unter den sticky Header rutschen lassen */
#donate, #unternehmen, #zeit {
    scroll-margin-top: calc(var(--header-height) + 1rem);
}

/* --- Abschnitte --- */
.section { padding-top: 1.75rem; padding-bottom: 1.75rem; }

.cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 1.5rem;
}
@media (min-width: 720px) {
    .cards { grid-template-columns: 1fr 1fr; }
}
.card {
    background: var(--color-white);
    border-radius: 1.25rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    text-align: left;
}
.card h3 { font-size: 1.15rem; }
.card .prose { font-size: 0.95rem; flex: 1 1 auto; }
.card .btn { align-self: flex-start; margin-top: 0.5rem; }
.card .btn--accent {
    background: var(--color-yellow);
    border-color: var(--color-yellow);
    color: var(--color-black);
}
@media (hover: hover) {
    .card .btn--accent:hover { background: var(--color-yellow-medium); border-color: var(--color-yellow-medium); }
}

/* --- Formular-Bereich (FundraisingBox) ---
   KEIN Rahmen, KEINE Box, alles linksbündig. */
.donate {
    padding-top: 1.75rem;
    padding-bottom: 2rem;
    scroll-margin-top: calc(var(--header-height) + 1rem);
}
.donate__intro {
    margin-top: 0.75rem;
    margin-bottom: 1.5rem;
    max-width: 46ch;
    line-height: 1.4;
    text-align: left;
}
/* Der FRB-Container (das <script> schreibt hier sein iframe hinein) */
#fundraisingbox {
    width: 100%;
    min-height: 600px; /* Platz bis das Auto-Resize greift */
    text-align: left;
}
#fundraisingbox iframe { width: 100% !important; border: 0; display: block; }
.fb-logo { margin-top: 1rem; text-align: left; }
.fb-logo img { display: inline-block; }
.fb-noscript {
    display: block;
    text-align: left;
    padding: 1.25rem 0;
}

/* --- Footer (statisch, aus org_page-footer.tpl) --- */
.page-footer {
    background: var(--color-white);
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    font-size: 0.85rem;
    line-height: 1.4;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
}
@media (min-width: 720px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
}
.footer-col p + p { margin-top: 0.75rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.footer-links .btn { background: var(--color-grey-light); border-color: var(--color-grey-light); }
.footer-fine {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-grey-light);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    font-size: 0.75rem;
}
.footer-fine a { text-decoration: underline; text-underline-offset: 0.22em; }
.link--social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    border: 1px solid var(--color-grey);
    text-decoration: none;
}

.skip-link {
    position: absolute;
    left: -9999px;
    background: var(--color-black);
    color: var(--color-white);
    padding: 0.6rem 1.2rem;
    z-index: 999;
}
.skip-link:focus { left: 1rem; top: 1rem; }