/* DrinkLink Oberfläche – CI v2.1 */

@font-face { font-family: "Bebas Neue"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/bebas-neue-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/space-grotesk-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/space-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/space-grotesk-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/space-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/space-mono-latin-700-normal.woff2") format("woff2"); }

:root,
html[data-dl-thema="dunkel"] {
	--dl-mint: #00ffa8;
	--dl-cyan: #00e6ff;
	--dl-gelb: #ffd166;
	--dl-bg: #000000;
	--dl-bg2: #050505;
	--dl-text: #E6E6E6;
	--dl-leise: #9CA3AF;
	--dl-linie: #1c1c1c;
	--dl-rahmen: #262626;
	--dl-karte: #0b0b0b;
	--dl-flaeche: #0c0c0c;
	--dl-bildflaeche: #141414;
	--dl-akzent-text: #00ffa8;
	--dl-grau-filter: grayscale(1) brightness(1.6) opacity(.6);
	color-scheme: dark;
}
html[data-dl-thema="hell"] {
	--dl-bg: #FFFFFF;
	--dl-bg2: #F4F5F3;
	--dl-text: #000000;
	--dl-leise: #4B5563;
	--dl-linie: #E6E6E6;
	--dl-rahmen: #D9DBDE;
	--dl-karte: #FFFFFF;
	--dl-flaeche: #F4F5F3;
	--dl-bildflaeche: #ECEDEB;
	--dl-akzent-text: #00704A;
	--dl-grau-filter: grayscale(1) opacity(.45);
	color-scheme: light;
}

body.dlo-seite { margin: 0; background: var(--dl-bg); }

/* Übrige Seiten: Divi-Kopfzeile und -Footer ausblenden, DrinkLink-Kopfzeile oben */
body.dlo-global #main-header, body.dlo-global #top-header, body.dlo-global #main-footer,
body.dlo-global .et-l--header, body.dlo-global .et-l--footer { display: none !important; }
body.dlo-global #page-container { padding-top: 0 !important; margin-top: 0 !important; }
body.dlo-global.et_vertical_nav #page-container, body.dlo-global.et_vertical_nav #main-content,
body.dlo-global.et_vertical_nav #et-main-area { margin-left: 0 !important; padding-left: 0 !important; }
body.dlo-global > .dlo-kopf, body.dlo-global > .dlo-fuss { width: 100%; }

.dlo, .dlo * { box-sizing: border-box; }
.dlo { font-family: "Space Grotesk", system-ui, sans-serif; color: var(--dl-text); line-height: 1.5; -webkit-font-smoothing: antialiased; }
.dlo-rahmen { background: var(--dl-bg); min-height: 100vh; transition: background-color .25s, color .25s; }
.dlo a { color: var(--dl-akzent-text); text-decoration: none; }
.dlo img { max-width: 100%; height: auto; display: block; }
.dlo h1, .dlo h2, .dlo p { margin: 0; padding: 0; }
.dlo-unsichtbar { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dlo-breit { max-width: 1280px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
.dlo-reihe { display: flex; flex-wrap: wrap; gap: 10px; }
.dlo-leise { color: var(--dl-leise); }
.dlo-hinweis { font-family: "Space Mono", monospace; font-size: 13px; color: var(--dl-leise); border: 1px dashed var(--dl-rahmen); border-radius: 12px; padding: 16px 20px; }

/* Buttons */
.dlo-btn {
	display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px;
	border-radius: 24px; border: 1px solid var(--dl-rahmen); background: transparent;
	color: var(--dl-text) !important; font: 600 19px/1 "Space Grotesk", system-ui, sans-serif; cursor: pointer;
	transition: background-color .18s, color .18s, border-color .18s;
}
.dlo-btn--akzent { border-color: var(--dl-akzent-text); color: var(--dl-akzent-text) !important; }
.dlo-btn--rund { width: 48px; padding: 0; justify-content: center; flex-shrink: 0; }
.dlo-btn--voll { background: var(--dl-mint); border-color: var(--dl-mint); color: #000000 !important; font-size: 16px; font-weight: 700; }
.dlo-btn:hover, .dlo-btn:focus-visible { background: var(--dl-mint); border-color: var(--dl-mint); color: #000000 !important; outline: none; }
.dlo-btn--voll:hover, .dlo-btn--voll:focus-visible { background: var(--dl-cyan); border-color: var(--dl-cyan); }
.dlo-fuss .dlo-btn { font-size: 15px; min-height: 44px; }

/* Kopfzeile */
.dlo-kopf { border-bottom: 1px solid var(--dl-linie); background: var(--dl-bg); position: relative; z-index: 20; }
.dlo-kopf__innen { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding-top: 16px; padding-bottom: 16px; }
.dlo-logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.dlo-logo img:first-child { height: 52px; width: auto; }
.dlo-logo img:last-child { height: 30px; width: auto; }
.dlo-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; flex: 1 1 auto; }
.dlo-nav__aroma { position: relative; }
.dlo-aufklapp {
	position: absolute; top: calc(100% + 8px); left: 0; min-width: 240px; padding: 12px; display: none; flex-direction: column; gap: 2px;
	background: var(--dl-karte); border: 1px solid var(--dl-rahmen); border-radius: 16px; box-shadow: 0 16px 40px rgba(0,0,0,.35);
}
.dlo-nav__aroma:hover .dlo-aufklapp, .dlo-nav__aroma:focus-within .dlo-aufklapp { display: flex; }
.dlo-aufklapp::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.dlo-aufklapp__titel { font-family: "Space Mono", monospace; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--dl-leise); padding: 6px 12px 8px; }
.dlo-aufklapp a { color: var(--dl-text) !important; padding: 10px 12px; border-radius: 10px; font-weight: 500; font-size: 17px; }
.dlo-aufklapp a:hover, .dlo-aufklapp a:focus-visible { background: var(--dl-mint); color: #000000 !important; outline: none; }
.dlo-kopf__rechts { display: flex; align-items: center; gap: 10px; }
.dlo-suche { display: flex; align-items: center; gap: 8px; }
.dlo-suche input {
	width: 0; padding: 0; border: 0; opacity: 0; height: 48px; border-radius: 24px; background: var(--dl-flaeche); color: var(--dl-text);
	font: 400 16px "Space Grotesk", system-ui, sans-serif; transition: width .2s, opacity .2s, padding .2s;
}
.dlo-suche.ist-offen input { width: 240px; padding: 0 18px; border: 1px solid var(--dl-rahmen); opacity: 1; }

/* Hell/Dunkel-Schalter */
.dlo-schalter { height: 48px; width: 88px; border-radius: 24px; border: 1px solid var(--dl-rahmen); background: var(--dl-flaeche); padding: 5px; display: flex; align-items: center; cursor: pointer; }
.dlo-schalter__knopf { width: 36px; height: 36px; border-radius: 18px; background: var(--dl-mint); color: #000000; display: flex; align-items: center; justify-content: center; transition: transform .25s; }
html[data-dl-thema="hell"] .dlo-schalter__knopf { transform: translateX(40px); }
.dlo-schalter__sonne { display: none; }
html[data-dl-thema="hell"] .dlo-schalter__sonne { display: flex; }
html[data-dl-thema="hell"] .dlo-schalter__mond { display: none; }
.dlo-schalter__mond { display: flex; }
.dlo-schalter:hover, .dlo-schalter:focus-visible { border-color: var(--dl-mint); outline: none; }

/* Abschnitte */
.dlo-abschnitt { padding-top: 72px; padding-bottom: 56px; }
.dlo-abschnitt--ende { padding-bottom: 88px; }
.dlo-band { background: var(--dl-bg2); border-top: 1px solid var(--dl-linie); border-bottom: 1px solid var(--dl-linie); }
.dlo-band .dlo-abschnitt { padding-bottom: 72px; }
.dlo-kicker { font-family: "Space Mono", monospace; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--dl-akzent-text); margin-bottom: 10px; }
.dlo-kicker--leise { color: var(--dl-leise); font-size: 12px; }
.dlo-titel { font-family: "Bebas Neue", sans-serif; font-weight: 400; font-size: clamp(44px, 5vw, 64px); line-height: .95; letter-spacing: .01em; color: var(--dl-text); }
.dlo-h2 { font-family: "Bebas Neue", sans-serif; font-weight: 400; font-size: 44px; line-height: 1; color: var(--dl-text); margin-bottom: 32px !important; }
.dlo-kopfzeile { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }

/* Video */
.dlo-video { display: flex; flex-wrap: wrap; gap: 40px; align-items: stretch; }
.dlo-video__spieler { flex: 3 1 560px; min-width: 0; }
.dlo-video__laden, .dlo-video__spieler iframe {
	width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; border: 1px solid var(--dl-rahmen); background: var(--dl-flaeche);
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; cursor: pointer; color: var(--dl-leise);
}
.dlo-video__spieler iframe { padding: 0; display: block; }
.dlo-video__laden--bild { position: relative; background-size: cover; background-position: center; color: #ffffff; overflow: hidden; }
.dlo-video__laden--bild::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.65) 100%); }
.dlo-video__laden--bild > * { position: relative; }
.dlo-video__play { width: 88px; height: 88px; border-radius: 44px; background: var(--dl-mint); color: #000000; display: flex; align-items: center; justify-content: center; transition: background-color .18s, transform .18s; }
.dlo-video__laden:hover .dlo-video__play, .dlo-video__laden:focus-visible .dlo-video__play { background: var(--dl-cyan); transform: scale(1.06); }
.dlo-video__text { font-family: "Space Mono", monospace; font-size: 13px; max-width: 420px; text-align: center; line-height: 1.5; }
.dlo-video__artikel { flex: 2 1 340px; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.dlo-video__artikel .dlo-leise { font-size: 18px; line-height: 1.6; }

/* AromaReise */
.dlo-karussell { display: flex; align-items: center; gap: 16px; }
.dlo-kacheln { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.dlo-kacheln > :nth-child(n+6) { display: none; }
.dlo-kachel {
	min-width: 0; border: 1px solid var(--dl-rahmen); border-radius: 20px; background: var(--dl-karte); padding: 18px 18px 20px;
	display: flex; flex-direction: column; gap: 12px; color: var(--dl-text) !important; transition: border-color .2s, transform .2s;
}
a.dlo-kachel:hover, a.dlo-kachel:focus-visible { border-color: var(--dl-mint); transform: translateY(-4px); outline: none; }
.dlo-kachel img, .dlo-kachel__leer { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; }
.dlo-kachel__leer { display: block; border-radius: 12px; background: var(--dl-bildflaeche); }
.dlo-kachel--bald img { filter: var(--dl-grau-filter); }
.dlo-kachel__kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--dl-akzent-text); }
.dlo-kachel__name { font-family: "Bebas Neue", sans-serif; font-size: 36px; line-height: 1; letter-spacing: .02em; color: var(--dl-text); }
.dlo-kachel__pfade { font-family: "Space Mono", monospace; font-size: 12px; line-height: 1.5; color: var(--dl-leise); }

/* Neu */
.dlo-karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.dlo-karte--leer { border-style: dashed; opacity: .6; }
.dlo-karte--leer .dlo-karte__titel { color: var(--dl-leise); font-weight: 500; }
.dlo-marke--leer { background: transparent; color: var(--dl-leise); border: 1px solid var(--dl-rahmen); }
.dlo-karte { border: 1px solid var(--dl-rahmen); border-radius: 18px; background: var(--dl-karte); overflow: hidden; display: flex; flex-direction: column; color: var(--dl-text) !important; transition: border-color .2s; }
.dlo-karte:hover, .dlo-karte:focus-visible { border-color: var(--dl-cyan); outline: none; }
.dlo-karte__bild { aspect-ratio: 4 / 3; background: var(--dl-bildflaeche); display: block; }
.dlo-karte__bild img { width: 100%; height: 100%; object-fit: cover; }
.dlo-karte__text { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.dlo-marke { align-self: flex-start; font-family: "Space Mono", monospace; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #000000; padding: 4px 10px; border-radius: 6px; }
.dlo-marke--rezept { background: var(--dl-mint); }
.dlo-marke--beitrag { background: var(--dl-cyan); }
.dlo-karte__titel { font-size: 20px; font-weight: 700; line-height: 1.3; }
.dlo-karte__datum { font-family: "Space Mono", monospace; font-size: 12px; color: var(--dl-leise); }

/* Footer */
.dlo-fuss { border-top: 1px solid var(--dl-linie); background: var(--dl-bg2); }
.dlo-fuss__innen { display: flex; flex-wrap: wrap; gap: 48px; justify-content: space-between; padding-top: 56px; padding-bottom: 40px; }
.dlo-fuss__marke { flex: 1 1 260px; display: flex; flex-direction: column; gap: 16px; }
.dlo-fuss__marke p { font-size: 15px; line-height: 1.6; }
.dlo-fuss__marke .dlo-logo img:first-child { height: 44px; }
.dlo-fuss__marke .dlo-logo img:last-child { height: 24px; }
.dlo-fuss__links { flex: 1 1 220px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; font-size: 15px; align-content: start; }
.dlo-fuss__links a { color: var(--dl-leise) !important; }
.dlo-fuss__links a:hover, .dlo-fuss__links a:focus-visible { color: var(--dl-akzent-text) !important; }
.dlo-fuss__social { flex: 0 1 280px; display: flex; flex-direction: column; gap: 12px; }
.dlo-fuss__pflicht { border-top: 1px solid var(--dl-linie); padding-top: 20px; padding-bottom: 32px; font-family: "Space Mono", monospace; font-size: 12px; color: var(--dl-leise); }

/* Schmale Bildschirme */
@media (max-width: 1100px) {
	.dlo-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dlo-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
	.dlo-breit { padding-left: 16px; padding-right: 16px; }
	.dlo-kopf__innen { gap: 12px; }
	.dlo-nav { order: 3; flex-basis: 100%; justify-content: flex-start; flex-wrap: wrap; gap: 8px; }
	.dlo-nav::-webkit-scrollbar { display: none; }
	.dlo-kopf__rechts { margin-left: auto; }
	.dlo-btn { font-size: 16px; min-height: 44px; padding: 0 16px; white-space: nowrap; }
	.dlo-btn--rund { width: 44px; }
	.dlo-suche.ist-offen input { width: 160px; }
	.dlo-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.dlo-karten { grid-template-columns: minmax(0, 1fr); }
	/* AromaReise mobil: zwei Kacheln nebeneinander, Pfeile links und rechts, Wischen geht auch */
	.dlo-karussell { gap: 8px; }
	.dlo-kacheln > :nth-child(n+3) { display: none; }
	.dlo-karussell > .dlo-btn { width: 36px; min-width: 36px; height: 36px; min-height: 36px; padding: 0; flex-shrink: 0; }
	.dlo-kachel { padding: 10px; gap: 8px; }
	.dlo-kachel__name { font-size: 22px; }
	.dlo-kachel__pfade { font-size: 11px; }
	.dlo-abschnitt { padding-top: 48px; padding-bottom: 40px; }
	.dlo-aufklapp { position: fixed; top: auto; left: 16px; right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.dlo *, .dlo-rahmen { transition: none !important; }
}

/* Konto */
body.dlo-konto-seite { background: var(--dl-bg); }
.dlo-konto { min-height: 60vh; }
.dlo-konto .dlo-titel { margin: 8px 0 24px; }
.dlo-konto .dlo-leise { margin: 0 0 20px; }
.dlo-konto__karte .dlo-leise { margin: 0; }
.dlo-konto__raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 8px 0 32px; }
.dlo-konto__karte { background: var(--dl-karte); border: 1px solid var(--dl-rahmen); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.dlo-konto__h { font-family: "Bebas Neue", sans-serif; font-weight: 400; font-size: 30px; line-height: 1; color: var(--dl-text); margin: 0; }
.dlo-konto__daten { display: grid; grid-template-columns: max-content 1fr; gap: 10px 24px; margin: 0; }
.dlo-konto__daten dt { font-family: "Space Mono", monospace; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--dl-leise); padding-top: 3px; }
.dlo-konto__daten dd { margin: 0; color: var(--dl-text); overflow-wrap: anywhere; }
.dlo-feld { width: 100%; font: inherit; font-size: 16px; color: var(--dl-text); background: var(--dl-flaeche); border: 1px solid var(--dl-rahmen); border-radius: 12px; padding: 12px 14px; }
.dlo-feld:focus { outline: 2px solid var(--dl-mint); outline-offset: 1px; }
.dlo-konto .dlo-meldung { border-radius: 12px; padding: 12px 16px !important; margin: 0 0 16px !important; font-size: 15px; }
.dlo-meldung--ok { border: 1px solid var(--dl-mint); color: var(--dl-text); }
.dlo-meldung--fehler { border: 1px solid #e5484d; color: var(--dl-text); }
@media (max-width: 800px) { .dlo-konto__raster { grid-template-columns: 1fr; } }

/* Blog */
body.dlo-blog-seite { background: var(--dl-bg); }
.dlo-blog { min-height: 60vh; }
.dlo-blog__titel { margin: 8px 0 32px !important; }
.dlo-reihe--eng { gap: 6px; }
.dlo-marke--video { background: var(--dl-gelb); color: #000000; }
.dlo-karte__anriss { font-size: 15px; line-height: 1.5; color: var(--dl-leise); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dlo-seiten { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 48px; }
.dlo-seiten span.dlo-btn { cursor: default; }

/* Video in der Seitenleiste des Blogartikels */
.dlo-video-leiste { margin: 0 0 32px; }
.dlo-video-leiste .dlo-kicker { margin-bottom: 10px; }
.dlo-video-leiste .dlo-video__laden { gap: 10px; padding: 12px; border-radius: 12px; }
.dlo-video-leiste .dlo-video__spieler iframe { border-radius: 12px; }
.dlo-video-leiste .dlo-video__play { width: 56px; height: 56px; }
.dlo-video-leiste .dlo-video__play svg { width: 24px; height: 24px; }
.dlo-video-leiste .dlo-video__text { font-size: 10px; line-height: 1.4; }

/* Beitragsbild im Artikel: ein Drittel, links, Text fließt herum */
body.dlo-bild-umfluss .et_post_meta_wrapper img,
body.dlo-bild-umfluss .et_post_meta_wrapper .et_pb_image_container { display: none !important; }
.entry-content img.dlo-beitragsbild { float: left; width: 33.333%; height: auto; margin: 6px 28px 16px 0; border-radius: 12px; }
.entry-content::after { content: ""; display: table; clear: both; }
@media (max-width: 600px) {
	.entry-content img.dlo-beitragsbild { float: none; width: 100%; margin: 0 0 20px; }
}

/* AromaReise: Pfad in der Überschrift */
.dlo-pfad { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px; }
.dlo-pfad a { color: var(--dl-leise) !important; text-decoration: none; transition: color .18s; }
.dlo-pfad a:hover, .dlo-pfad a:focus-visible { color: var(--dl-akzent-text) !important; }
.dlo-pfad__pfeil { color: var(--dl-akzent-text); font-family: "Space Grotesk", sans-serif; font-size: .7em; }
.dlo-aroma__seite[hidden] { display: none; }
.dlo-kachel--still { cursor: default; }
.dlo-karussell > .dlo-btn[hidden] { display: none !important; }
.dlo-pfad__ausbau { color: var(--dl-leise); }
button.dlo-kachel { font: inherit; text-align: left; cursor: pointer; width: 100%; }
.dlo-kachel.ist-gewaehlt { border-color: var(--dl-leise); }

/* Rezepte: Übersicht */
body.dlo-rezepte-seite { background: var(--dl-bg); }
.dlo-rezepte { min-height: 60vh; }
.dlo-rezepte__kopf { padding-top: 64px; padding-bottom: 24px; }
.dlo-rezepte__titelzeile { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 10px; }
.dlo-rezepte .dlo-titel { font-size: clamp(52px, 6vw, 72px); }
.dlo-rezepte__zahl { font-family: "Space Mono", monospace; font-size: 14px; color: var(--dl-leise); }
.dlo-rezepte__suche { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.dlo-rezepte__feld { flex: 1 1 420px; display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 22px; border-radius: 30px; border: 1px solid var(--dl-rahmen); background: var(--dl-flaeche); color: var(--dl-leise); }
.dlo-rezepte__feld input { flex: 1; min-width: 0; height: 100%; border: 0 !important; background: transparent !important; color: var(--dl-text) !important; font: inherit; font-size: 18px; outline: none; box-shadow: none !important; padding: 0 !important; }
.dlo-rezepte__feld:focus-within { border-color: var(--dl-mint); }
.dlo-rezepte__suche .dlo-btn { height: 60px; padding: 0 32px; border-radius: 30px; font-size: 17px; }
.dlo-rezepte__filter { padding-top: 8px; }
.dlo-filterzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--dl-linie); }
.dlo-filterzeile__name { width: 92px; flex-shrink: 0; font-family: "Space Mono", monospace; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--dl-leise); }
.dlo-chip { height: 40px; padding: 0 16px; border-radius: 20px; border: 1px solid var(--dl-rahmen); color: var(--dl-text) !important; display: inline-flex; align-items: center; font-size: 15px; font-weight: 500; text-decoration: none; transition: background-color .18s, border-color .18s, color .18s; }
.dlo-chip:hover, .dlo-chip:focus-visible { background: var(--dl-mint); border-color: var(--dl-mint); color: #000000 !important; outline: none; }
.dlo-chip.ist-an { background: var(--dl-mint); border-color: var(--dl-mint); color: #000000 !important; }
.dlo-rezepte__leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0 6px; }
.dlo-rezepte__sort { display: flex; align-items: center; gap: 10px; }
.dlo-rezepte__sort label { font-family: "Space Mono", monospace; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--dl-leise); }
.dlo-rezepte__sort select { height: 40px; padding: 0 14px; border-radius: 20px; border: 1px solid var(--dl-rahmen); background: var(--dl-flaeche); color: var(--dl-text); font: inherit; font-size: 15px; }
.dlo-abc { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; }
.dlo-abc a { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-family: "Space Mono", monospace; font-size: 14px; font-weight: 700; color: var(--dl-text) !important; background: var(--dl-flaeche); text-decoration: none; transition: background-color .18s, color .18s; }
.dlo-abc a:hover, .dlo-abc a:focus-visible, .dlo-abc a.ist-an { background: var(--dl-mint); color: #000000 !important; outline: none; }
.dlo-rezepte__liste { padding-top: 28px; }
.dlo-rezeptkarten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.dlo-rezeptkarte { border: 1px solid var(--dl-rahmen); border-radius: 18px; background: var(--dl-karte); padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 14px; color: var(--dl-text) !important; text-decoration: none; transition: border-color .2s; }
.dlo-rezeptkarte:hover, .dlo-rezeptkarte:focus-visible { border-color: var(--dl-cyan); outline: none; }
.dlo-rezeptkarte__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-family: "Space Mono", monospace; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--dl-leise); }
.dlo-rezeptkarte__glas { display: flex; align-items: center; gap: 8px; }
.dlo-rezeptkarte__glas svg { color: var(--dl-akzent-text); flex-shrink: 0; }
.dlo-rezeptkarte__titel { font-family: "Bebas Neue", sans-serif; font-size: 38px; line-height: 1; letter-spacing: .01em; }
.dlo-rezeptkarte__zutaten { display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 1.4; }
.dlo-rezeptkarte__zeile { display: flex; gap: 10px; }
.dlo-rezeptkarte__menge { min-width: 58px; font-family: "Space Mono", monospace; font-size: 13px; color: var(--dl-akzent-text); }
.dlo-rezeptkarte__mehr { font-family: "Space Mono", monospace; font-size: 12px; color: var(--dl-leise); }
.dlo-rezeptkarte__marken { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
.dlo-marke--familie { background: var(--dl-cyan); }
.dlo-marke--entwurf { background: transparent; color: var(--dl-leise); border: 1px solid var(--dl-rahmen); }
.dlo-seiten__luecke { display: flex; align-items: center; color: var(--dl-leise); }
@media (max-width: 1100px) { .dlo-rezeptkarten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) {
	.dlo-rezeptkarten { grid-template-columns: minmax(0, 1fr); }
	.dlo-filterzeile__name { width: 100%; }
	.dlo-filterzeile { overflow-x: auto; flex-wrap: nowrap; }
	.dlo-filterzeile__name { width: auto; }
}

/* Rezept: Einzelseite */
body.dlo-rezept-seite { background: var(--dl-bg); }
.dlo-rezept__pfad { padding-top: 40px; }
.dlo-pfadzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-family: "Space Mono", monospace; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--dl-akzent-text); }
.dlo-pfadzeile a { color: var(--dl-leise) !important; }
.dlo-pfadzeile a:hover { color: var(--dl-akzent-text) !important; }
.dlo-pfadzeile [aria-current] { color: var(--dl-text); }
.dlo-rezept__kopf { padding-top: 28px; padding-bottom: 48px; display: flex; flex-wrap: wrap; gap: 40px; align-items: stretch; }
.dlo-rezept__text { flex: 2 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.dlo-rezept__kopf--ohne-medien .dlo-rezept__text { flex-basis: 100%; }
.dlo-rezept__medien { flex: 3 1 520px; min-width: 0; }
.dlo-rezept__bild { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; display: block; }
.dlo-rezept__titel { font-family: "Bebas Neue", sans-serif; font-weight: 400; font-size: clamp(56px, 7vw, 88px); line-height: .9; color: var(--dl-text); margin: 0 !important; }
.dlo-rezept__beschreibung { font-size: 18px; line-height: 1.6; }
.dlo-fakten { margin: 8px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--dl-rahmen); border: 1px solid var(--dl-rahmen); border-radius: 14px; overflow: hidden; }
.dlo-fakten > div { background: var(--dl-karte); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.dlo-fakten dt { font-family: "Space Mono", monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--dl-leise); }
.dlo-fakten dd { margin: 0; font-size: 16px; font-weight: 500; color: var(--dl-text); }
.dlo-rezept__inhalt { padding-top: 56px; padding-bottom: 56px; display: flex; flex-wrap: wrap; gap: 48px; }
.dlo-rezept__zutaten { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.dlo-rezept__zubereitung { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.dlo-rezept__kopfzeile { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.dlo-rezept .dlo-h2 { margin-bottom: 0 !important; }
.dlo-umschalter { display: flex; border: 1px solid var(--dl-rahmen); border-radius: 22px; overflow: hidden; }
.dlo-umschalter button { height: 40px; min-width: 44px; padding: 0 12px; border: 0; background: transparent; color: var(--dl-text); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.dlo-umschalter button[aria-pressed="true"] { background: var(--dl-mint); color: #000000; }
.dlo-zutaten { margin: 0 !important; padding: 0 !important; list-style: none !important; border-top: 1px solid var(--dl-rahmen); }
.dlo-zutaten li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 16px 0 !important; border-bottom: 1px solid var(--dl-rahmen); }
.dlo-zutaten__menge { min-width: 96px; font-family: "Space Mono", monospace; font-size: 17px; font-weight: 700; color: var(--dl-akzent-text); }
.dlo-zutaten__name { flex: 1 1 180px; display: flex; flex-direction: column; gap: 4px; font-size: 18px; font-weight: 600; }
.dlo-zutaten__name a { color: var(--dl-text) !important; }
.dlo-zutaten__name a:hover { color: var(--dl-akzent-text) !important; }
.dlo-zutaten__produkt { font-size: 13px; font-weight: 400; color: var(--dl-leise); }
.dlo-korb [hidden] { display: none !important; }
.dlo-korb .dlo-btn { gap: 10px; }
.dlo-korb__abfrage { border: 1px solid var(--dl-rahmen); border-radius: 16px; background: var(--dl-karte); padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; color: var(--dl-text); }
.dlo-korb__liste { display: flex; flex-direction: column; gap: 4px; }
.dlo-korb__liste label { display: flex; align-items: center; gap: 14px; min-height: 44px; cursor: pointer; font-size: 16px; }
.dlo-korb__liste label span:nth-of-type(1) { flex: 1; }
.dlo-korb__liste input { width: 22px; height: 22px; accent-color: var(--dl-mint); }
.dlo-korb a[aria-disabled="true"] { opacity: .6; pointer-events: none; }
.dlo-rezept__hinweis { font-family: "Space Mono", monospace; font-size: 12px; line-height: 1.5; color: var(--dl-leise); margin: 0 !important; }
.dlo-schritte { margin: 0 !important; padding: 0 !important; list-style: none !important; display: flex; flex-direction: column; gap: 14px; }
.dlo-schritte li { display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px !important; border: 1px solid var(--dl-rahmen); border-radius: 14px; background: var(--dl-karte); font-size: 17px; line-height: 1.5; color: var(--dl-text); }
.dlo-schritte__nr { flex-shrink: 0; width: 36px; height: 36px; border-radius: 18px; background: var(--dl-mint); color: #000000; display: flex; align-items: center; justify-content: center; font-family: "Space Mono", monospace; font-weight: 700; margin-top: -5px; }
.dlo-rezept__werkzeug { display: flex; flex-direction: column; gap: 10px; padding-top: 8px; }
.dlo-rezept__abschnitt { padding-top: 56px; }
.dlo-rezept__abschnitt .dlo-h2 { margin: 8px 0 24px !important; }
.dlo-chip--gross { min-height: 52px; height: auto; padding: 8px 20px; border-radius: 26px; gap: 10px; font-size: 16px; }
.dlo-rezept__fassungen { font-size: 15px; color: var(--dl-leise); }
.dlo-rezept__quelle { font-family: "Space Mono", monospace; font-size: 12px; line-height: 1.6; color: var(--dl-leise); margin-top: 16px !important; }
@media (max-width: 680px) {
	.dlo-fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Blog-Übersicht: Thumbnail ganz sichtbar, 10 px Abstand zum Kartenrand, mehr Text */
.dlo-blog .dlo-karte__bild, .dlo-neu .dlo-karte:not(.dlo-karte--leer) .dlo-karte__bild { aspect-ratio: auto; padding: 10px 10px 0; background: transparent; }
.dlo-blog .dlo-karte__bild img, .dlo-neu .dlo-karte__bild img { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; border-radius: 10px; display: block; }
.dlo-blog .dlo-karte__bild:empty, .dlo-neu .dlo-karte:not(.dlo-karte--leer) .dlo-karte__bild:empty { display: none; }
.dlo-blog .dlo-karte__anriss { -webkit-line-clamp: 7; }
.dlo-korb__abfrage .dlo-leise { font-size: 14px; line-height: 1.5; }

/* Platzhalter in der Rezept-Einzelansicht (fehlende Daten, Layout wie Entwurf) */
.dlo-ph { font-family: "Space Mono", monospace; font-size: .85em; font-weight: 400; color: var(--dl-leise); }
p.dlo-ph { font-size: 15px; line-height: 1.6; margin: 0 !important; }
.dlo-rezept__leerbild { width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; border: 1px dashed var(--dl-rahmen); background: var(--dl-flaeche); display: flex; align-items: center; justify-content: center; padding: 24px; box-sizing: border-box; text-align: center; font-family: "Space Mono", monospace; font-size: 13px; color: var(--dl-leise); }
.dlo-chip--ph { border-style: dashed; color: var(--dl-leise) !important; }
.dlo-chip--ph:hover { background: transparent; border-color: var(--dl-rahmen); color: var(--dl-leise) !important; }
.dlo-rezeptkarte--ph { border-style: dashed; color: var(--dl-leise) !important; }
.dlo-rezeptkarte--ph:hover { border-color: var(--dl-rahmen); }
.dlo-korb--platzhalter .dlo-btn { opacity: .45; cursor: not-allowed; gap: 10px; }
.dlo-marke.dlo-marke--leer { color: var(--dl-leise); background: transparent; }

/* Blog-Reiter: Alle · Drinks · Bar-Grundlagen · AromaReise */
.dlo-blog__reiter { gap: 10px; margin: -12px 0 32px; }
.dlo-rezept__familie-text { max-width: 760px; font-size: 17px; line-height: 1.6; margin: -12px 0 24px !important; }

/* Handy: Kopfzeile in zwei Zeilen (Logo + Knöpfe, darunter alle Menüpunkte sichtbar), Karten 2 × 3 */
@media (max-width: 760px) {
	.dlo-kopf__innen { gap: 10px; padding-top: 12px; padding-bottom: 12px; }
	.dlo-logo { gap: 8px; }
	.dlo-logo img:first-child { height: 38px; }
	.dlo-logo img:last-child { height: 20px; }
	.dlo-kopf__rechts { gap: 6px; }
	.dlo-kopf__rechts .dlo-btn { min-height: 38px; height: 38px; padding: 0 12px; font-size: 15px; }
	.dlo-kopf__rechts .dlo-btn--rund { width: 38px; padding: 0; }
	.dlo-schalter { height: 38px; width: 68px; padding: 3px; }
	.dlo-schalter__knopf { width: 30px; height: 30px; }
	html[data-dl-thema="hell"] .dlo-schalter__knopf { transform: translateX(30px); }
	.dlo-nav .dlo-btn { min-height: 38px; height: 38px; padding: 0 14px; font-size: 15px; }
	.dlo-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.dlo-karte__text { padding: 10px 10px 14px; gap: 6px; }
	.dlo-karte__titel { font-size: 15px; line-height: 1.3; }
	.dlo-karte__datum { font-size: 11px; }
	.dlo-karte .dlo-marke { font-size: 10px; padding: 3px 6px; }
	.dlo-blog .dlo-karte__bild, .dlo-neu .dlo-karte:not(.dlo-karte--leer) .dlo-karte__bild { padding: 6px 6px 0; }
	.dlo-blog .dlo-karte__bild img, .dlo-neu .dlo-karte__bild img { border-radius: 8px; }
	.dlo-blog .dlo-karte__anriss { -webkit-line-clamp: 3; font-size: 13px; }
}
@media (max-width: 380px) {
	.dlo-logo img:last-child { display: none; }
}

/* Platzhalter: Hinweis „Work in progress“ beim Überfahren */
[data-dlo-wip] { cursor: help; position: relative; }
[data-dlo-wip]:hover::after {
	content: "Work in progress"; position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%);
	white-space: nowrap; font-family: "Space Mono", monospace; font-size: 11px; font-weight: 700; letter-spacing: .06em;
	color: #000000; background: var(--dl-gelb); padding: 4px 8px; border-radius: 6px; z-index: 30; pointer-events: none;
}
.dlo-fakten [data-dlo-wip]:hover::after { display: none; } /* Faktentafel schneidet ab: dort reicht der Browser-Hinweis */

/* Desktop breit (ab 1600 px, FullHD bis WQHD): Rahmen bis 2200 px, mehr Spalten */
@media (min-width: 1600px) {
	.dlo-breit { max-width: min(92vw, 2200px); padding-left: 40px; padding-right: 40px; }
	.dlo-kacheln { grid-template-columns: repeat(7, minmax(0, 1fr)); }
	.dlo-kacheln > :nth-child(n+6) { display: flex; }
	.dlo-kacheln > :nth-child(n+8) { display: none; }
	.dlo-karten { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.dlo-rezeptkarten { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.dlo-fakten { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Desktop: Vorschaubild des aktuellen Videos halb so groß (30 % statt 60 % der Breite) */
@media (min-width: 1101px) {
	.dlo-video > .dlo-video__spieler { flex: 0 0 calc((100% - 40px) * .3); }
	.dlo-video > .dlo-video__artikel { flex: 1 1 0; max-width: 1100px; }
}

/* Desktop: AromaReise-Symbole auf 60 % der Kachelbreite */
@media (min-width: 1101px) {
	.dlo-kachel img, .dlo-kachel .dlo-kachel__leer { width: 60%; margin: 0 auto; }
}

/* Blogbeitrag (eigene Vorlage statt Divi) */
body.dlo-beitrag-seite { background: var(--dl-bg); }
.dlo-beitrag__kopf { padding-top: 24px; display: flex; flex-direction: column; gap: 16px; }
.dlo-beitrag__kopf a.dlo-marke { text-decoration: none; }
.dlo-beitrag__titel { font-family: "Bebas Neue", sans-serif; font-weight: 400; font-size: clamp(44px, 5.5vw, 72px); line-height: .95; color: var(--dl-text); margin: 0 !important; max-width: 1100px; }
.dlo-beitrag__meta { font-family: "Space Mono", monospace; font-size: 13px; color: var(--dl-leise); }
.dlo-beitrag__inhalt { padding-top: 36px; padding-bottom: 72px; display: flex; flex-wrap: wrap; gap: 56px; align-items: flex-start; }
.dlo-beitrag__text { flex: 1 1 560px; min-width: 0; color: var(--dl-text); font-size: 18px; line-height: 1.7; }
.dlo-beitrag__bild { float: left; width: 33.333%; height: auto; margin: 6px 28px 16px 0; border-radius: 14px; display: block; }
.dlo-beitrag__fliesstext p { margin: 0 0 18px !important; font-size: 18px; line-height: 1.7; color: var(--dl-text); }
.dlo-beitrag__fliesstext h2, .dlo-beitrag__fliesstext h3 { font-family: "Bebas Neue", sans-serif; font-weight: 400; line-height: 1; color: var(--dl-text); margin: 36px 0 14px !important; padding: 0 !important; }
.dlo-beitrag__fliesstext h2 { font-size: 36px; }
.dlo-beitrag__fliesstext h3 { font-size: 28px; }
.dlo-beitrag__fliesstext ul, .dlo-beitrag__fliesstext ol { margin: 0 0 18px 22px !important; padding: 0 !important; }
.dlo-beitrag__fliesstext li { margin-bottom: 8px; line-height: 1.6; color: var(--dl-text); }
.dlo-beitrag__fliesstext a { color: var(--dl-akzent-text) !important; text-decoration: underline; text-underline-offset: 3px; }
.dlo-beitrag__fliesstext img { max-width: 100%; height: auto; border-radius: 12px; }
.dlo-beitrag__fliesstext blockquote { margin: 0 0 18px; padding: 4px 0 4px 20px; border-left: 3px solid var(--dl-mint); color: var(--dl-leise); }
.dlo-beitrag__ende { clear: both; }
.dlo-beitrag__kommentare { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--dl-rahmen); display: flex; flex-direction: column; gap: 18px; }
.dlo-beitrag__anmelden { border: 1px solid var(--dl-rahmen); border-radius: 16px; background: var(--dl-karte); padding: 20px 22px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; font-size: 16px; }
.dlo-kommentare { list-style: none; margin: 0 !important; padding: 0 !important; display: flex; flex-direction: column; gap: 14px; }
.dlo-kommentar { border: 1px solid var(--dl-rahmen); border-radius: 14px; background: var(--dl-karte); padding: 16px 18px; font-size: 16px; }
.dlo-kommentar__kopf { display: flex; gap: 12px; align-items: baseline; margin-bottom: 6px; }
.dlo-kommentar__kopf span { font-family: "Space Mono", monospace; font-size: 12px; color: var(--dl-leise); }
.dlo-beitrag__kommentare textarea { width: 100%; min-height: 140px; border-radius: 12px; border: 1px solid var(--dl-rahmen); background: var(--dl-flaeche); color: var(--dl-text); font: inherit; font-size: 16px; padding: 12px 14px; box-sizing: border-box; }
.dlo-beitrag__kommentare label { font-family: "Space Mono", monospace; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--dl-leise); }
.dlo-beitrag__leiste { flex: 0 1 360px; min-width: 280px; display: flex; flex-direction: column; gap: 28px; }
.dlo-beitrag__block { display: flex; flex-direction: column; gap: 10px; }
.dlo-beitrag__block .dlo-video__laden { gap: 10px; padding: 12px; border-radius: 14px; }
.dlo-beitrag__zum-rezept { font-weight: 700; color: var(--dl-akzent-text); }
.dlo-beitrag__weiter { border: 1px solid var(--dl-rahmen); border-radius: 14px; background: var(--dl-karte); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; color: var(--dl-text) !important; text-decoration: none; transition: border-color .2s; }
.dlo-beitrag__weiter:hover { border-color: var(--dl-cyan); }
.dlo-beitrag__weiter span { font-size: 15px; font-weight: 600; line-height: 1.35; }
.dlo-beitrag__weiter small { font-family: "Space Mono", monospace; font-size: 11px; color: var(--dl-leise); }
@media (max-width: 760px) {
	.dlo-beitrag__bild { float: none; width: 100%; margin: 0 0 18px; }
	.dlo-beitrag__inhalt { gap: 36px; }
	.dlo-beitrag__leiste { flex-basis: 100%; min-width: 0; }
}
.dlo-beitrag__kopf a.dlo-marke { color: #000000 !important; }
.dlo-beitrag__block .dlo-video__spieler { flex: none; }
.dlo-beitrag__kommentare .dlo-h2 { margin: 0 !important; }
/* Überschriften im Beitragstext auf allen Ebenen im DrinkLink-Stil; Listen neben dem Bild als Block */
.dlo-beitrag__fliesstext h1, .dlo-beitrag__fliesstext h4, .dlo-beitrag__fliesstext h5 { font-family: "Bebas Neue", sans-serif; font-weight: 400; line-height: 1; color: var(--dl-text) !important; margin: 36px 0 14px !important; padding: 0 !important; }
.dlo-beitrag__fliesstext h1 { font-size: 40px; }
.dlo-beitrag__fliesstext h2, .dlo-beitrag__fliesstext h3 { color: var(--dl-text) !important; }
.dlo-beitrag__fliesstext h4, .dlo-beitrag__fliesstext h5 { font-size: 24px; }
.dlo-beitrag__fliesstext ul, .dlo-beitrag__fliesstext ol { display: flow-root; }
.dlo-beitrag__fliesstext li { margin-bottom: 4px !important; }
.dlo-beitrag__fliesstext ul { list-style: disc !important; } .dlo-beitrag__fliesstext ol { list-style: decimal !important; } .dlo-beitrag__fliesstext li { list-style: inherit !important; }