/*
Theme Name: Pension Lorenz
Theme URI: https://active.webdevmedia.de/
Author: WebDevMedia
Description: Ein ruhiger, zeitgemäßer Auftritt für die Pension Lorenz in Königs Wusterhausen.
Version: 1.0.0
Text Domain: pension-lorenz
*/

:root { --ink:#173a35; --pine:#28534a; --moss:#687a51; --paper:#f6f0e6; --paper-deep:#e9dfcf; --sand:#cda976; --terracotta:#9a4c37; --line:#cfbfa8; --shadow:0 20px 60px rgba(31,42,35,.15); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Arial,Helvetica,sans-serif; font-size:17px; line-height:1.65; }
body:before { position:fixed; z-index:-1; inset:0; opacity:.17; content:""; background-image:radial-gradient(rgba(54,37,21,.32) .55px,transparent .7px); background-size:5px 5px; pointer-events:none; }
a { color:inherit; text-underline-offset:3px; }
img { max-width:100%; height:auto; display:block; }
.screen-reader-text { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.site-header { position:relative; z-index:5; background:rgba(246,240,230,.96); border-bottom:1px solid var(--line); }
.masthead { width:min(1180px,calc(100% - 40px)); margin:auto; min-height:98px; display:flex; align-items:center; justify-content:space-between; gap:30px; }
.brand { display:flex; align-items:center; gap:13px; text-decoration:none; }
.brand-mark { display:grid; place-items:center; width:55px; height:55px; border:2px solid var(--terracotta); border-radius:50%; color:var(--terracotta); font:700 23px/1 Georgia,serif; transform:rotate(-8deg); }
.brand-copy { display:grid; line-height:1.05; }
.brand-copy small { color:var(--moss); font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.brand-copy strong { font:700 28px/1.1 Georgia,serif; letter-spacing:.02em; }
.header-contact { display:flex; align-items:center; gap:22px; font-size:14px; }
.header-contact span { display:block; color:var(--moss); font-size:11px; font-weight:bold; letter-spacing:.1em; text-transform:uppercase; }
.header-contact a { font-weight:700; text-decoration:none; }
.nav-wrap { border-top:1px solid rgba(207,191,168,.7); }
.site-nav { width:min(1180px,calc(100% - 40px)); margin:auto; display:flex; align-items:center; gap:4px; min-height:52px; }
.site-nav a { border-radius:4px; padding:8px 10px; color:#24453e; font-size:14px; font-weight:700; text-decoration:none; }
.site-nav a:hover,.site-nav a[aria-current="page"] { color:#fff; background:var(--pine); }
.menu-toggle { display:none; border:0; background:none; color:var(--ink); font:700 15px Arial,sans-serif; }
.hero { position:relative; min-height:620px; display:grid; align-items:end; overflow:hidden; color:#fff; background:#193e38; }
.hero:before { position:absolute; inset:0; content:""; background:linear-gradient(90deg,rgba(15,41,36,.9) 0%,rgba(15,41,36,.45) 47%,rgba(15,41,36,.08) 100%),linear-gradient(0deg,rgba(10,30,25,.55),transparent 47%),url('assets/images/hero.jpg') center/cover; filter:saturate(.76); }
.hero-content { position:relative; width:min(1180px,calc(100% - 40px)); margin:0 auto; padding:70px 0 76px; }
.eyebrow { display:inline-flex; align-items:center; gap:9px; margin:0 0 17px; color:#ead3ac; font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.eyebrow:before { width:31px; height:1px; background:currentColor; content:""; }
h1,h2,h3 { margin:0; color:inherit; font-family:Georgia,'Times New Roman',serif; line-height:1.08; }
.hero h1 { max-width:710px; font-size:clamp(46px,7vw,87px); text-shadow:0 2px 16px rgba(0,0,0,.25); }
.hero .lead { max-width:595px; margin:23px 0 32px; font-size:clamp(18px,2.2vw,24px); }
.button-row { display:flex; flex-wrap:wrap; gap:12px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:11px 19px; border:1px solid transparent; border-radius:2px; background:var(--terracotta); color:#fff; font-size:14px; font-weight:800; letter-spacing:.04em; text-decoration:none; text-transform:uppercase; }
.button:hover { background:#763525; }
.button--line { border-color:rgba(255,255,255,.7); background:transparent; }
.button--line:hover { background:#fff; color:var(--ink); }
.stamp { position:absolute; right:3.5%; bottom:48px; display:grid; place-items:center; width:130px; height:130px; border:2px solid #eed8b5; border-radius:50%; color:#eed8b5; font:700 17px/1.1 Georgia,serif; letter-spacing:.08em; text-align:center; text-transform:uppercase; transform:rotate(9deg); }
.page-intro { padding:82px 0 52px; background:linear-gradient(180deg,#f8f3ea,transparent); }
.shell { width:min(1180px,calc(100% - 40px)); margin:auto; }
.section-kicker { margin:0 0 9px; color:var(--terracotta); font-size:12px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
.page-intro h1,.content-heading { max-width:900px; font-size:clamp(38px,5vw,64px); }
.page-intro .intro-copy { max-width:760px; margin:21px 0 0; color:#315149; font-size:20px; }
.section { padding:68px 0; }
.section--paper { background:rgba(255,255,255,.34); border-block:1px solid rgba(207,191,168,.6); }
.section--pine { background:var(--pine); color:#fff; }
.split { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(32px,7vw,96px); }
.split h2 { font-size:clamp(33px,4.3vw,54px); }
.split p { max-width:590px; }
.photo-frame { position:relative; padding:14px; background:#fbf6ee; box-shadow:var(--shadow); transform:rotate(-1.4deg); }
.photo-frame:after { position:absolute; right:18px; bottom:17px; width:78px; height:24px; background:rgba(205,169,118,.64); content:""; transform:rotate(-5deg); }
.photo-frame img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.facts { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.fact { min-height:190px; padding:25px; border:1px solid var(--line); border-radius:3px; background:rgba(255,255,255,.46); }
.fact strong { display:block; margin-bottom:8px; color:var(--terracotta); font:700 45px/1 Georgia,serif; }
.fact span { display:block; font-size:14px; font-weight:bold; line-height:1.35; text-transform:uppercase; }
.price-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:31px; }
.price-card { display:grid; grid-template-columns:118px 1fr; gap:20px; padding:19px; border:1px solid var(--line); background:#fffaf2; }
.price-card img { width:118px; height:118px; object-fit:cover; }
.price-card h3 { font-size:27px; }
.price { color:var(--terracotta); font:700 30px/1.15 Georgia,serif; }
.note { margin-top:24px; color:#4e655e; font-size:14px; }
.gallery { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; }
.gallery a { position:relative; display:block; overflow:hidden; background:#d7c6af; aspect-ratio:1.13; }
.gallery img { width:100%; height:100%; object-fit:cover; transition:transform .35s ease,filter .35s ease; }
.gallery a:hover img { filter:saturate(1.1) contrast(1.03); transform:scale(1.045); }
.gallery a:after { position:absolute; right:9px; bottom:9px; padding:3px 7px; background:rgba(23,58,53,.79); color:#fff; content:'ansehen'; font-size:11px; font-weight:bold; letter-spacing:.07em; text-transform:uppercase; opacity:0; transition:opacity .2s; }
.gallery a:hover:after { opacity:1; }
.callout { position:relative; padding:42px; border-left:5px solid var(--sand); background:#f0e4d2; }
.callout h2 { font-size:37px; }
.callout p { margin-bottom:0; }
.contact-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:34px; }
.contact-card { padding:38px; background:var(--pine); color:#fff; box-shadow:var(--shadow); }
.contact-card h2 { font-size:42px; }
.contact-card a { color:#fff0d9; font-size:19px; font-weight:bold; }
.contact-card address { margin:22px 0; font-style:normal; }
.contact-side { padding:34px; border:1px solid var(--line); background:rgba(255,255,255,.42); }
.route-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:30px; align-items:start; }
.route-grid img { box-shadow:var(--shadow); }
.prose { max-width:860px; }
.prose h2 { margin-top:50px; font-size:39px; }
.prose h3 { margin-top:32px; font-size:26px; }
.prose ul { padding-left:20px; }
.art-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.art-grid a { display:block; padding:10px; background:#fffaf2; box-shadow:0 6px 18px rgba(31,42,35,.11); transform:rotate(var(--tilt,0deg)); }
.art-grid img { width:100%; aspect-ratio:4/3; object-fit:cover; filter:sepia(.22) contrast(.94); }
.art-grid small { display:block; margin-top:7px; color:#53655d; font:italic 14px Georgia,serif; }
.site-footer { padding:50px 0 25px; border-top:5px solid var(--sand); background:#193d36; color:#ecdfc9; }
.footer-grid { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:30px; }
.site-footer h2 { font-size:28px; }
.site-footer a { color:#fff0d9; }
.footer-links { display:grid; gap:5px; font-size:14px; }
.copyright { margin:38px 0 0; padding-top:18px; border-top:1px solid rgba(238,223,201,.24); color:#c9bea9; font-size:12px; }
.lightbox { position:fixed; z-index:100; inset:0; display:none; place-items:center; padding:28px; background:rgba(9,27,23,.9); }
.lightbox.is-open { display:grid; }
.lightbox img { max-height:calc(100vh - 56px); max-width:100%; box-shadow:0 10px 50px #000; }
.lightbox button { position:absolute; top:16px; right:20px; border:0; background:none; color:#fff; cursor:pointer; font-size:38px; }
@media (max-width:800px) { .masthead { min-height:77px; gap:10px; } .brand-mark { width:43px; height:43px; font-size:18px; } .brand-copy strong { font-size:22px; } .header-contact { display:none; } .menu-toggle { display:block; } .nav-wrap { display:none; } .nav-wrap.is-open { display:block; } .site-nav { align-items:stretch; flex-direction:column; gap:0; padding:9px 0 13px; } .site-nav a { padding:9px; } .hero { min-height:570px; } .stamp { right:20px; bottom:25px; width:100px; height:100px; font-size:13px; } .split,.contact-grid,.route-grid { grid-template-columns:1fr; } .facts { grid-template-columns:1fr; } .fact { min-height:0; } .price-grid { grid-template-columns:1fr; } .gallery,.art-grid { grid-template-columns:repeat(2,1fr); } .footer-grid { grid-template-columns:1fr; } .section,.page-intro { padding:54px 0; } }
@media (max-width:430px) { .shell,.masthead,.site-nav,.hero-content { width:min(100% - 28px,1180px); } .hero h1 { font-size:47px; } .price-card { grid-template-columns:94px 1fr; gap:14px; } .price-card img { width:94px; height:94px; } .contact-card,.contact-side,.callout { padding:26px; } }