/*
Theme Name: Landgasthof An der Murg
Theme URI: https://example.com
Author: Eigenentwicklung
Description: Warmes, übersichtliches Theme für Gasthof, Pension und Café im Schwarzwald. Mit Hinweisleiste, Saisonterminen, Öffnungszeiten, Kontaktformular und Dropdown-Menü. Alle Inhalte der Startseite sind im Customizer änderbar.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: landgasthof-an-der-murg
*/

:root {
  --blau-dunkel: #0a3f7a;
  --blau: #0b63b8;
  --link: #0b63b8;
  --link-hover: #0a3f7a;
  --gruen: #2b7a4f;
  --gruen-text: #ffffff;
  --welle-gruen: #a6d9ac;
  --welle-blau: #a9d4f5;
  --hellblau: #eaf3fb;
  --birke: #f5f9fc;
  --papier: #ffffff;
  --tinte: #1f2622;
  --grau: #5c665f;
  --linie: #d9dcd5;
  --kopf-bg: #ffffff;
  --kopf-text: #0a3f7a;
  --hinweis-bg: #2b7a4f;
  --hinweis-text: #ffffff;
  --hero-bg: #0a3f7a;
  --hero-text: #ffffff;
  --fuss-bg: #0a3f7a;
  --fuss-text: #dbe9f6;
  --fuss-link: #ffffff;
  --radius: 4px;
  --breite: 1120px;
  --basis: 1.0625rem;
  --h-faktor: 1;
  --schrift-titel: Georgia, "Times New Roman", serif;
  --schrift-text: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--schrift-text); color: var(--tinte); background: var(--birke); line-height: 1.65; font-size: var(--basis); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 3px solid var(--gruen); outline-offset: 2px; }
.wrap { max-width: var(--breite); margin: 0 auto; padding: 0 1.25rem; }
.screen-reader-text { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; background: #fff; padding: .5rem 1rem; z-index: 100; }

h1, h2, h3, h4 { font-family: var(--schrift-titel); line-height: 1.2; color: var(--blau-dunkel); font-weight: 700; }
h1 { font-size: calc(clamp(2rem, 5vw, 3.2rem) * var(--h-faktor)); }
h2 { font-size: calc(clamp(1.6rem, 3.5vw, 2.2rem) * var(--h-faktor)); margin: 0 0 1rem; }
h3 { font-size: calc(1.3rem * var(--h-faktor)); margin: 0 0 .4rem; }

/* Hinweisleiste */
.notice { background: var(--hinweis-bg); color: var(--hinweis-text); font-size: .95rem; }
.notice .wrap { padding-top: .55rem; padding-bottom: .55rem; text-align: center; }

/* Kopfbereich */
.site-header { background: var(--kopf-bg); color: var(--kopf-text); position: sticky; top: 0; z-index: 50; border-bottom: 4px solid; border-image: linear-gradient(90deg, var(--welle-gruen), var(--welle-blau)) 1; box-shadow: 0 2px 10px rgba(10,63,122,.08); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 88px; }
.brand { display: flex; align-items: center; text-decoration: none; padding: .4rem 0; }
.brand img { height: 64px; width: auto; }
.custom-logo-link img { height: 64px; width: auto; }

.nav-toggle { display: none; border: 1px solid var(--blau); color: var(--kopf-text); background: var(--kopf-bg); padding: .45rem .8rem; border-radius: var(--radius); font: inherit; cursor: pointer; }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .25rem; }
.main-nav li { position: relative; }
.main-nav a { display: block; color: var(--kopf-text); text-decoration: none; padding: .6rem .85rem; font-weight: 600; border-radius: var(--radius); }
.main-nav a:hover, .main-nav .current-menu-item > a { background: var(--hellblau); color: var(--blau); }
.main-nav .menu-item-has-children > a::after { content: ""; display: inline-block; margin-left: .45rem; border: 4px solid transparent; border-top-color: currentColor; vertical-align: -2px; }
.main-nav ul ul { display: none; position: absolute; left: 0; top: 100%; min-width: 230px; flex-direction: column; background: var(--kopf-bg); border: 1px solid var(--linie); padding: .4rem; border-radius: 0 0 var(--radius) var(--radius); box-shadow: 0 8px 20px rgba(10,63,122,.15); }
.main-nav li:hover > ul, .main-nav li:focus-within > ul, .main-nav li.open > ul { display: flex; }
.main-nav ul ul a { font-weight: 400; }
.main-nav ul ul a:hover { background: var(--hellblau); }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .main-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--kopf-bg); border-bottom: 1px solid var(--linie); padding: .5rem 1.25rem 1rem; }
  .main-nav.open { display: block; }
  .main-nav ul { flex-direction: column; }
  .main-nav ul ul { position: static; display: none; box-shadow: none; background: transparent; padding: 0 0 0 1rem; }
  .main-nav li.open > ul { display: flex; }
  .main-nav li:hover > ul { display: none; }
  .main-nav li.open:hover > ul { display: flex; }
}

/* Startseite: Hero */
.hero { background: var(--hero-bg); color: var(--hero-text); }
.hero .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0; max-width: none; }
.hero-text { padding: clamp(2.5rem, 7vw, 6rem) clamp(1.25rem, 5vw, 4rem); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.hero-text h1 { color: var(--hero-text); margin: 0 0 .6rem; }
.hero-text p { margin: 0 0 1.6rem; font-size: 1.2rem; color: var(--hero-text); opacity: .92; max-width: 32ch; }
.hero-media { min-height: 340px; background: var(--blau) center/cover no-repeat; position: relative; }
.hero-media.leer::after { content: ""; position: absolute; inset: 0; background: url("assets/welle-muster.svg") center/cover no-repeat; }
.btn { display: inline-block; background: var(--gruen); color: var(--gruen-text); text-decoration: none; padding: .8rem 1.5rem; border-radius: var(--radius); font-weight: 700; border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.btn:hover { background: color-mix(in srgb, var(--gruen) 75%, #000); color: var(--gruen-text); }
@media (max-width: 800px) { .hero .wrap { grid-template-columns: 1fr; } .hero-media { min-height: 220px; order: -1; } }

/* Abschnitte */
.section { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.section.weiss { background: var(--papier); }
.section-head { max-width: 60ch; margin-bottom: 2rem; }
.section-head p { color: var(--grau); margin: 0; }

.termine { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; }
.termin { border-left: 5px solid var(--gruen); background: var(--papier); padding: 1.1rem 1.3rem; }
.section.weiss .termin { background: var(--birke); }
.termin p { margin: 0; color: var(--grau); }

.zeiten { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; }
.zeiten h3 { border-bottom: 2px solid var(--linie); padding-bottom: .5rem; margin-bottom: .8rem; }
.zeiten p { margin: 0; white-space: pre-line; }

.kontakt { display: grid; grid-template-columns: 1.3fr 1fr; gap: 3rem; }
@media (max-width: 800px) { .kontakt { grid-template-columns: 1fr; gap: 2rem; } }
.kontakt-daten dt { font-family: var(--schrift-titel); font-weight: 700; color: var(--blau-dunkel); margin-top: 1rem; }
.kontakt-daten dd { margin: 0; }

.meldung { padding: .9rem 1.1rem; border-radius: var(--radius); margin-bottom: 1.25rem; }
.meldung.ok { background: #e3f0e6; border-left: 5px solid var(--blau); }
.meldung.fehler { background: #f8e4e7; border-left: 5px solid #b3261e; }

/* Inhaltsseiten */
.content { padding: clamp(2rem, 5vw, 3.5rem) 0; }
.content .wrap { max-width: 800px; }
.entry-title { margin-top: 0; }
.entry-content > *:first-child { margin-top: 0; }
.entry-content table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
.entry-content th, .entry-content td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
.entry-content th { color: var(--blau-dunkel); }
.entry-content img { border-radius: var(--radius); }
.alignwide { max-width: var(--breite); }
.post-list article { background: var(--papier); padding: 1.3rem 1.5rem; margin-bottom: 1.2rem; border-left: 5px solid var(--blau-dunkel); }
.post-list h2 a { text-decoration: none; color: var(--blau-dunkel); }
.meta { color: var(--grau); font-size: .9rem; }

/* Fuß */
.site-footer { background: var(--fuss-bg); color: var(--fuss-text); padding: 2.5rem 0 1.5rem; }
.site-footer a { color: var(--fuss-link); }
.footer-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; align-items: center; }
.footer-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.2rem; flex-wrap: wrap; }
.copy { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.2); font-size: .9rem; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Hintergrundbilder der Abschnitte (Customizer) */
.section.hat-bild, .hero.hat-bild {
  background-color: var(--papier);
  background-image: linear-gradient(var(--bg-overlay), var(--bg-overlay)), var(--bg-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero--voll .wrap { grid-template-columns: 1fr; }
.hero--voll .hero-text { max-width: var(--breite); width: 100%; margin: 0 auto; min-height: clamp(320px, 50vw, 520px); }
.meldung { color: var(--tinte); }
.termin { color: var(--tinte); }

/* Helle Schrift auf dunkler Überlagerung */
.section.dunkel, .section.dunkel h2, .section.dunkel h3, .section.dunkel .entry-content { color: #fff; }
.section.dunkel .section-head p, .section.dunkel .zeiten p { color: #eaf3fb; }
.section.dunkel .termin h3 { color: var(--blau-dunkel); }
.section.dunkel .termin p { color: var(--grau); }
.section.dunkel .zeiten h3 { border-bottom-color: rgba(255,255,255,.4); }
.section.dunkel a:not(.btn) { color: #fff; }
.section.dunkel .kontakt-daten dt { color: #fff; }
.section.dunkel .meldung a { color: var(--blau); }

/* Widgets in der Fußzeile */
.footer-widgets { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; padding-bottom: 2rem; margin-bottom: 1.75rem; border-bottom: 1px solid rgba(255,255,255,.2); }
.footer-widget .widget { margin-bottom: 1.5rem; }
.footer-widget .widget:last-child { margin-bottom: 0; }
.footer-widget .widget-title, .footer-widget h2, .footer-widget h3, .footer-widget h4 { color: var(--fuss-link); font-size: 1.2rem; margin: 0 0 .7rem; }
.footer-widget p { margin: 0 0 .8rem; }
.footer-widget ul { list-style: none; margin: 0; padding: 0; }
.footer-widget li { margin-bottom: .35rem; }
.footer-widget a { color: var(--fuss-link); }
.footer-widget input[type=search], .footer-widget input[type=text], .footer-widget input[type=email] { width: 100%; padding: .6rem .7rem; font: inherit; border: 1px solid #aeb5ac; border-radius: var(--radius); }
.footer-widget input[type=submit], .footer-widget button, .footer-widget .wp-block-search__button { background: var(--gruen); color: var(--gruen-text); border: 0; border-radius: var(--radius); padding: .6rem 1rem; font: inherit; font-weight: 700; cursor: pointer; }
.footer-widget .wp-block-search__inside-wrapper { gap: .5rem; }

/* Contact Form 7 */
.wpcf7 form p { margin: 0 0 1rem; }
.wpcf7 label { display: block; font-weight: 600; }
.wpcf7 input[type=text], .wpcf7 input[type=email], .wpcf7 input[type=tel], .wpcf7 input[type=url], .wpcf7 select, .wpcf7 textarea { display: block; width: 100%; margin-top: .3rem; padding: .7rem .8rem; font: inherit; color: var(--tinte); border: 1px solid #aeb5ac; border-radius: var(--radius); background: var(--papier); }
.wpcf7 .wpcf7-acceptance label, .wpcf7 .wpcf7-checkbox label, .wpcf7 .wpcf7-radio label { font-weight: 400; font-size: .92rem; color: var(--grau); }
.wpcf7 .wpcf7-list-item { margin: 0; }
.wpcf7 input[type=checkbox], .wpcf7 input[type=radio] { margin-right: .5rem; }
.wpcf7 .wpcf7-submit { background: var(--gruen); color: var(--gruen-text); border: 0; border-radius: var(--radius); padding: .8rem 1.5rem; font: inherit; font-weight: 700; cursor: pointer; }
.wpcf7 .wpcf7-submit:hover { background: color-mix(in srgb, var(--gruen) 75%, #000); }
.wpcf7 .wpcf7-spinner { margin-left: .75rem; }
.wpcf7 .wpcf7-not-valid-tip { display: block; margin-top: .25rem; color: #b3261e; font-size: .9rem; font-weight: 400; }
.section.dunkel .wpcf7 .wpcf7-not-valid-tip { color: #ffd9d6; }
.wpcf7 form .wpcf7-response-output { margin: 1rem 0 0; padding: .9rem 1.1rem; border: 0; border-left: 5px solid var(--blau); border-radius: var(--radius); background: #fff; color: var(--tinte); }
.wpcf7 form.sent .wpcf7-response-output { border-left-color: var(--gruen); background: #e3f0e6; }
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.spam .wpcf7-response-output, .wpcf7 form.aborted .wpcf7-response-output { border-left-color: #b3261e; background: #f8e4e7; }
.section.dunkel .wpcf7 label { color: #fff; }
.section.dunkel .wpcf7 .wpcf7-acceptance label, .section.dunkel .wpcf7 .wpcf7-checkbox label { color: #eaf3fb; }

/* Karte im Kontaktbereich */
.karte { margin-top: 2rem; }
.karte-platzhalter { min-height: var(--karte-hoehe, 320px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1rem; padding: 1.25rem; background: var(--hellblau); border: 1px solid var(--linie); border-radius: var(--radius); }
.karte-platzhalter.mit-bild { background-image: linear-gradient(rgba(255,255,255,.88), rgba(255,255,255,.88)), var(--karte-bild); background-size: cover; background-position: center; }
.karte-platzhalter p { margin: 0; font-size: .95rem; }
.karte-platzhalter, .karte-platzhalter p { color: var(--tinte); }
.section.dunkel .karte-platzhalter a { color: var(--link); }
.karte iframe { display: block; width: 100%; height: var(--karte-hoehe, 320px); border: 0; border-radius: var(--radius); }
.karte-link { margin: .6rem 0 0; font-size: .95rem; }

/* Eigenes Menü auf Unterseiten */
.content .wrap.mit-subnav { max-width: var(--breite); }
.subnav ul { list-style: none; margin: 0; padding: 0; }
.subnav a { display: block; text-decoration: none; color: var(--blau-dunkel); font-weight: 600; padding: .55rem .9rem; }
.subnav a:hover { background: var(--hellblau); color: var(--blau); }
.subnav .current-menu-item > a, .subnav .current-menu-ancestor > a { color: var(--blau); border-color: var(--gruen); }
.subnav ul ul a { font-weight: 400; padding-left: 1.8rem; }

.subnav-seite .page-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.subnav-seite .subnav { background: var(--papier); border: 1px solid var(--linie); border-radius: var(--radius); padding: .5rem 0; }
.subnav-seite .subnav a { border-left: 4px solid transparent; }
.subnav-seite .page-main { max-width: 800px; }

.subnav-leiste .subnav { margin-bottom: 2rem; border-bottom: 2px solid var(--linie); }
.subnav-leiste .subnav-liste { display: flex; flex-wrap: wrap; gap: .25rem; }
.subnav-leiste .subnav a { border-bottom: 4px solid transparent; margin-bottom: -2px; }
.subnav-leiste .subnav ul ul { display: none; }

@media (max-width: 800px) { .subnav-seite .page-layout { grid-template-columns: 1fr; gap: 1.5rem; } }