/* ========================================================== IN FRIEDEN KOMMEN style.css ========================================================== */ *{ margin:0; padding:0; box-sizing:border-box; } /* ========================================================== GRUNDEINSTELLUNGEN ========================================================== */ body{ background:#f6f1e8; color:#444; font-family:'Cormorant Garamond', serif; line-height:1.7; } /* ========================================================== TITELBILD ========================================================== */ .hero-image{ display:block; width:100%; height:auto; } /* ========================================================== NAVIGATION ========================================================== */ .main-nav{ background:#f6f1e8; border-bottom:1px solid #d8cbb8; padding:10px 20px; text-align:center; } .main-nav a{ display:inline-block; margin:0 12px; padding:2px 0; font-family:'Cinzel', serif; font-size:13px; font-weight:500; text-transform:uppercase; letter-spacing:1px; color:#4b4339; text-decoration:none; transition:color .25s ease; } .main-nav a:hover{ color:#9b7c51; } /* ========================================================== INHALT ========================================================== */ main{ max-width:760px; margin:30px auto 20px auto; padding:0 25px; } main p{ font-size:17px; line-height:1.75; margin-bottom:18px; text-align:left; } main .intro{ max-width:680px; margin:30px auto 24px auto; text-align:center; font-size:21px; font-weight:500; line-height:1.60; } /* ========================================================== THEMEN ========================================================== */ .themen{ list-style:none; margin:30px auto; padding:0; max-width:680px; } .themen li{ position:relative; padding-left:28px; margin-bottom:14px; font-size:17px; line-height:1.55; text-align:left; } .themen li::before{ content:"❖"; position:absolute; left:0; top:1px; color:#9b7c51; font-size:14px; } /* ========================================================== BILDER ========================================================== */ main img{ display:block; width:100%; height:auto; margin:30px auto; } /* ========================================================== FOOTER ========================================================== */ footer{ margin-top:70px; padding:28px 20px; background:#ece6db; color:#777; text-align:center; font-size:12px; } /* ========================================================== RESPONSIVE ========================================================== */ @media (max-width:768px){ .main-nav{ padding:12px; } .main-nav a{ display:block; margin:8px 0; font-size:13px; } main{ margin:30px auto 20px auto; padding:0 20px; } main p{ font-size:16px; line-height:1.7; margin-bottom:16px; } main .intro{ font-size:17px; line-height:1.6; margin:25px auto 20px auto; } .themen{ margin:25px auto; } .themen li{ font-size:16px; line-height:1.5; margin-bottom:12px; } main img{ margin:25px auto; } } /* ========================================================== BLOG-UNTERSEITE Aktivieren mit: ========================================================== */ :root{ --bg:#f7f4ee; --paper:#fffdf8; --text:#24211d; --muted:#6e675e; --line:#ded6ca; --accent:#74644f; } html{ scroll-behavior:smooth; } body.blog-page{ margin:0; background:var(--bg); color:var(--text); font-size:clamp(17px, 1.6vw, 20px); line-height:1.65; } body.blog-page main{ width:100%; max-width:760px; margin:30px auto 20px; padding:0 25px; background:transparent; box-shadow:none; } body.blog-page main .intro{ max-width:760px; margin:.2em auto 2rem; text-align:center; font-size:clamp(1.15rem, 2vw, 1.45rem); font-weight:500; line-height:1.6; color:var(--text); } body.blog-page main h1{ margin:2.4em 0 .7em; font-size:clamp(1.7rem, 4vw, 3rem); line-height:1.15; color:#2c2823; letter-spacing:-.02em; font-weight:500; } body.blog-page main h1:first-child, body.blog-page main .intro + h1{ margin-top:.2em; } body.blog-page main p{ margin:0 0 1.2em; font-size:inherit; line-height:inherit; text-align:left; } body.blog-page main a{ color:#5f4b32; text-decoration-thickness:.08em; text-underline-offset:.18em; } body.blog-page .gallery{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap:1rem; margin:1.5rem 0 2rem; } body.blog-page main figure{ margin:1.5rem 0 2rem; } body.blog-page .gallery figure{ margin:0; } body.blog-page main img{ display:block; width:100%; height:auto; max-height:80vh; margin:0; object-fit:contain; border-radius:10px; background:#eee8df; box-shadow:0 4px 18px rgba(0,0,0,.08); } body.blog-page main figcaption{ margin-top:.45rem; color:var(--muted); font-size:.9em; text-align:center; } body.blog-page main hr{ border:0; border-top:1px solid var(--line); margin:2.5rem 0; } @media (max-width:640px){ body.blog-page main{ margin:30px auto 20px; padding:0 20px; } body.blog-page .gallery{ grid-template-columns:1fr; gap:.8rem; } body.blog-page main img{ margin:0; border-radius:6px; } body.blog-page main .intro{ margin:0 auto 1.5rem; font-size:17px; line-height:1.6; } }