{ "$schema": "../../schema.json", "schema": "fundus/1", "id": "lagen-steckbrief-karte", "name": "Lagen mit Steckbrief und eigener Karte", "name_en": "Vineyard sites with fact sheets and a self-drawn map, linked to the wines", "kurz": "Lagen als Liste mit Steckbrief (Foto, Boden, Ausrichtung, Neigung, Höhe, Fläche, Sorten, Klassifikation, Weine mit Grundpreis) und als eigene SVG-Karte mit Höhenlinien und Bodenmustern; Liste und Karte markieren sich gegenseitig, jede Lage hat eine Adresse mit Rückweg zum Wein.", "kategorie": "Sektionen & Funktionen", "kategorie_slug": "sektionen", "kategorie_nr": 16, "bau_chat": "D", "prioritaet": "D", "trendstatus": "etabliert", "belegstatus": "belegt", "website_belege": 3, "stimmung": [ "editorial", "präzise", "warm" ], "stimmung_roh": [ "warm", "klassisch", "sachlich" ], "technik": [ "css", "vanilla-js", "svg", "container-queries" ], "technik_gruppen": [ "css", "js", "canvas" ], "leistungskosten": "niedrig", "steckbrief": { "beschreibung": "Die Lagen eines Weinguts, die Wiesen einer Brennerei oder die Felder eines Hofs als Liste und als eigene Zeichnung ohne Kartendienst. Die Liste ist der Inhalt: je Lage Name, Boden, Ausrichtung, Neigung, Fläche und ein Status. Wer eine Lage wählt, öffnet ihren Steckbrief mit Foto, allen Daten (Boden, Ausrichtung, Neigung in Prozent, Höhe in Metern, Fläche, Rebsorten oder Obstsorten, Klassifikation) und zwei bis vier Weinen mit Jahrgang, Füllmenge, Preis und Grundpreis. Die Karte daneben ist eine zweite Ansicht: Höhenlinien, Fluss, Ort und die Lagen als Flächen mit Namen, Böden in Farbe und Muster mit Legende. Liste und Karte markieren sich gegenseitig. Jede Lage hat eine eigene Adresse (#lage-…), damit die Weinseite auf sie verlinkt und von dort ein Rückweg zum Wein führt. Lagen ohne lieferbaren Wein, gepachtete und neu bepflanzte Flächen sagen das im Text.", "warum_es_wirkt": "Bei Weingütern, Obsthöfen und Brennereien ist der Ort das Argument. Eine Liste mit echten Daten beantwortet, was Kenner wissen wollen (Boden, Ausrichtung, Neigung), und die Zeichnung zeigt, wie die Lagen zueinander liegen, ohne Cookies und ohne fremde Karte. Weil jede Lage ihre Weine nennt und jeder Wein seine Lage, wird aus der Herkunftsgeschichte ein Weg in den Shop. Ehrliche Zustände (ausgetrunken, neu gepflanzt) machen die Lage glaubwürdig.", "wann_einsetzen": "Weingüter mit Lagen- oder Ortsweinen, Sektkellereien mit eigenen Lagen, Brennereien und Obsthöfe mit Streuobstwiesen, Hofläden mit Feldern, Weiden und Ställen, Gärtnereien mit Flächen. Ab etwa drei Flächen; bei einer einzigen Lage reicht ein Steckbrief ohne Karte.", "wann_nicht": "Für den Weg zum Hof oder zur Vinothek ist karte-zwei-klick da (Adresse, Anfahrt, Karte nach Einwilligung). Keine Kartendienst-Kacheln als Untergrund der Lagen (Einwilligung, Gestaltung bricht). Keine Daten schätzen: Neigung, Höhe und Fläche aus dem Weinbergskataster oder einer Vermessung übernehmen, Klassifikationen nur, wenn sie stimmen (VDP-Stufen nur für Mitglieder).", "varianten": [ "Weinberg: Lagen mit Boden, Ausrichtung, Neigung, Höhe, Fläche, Rebsorten, Klassifikation und Weinen", "Obstwiese: Wiesen einer Brennerei mit Sorten, Zahl der Bäume, Baumalter, Erntejahr und Bränden", "Hof: Felder, Weiden, Garten und Ställe eines Hofladens mit dem, was dort wächst, und dem Angebot im Laden" ], "umsetzung": "Daten je Fläche aus einer Quelle: id, Name, Art, Boden, Ausrichtung, Neigung (von bis in Prozent), Höhe (von bis in Metern), Fläche in Hektar, Sorten, Klassifikation, Status (lieferbar, ausgetrunken, gepachtet seit, neu bepflanzt), Foto mit Alt-Text, Weine (Jahrgang, Name, Füllmenge, Preis, Link) und die Fläche als Polygon. Die Liste ist ein
    ; jede Lage ist ein Link auf #lage-, der ihren Steckbrief öffnet (aria-expanded, Fokus bleibt auf dem Link). Der Steckbrief klappt über grid-template-rows 0fr → 1fr auf (öffnen 300 ms, schließen 200 ms) und ist zu inert. Die Karte ist ein inline-SVG: Höhenlinien aus einem Geländemodell (alle 10 m, jede 50. kräftiger und beschriftet), Fluss, Ort, Wald, Lagen als Pfade mit Muster-Füllung () je Boden und Namen als ; jede Fläche ist ein \"> mit Namen. Hover und Fokus in Liste oder Karte markieren beide. Die Adresse mit #lage- öffnet die Lage beim Laden; kommt der Besuch von einer Weinseite (?von=), steht oben im Steckbrief ein Rückweg zum Wein. Grundpreis bei jedem Preis (Preis ÷ Füllmenge). Druckansicht: alle Steckbriefe offen, Karte klein, helle Fläche, Muster statt Farbe; beforeprint/afterprint setzen sie auch beim echten Druck.", "mobil": "Die Karte steht klein über der Liste (volle Breite, ohne Sticky), die Liste bleibt der Inhalt. Steckbriefe öffnen sich in der Liste, Foto oben, Daten zweispaltig, Weine als Zeilen mit Preis und Grundpreis. Trefferflächen der Lagen-Links mindestens 44 px hoch.", "reduzierte_bewegung": "Steckbriefe springen ohne Höhenübergang auf, Fotos stehen sofort ohne Maske und Skalierung, Markierungen ohne Übergang.", "barrierefreiheit": "Die Liste ist der Inhalt und vollständig ohne Karte bedienbar; die Karte ist eine zweite Ansicht mit eigener Beschreibung. Lagen sind Links mit aria-expanded und aria-controls; geschlossene Steckbriefe sind inert. Flächen in der Karte sind Links mit Namen (aria-label mit Boden und Ausrichtung) und sichtbarem Fokus. Böden sind in der Karte durch Muster und Beschriftung unterscheidbar, nicht nur durch Farbe; die Legende nennt Farbe und Muster. Zahlen in Tabellenziffern, Fotos mit beschreibendem Alt-Text. Status (ausgetrunken, gepachtet, neu bepflanzt) als Text." }, "messwerte": { "easing": "cubic-bezier(0.16, 1, 0.3, 1) beim Öffnen, cubic-bezier(0.7, 0, 0.84, 0) beim Schließen; Foto-Maske cubic-bezier(0.37, 0, 0.63, 1), Zurückskalieren cubic-bezier(0.61, 1, 0.88, 1)", "dauer_ms": "Steckbrief öffnen 300, schließen 200; Markierung 150; Foto-Maske 1600, Zurückskalieren 2200 (einmal je Foto)", "stagger_ms": "", "distanz": "Foto scale 1.06 → 1", "sonstiges": "UI-Takt aus token-toggle-asymmetrisch, Foto-Öffnung aus token-luxus-weich (Rezept weingut-hofladen-herkunft: nur Bilder bewegen sich, und nur einmal).", "herkunft": "eigene Festlegung", "quelle": "Rezept weingut-hofladen-herkunft" }, "kurve": { "bezier": [ 0.16, 1.0, 0.3, 1.0 ], "css": "cubic-bezier(0.16, 1, 0.3, 1)", "name": "expo.out", "dauer_ms": 300 }, "gesehen_bei": [ { "seite": "Weingut Wittmann – Lagen (Westhofen, Rheinhessen)", "url": "https://www.weingutwittmann.de/en/lagen/", "auszeichnung": "", "beobachtung": "Aus der Rezept-Runde 02.11.2026 (WebFetch, nur Text): Lagen nach VDP-Stufe gegliedert, eine Übersichtskarte und eine Karte je Lage, ein Foto je Lage mit beschreibendem Alt-Text. Boden, Ausrichtung und Höhe stehen nicht als Daten da.", "art": "website" }, { "seite": "Weingut Bürgerspital zum Hl. Geist – Würzburger Stein", "url": "https://www.buergerspital.de/weingut/weinshop/weinlage/wuerzburgerstein/index.html", "auszeichnung": "", "beobachtung": "Aus der Rezept-Runde 02.11.2026 (WebFetch, nur Text): Lagenseite im Shop mit Klima und Boden in einem Satz („Verwitterter Muschelkalk prägt den Lagenamen und Wein-Charakter“) und Filtern Jahrgang, Weinlage, Rebsorte, Geschmack, Gebinde, Klassifikation. Lage als Filter und als eigene Seite.", "art": "website" }, { "seite": "Weingut Dr. Loosen – Gästezimmer (Bernkastel-Kues, Mosel)", "url": "https://drloosen.de/en/pages/gastezimmer", "auszeichnung": "", "beobachtung": "Aus der Rezept-Runde 02.11.2026 (WebFetch, nur Text): sieben Gästezimmer, jedes nach einer Großen Lage des Guts benannt. Die Lagen tragen die ganze Marke, bis in die Zimmer.", "art": "website" } ], "tutorials": [ { "titel": "MDN: SVG ", "url": "https://developer.mozilla.org/en-US/docs/Web/SVG/Element/pattern" }, { "titel": "MDN: SVG ", "url": "https://developer.mozilla.org/en-US/docs/Web/SVG/Element/a" } ], "kombinierbar_mit": [ "wein-steckbrief-pflichtangaben", "tiefenkarten-relighting", "karte-zwei-klick", "facettenfilter-ergebnisliste", "bild-zoom-in-maske", "kontur-button-zeichnen", "tabellenziffern", "mono-labels-versal" ], "urls": { "detail": "https://cecodesign.de/lab/fundus/sektionen/lagen-steckbrief-karte/", "meta": "https://cecodesign.de/lab/fundus/sektionen/lagen-steckbrief-karte/meta.json", "demo": "https://cecodesign.de/lab/fundus/sektionen/lagen-steckbrief-karte/demo" }, "herkunft": { "quelldateien": [ "Rezept-Runde 02.11.2026" ], "pruefnotizen": [ "Belege aus der Rezept-Runde vom 02.11.2026 (Wittmann, Bürgerspital, Dr. Loosen per WebFetch als Text; CSS und Karten nicht gemessen).", "Keine Referenz zeigt Boden, Ausrichtung, Neigung und Höhe als Daten zusammen mit einer eigenen Karte; diese Kombination ist aus dem Rezept abgeleitet, deshalb teilbelegt.", "Höhen, Neigungen und Flächen in der Demo sind aus einem erfundenen Geländemodell gerechnet; beim Kunden aus Kataster oder Vermessung." ] }, "bau": { "status": "fertig", "kurz": "Lagen als Liste mit Steckbrief (Foto, Boden, Ausrichtung, Neigung, Höhe, Fläche, Sorten, Klassifikation, Weine mit Grundpreis) und als eigene SVG-Karte mit Höhenlinien und Bodenmustern; Liste und Karte markieren sich gegenseitig, jede Lage hat eine Adresse mit Rückweg zum Wein.", "demo": true, "abhaengigkeiten": [], "werte": { "steckbrief": "grid-template-rows 0fr → 1fr; öffnen 300 ms cubic-bezier(0.16, 1, 0.3, 1), schließen 200 ms cubic-bezier(0.7, 0, 0.84, 0), visibility verzögert 200 ms; zu inert", "foto": "einmal je Foto: clip-path inset(100% 0 0 0) → inset(0) in 1600 ms cubic-bezier(0.37, 0, 0.63, 1), scale 1.06 → 1 in 2200 ms cubic-bezier(0.61, 1, 0.88, 1)", "markierung": "150 ms cubic-bezier(0.4, 0, 0.2, 1): Fläche fill-opacity .88 → 1, Rand 2 px Kalk, Namensschild hell; gewählt Rand 3,2 px, übrige Flächen fill-opacity .5; Fokus Rand gestrichelt 7 4", "scrollen": "nach dem Öffnen 320 ms warten, dann scrollIntoView block start (smooth, reduziert sofort)", "karte": "inline-SVG aus eigenem Geländemodell: Höhenlinien alle 10 m (0,8 px, Kalk .17), alle 50 m (1,1 px, Kalk .36, beschriftet), vector-effect non-scaling-stroke; Ausschnitt je Variante (Weinberg 0 140 800 430, Obstwiese 0 50 800 420, Hof 400 330 320 260); Schrift in der Karte calc(var(--s) * px) mit --s = viewBox-Breite ÷ Bildbreite", "boeden": "Farbe + Muster: Muschelkalk #d3cab7 kurze Striche, Lettenkeuper #b88a72 Schraffur 45°, Löss-Lehm #d5b06f Punkte; Hof: Hofstelle #c9c4ba Kreuzschraffur, Garten #a7b37f Beete, Weide #b6c08f Grasbüschel, Acker #b08d66 Furchen", "namensschild": "Rechteck Schiefer mit Kalk-Rand, EB Garamond kursiv 14 px Bildgröße (Faktor viewBox ÷ Breite × .9, .3 bis 2,6)", "farben": "#2f3236 Schiefer (Kapitel), #272a2d Kartengrund, #f1ece2 Kalk (Text), rgba(241,236,226,.76) Nebentext, #e6dccb Löss (Steckbrief), #3a454c Fluss", "schrift": "EB Garamond: Kapitel clamp(2.25rem, 1.5rem + 2.6vw, 3.75rem), Lagenname kursiv 1.875rem; DM Mono für Zahlen, Labels, Status", "layout": "Raster 1.2fr / 1fr, Karte sticky top 16 px; unter 860 px eine Spalte mit Karte über der Liste; Liste als Container: unter 500 px Status unter den Daten", "adresse": "#lage- öffnet beim Laden; ?von= zeigt im Steckbrief „← Zurück zum Wein“; Druckansicht über beforeprint/afterprint, ?druck oder Pult", "vorfuehrung": "Markieren 700 ms, Lage 1 öffnen 1500 ms, Lage 3 (ausgetrunken) 5000 ms, Lage 4 (gepachtet) 7800 ms, Lage 5 (neu bepflanzt) 10400 ms, Ankunft von der Weinseite 13000 ms, Schleife 16200 ms" }, "ausloeser": "klick", "touch": "Unter 860 px steht die Karte klein über der Liste, Namensschilder wachsen mit (Faktor bis 2,6), Tippen auf eine Fläche öffnet die Lage in der Liste und scrollt zu ihr. Lagen-Links mindestens 64 px hoch, Status rückt unter die Daten.", "reduziert": "Steckbriefe ohne Höhenübergang, Fotos sofort ohne Maske und Skalierung, Markierungen ohne Übergang, Scrollen ohne Glätten.", "korrekturen": {}, "geprueft": "02.11.2026", "notiz": "Welt: Weingut Hörlein in Wellbach am Main (erfunden; Franken echt, Lagen erfunden), Rezept weingut-hofladen-herkunft: Lagen-Kapitel auf Schiefer, Steckbrief auf Löss, EB Garamond und DM Mono. Gelände, Karte und Fotos aus einem eigenen Höhenmodell (Python/numpy): Höhenlinien per marching squares, Höhe, Neigung, Ausrichtung und Fläche je Fläche daraus gerechnet; die 13 Ansichten sind Voxel-Renderings desselben Geländes im Herbstlicht (lab/fundus/medien/lagen-steckbrief-karte-*.webp, 19 bis 57 KB). Zustände: Übersicht, Lage gewählt, ausgetrunken (Lettenacker, Birnbaumleite), gepachtet (Kreuzleite, Kartoffelacker), neu bepflanzt (Mühlwinkel, Hohe Wiese), Ankunft von der Weinseite mit Rückweg, Druckansicht. Gegenstück zu wein-steckbrief-pflichtangaben (Link „Zur Lage“). Quellen: weingutwittmann.de, buergerspital.de, drloosen.de. AD-Review-Nachbesserung: Hinweis „Platzhalter · Lagendaten und Klassifikation vom Kunden prüfen lassen“ im Steckbrief (je Variante passend), Kartenunterschrift ohne „daneben“ (auf dem Telefon steht die Liste darunter), Pult rechts statt über Legende und Altershinweis. Offen: Zwetschgengrund zeigt aus dem Höhenmodell 8 bis 70 % Neigung, für eine Streuobstwiese ungewöhnlich steil. AD-Review 02.11.2026: Note 5", "varianten": [ { "id": "weinberg", "name": "Lagen eines Weinguts", "wann": "Weingut, Sektkellerei, Winzergenossenschaft: Lagen mit Boden, Ausrichtung, Neigung, Höhe, Rebsorten, Klassifikation und Weinen.", "werte": { "daten": "Boden, Ausrichtung, Neigung, Höhe, Fläche, Rebsorten, Klassifikation, Besitz", "ausschnitt": "0 140 800 430", "legende": "Böden" }, "knopf": "Weinberg" }, { "id": "obstwiese", "name": "Streuobstwiesen einer Brennerei", "wann": "Brennerei, Obsthof, Saftkelterei: Wiesen mit Sorten, Zahl der Bäume, Baumalter, Erntejahr und Bränden (ab 18).", "werte": { "daten": "Boden, Ausrichtung, Neigung, Höhe, Fläche, Bäume, Baumalter, letzte Ernte, Sorten", "ausschnitt": "0 50 800 420", "legende": "Böden" }, "knopf": "Obstwiese" }, { "id": "hof", "name": "Felder und Ställe eines Hofladens", "wann": "Hofladen, Direktvermarkter, Gärtnerei: Hofstelle, Garten, Weide und Acker mit dem, was dort wächst, und dem Angebot im Laden.", "werte": { "daten": "Nutzung, Boden, Fläche, Höhe, was hier ist, Saison, Status", "ausschnitt": "400 330 320 260", "legende": "Nutzung (Hofstelle, Garten, Weide, Acker)", "grundpreis": "je kg oder l, Stückware je Stück" }, "knopf": "Hof" } ] } }