/* =============================================================================
   joyfoto.de — basis.css
   Gilt auf JEDER Seite: Schriften, Farben, Reset, Buttons, Kopf, Fuß.
   Seitentyp-Spezifisches liegt in index.css / unterseite.css / ort.css.
   ========================================================================== */

/* --- Lokale Schriften (Dateien in assets/fonts/ ablegen) ------------------- */
@font-face { font-family:"Fraunces"; src:url("../fonts/fraunces-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Fraunces"; src:url("../fonts/fraunces-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Fraunces"; src:url("../fonts/fraunces-600.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Fraunces"; src:url("../fonts/fraunces-400-italic.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:"Montserrat"; src:url("../fonts/montserrat-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Montserrat"; src:url("../fonts/montserrat-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Montserrat"; src:url("../fonts/montserrat-600.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }

/* --- Tokens ---------------------------------------------------------------- */
:root {
    --paper:      #FFFFFF;
    --cream:      #F6EFE7;
    --cream-2:    #EFE4D8;
    --ink:        #1C1611;
    --espresso:   #4A3B32;
    --taupe:      #8A7A6E;
    --gold:       #C49A29;
    --gold-soft:  #D8B558;
    --line:       rgba(28, 22, 17, .12);
    --line-gold:  rgba(196, 154, 41, .35);

    --serif: "Fraunces", Georgia, "Times New Roman", serif;
    --sans:  "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --wrap: 1240px;
    --gutter: clamp(20px, 5vw, 64px);
    --shadow: 0 24px 60px rgba(28, 22, 17, .12);
}

/* --- Basis ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0; background: var(--cream); color: var(--ink); overflow-x: hidden;
    font-family: var(--sans); font-weight: 400; line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-family: var(--serif); font-weight: 400; line-height: 1.08; letter-spacing: -.01em; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 860px; }

.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip-link { position:absolute; left:-999px; top:0; z-index:200; background:var(--ink); color:#fff; padding:10px 16px; }
.skip-link:focus { left:12px; top:12px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* --- Kicker / Labels ------------------------------------------------------- */
.kicker {
    font-family: var(--sans); font-size: .72rem; font-weight: 600;
    letter-spacing: .28em; text-transform: uppercase; color: var(--gold);
    display: inline-flex; align-items: center; gap: .8em;
}
.kicker::before { content:""; width: 28px; height: 1px; background: var(--gold); display: inline-block; }
.kicker--center { justify-content: center; }

/* --- Buttons --------------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .6em;
    min-height: 54px; padding: 0 32px;
    font-family: var(--sans); font-size: .8rem; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase; cursor: pointer;
    border: 1px solid transparent; border-radius: 2px;
    transition: transform .3s cubic-bezier(.2,.7,.2,1), background .3s, color .3s, border-color .3s;
}
.btn--primary { background: var(--gold); color: #fff; }
.btn--primary:hover { background: var(--ink); }
.btn--ink { background: var(--ink); color: var(--cream); }
.btn--ink:hover { background: var(--gold); color:#fff; }
.btn--ghost { border-color: currentColor; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.btn--ghost-light { border-color: rgba(255,255,255,.5); color:#fff; }
.btn--ghost-light:hover { background:#fff; color: var(--ink); }
.btn--wa { background:#25D366; color:#fff; }
.btn--wa:hover { filter: brightness(.94); }
.btn--sm { min-height: 44px; padding: 0 22px; }
.btn-row { display:flex; flex-wrap:wrap; gap:14px; }

/* --- Bild-Platzhalter ------------------------------------------------------ */
.ph {
    position: relative; overflow: hidden; background:
        repeating-linear-gradient(45deg, rgba(196,154,41,.05) 0 14px, rgba(196,154,41,.10) 14px 28px),
        linear-gradient(135deg, var(--cream-2), var(--cream));
    border: 1px dashed var(--line-gold);
    display: grid; place-items: center;
}
.ph::after {
    content: attr(data-label);
    font-family: var(--sans); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
    color: var(--taupe); padding: 8px 14px; border: 1px solid var(--line-gold); background: rgba(255,255,255,.6);
}

/* =============================================================================
   NAV
   ========================================================================== */
.nav {
    position: fixed; inset: 0 0 auto 0; z-index: 100;
    transition: background .4s ease, box-shadow .4s ease, border-color .4s;
    border-bottom: 1px solid transparent;
}
.nav__inner { display:flex; align-items:center; justify-content:space-between; gap:28px; min-height:90px; }
.nav__brand { flex:0 0 auto; display:flex; align-items:center; padding:10px 0; }
.nav__cta { color:#fff; flex:0 0 auto; }
.nav__links { display:flex; gap: 4px; list-style:none; margin:0; padding:0; }
.nav__links a {
    display:block; padding:10px 14px; font-size:.76rem; font-weight:600;
    letter-spacing:.14em; text-transform:uppercase; color: rgba(255,255,255,.85); transition: color .3s;
}
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--gold-soft); }

/* Zustand nach dem Scrollen: heller Balken */
.nav.is-solid { background: rgba(246,239,231,.92); backdrop-filter: blur(10px); border-color: var(--line); }
.nav.is-solid .nav__links a { color: var(--espresso); }
.nav.is-solid .nav__links a:hover, .nav.is-solid .nav__links a[aria-current="page"] { color: var(--gold); }

.nav__toggle { display:none; width:46px; height:46px; border:1px solid rgba(255,255,255,.4); border-radius:2px; background:transparent; position:relative; cursor:pointer; flex:0 0 auto; }
.nav.is-solid .nav__toggle { border-color: var(--line); }
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
    content:""; position:absolute; left:50%; top:50%; width:20px; height:1.5px; background:#fff; transform:translate(-50%,-50%);
}
.nav.is-solid .nav__toggle span, .nav.is-solid .nav__toggle span::before, .nav.is-solid .nav__toggle span::after { background: var(--ink); }
.nav__toggle span::before { top:-6px; } .nav__toggle span::after { top:6px; }

/* Logo-Bild in der Leiste */
.nav__brand img { height: 46px; width: auto; display:block; flex:0 0 auto; }
.nav:not(.is-solid) .nav__brand img { filter: drop-shadow(0 1px 6px rgba(0,0,0,.45)); }

/* =============================================================================
   SEKTIONS-GERÜST (auf allen Seiten nutzbar)
   ========================================================================== */
.section { padding-block: clamp(72px, 11vw, 150px); }
.section--paper { background: var(--paper); }
.section--cream2 { background: var(--cream-2); }
.section--ink { background: var(--ink); color: var(--cream); }
.section--ink h2, .section--ink h3 { color: var(--cream); }

.head { max-width: 760px; }
.head--center { margin-inline:auto; text-align:center; }
.head__title { font-size: clamp(2rem, 5vw, 3.4rem); margin:.35em 0 0; }
.head__title em { font-style: italic; color: var(--gold); }
.rule { height:1px; background: var(--line-gold); border:0; margin: 0; }

/* --- FAQ (auf mehreren Seitentypen nutzbar) -------------------------------- */
.faq { border-top:1px solid var(--line); }
.faq__item { border-bottom:1px solid var(--line); }
.faq__q { display:flex; justify-content:space-between; align-items:center; gap:20px; cursor:pointer; list-style:none;
    padding: 26px 4px; font-family:var(--serif); font-size:1.25rem; color:var(--ink); }
.faq__q::-webkit-details-marker { display:none; }
.faq__q::after { content:"+"; color:var(--gold); font-size:1.5rem; font-weight:300; transition: transform .3s; }
.faq__item[open] .faq__q::after { transform: rotate(45deg); }
.faq__a { padding: 0 4px 28px; color: var(--espresso); max-width: 70ch; }

/* =============================================================================
   FOOTER  (ohne Postadresse; unten nur © Jahr Joyfoto)
   ========================================================================== */
.foot { background: var(--ink); color: rgba(246,239,231,.8); padding-block: clamp(56px,8vw,84px) 0; }
.foot__grid { display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.foot__brand { display:inline-block; }
.foot__brand img { height: 56px; width:auto; display:block; }
.foot__tag { margin-top: 1rem; max-width: 34ch; font-size:.9rem; color: rgba(246,239,231,.62); }
.foot__head { font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:1.1rem; }
.foot__links { list-style:none; margin:0; padding:0; display:grid; gap:.6rem; font-size:.9rem; }
.foot__links a { color: rgba(246,239,231,.78); transition: color .3s; }
.foot__links a:hover { color: var(--gold-soft); }
.foot__contact { font-size:.9rem; display:grid; gap:.5rem; }
.foot__contact a { color: rgba(246,239,231,.78); }
.foot__contact a:hover { color: var(--gold-soft); }
.foot__bottom { margin-top: clamp(40px,6vw,64px); border-top:1px solid rgba(255,255,255,.1); padding-block:24px;
    text-align:center; font-size:.78rem; letter-spacing:.06em; color: rgba(246,239,231,.55); }

/* --- Scroll-Reveal (nur wenn JS aktiv) ------------------------------------- */
.js .reveal { opacity:0; transform: translateY(40px);
    transition: opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; }
.js .reveal--left  { transform: translateX(-48px); }   /* fliegt von links herein */
.js .reveal--right { transform: translateX(48px); }    /* fliegt von rechts herein */
.js .reveal--d1 { transition-delay: .12s; }
.js .reveal--d2 { transition-delay: .24s; }
.js .reveal--d3 { transition-delay: .36s; }
.js .reveal.is-in { opacity:1; transform:none; }

/* =============================================================================
   Responsiv (Basis: Kopf + Fuß)
   ========================================================================== */
@media (max-width: 900px) {
    .nav__cta { display:none; }
    .nav__toggle { display:block; }
    .nav__links { position:fixed; inset:90px 0 auto 0; flex-direction:column; gap:0;
        background: var(--cream); border-bottom:1px solid var(--line);
        max-height:0; overflow:hidden; transition:max-height .4s ease; }
    .nav__links.is-open { max-height:80vh; }
    .nav__links a { color: var(--espresso); padding:16px var(--gutter); border-top:1px solid var(--line); }
    .nav.is-solid .nav__links a { color: var(--espresso); }
    .foot__grid { grid-template-columns:1fr 1fr; }
}
@media (max-width: 540px) {
    .foot__grid { grid-template-columns:1fr; gap:28px; }
    .nav__brand img { height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
    * { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
    .js .reveal { opacity:1; transform:none; }
}

/* =============================================================================
   Schnellkontakt-Buttons (schwebend, auf jeder Seite)
   PC: unten rechts als Säule · Handy: unten mittig nebeneinander
   ========================================================================== */
.fab { position: fixed; right: 24px; bottom: 24px; z-index: 90;
    display: flex; flex-direction: column; gap: 12px; }
.fab__btn { width: 56px; height: 56px; border-radius: 50%;
    display: grid; place-items: center; color: #fff;
    box-shadow: 0 8px 22px rgba(28,22,17,.25);
    transition: transform .25s ease, box-shadow .25s ease; }
.fab__btn:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(28,22,17,.3); }
.fab__btn svg { width: 26px; height: 26px; fill: currentColor; }
.fab__wa    { background: #25D366; }
.fab__phone { background: var(--gold); }
.fab__mail  { background: #BC6B3B; } /* Terrakotta – hebt sich ab, harmoniert mit Gold */
.fab__top   { display: none; border-radius: 12px; background: var(--cream);
              border: 1px solid var(--line-gold); box-shadow: 0 8px 22px rgba(28,22,17,.16); cursor: pointer; }
.fab__top.is-visible { display: grid; }
.fab__top svg { fill: var(--ink); }

@media (max-width: 700px) {
    .fab { right: 0; left: 0; bottom: 16px; flex-direction: row; justify-content: center; gap: 16px; }
}
@media (prefers-reduced-motion: reduce) { .fab__btn { transition: none; } }

/* --- Nav auf Seiten ohne Hero-Bild (immer heller, lesbarer Balken) --------- */
body.no-hero .nav { background: rgba(246,239,231,.92); backdrop-filter: blur(10px); border-color: var(--line); }
body.no-hero .nav__links a { color: var(--espresso); }
body.no-hero .nav__toggle { border-color: var(--line); }
body.no-hero .nav__toggle span,
body.no-hero .nav__toggle span::before,
body.no-hero .nav__toggle span::after { background: var(--ink); }