/*
Theme Name: Elbstein
Description: Ruhiges, schnelles Reiseblog-Theme über Dresden. Ohne externe Schriften, ohne Tracking, ohne JavaScript.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: elbstein
*/

:root {
	--russ: #2a2724;
	--stein-dunkel: #5c5249;
	--sandstein: #b8a68c;
	--stein-hell: #dad0bf;
	--papier: #f3f3f0;
	--text: #23211f;
	--blau: #1f4e96;
	--blau-dunkel: #173b73;
	--linie: #d6d2c9;
	--serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
	--sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papier); color: var(--text); font: 1.0625rem/1.65 var(--sans); }
img { max-width: 100%; height: auto; }
a { color: var(--blau); text-underline-offset: .15em; }
a:hover { color: var(--blau-dunkel); }
:focus-visible { outline: 3px solid var(--blau); outline-offset: 2px; }

.wrap { width: min(100% - 2rem, 72rem); margin-inline: auto; }
.schmal { width: min(100% - 2rem, 40rem); }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; background: #fff; padding: .5rem 1rem; z-index: 10; }

/* Kopf */
.kopf { border-bottom: 1px solid var(--linie); }
.kopf-innen { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 2rem; padding-block: 1.25rem; }
.titel { font: 700 1.75rem/1.1 var(--serif); color: var(--russ); text-decoration: none; letter-spacing: .01em; }
.unterzeile { display: block; font-size: .9rem; color: var(--stein-dunkel); margin-top: .25rem; }
.hauptnav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.hauptnav a { color: var(--russ); text-decoration: none; padding: .25rem 0; border-bottom: 2px solid transparent; }
.hauptnav a:hover,
.hauptnav .current-menu-item > a,
.hauptnav .current-cat > a { border-color: var(--blau); }

/* Startseite: Mauer aus hellen und dunklen Steinen */
.mauer { display: flex; flex-direction: column; gap: 3px; padding: 3px; background: var(--russ); height: clamp(14rem, 32vw, 22rem); }
.reihe { display: flex; gap: 3px; flex: 1; }
.stein { flex: 1 1 0; min-width: 0; }
.t0 { background: #3a3631; }
.t1 { background: #5c5249; }
.t2 { background: #b8a68c; }
.t3 { background: #cdbfa8; }
.t4 { background: #dad0bf; }

.hero-text { position: relative; width: min(100%, 34rem); background: var(--papier); padding: 1.75rem 2rem 2rem; margin-top: calc(-1 * clamp(5rem, 12vw, 9rem)); }
.hero-text h1 { font: 700 clamp(2rem, 5vw, 3rem)/1.1 var(--serif); margin: 0 0 1rem; color: var(--russ); }
.hero-text p { margin: 0 0 1.25rem; max-width: 30rem; }
.btn { display: inline-block; background: var(--blau); color: #fff; padding: .7rem 1.25rem; text-decoration: none; font-weight: 600; }
.btn:hover { background: var(--blau-dunkel); color: #fff; }

.abschnitt { padding-block: 3rem; }
.abschnitt-titel { font: 700 1.75rem/1.2 var(--serif); margin: 0 0 1.5rem; color: var(--russ); }
.liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 2rem 3rem; margin-top: 2.5rem; }
.themen { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }

/* Beitragskarten */
.karte { border-top: 2px solid var(--russ); padding-top: 1rem; }
.karte-gross { border-top-width: 4px; }
.karte-titel { font: 700 1.35rem/1.25 var(--serif); margin: 0 0 .5rem; }
.karte-gross .karte-titel { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
.karte-titel a { color: var(--russ); text-decoration: none; }
.karte-titel a:hover { color: var(--blau); text-decoration: underline; }
.karte p { margin: 0; }
.karte-gross > p:last-child { max-width: 40rem; }
.meta { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: 0 0 .75rem; font-size: .9rem; color: var(--stein-dunkel); }
.meta a { color: var(--blau); font-weight: 600; text-decoration: none; }
.meta a:hover { text-decoration: underline; }

/* Artikel und Seiten */
.artikel { padding-block: 3rem; }
.artikel h1, .archiv-kopf h1 { font: 700 clamp(2rem, 5vw, 3rem)/1.15 var(--serif); margin: 0 0 1rem; color: var(--russ); }
.text h2 { font: 700 1.6rem/1.25 var(--serif); margin: 2.25rem 0 .75rem; color: var(--russ); }
.text p, .text ul, .text ol { margin: 0 0 1.25rem; }
.text li { margin-bottom: .4rem; }
.text .wp-caption, .text figure { margin: 1.5rem 0; }
.text figcaption, .wp-caption-text { font-size: .9rem; color: var(--stein-dunkel); }
.aligncenter { display: block; margin-inline: auto; }
.hinweis { background: var(--stein-hell); border-left: 4px solid var(--blau); padding: .75rem 1rem; }
.beitragsbild { margin: 0 0 2rem; }
.archiv-kopf { padding-top: 3rem; }
.archiv-liste { display: grid; gap: 2rem; padding-block: 2rem 3rem; }
.navigation { padding-block: 1rem 3rem; }
.nav-links { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* Kommentare und Formulare */
.kommentare { padding-bottom: 3rem; }
.kommentarliste { padding-left: 1.25rem; }
.kommentarliste li { margin-bottom: 1.25rem; }
input[type="text"], input[type="email"], input[type="url"], input[type="search"], textarea { font: inherit; width: 100%; padding: .6rem; border: 1px solid var(--stein-dunkel); background: #fff; color: var(--text); }
input[type="submit"], .search-submit { font: inherit; font-weight: 600; background: var(--blau); color: #fff; border: 0; padding: .7rem 1.25rem; cursor: pointer; }
input[type="submit"]:hover, .search-submit:hover { background: var(--blau-dunkel); }

/* Fuß */
.fuss { background: var(--russ); color: var(--stein-hell); margin-top: 4rem; padding-block: 2rem; }
.fuss p { margin: 0; }
.fuss a { color: #fff; }
.fuss-innen { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; }
.fuss ul { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0; padding: 0; }