/* Taverne Meltemi – Stilblatt
   Grundidee: die Seite liest sich wie ein gedruckter Wirtshaus-Aushang.
   Alles zentriert, ruhige Farbbänder, Wärme über Creme/Ägäisblau/Olive.
   Das Ägäisblau ist die Leitfarbe, wie blau gestrichene Fensterläden. */

:root {
	--creme: #f6efe2;
	--creme-tief: #eee3cd;
	--stube: #2b1d12;          /* dunkles Stubenholz */
	--tinte: #3a2c1e;
	--aegaeis: #2a5f8e;
	--aegaeis-tief: #1c466b;
	--olive: #5c6141;
	--gold: #c99f56;
	--linie: rgba(58, 44, 30, .25);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: 'Alegreya Sans', 'Segoe UI', sans-serif;
	font-size: 1.1rem;
	line-height: 1.6;
	color: var(--tinte);
	background: var(--creme);
}

/* Caesar Dressing und GFS Didot gibt es nur in einem Schnitt – Gewicht auf 400
   festnageln, sonst rechnet der Browser einen unschönen Fake-Fettdruck.
   Didot als Fallback, falls ein Glyph (z.B. Umlaut) fehlen sollte. */
h1, h2, h3 { font-family: 'Caesar Dressing', 'GFS Didot', Georgia, serif; font-weight: 400; line-height: 1.2; letter-spacing: .03em; color: var(--aegaeis-tief); }

img { max-width: 100%; display: block; }

a { color: var(--aegaeis-tief); }

/* Griechische Einsprengsel laufen immer in der Didot, die Sans hat kein Griechisch an Bord */
[lang="el"] { font-family: 'GFS Didot', Georgia, serif; }

a:focus-visible,
button:focus-visible {
	outline: 3px solid var(--aegaeis);
	outline-offset: 3px;
}

.springen {
	position: absolute;
	left: -999px;
	top: 0;
	background: var(--stube);
	color: var(--creme);
	padding: .6rem 1.2rem;
	z-index: 50;
}
.springen:focus { left: 0; }

/* ---------- Schwebende Pill-Navigation ---------- */

.pill-nav {
	position: fixed;
	top: 1rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 45;
	display: flex;
	align-items: center;
	gap: 1.4rem;
	background: rgba(246, 239, 226, .96);
	border: 1px solid var(--linie);
	border-radius: 999px;
	padding: .65rem .75rem .65rem 1.5rem;
	box-shadow: 0 8px 28px rgba(43, 29, 18, .22);
	white-space: nowrap;
}

.pill-marke {
	font-family: 'Caesar Dressing', 'GFS Didot', Georgia, serif;
	font-size: 1.5rem;
	color: var(--aegaeis-tief);
	text-decoration: none;
	margin-right: .3rem;
}

.pill-nav a:not(.pill-marke):not(.pill-tel) {
	text-decoration: none;
	color: var(--tinte);
	font-weight: 500;
	font-size: 1.1rem;
	letter-spacing: .03em;
	padding: .15rem 0;
	border-bottom: 2px solid transparent;
}

.pill-nav a:hover:not(.pill-marke):not(.pill-tel) { border-bottom-color: var(--gold); }
.pill-nav a[aria-current="page"] { border-bottom-color: var(--aegaeis) !important; color: var(--aegaeis-tief) !important; }

.pill-tel {
	width: 2.8rem;
	height: 2.8rem;
	border-radius: 50%;
	background: var(--aegaeis);
	color: #fdf6e9;
	display: grid;
	place-items: center;
	text-decoration: none;
	font-size: 1.05rem;
}
.pill-tel:hover { background: var(--aegaeis-tief); }

@media (max-width: 759px) {
	/* Handy hat unten schon die Anruf-Leiste, der Punkt in der Pille wäre doppelt */
	.pill-tel { display: none; }
	.pill-nav { gap: .8rem; padding-right: 1.1rem; }
}

@media (max-width: 400px) {
	.pill-marke { display: none; }
}

/* ---------- Held (Startseite) ---------- */

.held {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
}

.held-bild {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* sanfte Abend-Vignette, die Inhalte selbst liegen auf dem Creme-Schild */
.held::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(26, 14, 6, .55) 0%, rgba(26, 14, 6, .18) 60%, rgba(26, 14, 6, .25) 100%);
}

/* Das Schild: Creme-Tafel vor dem Foto, wie ein Aushang am Haus.
   Garantiert lesbar, egal wie unruhig das Bild dahinter ist. */
.foto-schild {
	background: rgba(246, 239, 226, .96);
	border: 1px solid rgba(58, 44, 30, .15);
	border-radius: 22px;
	box-shadow: 0 18px 44px rgba(26, 14, 6, .4);
}

.held-inhalt {
	position: relative;
	z-index: 1;
	text-align: center;
	color: var(--tinte);
	padding: 2.6rem 2rem 2.2rem;
	width: min(92%, 42rem);
	margin: auto; /* zentriert das Schild vertikal im Foto */
}

.held .maeander { margin-top: .2rem; }

.held .bewertung { margin-top: 1.1rem; margin-bottom: 0; }

.held-oben {
	margin: 0;
	letter-spacing: .22em;
	text-transform: uppercase;
	font-size: .85rem;
	color: var(--olive);
}

.held h1 {
	margin: .3rem 0 .4rem;
	font-size: clamp(2.5rem, 8vw, 4.2rem);
}

.held-claim {
	margin: 0 auto .9rem;
	font-size: clamp(1.05rem, 2.6vw, 1.25rem);
	max-width: 34rem;
}

/* Die Info-Karte direkt unter dem Hero:
   Heute-Status, Telefon und Karte auf einen Blick. */
.info-band {
	background: var(--creme);
	padding: 2.6rem 1.2rem 0;
}

.held-karte {
	width: min(100%, 58rem);
	margin: 0 auto;
	background: #fffdf7;
	border: 1px solid var(--linie);
	border-radius: 20px;
	box-shadow: 0 14px 36px rgba(43, 29, 18, .16);
	display: grid;
	gap: 1.2rem;
	padding: 1.5rem 1.4rem;
	text-align: center;
}

@media (min-width: 800px) {
	.held-karte { grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: 0; }
	.hk-zelle + .hk-zelle { border-left: 1px dotted var(--linie); }
}

.hk-zelle { padding: .2rem 1.2rem; }

.hk-titel {
	display: block;
	font-size: .82rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--olive);
	margin-bottom: .35rem;
}

.hk-status { margin: 0; font-weight: 700; color: var(--aegaeis-tief); }

.hk-tel {
	font-family: 'GFS Didot', Georgia, serif;
	font-size: 1.6rem;
	color: var(--aegaeis-tief);
	text-decoration: none;
	white-space: nowrap;
}
.hk-tel:hover { text-decoration: underline; }

/* Platz für die schwebende Pille auf Seiten ohne Foto-Kopf */
.band.kontakt-ruf { padding-top: 6.6rem; }

/* ---------- Knöpfe ---------- */

.knopf {
	display: inline-block;
	background: var(--aegaeis);
	color: #fdf6e9;
	text-decoration: none;
	font-weight: 700;
	padding: .75rem 1.8rem;
	border-radius: 999px;
	letter-spacing: .03em;
}
.knopf:hover { background: var(--aegaeis-tief); }

.knopf-hell {
	background: rgba(253, 246, 233, .14);
	border: 1px solid rgba(253, 246, 233, .65);
	color: #fdf6e9;
}
.knopf-hell:hover { background: rgba(253, 246, 233, .28); }

.knopf-rahmen {
	background: transparent;
	border: 2px solid var(--aegaeis);
	color: var(--aegaeis-tief);
}
.knopf-rahmen:hover { background: var(--aegaeis); color: #fdf6e9; }

.knopf .fa-phone { margin-right: .4rem; }

/* ---------- Farbbänder ---------- */

.band { padding: 3.5rem 1.2rem; text-align: center; }

.band-creme { background: var(--creme); }
.band-creme-tief { background: var(--creme-tief); }

.band-stube {
	background: var(--stube);
	color: #efe6d5;
}
/* Überschriften bleiben auch auf dunklen Bändern im Dunkelblau –
   dafür bekommen sie dort ein kleines Creme-Schild hinterlegt */
.band-stube h2 {
	display: inline-block;
	color: var(--aegaeis-tief);
	background: var(--creme);
	padding: .5rem 1.6rem .4rem;
	border-radius: 14px;
	box-shadow: 0 8px 22px rgba(26, 14, 6, .3);
}


.band h2 { font-size: clamp(1.7rem, 4.5vw, 2.3rem); margin: 0 0 1rem; }

/* Griechische Akzente: kleine Zeile über der Überschrift und die Mäander-Zierlinie */
.auftakt {
	font-family: 'GFS Didot', Georgia, serif;
	color: var(--gold);
	letter-spacing: .22em;
	font-size: .95rem;
	margin: 0 0 .2rem;
}
.band-creme .auftakt, .band-creme-tief .auftakt { color: var(--olive); }

.maeander {
	display: block;
	width: 140px;
	height: 10px;
	margin: .9rem auto 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10' viewBox='0 0 20 10'%3E%3Cpath d='M1 9 V1 H17 V9 H7 V5 H12' fill='none' stroke='%23c99f56' stroke-width='1.5'/%3E%3C/svg%3E") repeat-x;
	background-size: 20px 10px;
}

/* ---------- Vorstellung ---------- */

.wer p { max-width: 40rem; margin: 0 auto 1.2rem; }

.bewertung {
	font-size: .95rem;
	color: var(--olive);
	margin-top: 1.6rem;
}
.sterne { color: var(--gold); letter-spacing: .15em; margin-right: .5rem; }

/* ---------- Signature-Gerichte ---------- */

.einleitung p { max-width: 36rem; margin: 0 auto; }

.gerichte {
	display: grid;
	gap: 1.6rem;
	max-width: 62rem;
	margin: 2.2rem auto;
}

@media (min-width: 800px) {
	.gerichte { grid-template-columns: 1fr 1fr 1fr; }
}

.gericht-karte {
	background: #fffdf7;
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 10px 28px rgba(43, 29, 18, .14);
	text-align: left;
}

.gericht-karte img { height: 230px; width: 100%; object-fit: cover; }

.gericht-text { padding: 1.1rem 1.3rem 1.3rem; }
.gericht-text h3 { margin: 0 0 .35rem; font-size: 1.25rem; }
.gericht-text p { margin: 0; font-size: 1rem; }

.mitte { text-align: center; margin-top: .6rem; }

/* ---------- Gästestimmen ---------- */

.stimmen {
	display: grid;
	gap: 2rem;
	max-width: 60rem;
	margin: 2.4rem auto 0;
}

@media (min-width: 800px) {
	.stimmen { grid-template-columns: 1fr 1fr 1fr; gap: 2.5rem; }
}

.stimmen blockquote { margin: 0; }

.stimmen blockquote p {
	font-family: 'GFS Didot', Georgia, serif;
	font-size: 1.15rem;
	margin: 0 0 .7rem;
}

.stimmen footer {
	font-size: .85rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--gold);
}

/* ---------- Öffnungszeiten-Aushang ---------- */

.aushang {
	max-width: 26rem;
	margin: 0 auto;
	background: #fffdf7;
	border: 1px solid var(--linie);
	border-radius: 4px;
	padding: 2rem 1.6rem 1.6rem;
	box-shadow: 0 12px 30px rgba(43, 29, 18, .12);
}

.aushang h2 { margin-top: 0; }

.aushang-status {
	color: var(--aegaeis-tief);
	font-weight: 700;
	margin: -.4rem 0 1.2rem;
}

.zeiten {
	width: 100%;
	border-collapse: collapse;
	font-size: 1rem;
}

.zeiten th, .zeiten td {
	padding: .45rem .2rem;
	border-bottom: 1px dotted var(--linie);
	text-align: left;
}
.zeiten td { text-align: right; }
.zeiten tr:last-child th, .zeiten tr:last-child td { border-bottom: none; }

.zeiten .heute th, .zeiten .heute td {
	color: var(--aegaeis-tief);
	font-weight: 700;
}

.aushang-hinweis { margin: 1.3rem 0 0; font-size: .98rem; }

/* ---------- Anfahrt ---------- */

.anfahrt-adresse { font-family: 'GFS Didot', Georgia, serif; font-size: 1.3rem; margin: 0 0 1.4rem; }

.anfahrt-punkte {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	margin-bottom: 1.8rem;
}
.anfahrt-punkte p { margin: 0; }
.anfahrt-punkte .fa-solid { margin-right: .5rem; color: var(--gold); }

/* ---------- Speisekarte ---------- */

.karten-kopf { position: relative; }

.karten-kopf-bild {
	width: 100%;
	height: 38vh;
	min-height: 260px;
	object-fit: cover;
}

.karten-kopf::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(26, 14, 6, .4), rgba(26, 14, 6, .12));
}

.karten-kopf-text {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding-top: 2.5rem; /* Luft für die Pille */
}

.karten-schild { padding: 1.4rem 2.6rem 1.5rem; }
.karten-schild h1 { margin: 0; font-size: clamp(2.1rem, 6.5vw, 3.2rem); }
.karten-schild p { margin: .25rem 0 0; color: var(--olive); letter-spacing: .08em; }

/* Filterleiste: eine Rubrik rauspicken oder alles zeigen */
.karte-filter {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .6rem;
	max-width: 46rem;
	margin: 0 auto 2.8rem;
}

.karte-filter button {
	font-family: inherit;
	font-size: .95rem;
	font-weight: 500;
	letter-spacing: .02em;
	padding: .45rem 1.15rem;
	border-radius: 999px;
	border: 2px solid var(--aegaeis);
	background: transparent;
	color: var(--aegaeis-tief);
	cursor: pointer;
}

.karte-filter button:hover { background: rgba(42, 95, 142, .12); }

.karte-filter button[aria-pressed="true"] {
	background: var(--aegaeis);
	color: #fdf6e9;
}

/* Die Karte selbst soll wie gedruckt wirken: Gericht links, Punktlinie, Preis rechts */
.karte-rahmen {
	max-width: 40rem;
	margin: 0 auto;
	text-align: left;
}

.rubrik { margin-bottom: 2.6rem; }

.rubrik h2 {
	text-align: center;
	font-size: 1.5rem;
	color: var(--aegaeis-tief);
	margin: 0 0 1.2rem;
}

.rubrik h2::after {
	content: '';
	display: block;
	width: 80px;
	height: 10px;
	margin: .6rem auto 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10' viewBox='0 0 20 10'%3E%3Cpath d='M1 9 V1 H17 V9 H7 V5 H12' fill='none' stroke='%23c99f56' stroke-width='1.5'/%3E%3C/svg%3E") repeat-x;
	background-size: 20px 10px;
}

.rubrik dl { margin: 0; }

/* Gericht links, Preis rechts, dazwischen die Punktreihe wie auf einer
   gedruckten Karte. Die Punkte liegen als Hintergrund auf der ganzen Zeile,
   Gericht und Preis decken sie mit dem Seitenton wieder ab. */
.zeile {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: .75rem;
	background-image: radial-gradient(circle, var(--linie) 1px, transparent 1.5px);
	background-size: 8px 2px;
	background-repeat: repeat-x;
	/* an der ersten Zeile verankert, damit die Punkte auch bei Gerichten
	   mit Unterzeile zum Preis führen */
	background-position: 0 1.08em;
}

.zeile dt {
	font-weight: 500;
	background: var(--creme);
	padding-right: .45rem;
}

.zeile dt .zusatz {
	display: block;
	font-size: .88rem;
	font-weight: 400;
	color: var(--olive);
}

.zeile dd {
	margin: 0;
	font-family: 'GFS Didot', Georgia, serif;
	font-weight: 400;
	white-space: nowrap;
	background: var(--creme);
	padding-left: .45rem;
}

.karte-mitnehmen {
	max-width: 38rem;
	margin: 2.5rem auto 0;
	font-size: 1.05rem;
}
.karte-mitnehmen .fa-bag-shopping { color: var(--aegaeis-tief); margin-right: .4rem; }

/* ---------- Kontaktseite ---------- */

.kontakt-ruf h1 { font-size: clamp(2.1rem, 6vw, 3rem); margin: 0 0 .6rem; }
.kontakt-ruf p { max-width: 32rem; margin: 0 auto 1.6rem; }

.riesen-telefon {
	display: inline-block;
	font-family: 'GFS Didot', Georgia, serif;
	font-weight: 400;
	font-size: clamp(1.9rem, 7vw, 3.2rem);
	color: #fdf6e9;
	background: var(--aegaeis);
	text-decoration: none;
	padding: .9rem 2.4rem;
	border-radius: 999px;
	box-shadow: 0 12px 30px rgba(42, 95, 142, .35);
}
.riesen-telefon:hover { background: var(--aegaeis-tief); }
.riesen-telefon .fa-phone { font-size: .6em; margin-right: .6rem; }

.kontakt-status { margin-top: 1.6rem; font-weight: 700; color: var(--olive); }

.kontakt-spalten {
	display: grid;
	gap: 2.5rem;
	max-width: 56rem;
	margin: 0 auto;
	text-align: left;
}

@media (min-width: 820px) {
	.kontakt-spalten { grid-template-columns: 1fr 1fr; align-items: start; }
}

.kontakt-spalten .aushang { margin: 0 auto; width: 100%; }

.kontakt-block h2 { font-size: 1.4rem; margin: 0 0 .5rem; }
.kontakt-block h2 + p { margin-top: 0; }
.kontakt-block p { margin-bottom: 1.4rem; }

.kontakt-mitnahme p { max-width: 36rem; margin: 0 auto 1.4rem; }

.kontakt-bild img {
	width: 100%;
	height: 45vh;
	min-height: 260px;
	object-fit: cover;
}

/* ---------- Fuß ---------- */

.fuss {
	background: var(--stube);
	color: #d9cbb6;
	text-align: center;
	padding: 2.6rem 1.2rem 2.2rem;
	/* feine Trennlinie, weil auf der Startseite die Anfahrt ebenfalls dunkel ist */
	border-top: 1px solid rgba(246, 239, 226, .18);
}

.fuss p { margin: .25rem 0; }

.fuss-marke {
	font-family: 'Caesar Dressing', 'GFS Didot', Georgia, serif;
	font-size: 1.45rem;
	color: var(--creme);
}

.fuss a { color: var(--gold); text-decoration: none; }
.fuss a:hover { text-decoration: underline; }

.fuss-klein { font-size: .88rem; margin-top: .9rem; }

/* Mobile Anruf-Leiste – auf dem Handy ist Anrufen die wichtigste Handlung */
.anruf-leiste {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	background: var(--aegaeis);
	color: #fdf6e9;
	font-weight: 700;
	text-decoration: none;
	padding: .85rem 1rem;
	box-shadow: 0 -4px 16px rgba(43, 29, 18, .3);
}

body { padding-bottom: 3.4rem; }

@media (min-width: 760px) {
	.anruf-leiste { display: none; }
	body { padding-bottom: 0; }
}

/* ---------- Einblendung beim Scrollen (dezent) ---------- */

.js .einblenden {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .6s ease, transform .6s ease;
}
.js .einblenden.sichtbar {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.js .einblenden { opacity: 1; transform: none; transition: none; }
}