/*
Theme Name: Strandläufer
Theme URI: https://www.laboe.rocks/
Author: piouswood
Description: Block-Theme für die Ferienwohnung Strandläufer in Laboe. Farben nach Seekarte, Schriften lokal über die Font-Bibliothek.
Version: 1.0.4
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: strandlaeufer
Update URI: false
*/

:root{
	--paper:var(--wp--preset--color--paper,#f2f5f3);
	--paper-2:var(--wp--preset--color--paper-2,#e4edee);
	--shallow:var(--wp--preset--color--shallow,#cfe2e6);
	--ink:var(--wp--preset--color--ink,#10283a);
	--ink-soft:var(--wp--preset--color--ink-soft,#44596a);
	--line:var(--wp--preset--color--line,#b9ccd2);
	--red:var(--wp--preset--color--buoy-red,#c8412a);
	--green:var(--wp--preset--color--buoy-green,#2d7a58);
	--sand:var(--wp--preset--color--sand,#ebe0c8);
	--display:var(--wp--preset--font-family--display);
	--serif:var(--wp--preset--font-family--serif);
	--mono:var(--wp--preset--font-family--mono);
	--shadow:0 18px 40px -24px rgba(16,40,58,.45);
	--wrap:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--display);line-height:1.02;letter-spacing:-.02em;text-wrap:balance;margin:0;color:inherit}
h2{font-size:clamp(2.1rem,4.6vw,3.6rem);font-weight:800}
h3{font-size:1.35rem;font-weight:600;letter-spacing:-.01em}
p{margin:0}

.sl-wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
.sl-label{font:500 .75rem/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.sl-label + h2{margin-top:.4rem}

/* Buttons */
.wp-block-buttons{gap:.8rem}
.wp-block-button__link{padding:.95em 1.4em;text-decoration:none;transition:transform .15s ease}
.wp-block-button__link:hover{transform:translateY(-1px)}
.wp-block-button.is-style-outline>.wp-block-button__link{border:2px solid currentColor;padding:calc(.95em - 2px) calc(1.4em - 2px)}

/* Kopfzeile */
.sl-top{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.admin-bar .sl-top{top:32px}
@media (max-width:782px){.admin-bar .sl-top{top:46px}}
@media (max-width:600px){.admin-bar .sl-top{top:0}}
.sl-top-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.8rem}
.sl-brand{font:800 1.3rem/1 var(--display);letter-spacing:-.02em}
.sl-brand a{text-decoration:none;color:var(--ink)}
.sl-brand strong{color:var(--red);font-weight:800}
.sl-top-right{display:flex;align-items:center;gap:1.6rem}
.sl-nav{font:500 .95rem var(--display)}
.sl-nav .wp-block-navigation__container{gap:1.6rem}
.sl-nav a{text-decoration:none}
.sl-nav a:hover{text-decoration:underline;text-underline-offset:4px}
.sl-top .wp-block-button__link{padding:.7em 1.1em;font-size:.9rem;white-space:nowrap}
.sl-brand{white-space:nowrap}
@media (max-width:760px){.sl-nav{display:none}}
@media (max-width:520px){.sl-brand{font-size:1.15rem}.sl-top .wp-block-button__link{padding:.65em .9em;font-size:.8rem}}

/* Hero */
.sl-hero{padding-top:clamp(2rem,5vw,4rem)}
.sl-hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:end}
.sl-coords{font:500 .8rem var(--mono);letter-spacing:.08em;color:var(--ink-soft);margin-bottom:1.4rem}
.sl-coords strong{color:var(--green);font-weight:500}
.sl-hero h1{font-size:clamp(2.9rem,7.4vw,6.2rem);font-weight:800}
.sl-hero h1 em{font-style:normal;color:var(--red)}
.sl-lede{font-size:1.2rem;max-width:36ch;margin-top:1.4rem;color:var(--ink-soft)}
.sl-hero .wp-block-buttons{margin-top:2rem}
.wp-block-image.sl-hero-img{position:relative;margin:0;border-radius:200px 200px 16px 16px;overflow:hidden;aspect-ratio:4/5;box-shadow:var(--shadow)}
.wp-block-image.sl-hero-img img{width:100%;height:100%;object-fit:cover}
.sl-hero-img figcaption,.sl-bento figcaption{position:absolute;left:1rem;bottom:1rem;margin:0;background:var(--paper);color:var(--ink);font:500 .75rem/1.3 var(--mono);padding:.45rem .7rem;border-radius:6px;text-align:left}
@media (max-width:820px){.sl-hero-grid{grid-template-columns:1fr}.wp-block-image.sl-hero-img{aspect-ratio:4/3;border-radius:120px 120px 16px 16px}}

/* Vier Fakten */
.sl-facts{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--line);margin-top:clamp(2rem,5vw,3.5rem)}
.sl-fact{padding:1.4rem 1.2rem;border-left:1px solid var(--line);display:grid;gap:.35rem;align-content:start}
.sl-fact:first-child{border-left:0;padding-left:0}
.sl-fact .sl-fact-title{font:600 1.15rem/1.2 var(--display)}
.sl-fact .sl-fact-text{font-size:.95rem;color:var(--ink-soft)}
@media (max-width:760px){.sl-facts{grid-template-columns:1fr 1fr}.sl-fact:nth-child(3){border-left:0;padding-left:0}.sl-fact:nth-child(n+3){border-top:1px solid var(--line)}}

/* Fahrwasser-Laufband */
.sl-fairway{margin-top:clamp(2.5rem,6vw,4.5rem);background:var(--ink);color:var(--paper);overflow:hidden;white-space:nowrap;padding-block:.9rem}
.sl-fairway-track{display:inline-flex;gap:2.5rem;animation:sl-sail 48s linear infinite;font:500 .85rem var(--mono);letter-spacing:.06em}
.sl-fairway-track span::before{content:"";display:inline-block;width:.55em;height:.55em;border-radius:50%;background:var(--red);margin-right:.8em;vertical-align:.08em}
.sl-fairway-track span:nth-child(even)::before{background:var(--green)}
@keyframes sl-sail{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Abschnitte */
.sl-section{padding-block:clamp(3.5rem,8vw,6.5rem)}
.sl-sec-head{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:end;margin-bottom:clamp(2rem,4vw,3rem)}
.sl-sec-head > p{max-width:52ch;color:var(--ink-soft)}
@media (max-width:760px){.sl-sec-head{grid-template-columns:1fr}}

/* Wohnung */
.sl-bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:190px;gap:12px}
.sl-bento .wp-block-image{margin:0;position:relative;overflow:hidden;border-radius:12px;background:var(--shallow)}
.sl-bento .wp-block-image img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.sl-bento .wp-block-image:hover img{transform:scale(1.04)}
.sl-bento figcaption{left:.6rem;bottom:.6rem;font-size:.72rem;padding:.3rem .55rem;border-radius:5px}
.sl-bento .sl-b-wide{grid-column:span 2;grid-row:span 2}
.sl-bento .sl-b-tall{grid-row:span 2}
@media (max-width:760px){.sl-bento{grid-template-columns:1fr 1fr;grid-auto-rows:150px}.sl-bento .sl-b-tall{grid-row:span 1}}
.sl-flat-info{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2rem,5vw,4rem);margin-top:clamp(2.5rem,5vw,4rem)}
.sl-flat-info .sl-label{margin-bottom:.8rem}
ul.sl-rooms{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.sl-rooms li{display:grid;grid-template-columns:11rem 1fr;gap:1rem;padding:.9rem 0;border-bottom:1px solid var(--line);color:var(--ink-soft)}
.sl-rooms li strong{font:600 1rem/1.65 var(--display);color:var(--ink)}
@media (max-width:520px){.sl-rooms li{grid-template-columns:1fr;gap:.1rem}}
ul.sl-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.sl-chips li{font:500 .9rem/1.3 var(--display);padding:.45rem .85rem;border-radius:999px;background:var(--paper-2);border:1px solid var(--line)}
.sl-chips li:last-child{background:transparent;border-style:dashed;color:var(--ink-soft)}
.sl-note{margin-top:1.6rem;font-style:italic;color:var(--ink-soft);max-width:44ch}
@media (max-width:820px){.sl-flat-info{grid-template-columns:1fr}}

/* Laboe */
.sl-laboe{background:var(--paper-2)}
.sl-topics{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2rem 2.5rem}
.sl-topic{display:grid;gap:.6rem;align-content:start}
.sl-topic .sl-label{color:var(--green)}
.sl-topic p:not(.sl-label){color:var(--ink-soft);font-size:1rem}
@media (max-width:900px){.sl-topics{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.sl-topics{grid-template-columns:1fr}}
.sl-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:clamp(2.5rem,5vw,4rem)}
.sl-strip .wp-block-image{margin:0}
.sl-strip .wp-block-image img{aspect-ratio:1;object-fit:cover;border-radius:12px;width:100%}
.sl-strip figcaption{font:500 .72rem/1.3 var(--mono);color:var(--ink-soft);margin:.5rem 0 0;letter-spacing:.04em;text-align:left}
@media (max-width:640px){.sl-strip{grid-template-columns:1fr 1fr}}

/* Gastgeber */
.sl-hosts{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.sl-hosts .wp-block-image{margin:0}
.sl-hosts .wp-block-image img{border-radius:16px 16px 16px 160px;aspect-ratio:4/5;object-fit:cover;width:100%;box-shadow:var(--shadow)}
.sl-hosts h2{margin-top:.6rem}
.sl-host-quote{margin-top:1.6rem;font-size:1.35rem;line-height:1.5;max-width:40ch}
.sl-host-more{margin-top:1.2rem;color:var(--ink-soft);max-width:52ch}
@media (max-width:820px){.sl-hosts{grid-template-columns:1fr}.sl-hosts .wp-block-image img{aspect-ratio:4/3}}

/* Gäste */
.sl-guests{background:var(--sand)}
.sl-quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2.5rem)}
.sl-quotes .wp-block-quote{margin:0;border:0;border-top:2px solid var(--ink);padding:1.2rem 0 0;display:grid;gap:1rem;align-content:start}
.sl-quotes .wp-block-quote p{font-size:1.15rem;line-height:1.55}
.sl-quotes .wp-block-quote cite{font:500 .8rem var(--mono);color:var(--ink-soft);font-style:normal;letter-spacing:.04em}
@media (max-width:820px){.sl-quotes{grid-template-columns:1fr}}

/* Fragen */
.sl-faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,5vw,4rem)}
.sl-faq .wp-block-details{border-bottom:1px solid var(--line)}
.sl-faq .wp-block-details:first-child{border-top:2px solid var(--ink)}
.sl-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;padding:1.15rem 0;font:600 1.15rem/1.3 var(--display)}
.sl-faq summary::-webkit-details-marker{display:none}
.sl-faq summary::after{content:"+";font:400 1.5rem/1 var(--mono);color:var(--red);transition:transform .2s}
.sl-faq details[open] summary::after{transform:rotate(45deg)}
.sl-faq details > p{padding-bottom:1.3rem;color:var(--ink-soft);max-width:60ch}
@media (max-width:820px){.sl-faq{grid-template-columns:1fr}}

/* Kontakt */
.sl-contact{background:var(--ink);color:var(--paper)}
.sl-contact .sl-label{color:var(--shallow)}
.sl-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem)}
.sl-contact h2{margin-top:.6rem}
.sl-contact-text{margin-top:1.2rem;max-width:40ch;color:color-mix(in srgb,var(--paper) 75%,var(--ink))}
.sl-contact .wp-block-buttons{margin-top:1.8rem}
.sl-contact .wpcf7 form > p{margin:0 0 1rem}
.sl-contact .wpcf7 label{display:grid;gap:.4rem;font:500 .8rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.sl-contact .wpcf7 label br{display:none}
.sl-contact .wpcf7 input:not([type=submit]):not([type=hidden]),.sl-contact .wpcf7 textarea{width:100%;font:400 1rem/1.5 var(--serif);text-transform:none;letter-spacing:0;padding:.85rem 1rem;border-radius:10px;border:1px solid color-mix(in srgb,var(--paper) 30%,var(--ink));background:color-mix(in srgb,var(--paper) 8%,var(--ink));color:var(--paper)}
.sl-contact .wpcf7 textarea{height:9rem;resize:vertical}
.sl-contact .wpcf7-submit{background:var(--red);color:#fff;border:0;border-radius:999px;font:600 1rem/1 var(--display);padding:.95em 1.4em;cursor:pointer}
.sl-contact .wpcf7-response-output{margin:1rem 0 0!important;border-radius:8px;color:var(--paper)}
.sl-contact .wpcf7-not-valid-tip{color:#ffb4a6;font:400 .9rem var(--serif);text-transform:none;letter-spacing:0}
@media (max-width:820px){.sl-contact-grid{grid-template-columns:1fr}}

/* Fußzeile */
.sl-footer{font:500 .8rem/1.4 var(--mono);color:var(--ink-soft)}
.sl-footer-inner{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding-block:2rem}
.sl-footer a{color:inherit}

/* Unterseiten (Impressum usw.) */
.sl-page{padding-block:clamp(2.5rem,6vw,5rem)}
.sl-page .wp-block-post-title{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:800;margin-bottom:2rem}
.sl-prose{max-width:70ch}
.sl-prose > * + *{margin-top:1em}
.sl-prose h2{font-size:1.6rem;margin-top:2rem}
.sl-prose a{color:var(--red)}