/* =================================================================
   Bäcker Neuner – Übergangsseite
   Lokale Schriften (Soria + Montserrat), keine externen Ressourcen.
   ================================================================= */

/* ---------- Fonts (lokal eingebunden) ---------- */
@font-face {
    font-family: "Soria";
    src: url("assets/fonts/soria-font-webfont.woff2") format("woff2"),
         url("assets/fonts/soria-font-webfont.woff") format("woff"),
         url("assets/fonts/soria-font-webfont.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Montserrat";
    src: url("assets/fonts/montserrat-regular.woff2") format("woff2"),
         url("assets/fonts/montserrat-regular.woff") format("woff");
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Montserrat";
    src: url("assets/fonts/montserrat-medium.woff2") format("woff2"),
         url("assets/fonts/montserrat-medium.woff") format("woff");
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Montserrat";
    src: url("assets/fonts/montserrat-semibold.woff2") format("woff2"),
         url("assets/fonts/montserrat-semibold.woff") format("woff");
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Montserrat";
    src: url("assets/fonts/montserrat-bold.woff2") format("woff2"),
         url("assets/fonts/montserrat-bold.woff") format("woff");
    font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- Design-Tokens ---------- */
:root {
    --green:       #adc976;
    --green-light: #b2c87f;
    --green-dark:  #5c7423;
    --olive:       #7e9a45;
    --tan:         #c3ac9c;
    --brown:       #322015;
    --brown-2:     #2f2117;
    --ink:         #322015;
    --text:        #322015;   /* Fließtext ebenfalls schwarz/braun */
    --muted:       #8a8a86;
    --bg:          #fafbfa;
    --white:       #ffffff;
    --maxw:        1300px;   /* Content-Container laut XD (x 310–1610 in 1920) */
    --serif:  "Soria", "Times New Roman", Georgia, serif;
    --sans:   "Montserrat", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Reset / Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-size: clamp(16px, 1.15vw, 19px);
    line-height: 1.8;
    letter-spacing: .04em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { margin: 0; color: var(--ink); font-weight: normal; }
strong { font-weight: 600; color: var(--text); }
::selection { background: var(--green); color: #fff; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 780px; }
.display { font-family: var(--serif); font-weight: normal; letter-spacing: .03em; }

/* ---------- Topbar ---------- */
.topbar { background: var(--brown-2); }
.topbar__inner { display: flex; justify-content: flex-end; align-items: center; min-height: 60px; }
.topbar__icons { display: flex; align-items: center; gap: 30px; }
.topbar__icons a { display: flex; color: #efeae3; opacity: .9; transition: opacity .2s, color .2s; }
.topbar__icons a:hover { opacity: 1; color: var(--green); }
.topbar__icons svg { width: 24px; height: 24px; }

/* ---------- Masthead / Logo + Header-Streifen ---------- */
/* Der Header-Streifen (Skyline) liegt als dekoratives Element hinter
   Logo + Hero und reicht über die volle Designbreite (1920 px). */
.masthead { position: relative; background: var(--bg); z-index: 0; }
/* Header-Streifen: volle Bildschirmbreite (100vw), oben hängend, kürzer */
.masthead::before {
    content: "";
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 100vw; max-width: none;
    height: clamp(170px, 20vw, 300px);
    background: url("assets/img/streifen-header.svg") no-repeat top center / 100% 100%;
    z-index: -1;
    pointer-events: none;
}
.masthead__inner { display: flex; justify-content: center; padding: 58px 24px 0; position: relative; }
.logo img { width: clamp(250px, 22vw, 320px); height: auto; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 210px 0 30px; }
.hero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero__icon { width: clamp(64px, 6vw, 82px); height: auto; margin-bottom: 40px; }
.hero h1 {
    font-size: clamp(2.8rem, 5.6vw, 4.2rem);
    line-height: 1.12;
    color: var(--brown);
    margin-bottom: 8px;
}
.hero__intro {
    max-width: 680px;
    margin: 0 auto;
    color: var(--text);
    line-height: 1.5;
    font-size: clamp(16px, 1.2vw, 19px);
}

/* ---------- Kontakt-Infozeile ---------- */
.info { padding: 64px 0 16px; }
.info__grid {
    display: flex;
    justify-content: center;
    gap: clamp(40px, 7vw, 130px);
    flex-wrap: wrap;
}
.info__col { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.info__ico { color: var(--brown-2); height: 36px; display: flex; align-items: flex-end; justify-content: center; }
.info__ico svg { height: 34px; width: auto; }
.info__lines { display: flex; flex-direction: column; text-align: center; font-size: clamp(16px, 1.2vw, 19px); line-height: 1.7; letter-spacing: .04em; }
.info__lines a:hover { color: var(--green-dark); }

.scrolldown {
    display: flex; justify-content: center;
    margin: 128px auto 0;
    color: var(--brown-2);
    transition: color .2s, transform .2s;
}
.scrolldown:hover { color: var(--green-dark); transform: translateY(3px); }
.scrolldown svg { width: 38px; height: 38px; }

/* ---------- Generische Section-Köpfe ---------- */
.section { padding: clamp(80px, 9vw, 130px) 0; }
.section__head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.section__icon { height: clamp(44px, 4.4vw, 56px); width: auto; margin-bottom: 26px; }
.section__head h2 {
    font-size: clamp(2.4rem, 4.8vw, 3.6rem);
    color: var(--brown);
    text-transform: lowercase;
    line-height: 1.12;
}
.section__sub { margin: -6px 0 0; color: var(--ink); font-weight: 500; line-height: 1.4; font-size: clamp(14px, 1vw, 16px); }
.lead-center { text-align: center; margin: clamp(56px, 6vw, 88px) auto 0; font-size: clamp(16px, 1.2vw, 19px); line-height: 1.5; letter-spacing: .04em; max-width: 580px; }

/* ---------- Sortiment-Kacheln ---------- */
/* Die Produkt-PNGs enthalten den gestreiften Kreis bereits – kein CSS-Kreis! */
.products {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: clamp(14px, 1.8vw, 30px);
    margin-top: clamp(64px, 7vw, 100px);
}
.product { display: flex; flex-direction: column; align-items: center; width: clamp(140px, 14vw, 205px); }
.product__disc { width: 100%; }
.product__disc img {
    width: 100%; height: auto;
    filter: drop-shadow(0 8px 10px rgba(50, 32, 21, .14));
}
.product__label {
    margin-top: 24px;
    font-weight: 600;
    font-size: clamp(15px, 1.15vw, 18px);
    color: var(--brown);
    text-align: center;
}

/* ---------- Geschäftskunden ---------- */
.business { padding-top: clamp(24px, 3vw, 48px); }
.biz {
    display: grid;
    grid-template-columns: 1fr 2fr;   /* Text 33% / Bild 66% */
    gap: clamp(36px, 4vw, 64px);
    align-items: center;
    margin-top: clamp(56px, 6vw, 88px);
}
.biz__text { display: flex; flex-direction: column; justify-content: center; }
.biz__list { margin-bottom: 28px; }
.biz__list li {
    font-family: var(--serif);
    font-size: clamp(1.5rem, 2.6vw, 2.3rem);
    line-height: 1.45;
    color: var(--brown);
}
.biz__text p { font-size: clamp(16px, 1.2vw, 19px); line-height: 1.5; letter-spacing: .04em; }
.biz__media { display: block; }
.biz__media img {
    width: 100%; height: auto;       /* Originalform behalten */
    border-radius: 18px;             /* runde Ecken */
    box-shadow: 0 12px 34px rgba(50, 32, 21, .16);
}
.biz__btn {
    align-self: flex-start;
    margin-top: clamp(26px, 3vw, 38px);
    padding: 11px 30px;
    background: var(--green);
    color: var(--ink);
    font-weight: 600;
    font-size: clamp(13px, .95vw, 15px);
    letter-spacing: .05em;
    border-radius: 999px;            /* länglich, runde Ecken */
    transition: background .2s, color .2s, transform .2s;
}
.biz__btn:hover { background: var(--green-dark); color: #fff; transform: translateY(-2px); }

/* ---------- Instagram + Footer-Streifen ---------- */
.insta {
    position: relative;
    padding: clamp(100px, 12vw, 160px) 0 clamp(80px, 9vw, 120px);
    background: var(--bg);
    text-align: center;
    overflow: hidden;
}
/* Volle Bildschirmbreite. Die SVG-Balken stehen bereits von unten hoch
   (unregelmäßige Oberkanten, gemeinsame Unterkante) – KEIN scaleY-Flip! */
.insta::before {
    content: "";
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 100vw; max-width: none;
    height: clamp(260px, 30vw, 460px);
    background: url("assets/img/streifen-insta.svg") no-repeat bottom center / 100% 100%;
    z-index: 0;
    pointer-events: none;
}
.insta__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.insta__h2 {
    color: var(--green);
    font-size: clamp(3.4rem, 12vw, 8rem);
    line-height: 1;
}
.insta__handle { margin-top: 24px; color: var(--ink); font-size: clamp(16px, 1.2vw, 19px); }
.insta__handle:hover { color: var(--green-dark); }
.insta__icon { margin-top: 30px; color: var(--brown); }
.insta__icon svg { width: 38px; height: 38px; }
.insta__icon:hover { color: var(--green-dark); }

/* ---------- Footer ---------- */
.footer { background: var(--brown-2); color: #d9d3ca; }
.footer__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; padding: 16px 24px; flex-wrap: wrap;
}
.footer__links { display: flex; align-items: center; gap: 14px; font-size: 15px; }
.footer__links a:hover { color: var(--green); }
.footer__sep { opacity: .5; }
.footer__copy { margin: 0; font-size: 15px; opacity: .8; }

/* ---------- Rechtliche Unterseiten (Fließtext) ---------- */
.legal { padding: 48px 0 64px; }
.legal__head { text-align: center; margin-bottom: 30px; }
.legal__head h1 {
    font-family: var(--serif); color: var(--brown);
    font-size: clamp(1.9rem, 4vw, 2.6rem);
}
.legal__body { max-width: none; margin: 0; }
.legal__body p { margin: 0 0 1em; font-size: clamp(15px, 1.1vw, 17px); }
.legal__note {
    max-width: 760px; margin: 0 auto 28px;
    background: #fff4d6; border: 1px solid #e9d9a3;
    color: #7a5b12; border-radius: 6px;
    padding: 14px 18px; font-size: 13.5px;
}

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
    /* Mobil: alles zentriert */
    .info__grid { flex-direction: column; align-items: center; gap: 34px; }
    .info__col { align-items: center; text-align: center; }
    .info__lines { text-align: center; }
    /* Sortiment: eine Kachel pro Zeile, ~40 % größer */
    .products { flex-direction: column; align-items: center; gap: clamp(40px, 9vw, 64px); }
    .product { width: clamp(196px, 56vw, 230px); }
    /* Geschäftskunden gestapelt + zentriert: Text, dann Bild darunter */
    .biz { grid-template-columns: 1fr; gap: 34px; text-align: center; }
    .biz__text { order: 1; align-items: center; }
    .biz__list { margin-bottom: 22px; }
    .biz__list li { text-align: center; font-size: clamp(1.9rem, 7vw, 2.4rem); }
    .biz__text p { margin-left: auto; margin-right: auto; }
    .biz__btn { align-self: center; }
    .biz__media { order: 2; }
    .section__head, .hero__inner { align-items: center; text-align: center; }
    .footer__inner { justify-content: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .scrolldown:hover { transform: none; }
}