@font-face{font-family:"Playfair Display";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/playfair-display-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/playfair-display-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/dm-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/dm-sans-latin-500-normal.woff2) format("woff2")}
/* Liliana Home & Living — warm, timeless starter theme */
:root {
  --paper: #fbf9f5; --sand: #f0e9df; --ink: #514438; --muted: #74675a;
  --line: #e5dcd0; --accent: #9b826a; --serif: "Playfair Display", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
  --bg: var(--paper); --deep: var(--ink); --stone: var(--sand); --sage: var(--accent);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); line-height: 1.75; }
a { color: inherit; }
.site-header { max-width: 1240px; margin: auto; padding: 22px 5vw; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; flex-direction: column; text-decoration: none; line-height: 1.2; letter-spacing: .16em; font-family: var(--serif); font-size: 1.35rem; }
.brand small { margin-top: 7px; font-family: var(--sans); font-size: .62rem; letter-spacing: .2em; color: var(--accent); }
.main-nav { display: flex; gap: clamp(14px, 3vw, 36px); }
.main-nav a, .site-footer nav a { font-size: .85rem; text-decoration: none; }
.main-nav a:hover, .site-footer a:hover { text-decoration: underline; text-underline-offset: 5px; }
.menu-toggle { display: none; background: transparent; border: 1px solid var(--line); padding: 8px 12px; color: var(--ink); }
.hero-image { display: block; width: 100%; height: min(65vw, 620px); min-height: 330px; object-fit: cover; }
.hero-copy { max-width: 760px; margin: auto; padding: 60px 24px 76px; text-align: center; }
.eyebrow { font-size: .7rem; letter-spacing: .19em; color: var(--accent); text-transform: uppercase; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.22; }
h1 { font-size: clamp(2.5rem, 5vw, 4.6rem); margin: 14px 0 20px; }
h2 { font-size: clamp(2rem, 3.4vw, 3rem); margin: 10px 0 22px; }
h3 { font-size: 1.55rem; margin: 18px 0 4px; }
.hero-copy > p:not(.eyebrow), .section-heading > p:last-child { max-width: 610px; margin: 0 auto 26px; color: var(--muted); }
.button { display: inline-block; border: 1px solid var(--accent); padding: 12px 22px; text-decoration: none; text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; transition: background .2s ease; }
.button:hover { background: var(--sand); }
.section-wrap { max-width: 1180px; margin: auto; padding: 70px 5vw; }
.intro { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(30px, 7vw, 90px); }
.intro-image img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.intro-copy p:not(.eyebrow) { color: var(--muted); }
.section-tint { background: var(--sand); padding: 70px 5vw 76px; }
.section-heading { text-align: center; margin: 0 auto 36px; }
.category-grid { max-width: 1180px; margin: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.category-card { text-decoration: none; display: block; }
.category-card img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: opacity .2s; }
.category-card:hover img { opacity: .88; }
.category-card h3 { font-size: 1.35rem; margin: 14px 0 2px; }
.category-card p { color: var(--muted); margin: 0 0 8px; font-size: .9rem; }
.category-card span { font-size: .75rem; }
.philosophy { text-align: center; max-width: 940px; }
.philosophy > p:not(.eyebrow) { max-width: 690px; margin: 0 auto 32px; color: var(--muted); }
.philosophy img { width: 100%; max-height: 430px; object-fit: cover; display: block; }
.pinterest { background: #e9dfd2; text-align: center; padding: 58px 24px 64px; }
.pinterest p { max-width: 600px; margin: 0 auto 25px; }
.button-light:hover { background: rgba(255,255,255,.35); }
.site-footer { background: var(--ink); color: #f8f3ec; text-align: center; padding: 42px 20px 30px; }
.footer-brand { font-family: var(--serif); text-decoration: none; letter-spacing: .12em; }
.site-footer p, .site-footer small { color: #e5d9ca; font-size: .78rem; }
.site-footer nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 18px; margin: 20px 0; }
@media (max-width: 850px) {
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .intro { gap: 28px; }
}
@media (max-width: 600px) {
  .site-header { flex-wrap: wrap; }
  .menu-toggle { display: block; }
  .main-nav { display: none; width: 100%; flex-direction: column; gap: 10px; padding: 12px 0 4px; }
  .main-nav.is-open { display: flex; }
  .hero-image { min-height: 300px; height: 72vw; }
  .hero-copy { padding: 42px 22px 52px; }
  .intro { grid-template-columns: 1fr; padding-top: 42px; padding-bottom: 48px; }
  .intro-image img { aspect-ratio: 5 / 4; }
  .section-tint { padding: 48px 20px; }
  .category-grid { gap: 20px 14px; }
  .category-card h3 { font-size: 1.15rem; }
  .philosophy { padding-top: 48px; padding-bottom: 48px; }
}

/* Kompatibilität: Unterseiten, Karten, Formular */
.button,.btn{display:inline-block;border:1px solid var(--accent);padding:12px 22px;text-decoration:none;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;transition:background .2s ease;background:transparent;color:var(--ink);border-radius:0;margin-top:1rem;font-family:var(--sans)}
.btn:hover{background:var(--sand);opacity:1}
a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.wrap{max-width:68rem;margin:0 auto;padding:0 5vw}
.site-footer .fnote{max-width:46rem;margin:0 auto 18px;line-height:1.5}
.site-footer nav a{color:#f8f3ec}
.img-credit,.credit{font-size:.78rem;line-height:1.4;color:var(--muted);margin:.4rem 0 0}
.img-credit a,.credit a{color:var(--muted)}
.hero-credit{max-width:1240px;margin:0 auto;padding:0 5vw}
.cat-item .credit{margin:.4rem 0 .8rem}
.cat-img{display:block}
.cat-img img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;transition:opacity .2s}
.cat-img:hover img{opacity:.88}
.cat-item .category-card h3{margin-top:0}
.intro-image .credit{margin-top:.5rem}
.intro-copy .small{font-size:.85rem;line-height:1.5}
.latest{padding-top:0}
.latest h2{text-align:center}
.latest .cards{margin-top:0;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.latest .more{text-align:center;margin-top:1.5rem}
.philosophy figure{margin:0}
.philosophy .credit{text-align:left}
.pinterest .button{border-color:var(--accent)}
.blog-hero{text-align:center}
.blog-hero h2{font-size:clamp(1.6rem,3.6vw,2.4rem)}
.blog-hero p{color:var(--muted)}

.arch{aspect-ratio:4/3;width:100%;border-radius:2px;overflow:hidden;background:var(--stone)}
.arch svg,.arch img{display:block;width:100%;height:100%;object-fit:cover}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.notice{border-left:3px solid #E6DCCD;padding:.25rem 0 .25rem 1rem;color:var(--muted);max-width:40rem;margin:1rem 0 3rem;font-size:.85rem;line-height:1.5}
main.page{padding:3.5rem 0;max-width:42rem}
main.page h1{font-size:clamp(1.6rem,3.5vw,2.2rem)}
.cats{list-style:none;padding:0;margin:2rem 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:1rem}
.cats li{border:1px solid var(--line);padding:1.25rem}
.todo{background:var(--stone);padding:.1rem .4rem;border-radius:2px}
form{display:grid;gap:1.1rem;margin-top:1.5rem}
label{display:grid;gap:.35rem;color:var(--deep)}
input[type=text],input[type=email],textarea{font:inherit;color:var(--ink);background:var(--stone);border:1px solid var(--line);border-radius:2px;padding:.7rem .8rem;width:100%}
textarea{min-height:9rem;resize:vertical}
label.check{display:flex;gap:.6rem;align-items:flex-start;color:var(--muted);font-size:.95rem}
label.check input{margin-top:.35rem}
.hp{position:absolute;left:-9999px}
button.btn{border:0;font:inherit;cursor:pointer;justify-self:start}
.crumb{margin:0 0 1rem;color:var(--muted);font-size:.9rem}
.posts{list-style:none;padding:0;margin:2.5rem 0 0;display:grid;gap:1.5rem}
.posts li{border-top:1px solid var(--line);padding-top:1.25rem}
.posts h2{font-size:1.4rem;margin:0 0 .3rem}
.posts h2 a{text-decoration:none}
.posts h2 a:hover{text-decoration:underline}
.posts p{margin:0;color:var(--muted)}
.post h2{font-size:1.4rem;margin:2rem 0 .4rem}
.imgph{aspect-ratio:3/2;background:var(--stone);display:flex;align-items:center;justify-content:center;color:var(--muted);border-radius:2px;margin:1.5rem 0}
.prod{background:var(--stone);padding:1rem 1.25rem;border-radius:2px;margin:2rem 0}
.prod h2{margin-top:0}
.cards{list-style:none;padding:0;margin:2.5rem 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:2rem 1.5rem}
.card{display:block;text-decoration:none}
.card .imgph{aspect-ratio:4/3;margin:0 0 .75rem}
.card .ct{font-family:var(--serif);font-size:1.2rem;line-height:1.3;color:var(--deep)}
.card:hover .ct{text-decoration:underline}
.lead{font-size:1.3rem;line-height:1.55}
.txt p{font-size:1.3rem;line-height:1.55}
.cat{margin-top:2.5rem}
.cat h2{font-size:1.5rem;margin:0 0 1rem}
.cat h2 a{text-decoration:none}
.cat h2 a:hover{text-decoration:underline}
.cat .cards{margin-top:0;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr))}
.cat .ct{font-size:1.05rem}
.more{margin:1rem 0 0;font-size:.95rem}
.imgph.wide{aspect-ratio:16/7}
figure.photo{margin:0}
figure.photo figcaption{font-size:.85rem;color:var(--muted);margin-top:.5rem}
figure.photo figcaption a{color:var(--muted)}
figure.photo.wide{margin-top:2rem}
figure.photo.wide .arch{aspect-ratio:2/1}
figure.photo.wide .arch img{object-position:center 55%}
.new{margin-top:3rem}
.new h2{font-size:1.5rem;margin:0 0 1rem}
.new .cards{margin-top:0;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.new .more{text-align:center;margin-top:1.5rem}
.imgph{overflow:hidden}
.imgph img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 60%}
.arch.art{aspect-ratio:3/2;margin:1.5rem 0 0}
.arch.art img{object-position:center 60%}
figure.photo.port{max-width:30rem;margin:1.5rem auto 0}
figure.photo.port .arch.art{aspect-ratio:5/6;margin:0}
figure.photo.port .arch.art img{object-position:center 45%}
figure.photo.band .arch.art{aspect-ratio:auto}
figure.photo.band .arch.art img{height:auto}
.credit{font-size:.78rem;line-height:1.4;color:var(--muted);margin:.4rem 0 0}
.credit a{color:var(--muted)}
.blog-hero{padding:0 0 1rem}
main.page .blog-hero{max-width:none}
.blog-hero h2{font-size:clamp(1.6rem,3.6vw,2.4rem)}
button.btn{border:1px solid var(--accent)}

.philosophy{background:#e9dfd2;box-shadow:0 0 0 100vmax #e9dfd2;clip-path:inset(0 -100vmax)}
.pinterest{background:var(--sand)}

#ueber-mich,.latest{background:var(--sand);box-shadow:0 0 0 100vmax var(--sand);clip-path:inset(0 -100vmax)}
#wohnwelten.categories{background:var(--paper)}
.latest{padding-top:70px}

.philosophy{background:var(--paper);box-shadow:0 0 0 100vmax var(--paper)}

#ueber-mich{display:block}
#ueber-mich .intro-image img{aspect-ratio:2/1;width:100%}
#ueber-mich .intro-copy{max-width:44rem;margin:2.5rem auto 0}

#ueber-mich .intro-image img{aspect-ratio:3/1}
#ueber-mich .intro-copy h2{font-size:clamp(1.25rem,3.4vw,2.3rem);white-space:nowrap}
@media (max-width:640px){#ueber-mich .intro-image img{aspect-ratio:3/2}#ueber-mich .intro-copy h2{white-space:normal}}

#ueber-mich .intro-image img{height:auto;object-fit:cover;object-position:center 60%}

#ueber-mich .intro-image img{object-position:center 30%}

.card .ct{font-weight:500;font-size:1.3rem}
.cat .ct{font-weight:500;font-size:1.15rem}
.posts h2{font-weight:500}

.latest .card .ct{font-family:var(--sans);font-weight:500;font-size:1.1rem;line-height:1.4}

.category-card h3{font-family:var(--sans);font-weight:500;font-size:1.1rem;line-height:1.4}

.brand{font-weight:500;font-size:1.5rem;letter-spacing:.08em}
.footer-brand{font-weight:500;letter-spacing:.08em}
@media (max-width:420px){.brand{font-size:1.2rem}}

.latest .card .ct{display:block;margin-top:14px}

main.page .blog-hero{margin-top:-3.5rem;padding:4.5rem 0 3.5rem;background:var(--sand);box-shadow:0 0 0 100vmax var(--sand);clip-path:inset(0 -100vmax);margin-bottom:1rem}

.legal h2{font-size:1.5rem;margin:2.5rem 0 .6rem}
.legal h3{font-size:1.1rem;font-family:var(--sans);font-weight:500;margin:1.5rem 0 .4rem}
.legal p{font-size:1rem;line-height:1.7}

.formmsg{margin-top:1.5rem;padding:1rem 1.25rem;background:var(--sand);outline:none}
#fehler{border-left:3px solid var(--accent)}
[hidden]{display:none!important}

/* Bildhinweise: klein und dezent grau */
.credit,.img-credit,figure.photo figcaption{font-size:.7rem;color:#7d7a75}
.credit a,.img-credit a,figure.photo figcaption a{color:#7d7a75}

/* Einwilligungsverwaltung */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:0 1rem 1rem;pointer-events:none}
.consent-inner{pointer-events:auto;max-width:46rem;margin:0 auto;background:var(--paper);border:1px solid var(--line);box-shadow:0 8px 30px rgba(81,68,56,.18);padding:1.25rem 1.5rem;max-height:90vh;overflow:auto}
.consent h2{font-size:1.25rem;margin:0 0 .5rem}
.consent p{margin:0 0 1rem;font-size:.88rem;line-height:1.55;color:var(--ink)}
.consent a{color:var(--ink)}
.consent-detail{margin:0 0 1rem;border-top:1px solid var(--line)}
.consent-row{display:flex;gap:.75rem;align-items:flex-start;padding:.7rem 0;border-bottom:1px solid var(--line);font-size:.88rem;cursor:pointer}
.consent-row input{margin-top:.25rem;accent-color:var(--accent)}
.consent-row small{display:block;color:var(--muted);font-size:.8rem;line-height:1.45;margin-top:.1rem}
.consent-actions{display:flex;gap:.6rem;flex-wrap:wrap}
.consent-actions .button{flex:1 1 9rem;text-align:center;cursor:pointer;background:transparent;color:var(--ink);font-family:inherit}
.consent-actions .button:hover{background:var(--sand)}
.site-footer button.linklike,.site-footer a[data-cookie-settings]{cursor:pointer}
@media (max-width:640px){.consent{padding:0 .6rem calc(.6rem + env(safe-area-inset-bottom))}.consent-inner{padding:1rem}}

/* KI-Kennzeichnung im Bild */
.arch,.cat-img,.intro-image,.philosophy figure{position:relative}
.ki-label{position:absolute;right:.5rem;bottom:.5rem;z-index:2;font-size:.65rem;line-height:1.3;color:rgba(255,255,255,.92);background:rgba(60,50,42,.38);padding:.15rem .5rem;border-radius:999px;letter-spacing:.01em;pointer-events:none}
.cat-item .category-card{display:block;margin-top:1rem}

