/* ======================================================================
   ESSEN AUF RAEDERN | DIAKONIEWERK WELTERSBACH
   Vollstaendige CSS-Datei fuer index.html

   HIER kannst du das Aussehen schnell aendern:
   - Farben:                 Abschnitt 01 (Variablen)
   - Feste Navigation + Handy-Menü: Abschnitt 03 und 13
   - Grosses Startseitenbild: Abschnitt 04
   - Preisfoto und Verlauf:  Abschnitt 09
   - WordPress-Speiseplaene: Abschnitt 10
   - Smartphone/Tablet:      Abschnitt 13 und 14

   Bilder gehoeren in den Ordner: assets/
   Hinweis: Dieses CSS gehoert zur HTML-Webseite, NICHT in WordPress.
   ====================================================================== */

/* 01 - Farben, Schriften und Groessen ----------------------------------- */
:root {
    --navy: #073d7e;
    --blue: #07579e;
    --sky: #269ec7;
    --ink: #173756;
    --muted: #52687d;
    --peach: #ed9351;
    --pink: #073d7e;
    --paper: #f6f9fc;
    --line: #dce8ef;
    --shadow: 0 18px 50px rgba(16, 60, 93, 0.10);
    --content-width: 1150px;
    --header-offset: 145px;

    /* Position des Startseiten-Fotos: z.B. 55%, 65% oder center */
    --hero-photo-position: center;

    /* Position des Fotos im Kostenbereich: 60%, 70% usw. ausprobieren */
    --price-photo-position: 68% center;
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-offset);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    color: var(--ink);
    font: 17px/1.65 "Segoe UI", Arial, Helvetica, sans-serif;
    background: #fff;
}

img { display: block; max-width: 100%; }
a { color: var(--navy); }
a:focus-visible, button:focus-visible { outline: 3px solid #d44d8e; outline-offset: 4px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.16; }
h2 { font-size: clamp(1.9rem, 3.1vw, 2.7rem); color: var(--navy); letter-spacing: -.03em; }
h3 { font-size: 1.15rem; color: var(--navy); }

.container { width: min(var(--content-width), calc(100% - 44px)); margin-inline: auto; }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .76rem; color: #9d427c; font-weight: 800; }
.small-note { color: var(--muted); font-size: .94rem; }
.light { background: var(--paper); }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }

/* Tastatur: Link zum Inhalt wird nur beim Fokussieren sichtbar. */
.skip { position: absolute; top: -80px; left: 10px; z-index: 1100; background: #fff; padding: 10px; }
.skip:focus { top: 10px; }

/* 03 - Farbband, Logo und feste obere Navigation ----------------------- */
.topline {
    height: 7px;
    background: linear-gradient(90deg, #f19b49, #e74f8d 34%, #814c9c 60%, #008bbf 85%, #53b8d8);
}

/* position: sticky sorgt dafuer, dass das Menue beim Scrollen stehen bleibt. */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #fff;
    box-shadow: 0 2px 15px rgba(7, 61, 126, .12);
}

.head {
    min-height: 117px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
}

.brand { display: block; flex: 0 0 auto; }
.brand img { width: 340px; max-width: 40vw; height: auto; }
.nav { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 25px; font-size: .95rem; font-weight: 650; }
.nav a { text-decoration: none; white-space: nowrap; }
.nav a:hover { text-decoration: underline; }
.nav .nav-contact { color: #fff; background: var(--navy); border-radius: 25px; padding: 11px 21px; }
.nav .nav-contact:hover { background: var(--blue); text-decoration: none; }

/* AKTIVER MENUEPUNKT (PC und Handy)
   Ein kleines, nach unten gerichtetes Dreieck zeigt den Abschnitt an.
   JavaScript setzt dazu die Klasse .is-active und aria-current="location". */
.nav a { position: relative; }
.nav a.is-active { color: var(--navy); font-weight: 800; }
.nav a.is-active:not(.nav-contact) { text-decoration: none; }
.nav a.is-active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -13px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid var(--pink);
    pointer-events: none;
}
.nav .nav-contact.is-active { color: #fff; background: var(--blue); }


/* Der Menü-Button ist auf dem PC ausgeblendet. */
.menu-toggle { display: none; }

/* 04 - Grosses Startseitenbild (Hero) ---------------------------------- */
/* Das Bild liegt als Hintergrund der gesamten Startsektion.
   Der weisse Verlauf sorgt links fuer lesbaren Text.
   AENDERN: Die rgba-Werte regeln die Staerke des Weiss.
            --hero-photo-position regelt den Bildausschnitt. */
.hero.hero-full {
    overflow: hidden;
    background-color: #f8fbfd;
    background-image:
        linear-gradient(
            to right,
            rgba(255, 255, 255, .95) 0%,
            rgba(255, 255, 255, .75) 45%,
            rgba(255, 255, 255, 0) 65%
        ),
        url("assets/mittagessen.jpg");
    background-position: center, var(--hero-photo-position);
    background-size: cover;
    background-repeat: no-repeat;
}

.hero-full .hero-grid {
    display: flex;
    align-items: center;
    min-height: 570px;
    padding: 75px 0 85px;
}

.hero-full .hero-copy { width: min(670px, 65%); }
.hero h1 {
    font-size: clamp(3.1rem, 6.6vw, 5.6rem);
    color: var(--navy);
    margin: 10px 0 12px;
    line-height: 1.02;
    letter-spacing: -.055em;
}
.hero .claim { font-size: clamp(1.4rem, 2.5vw, 2rem); color: var(--blue); font-weight: 750; margin: 0 0 20px; }
.hero .claim::after {
    content: "";
    display: block;
    margin-top: 8px;
    height: 5px;
    width: 230px;
    max-width: 75%;
    border-radius: 10px;
    background: linear-gradient(90deg, var(--peach), var(--pink), var(--sky));
}
.hero .intro { max-width: 550px; font-size: 1.12rem; color: #344e65; }

/* 05 - Alle Buttons ---------------------------------------------------- */
.buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 23px;
    border-radius: 100px;
    font-weight: 760;
    text-align: center;
    text-decoration: none;
    transition: transform .15s, background-color .15s;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--navy); color: #fff; box-shadow: 0 8px 18px rgba(7, 61, 126, .2); }
.btn-primary:hover { background: var(--blue); }
.btn-outline { color: var(--navy); border: 2px solid #b5d4e7; background: #fff; }
.btn-outline:hover { background: #edf6fb; }

/* Farbiges Band zwischen Startseite und Angebot. */
.wave { height: 18px; background: linear-gradient(90deg, #ee9750, #dc5293, #675199, #139ac0, #7cc9d9); }

/* 06 - Angebot: drei Vorteile ------------------------------------------ */
section.content { padding: 84px 0; }
.section-heading { max-width: 730px; margin: 0 auto 42px; text-align: center; }
.section-heading p { color: var(--muted); }
.benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.benefit {
    border: 1px solid var(--line);
    background: white;
    padding: 30px 25px;
    border-radius: 22px;
    box-shadow: 0 9px 26px rgba(10, 52, 91, .045);
}
.benefit p { color: var(--muted); margin-bottom: 0; }
.ic { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 18px; background: #edf6fb; color: var(--navy); margin-bottom: 17px; }
.ic svg { width: 29px; height: 29px; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; fill: none; }

/* 07 - Persoenliche Lieferung ------------------------------------------ */
.delivery-visual { max-width: 500px; position: relative; }
.delivery-visual img { width: 100%; max-height: 480px; object-fit: cover; object-position: 100% center; border-radius: 28px; box-shadow: var(--shadow); }
.delivery-visual::after {
    content: "";
    position: absolute;
    inset: auto -15px -15px 20%;
    height: 11px;
    z-index: -1;
    border-radius: 10px;
    background: linear-gradient(90deg, #e77b61, #d34d91, #159bc6);
}
.checks { list-style: none; padding: 0; margin: 26px 0 0; }
.checks li { margin: 12px 0; padding-left: 29px; position: relative; }
.checks li::before { content: "✓"; position: absolute; top: 0; left: 0; color: #007da8; font-weight: 900; }

/* 08 - Menueauswahl ---------------------------------------------------- */
.menu-box { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 28px 32px; box-shadow: var(--shadow); }
.menu-box h3 { margin-bottom: 10px; }
.menu-box .menu-title { margin-top: 20px; }
.menu-box ol { padding-left: 24px; margin: 8px 0 17px; color: var(--blue); font-weight: 700; }
.menu-box .menu-last-note { margin-bottom: 0; }
.menu-divider { border: 0; border-top: 1px solid var(--line); margin: 22px 0; }
.tag { display: inline-block; padding: 7px 15px; border-radius: 30px; background: #e1f1f6; color: var(--navy); font-size: .9rem; font-weight: 800; }

/* 09 - Preisbereich: jetzt EIN Foto statt fuenf Kreisen --------------- */
/* AENDERN:
   - Foto: assets/mahlzeiten-collage.jpg
   - Fotohoehe: height in .pricing-photo-visual
   - Bildausschnitt: --price-photo-position in Abschnitt 01
   - Weisser Uebergang: letzte rgba-Werte unter ::after
   Keine alten .meal-item/.meal-collage-Regeln mehr notwendig. */
.pricing {
    background: linear-gradient(140deg, #e7f5f9, #fff 70%);
    border-radius: 28px;
}
.price { color: var(--navy); font-weight: 850; font-size: clamp(3rem, 7vw, 4.6rem); letter-spacing: -.055em; line-height: 1.1; margin: 18px 0; }
.price span { font-size: 1rem; letter-spacing: 0; font-weight: 600; }

#kosten .pricing-photo {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    align-items: center;
    gap: 18px;
    position: relative;
    overflow: hidden;
    min-height: 420px;
    padding: 42px;
    background: linear-gradient(130deg, #e7f5f9, #fff 75%);
}
#kosten .pricing-text { position: relative; z-index: 2; min-width: 0; }
#kosten .pricing-text p { max-width: 590px; }
#kosten .pricing-photo-visual { position: relative; min-width: 0; height: 355px; overflow: hidden; border-radius: 22px; }
#kosten .pricing-photo-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--price-photo-position);
}

/* Der Verlauf auf dem Foto ist bewusst schwach, weil das neue Foto
   selbst auf der linken Seite schon hell ist. */
#kosten .pricing-photo-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to right, rgba(255, 255, 255, .40), rgba(255, 255, 255, 0) 38%);
}

/* 10 - Speiseplaene: WordPress im rahmenlosen iframe ------------------- */
/* Die endgueltige Hoehe wird durch das Skript in index.html gesetzt,
   sobald WordPress eine Hoehenmeldung sendet. Diese Werte sind Ersatzwerte. */
.speiseplan-heading { margin-bottom: 25px; }
.speiseplan-wrap { width: 100%; margin-top: 22px; }
.speiseplan-frame {
    display: block;
    width: 100%;
    height: 440px;
    min-height: 120px;
    border: 0;
    outline: 0;
    background: transparent;
}

/* 11 - Kontakt und Dorf-Logo ------------------------------------------- */
.contact { background: linear-gradient(130deg, #073d7e 5%, #00548f 70%, #087ca5); color: #fff; overflow: hidden; }
.contact .two-col { padding: 76px 0; }
.contact h2, .contact h3 { color: #fff; }
.contact p { color: #eaf4fc; }
.contact .eyebrow { color: #b6e2f6; }
.phone { font-size: clamp(2.3rem, 5.2vw, 4rem); font-weight: 850; letter-spacing: -.035em; line-height: 1.2; color: #fff; text-decoration: none; white-space: nowrap; }
.phone:hover { text-decoration: underline; }
.contact a.email { color: #fff; }
.contact-logo { text-align: center; }
/* Dorf-Silhouette: Breite begrenzen, Seitenverhaeltnis unveraendert lassen.
   Wichtig: height:auto verhindert Strecken durch das HTML-height-Attribut. */
.contact-logo img {
    display: block;
    width: 100%;
    max-width: 350px;
    height: auto;
    object-fit: contain;
    margin: 0 auto 18px;
    filter: brightness(0) invert(1);
    opacity: .9;
}

/* 12 - Seitenfuss ------------------------------------------------------ */
.footer { background: #062c57; color: #dceaf5; padding: 26px 0; font-size: .91rem; }
.footer .container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 18px; }
.footer a { color: #dceaf5; }

/* 13 - Tablet / kleinere Notebook-Bildschirme ------------------------- */
@media (max-width: 890px) {
    /* Tablet/Handy: Logo links, gut erreichbarer Menü-Button rechts. */
    :root { --header-offset: 110px; }
    .head { min-height: 95px; flex-direction: row; padding: 10px 0; gap: 16px; position: relative; }
    .brand { min-width: 0; }
    .brand img { width: 290px; max-width: 100%; }
    .menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        flex: 0 0 auto;
        min-height: 48px;
        padding: 10px 16px;
        font: inherit;
        font-size: 1rem;
        font-weight: 750;
        color: var(--navy);
        background: #fff;
        border: 2px solid #b5d4e7;
        border-radius: 14px;
        cursor: pointer;
    }
    .menu-toggle[aria-expanded="true"] { background: #edf6fb; border-color: var(--blue); }
    .menu-toggle-icon { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 22px; height: 22px; }
    .menu-toggle-icon span { width: 22px; height: 2.5px; background: currentColor; border-radius: 2px; transition: transform .2s, opacity .2s; }
    .menu-toggle[aria-expanded="true"] .menu-toggle-icon span:first-child { transform: translateY(7.5px) rotate(45deg); }
    .menu-toggle[aria-expanded="true"] .menu-toggle-icon span:nth-child(2) { opacity: 0; }
    .menu-toggle[aria-expanded="true"] .menu-toggle-icon span:last-child { transform: translateY(-7.5px) rotate(-45deg); }

    /* Dropdown statt seitlich verschiebbarer Navigation. */
    .nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 1010;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 12px;
        background: white;
        border: 1px solid var(--line);
        border-radius: 0 0 20px 20px;
        box-shadow: 0 18px 30px rgba(7,61,126,.18);
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-8px);
        transition: opacity .18s, transform .18s, visibility .18s;
    }
    .nav.is-open { visibility: visible; opacity: 1; pointer-events: auto; transform: none; }
    .nav a {
        display: flex;
        align-items: center;
        padding: 11px 15px;
        min-height: 48px;
        border-radius: 10px;
        white-space: normal;
        font-size: 1rem;
    }
    .nav a:hover, .nav a:focus-visible { text-decoration: none; background: #edf6fb; }
    /* Aktiver Handy-Link: dezent hinterlegt, Dreieck direkt unter dem Link. */
    .nav a.is-active:not(.nav-contact) {
        color: var(--navy);
        background: #e9f4fa;
        border-left: 4px solid var(--sky);
        padding-left: 11px;
    }
    /* Der kleine Pfeil erscheint rechts im aktiven Link. */
    .nav a.is-active::after {
        left: auto;
        right: 17px;
        top: 50%;
        bottom: auto;
        transform: translateY(-20%);
    }

    .nav .nav-contact { justify-content: center; margin-top: 5px; color: #fff; border-radius: 12px; }
    .nav .nav-contact:hover, .nav .nav-contact:focus-visible { background: var(--blue); }
    .two-col { grid-template-columns: minmax(0, 1fr); gap: 35px; }
    .two-col > * { min-width: 0; }
    .delivery-visual { width: 100%; max-width: 650px; min-width: 0; }

    .hero.hero-full {
        background-image:
            linear-gradient(90deg, rgba(255, 255, 255, .97), rgba(255, 255, 255, .76) 75%, rgba(255, 255, 255, .48)),
            url("assets/mittagessen.jpg");
        background-position: center, 57% center;
    }
    .hero-full .hero-grid { min-height: 490px; padding: 65px 0; }
    .hero-full .hero-copy { width: min(640px, 90%); }

    #kosten .pricing-photo { grid-template-columns: 1fr; padding: 30px; }
    #kosten .pricing-photo-visual { height: 290px; }
    #kosten .pricing-photo-visual::after { display: none; }

    .contact .two-col { padding: 60px 0; }
}

/* 14 - Smartphone ------------------------------------------------------ */
@media (max-width: 620px) {
    :root { --header-offset: 88px; }
    body { font-size: 16px; }
    .container { width: min(1150px, calc(100% - 30px)); }
    .head { min-height: 77px; gap: 12px; }
    .brand { flex: 1 1 auto; min-width: 0; }
    .brand img { width: 230px; max-width: 100%; }
    .menu-toggle { padding: 9px 12px; min-height: 46px; }
    .nav { padding: 8px; }
    .nav a { font-size: 1rem; }

    .hero.hero-full {
        background-image:
            linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .90)),
            url("assets/mittagessen.jpg");
        background-position: center;
    }
    .hero-full .hero-grid { min-height: 0; padding: 42px 0 56px; }
    .hero-full .hero-copy { width: 100%; }
    .hero-full h1 { font-size: clamp(2.8rem, 12vw, 4.5rem); }
    .hero-full .buttons { gap: 10px; }
    .btn { width: 100%; }

    section.content { padding: 62px 0; }
    .benefits { grid-template-columns: 1fr; }
    .benefit { padding: 22px; }
    .menu-box { padding: 25px; }
    .contact-logo { display: none; }
    .phone { white-space: normal; }
    .speiseplan-frame { height: 560px; }
}

@media (max-width: 480px) {
    #kosten .pricing-photo { padding: 22px; }
    #kosten .pricing-photo-visual { height: 230px; }
}

/* Bewegungen reduzieren, falls das Betriebssystem das verlangt. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .btn, .nav, .menu-toggle-icon span { transition: none; }
}