/* =========================================================================== Tag der Landtechnik 2027 – Gestaltung der Veranstaltungsseite (support#661) =========================================================================== Herkunft: css/stil.css aus der eigenstaendigen PHP-Anwendung, die bis 25.08.2026 fuer landtechnik.info gedacht war. ALLES ist auf .tdlt-page gescoped – genau wie die Haendler-Themes auf .dealer-chrome (public/css/dealer/). Ohne das wuerden Regeln wie "a { color: green }" die ganze Seite treffen. Wer hier etwas ergaenzt: der Vorsatz .tdlt-page darf NIE fehlen. Nicht uebernommen aus der Vorlage: - @font-face fuer Source Sans Pro: die Schrift laedt nuxt3 schon selbst (app/assets/css/fonts.css). - .zum-inhalt: den Sprunglink bringt das Layout mit. - .lw-kopf / .lw-menue / .lw-fuss: das waren NACHBAUTEN der Landwirt-Kopf- und -Fusszeile. Genau die sind der Grund fuer den Umzug – jetzt kommen sie als echte Komponenten aus dem Layout. --------------------------------------------------------------------------- Schriftgroessen und Farben: wie die uebrige Seite --------------------------------------------------------------------------- Die Vorlage hatte ihre eigene Skala (1,9rem / 1,625rem / .92rem …). Hier gelten die Werte, die www.landwirt.com ueberall benutzt – die Tailwind-Stufen text-xs .75 / sm .875 / base 1 / lg 1.125 / xl 1.25 / 2xl 1.5 / 3xl 1.875 / 4xl 2.25 rem. Jede Groesse unten ist eine davon, damit die Seite sich nicht wie ein Fremdkoerper liest. Farben aus tailwind.config.js: Text #424242 (grey-400) Ueberschrift #333333 (hgMenu-100) Leise #6F6F6F (grey-100 / hgMenu-50, der Kontrastwert aus dem A11y-Durchgang) Gruen #008a4c (green-lawi-100) Gelb #ffd200 --------------------------------------------------------------------------- GRUEN IST IMMER #008a4c – auch im Dunkelmodus, auch bei Schrift. Das ist die Hausfarbe, und die uebrige Seite haelt es genauso: von 259 Stellen mit text-green-lawi-100 schalten nur 5 im Dunkelmodus auf einen helleren Ton. Ein zweites Gruen waere hier ein Fremdkoerper. (Zum Mitwissen: #008a4c erreicht auf #1f1f1f 3,8:1 und liegt damit unter den 4,5:1, die WCAG AA fuer kleine Schrift verlangt – dasselbe gilt auf der ganzen Seite. Wenn das jemals angefasst wird, dann fuer die Seite als Ganzes und nicht nur hier.) Trotzdem gibt es zwei Variablen, und der Unterschied ist wichtig: --gruen FLAECHEN (Abzeichen, Knopfgrund, Ticketkopf) – weisse Schrift liegt darauf. --gruen-text SCHRIFT, Linien, Rahmen. Wer eine Flaeche einfaerbt, nimmt --gruen. So bleibt der Unterschied sichtbar, falls einer der beiden Werte je angepasst werden muss. =========================================================================== */ .tdlt-page { --gruen: #008a4c; --gruen-text: #008a4c; --gruen-hell: #e6f4ed; --text: #424242; --titel: #333333; --leicht: #6F6F6F; --linie: #e3e3e3; --gelb: #ffd200; --rot: #b3261e; /* Flaechen */ --grund: transparent; /* die Seite selbst – nimmt den Grund der Website */ --flaeche: #ffffff; /* Karten, Kaesten */ --flaeche-grau: #f7f8f7; /* graues Band */ --flaeche-code: #f7f8f7; /* Ticketcode, monospace */ --flaeche-eingabe: #ffffff; --hinweis-grund: #fff8e1; --fehler-grund: #fff5f5; font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; color: var(--text); line-height: 1.5; background: var(--grund); } /* --------------------------------------------------------------------------- Dunkelmodus --------------------------------------------------------------------------- @nuxtjs/color-mode setzt mit classSuffix: '' die Klasse "dark" auf , dasselbe, was Tailwinds dark: benutzt. Die Werte sind die der uebrigen Seite: git-bg #1f1f1f, git-el #303030, git-menu #4f4f4f, git-text #e4e4e4. Nur die Werte werden getauscht, keine Regeln verdoppelt. --------------------------------------------------------------------------- */ html.dark .tdlt-page { /* --gruen und --gruen-text bleiben #008a4c: die Hausfarbe wird nicht umgefaerbt, siehe oben. */ --gruen-hell: #14342a; /* dunkler Gruenton statt #e6f4ed */ --text: #e4e4e4; /* git-text-100 */ --titel: #e4e4e4; --leicht: #b0b0b0; /* 6,3:1 auf #1f1f1f */ --linie: #4f4f4f; /* git-menu-100 */ --rot: #ff8a80; /* #b3261e waere auf Dunkel nicht lesbar */ --flaeche: #303030; /* git-el-100 */ --flaeche-grau: #262626; --flaeche-code: #262626; --flaeche-eingabe: #262626; --hinweis-grund: #3a3000; --fehler-grund: #3a1f1e; } .tdlt-page *, .tdlt-page *::before, .tdlt-page *::after { box-sizing: border-box; } /* hidden muss gewinnen: eigene Regeln mit display (Knoepfe, Leisten) wuerden das Attribut sonst ueberstimmen, und ein per JS verstecktes Element bliebe sichtbar. */ .tdlt-page [hidden] { display: none !important; } /* Die Menuepunkte springen zu Abschnitten dieser Seite. Die Kopfzeile von landwirt.com bleibt beim Scrollen oben stehen – ohne Abstand landet die Ueberschrift genau darunter und ist nicht zu sehen. */ .tdlt-page [id] { scroll-margin-top: 5.5rem; } /* --------------------------------------------------------------------------- Grundwerte zuruecknehmen --------------------------------------------------------------------------- Die Vorlage lief auf einer nackten HTML-Seite und verliess sich auf die Browservorgaben. In nuxt3 gilt zweierlei, das dagegen arbeitet: 1. Tailwinds Preflight nimmt Ueberschriften und Listen ihre Groesse und ihre Punkte und macht Bilder zu Blockelementen. 2. app/assets/css/tailwind.css setzt im @layer base eigene Regeln fuer input, select, textarea, button und label – label sogar auf position:absolute und button auf eine gruene Pille mit fester Breite. Ohne diesen Block stehen im Buchungsformular die Beschriftungen uebereinander und jeder Knopf ist 14 rem breit. --------------------------------------------------------------------------- */ .tdlt-page h1 { font-size: 1.5rem; } .tdlt-page h2 { font-size: 1.25rem; } .tdlt-page h3 { font-size: 1.125rem; } .tdlt-page h1, .tdlt-page h2, .tdlt-page h3 { line-height: 1.25; margin: 0 0 .6rem; font-weight: 700; color: var(--titel); } .tdlt-page p { margin: 0 0 1rem; } .tdlt-page strong { font-weight: 700; } .tdlt-page ul, .tdlt-page ol { list-style: revert; margin: 0 0 1rem; padding-left: 2rem; } .tdlt-page a { color: var(--gruen-text); } /* display bleibt block (Preflight). Zentriert wird deshalb ueber die Raender: in der Vorlage waren Bilder inline und wurden von text-align: center mitgenommen – ohne margin-inline stand das Veranstaltungslogo links. */ .tdlt-page img { max-width: 100%; height: auto; } .tdlt-page label { position: static; top: auto; left: auto; background: none; padding: 0; font-size: inherit; font-weight: inherit; color: inherit; } .tdlt-page button { display: inline-block; width: auto; margin: 0; padding: 0; border-radius: 0; background: none; color: inherit; font: inherit; transition: none; } .tdlt-page input, .tdlt-page select, .tdlt-page textarea { width: auto; border-radius: 6px; padding: .55rem .7rem; } /* --- Kopfbereich der Seite (nicht die Kopfzeile der Website) --------------- Ohne eigene Hintergrundfarbe: der graue Kasten trennte den Bereich optisch vom Rest der Seite, obwohl er dazugehoert (Wunsch 25.08.2026). Die Farbe bringt das Veranstaltungslogo mit. */ .tdlt-page .kopf { background: var(--grund); padding: 2.5rem 1.5rem 3rem; text-align: center; } .tdlt-page .kopf h1 { color: var(--gruen-text); font-size: clamp(1.5rem, 4vw, 2.25rem); margin-bottom: .5rem; } .tdlt-page .kopf-inhalt { max-width: 820px; margin: 0 auto; } .tdlt-page .kopf-logo { width: 260px; margin: 0 auto 1.5rem; } .tdlt-page .kopf-termin { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 1.25rem; line-height: 1.3; margin: 0 0 1rem; color: var(--gruen-text); } .tdlt-page .kopf-unter { font-size: 1.125rem; margin: 0 0 2rem; } .tdlt-page .kopf-knoepfe { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; } .tdlt-page .kopf-preis { margin: 1.2rem 0 0; font-size: .875rem; color: var(--leicht); } .tdlt-page .knopf { display: inline-block; padding: .85rem 1.6rem; border-radius: 8px; font-weight: 700; text-decoration: none; } .tdlt-page .knopf-haupt { background: var(--gelb); color: #333; } .tdlt-page .knopf-haupt:hover { background: #ffdd44; } .tdlt-page .knopf-rand { border: 2px solid var(--gruen-text); color: var(--gruen-text); } .tdlt-page .knopf-rand:hover { background: var(--gruen-hell); } /* Gruene Flaeche mit weisser Schrift – nicht var(--gruen-text) nehmen, das wird im Dunkelmodus hell. */ .tdlt-page .knopf-voll { background: var(--gruen); color: #fff; } .tdlt-page .knopf-voll:hover { filter: brightness(.92); } /* --- Baender und Karten --------------------------------------------------- */ .tdlt-page .band { max-width: 1060px; margin: 0 auto; padding: 3rem 1.5rem; } /* Die Baender liegen im Innenabstand des Content-Bereichs, gehen also nicht bis an den Fensterrand. Damit die eingerueckten Farbflaechen nicht abgeschnitten wirken, bekommen sie dieselbe Rundung wie die Karten der uebrigen Seite. */ .tdlt-page .band-grau { background: var(--flaeche-grau); border-radius: 12px; } .tdlt-page .band-gruen { background: var(--gruen-hell); border-radius: 12px; } .tdlt-page .band-voll { max-width: none; } .tdlt-page .band-voll > .innen { max-width: 1060px; margin: 0 auto; padding: 3rem 1.5rem; } .tdlt-page .band-titel { font-size: 1.5rem; text-align: center; } .tdlt-page .band-unter { text-align: center; color: var(--leicht); margin: 0 0 2rem; } .tdlt-page .raster-drei { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; } .tdlt-page .raster-zwei { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.2rem; } .tdlt-page .zwei-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; } .tdlt-page .karte-hell { background: var(--gruen-hell); border-radius: 10px; padding: 1.4rem; } .tdlt-page .karte-hell h3 { color: var(--gruen-text); } .tdlt-page .karte-hell p { margin: 0; } .tdlt-page .karte-rand { border: 1px solid var(--linie); border-radius: 10px; padding: 1.4rem; } /* --- Programm ------------------------------------------------------------- */ .tdlt-page .programm { list-style: none; padding: 0; margin: 0 auto; max-width: 780px; } .tdlt-page .punkt { display: grid; grid-template-columns: 130px 1fr; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--linie); } .tdlt-page .punkt:last-child { border-bottom: 0; } .tdlt-page .punkt-zeit { font-weight: 700; color: var(--gruen-text); font-variant-numeric: tabular-nums; } .tdlt-page .punkt-pause .punkt-zeit { color: var(--leicht); font-weight: 600; } .tdlt-page .punkt-text strong { display: block; color: var(--titel); } .tdlt-page .punkt-wer, .tdlt-page .punkt-hinweis { display: block; color: var(--leicht); font-size: .875rem; } @media (max-width: 520px) { .tdlt-page .punkt { grid-template-columns: 1fr; gap: .2rem; } } .tdlt-page .workshop { max-width: 780px; margin: 2.5rem auto 0; background: var(--flaeche); border: 2px solid var(--gruen); border-radius: 10px; padding: 1.6rem; } .tdlt-page .workshop ul { padding-left: 1.2rem; } .tdlt-page .workshop li { margin-bottom: .3rem; } .tdlt-page .workshop-zeit { color: var(--gruen-text); font-weight: 700; font-size: .875rem; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 .4rem; } .tdlt-page .workshop-leitung { color: var(--leicht); margin: .8rem 0 0; } /* Platzstand des Workshops: 50 Plaetze, danach ausgebucht. */ .tdlt-page .workshop-plaetze { font-weight: 600; color: var(--gruen-text); margin: .6rem 0 0; } .tdlt-page .workshop-voll { color: var(--rot); } /* --- Referentinnen und Referenten ----------------------------------------- */ .tdlt-page .referenten { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.4rem; } .tdlt-page .referent { text-align: center; min-width: 0; } .tdlt-page .referent-foto { width: 100%; max-width: 150px; margin: 0 auto; aspect-ratio: 1; object-fit: cover; border-radius: 999px; display: block; } .tdlt-page .referent-name, .tdlt-page .referent-rolle { overflow-wrap: break-word; } .tdlt-page .referent-platz { display: grid; place-items: center; background: var(--gruen-hell); color: var(--gruen-text); font-weight: 700; font-size: 1.5rem; } .tdlt-page .referent-name { font-weight: 700; margin: .6rem 0 0; color: var(--titel); } .tdlt-page .referent-rolle { color: var(--leicht); font-size: .875rem; margin: 0; } .tdlt-page .referent-nachweis { color: var(--leicht); font-size: .75rem; margin: .2rem 0 0; } .tdlt-page .referenten-titel { font-size: 1.25rem; margin: 0 0 1.1rem; } /* --- Tickets -------------------------------------------------------------- */ .tdlt-page .ticket-karte { display: flex; flex-direction: column; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px; padding: 1.6rem; color: var(--text); text-decoration: none; transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; } .tdlt-page .ticket-karte:hover { border-color: var(--gruen); box-shadow: 0 6px 18px rgba(0, 0, 0, .1); transform: translateY(-2px); } .tdlt-page .ticket-karte:focus-visible { outline: 3px solid var(--gruen); outline-offset: 3px; } .tdlt-page .ticket-weiter { margin: 1.2rem 0 0; font-weight: 700; color: var(--gruen-text); } .tdlt-page .ticket-karte:hover .ticket-weiter span { margin-left: .2rem; } .tdlt-page .ticket-karte h3 { color: var(--gruen-text); } .tdlt-page .ticket-preis { font-size: 1.875rem; font-weight: 700; margin: .4rem 0; color: var(--titel); } .tdlt-page .ticket-preis span { font-size: .875rem; font-weight: 400; color: var(--leicht); margin-left: .4rem; } .tdlt-page .ticket-marke { display: inline-block; align-self: flex-start; background: var(--gruen); color: #fff; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .25rem .6rem; border-radius: 4px; margin: 0 0 .6rem; } .tdlt-page .ticket-hinweis { color: var(--gruen-text); font-weight: 600; font-size: .875rem; margin: .6rem 0 0; } .tdlt-page .ticket-karte > p:not(.ticket-preis):not(.ticket-hinweis):not(.ticket-weiter) { flex: 1 1 auto; } .tdlt-page .mitte { text-align: center; margin-top: 2rem; } /* Hervorgehobene Early-Bird-Karte. Gruene FLAECHE (--gruen), damit die weisse Schrift darauf im Dunkelmodus lesbar bleibt. */ .tdlt-page .ticket-karte-aktion { position: relative; background: var(--gruen); border: 3px solid var(--gelb); color: #fff; box-shadow: 0 8px 24px rgba(0, 138, 76, .25); } .tdlt-page .ticket-karte-aktion:hover { box-shadow: 0 10px 28px rgba(0, 0, 0, .25); border-color: var(--gelb); } .tdlt-page .ticket-karte-aktion h3, .tdlt-page .ticket-karte-aktion .ticket-preis, .tdlt-page .ticket-karte-aktion .ticket-hinweis { color: #fff; } .tdlt-page .ticket-karte-aktion .ticket-preis span { color: rgba(255, 255, 255, .85); } .tdlt-page .ticket-karte-aktion .ticket-marke { background: var(--gelb); color: #333; } .tdlt-page .ticket-karte-aktion .ticket-weiter { color: var(--gelb); } /* --- Galerie -------------------------------------------------------------- */ .tdlt-page .galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .8rem; } .tdlt-page .galerie img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px; display: block; } .tdlt-page .gross { font-size: 1.125rem; } .tdlt-page .galerie-bild { display: block; border-radius: 8px; cursor: zoom-in; } .tdlt-page .galerie-bild:focus-visible { outline: 3px solid var(--gruen); outline-offset: 3px; } /* Grossansicht. Liegt ueber allem – die Kopfzeile der Website hat z-index 40. */ .tdlt-page .lupe { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(0, 0, 0, .85); } .tdlt-page .lupe-rahmen { margin: 0; max-width: 100%; } .tdlt-page .lupe-rahmen img { display: block; margin: 0 auto; max-width: 100%; max-height: 80vh; border-radius: 6px; } .tdlt-page .lupe-rahmen figcaption { color: #fff; font-size: .875rem; text-align: center; margin-top: .8rem; } .tdlt-page .lupe-zu { position: absolute; top: .8rem; right: 1rem; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .18); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; } .tdlt-page .lupe-zu:hover { background: rgba(255, 255, 255, .32); } .tdlt-page .lupe-zu:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } /* Am body, nicht in .tdlt-page: das Scrollen sperrt die ganze Seite. Eigener Name mit Vorsilbe, damit sich nichts mit anderen Bereichen ueberschneidet. */ body.tdlt-lupe-offen { overflow: hidden; } /* --- Veranstalterstreifen und Zielgruppe ---------------------------------- */ .tdlt-page .veranstalter-band { border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); } .tdlt-page .veranstalter-inhalt { max-width: 1060px; margin: 0 auto; padding: 1.1rem 1.5rem; display: flex; justify-content: center; align-items: center; gap: 2rem; flex-wrap: wrap; } .tdlt-page .veranstalter-marke { color: var(--leicht); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } .tdlt-page .veranstalter-logos { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; justify-content: center; } .tdlt-page .veranstalter-inhalt img { height: 42px; width: auto; } .tdlt-page .zielgruppe { display: flex; align-items: center; gap: .9rem; margin: 2rem auto 0; max-width: 860px; } .tdlt-page .zielgruppe svg { flex: 0 0 auto; } .tdlt-page .zielgruppe p { margin: 0; font-size: 1rem; } /* --- Early-Bird-Pille im Kopfbereich -------------------------------------- */ .tdlt-page .kopf-aktion { margin: 2rem 0 1.6rem; } /* flex-wrap und die Mitte-Ausrichtung, damit die Pille auf schmalen Schirmen sauber umbricht statt aus dem Bild zu laufen. */ .tdlt-page .aktion-pille { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .6rem; background: var(--flaeche); border: 2px solid var(--gruen); border-radius: 999px; padding: .6rem 1.4rem; text-align: center; text-decoration: none; box-shadow: 0 4px 14px rgba(0, 138, 76, .18); } .tdlt-page .aktion-pille:hover { box-shadow: 0 6px 18px rgba(0, 138, 76, .3); } /* „Early Bird" darf nie umbrechen: aus dem zweizeiligen Abzeichen wird in der runden Pille sonst ein Kreis. */ .tdlt-page .aktion-marke { white-space: nowrap; background: var(--gelb); color: #333; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .2rem .6rem; border-radius: 999px; } .tdlt-page .aktion-text { color: var(--text); font-size: 1rem; font-weight: 600; } .tdlt-page .aktion-text strong { color: var(--gruen-text); font-size: 1.25rem; } .tdlt-page .aktion-stern { position: absolute; top: -16px; right: -12px; display: grid; place-items: center; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25)); } .tdlt-page .aktion-stern-gross { top: -20px; right: -16px; } /* --- Programm neben den Referenten ---------------------------------------- Die Vorlage schaltete bei 900 px Fensterbreite auf eine Spalte um. Auf landwirt.com stimmt das nicht mehr: neben dem Content-Bereich steht das Sky-Banner, das Fenster kann also breit sein und der Platz trotzdem knapp. Deshalb eine Container-Abfrage – entscheidend ist die Breite, die der Abschnitt wirklich hat. */ .tdlt-page .innen-breit { container-type: inline-size; } .tdlt-page .programm-spalten { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; } .tdlt-page .programm-spalten .programm { max-width: none; } .tdlt-page .programm-spalten .referenten { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 1.2rem; } .tdlt-page .programm-spalten .workshop { max-width: none; margin: 2.5rem 0 0; } @container (min-width: 1000px) { .tdlt-page .programm-spalten { grid-template-columns: 1.5fr 1fr; gap: 3rem; } } /* Handy-Feinabstimmung nach dem Entwurf export-2 vom 24.08.2026: der Kopfbereich wird kompakter, die zwei Knoepfe bleiben nebeneinander, die Early-Bird-Pille bricht nicht mehr um. */ @media (max-width: 680px) { .tdlt-page .kopf { padding: 1.1rem 1rem 2rem; } .tdlt-page .kopf-logo { width: 170px; margin-bottom: .4rem; } .tdlt-page .kopf-termin { font-size: 1.125rem; } .tdlt-page .kopf-unter { font-size: 1rem; margin-bottom: 1.4rem; } .tdlt-page .kopf-knoepfe { flex-wrap: nowrap; gap: .6rem; } .tdlt-page .kopf-knoepfe .knopf { padding: .75rem 1rem; font-size: .875rem; white-space: nowrap; } .tdlt-page .kopf-aktion { margin: 1.4rem 0 1.2rem; } .tdlt-page .aktion-pille { padding: .5rem .9rem; gap: .5rem; border-radius: 20px; } /* Kein white-space: nowrap wie in der Vorlage – bei 320 px Schirmbreite lief die Pille damit rechts aus dem Bild. Umbrechen ist das kleinere Übel. */ .tdlt-page .aktion-text { font-size: .875rem; } .tdlt-page .aktion-text strong { font-size: 1rem; } .tdlt-page .aktion-stern { top: -14px; right: -8px; } /* Sponsorenlogos untereinander, alle gleich breit – nebeneinander wirken sie zerfahren. */ .tdlt-page .logo-reihe { flex-direction: column; gap: 1.4rem; } .tdlt-page .logo-reihe img { height: auto !important; width: 170px; max-width: 70%; } /* Beschriftung ueber die Logos, sonst steht „Veranstalter" zwischen ARGE und Landwirt. */ .tdlt-page .veranstalter-inhalt { flex-direction: column; gap: .7rem; } .tdlt-page .veranstalter-logos { gap: 1.6rem; } .tdlt-page .veranstalter-inhalt img { height: 34px; } .tdlt-page .zielgruppe { gap: .7rem; } .tdlt-page .zielgruppe p { font-size: 1rem; } } /* Sehr enge Handys (320–400 px): die zwei Knoepfe im Kopfbereich duerfen untereinander, sonst werden sie zu schmal fuer ihre Beschriftung. */ @media (max-width: 400px) { .tdlt-page .kopf-knoepfe { flex-wrap: wrap; } .tdlt-page .kopf-knoepfe .knopf { flex: 1 1 100%; } } /* Mobil zwei Spalten bei den Referenten – drei waeren zu schmal fuer die Namen. */ @media (max-width: 620px) { .tdlt-page .programm-spalten .referenten, .tdlt-page .referenten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; } /* Galerie am Handy zweispaltig – einspaltig wirken die Kacheln riesig. */ .tdlt-page .galerie { grid-template-columns: repeat(2, 1fr); gap: .6rem; } } /* --- Logoreihen ----------------------------------------------------------- Hoehe per CSS und nicht im HTML: die Marken sind unterschiedlich proportioniert, bei gleicher Hoehe wirkt ein quadratisches Logo winzig neben einem breiten. */ .tdlt-page .logo-reihe { display: flex; flex-wrap: wrap; gap: 2rem 3rem; justify-content: center; align-items: center; } .tdlt-page .logo-reihe img { height: 56px; width: auto; max-width: 210px; object-fit: contain; } @media (max-width: 560px) { .tdlt-page .veranstalter-inhalt img { max-height: 40px; height: auto !important; } } /* --------------------------------------------------------------------------- Logos im Dunkelmodus --------------------------------------------------------------------------- Die Fremdlogos sind fuer hellen Grund gemacht: „TAG DER LANDTECHNIK" ist schwarze Schrift auf durchsichtigem Grund und waere auf #1f1f1f unsichtbar, logo-motorex.png bringt sogar einen weissen Kasten mit (das Prillinger-Logo war so eines und ist seit 31.08.2026 ein transparentes PNG -- auf der weissen Auflage sitzt es damit sauber statt Kasten im Kasten). An Fremdlogos darf man nicht herumfaerben (Markenrecht und Optik), deshalb bekommen sie eine weisse Auflage. Mit content-box wachsen die Auflagen um das Logo herum, statt es zu verkleinern. --------------------------------------------------------------------------- */ html.dark .tdlt-page .kopf-logo, html.dark .tdlt-page .veranstalter-inhalt img, html.dark .tdlt-page .logo-reihe img { box-sizing: content-box; background: #fff; border-radius: 10px; } html.dark .tdlt-page .kopf-logo { padding: 1rem 1.2rem; } html.dark .tdlt-page .veranstalter-inhalt img, html.dark .tdlt-page .logo-reihe img { padding: .5rem .75rem; } /* =========================================================================== Buchungsformular, Ticket und Einlass =========================================================================== Wird von den Seiten der zweiten Ausbaustufe benutzt (anmeldung, danke, ticket) und liegt bewusst in derselben Datei: es ist dieselbe Bildsprache, und eine zweite Datei waere ein zweiter Ort zum Pflegen. =========================================================================== */ .tdlt-page .seite { max-width: 780px; margin: 0 auto; padding: 2rem 1.5rem 4rem; } /* Zurueck-Verweis ueber der Ueberschrift (Formular, Ticket, Danke). */ .tdlt-page .zurueck { display: inline-block; margin: 0 0 1rem; font-weight: 600; font-size: .875rem; text-decoration: none; } .tdlt-page .zurueck:hover { text-decoration: underline; } .tdlt-page .zurueck span { margin-right: .3rem; } .tdlt-page .abschnitt { border: 1px solid var(--linie); border-radius: 10px; padding: 1.4rem; margin-bottom: 1.4rem; } .tdlt-page .abschnitt h2 { font-size: 1.125rem; display: flex; align-items: center; gap: .6rem; } .tdlt-page .nummer { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; background: var(--gruen); color: #fff; font-size: .875rem; flex: 0 0 auto; } .tdlt-page .abschnitt-unter { color: var(--leicht); margin: 0 0 1rem; font-size: .875rem; } .tdlt-page .felder { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; } .tdlt-page .feld { display: flex; flex-direction: column; gap: .25rem; font-size: .875rem; } .tdlt-page .feld-breit { grid-column: 1 / -1; } .tdlt-page .feld > span { color: var(--leicht); } .tdlt-page .feld em { color: var(--rot); font-style: normal; } .tdlt-page .feld input, .tdlt-page .feld select, .tdlt-page .feld textarea { font: inherit; width: 100%; padding: .55rem .7rem; border: 1px solid var(--linie); border-radius: 6px; background: var(--flaeche-eingabe); color: var(--text); } .tdlt-page .feld input:focus, .tdlt-page .feld select:focus, .tdlt-page .feld textarea:focus { outline: 2px solid var(--gruen); outline-offset: 1px; border-color: var(--gruen); box-shadow: none; } .tdlt-page .feld.fehlt input, .tdlt-page .feld.fehlt select { border-color: var(--rot); background: var(--fehler-grund); } @media (max-width: 560px) { .tdlt-page .felder { grid-template-columns: 1fr; } } /* Zaehler der begrenzten Zusatzprogramme im Formular. Bewusst auffaellig: die Zahl entscheidet darueber, ob man den Platz noch bekommt. */ .tdlt-page .zaehler { border: 1px solid var(--gruen); background: var(--gruen-hell); border-radius: 8px; padding: .7rem .9rem; margin: 0 0 1rem; } .tdlt-page .zaehler-zeile { margin: 0; font-size: .875rem; color: var(--text); } .tdlt-page .zaehler-zeile + .zaehler-zeile { margin-top: .3rem; } .tdlt-page .zaehler-zeile > strong:first-child { color: var(--gruen-text); } .tdlt-page .zaehler-zeile > strong:first-child::after { content: ':\00a0'; } .tdlt-page .zaehler-eigene { color: var(--leicht); } .tdlt-page .zaehler-voll { color: var(--rot); } .tdlt-page .zaehler-voll > strong:first-child { color: var(--rot); } .tdlt-page .personen { list-style: none; padding: 0; margin: 0 0 1rem; } .tdlt-page .person { border: 1px solid var(--linie); border-radius: 8px; padding: 1rem; margin-bottom: .8rem; background: var(--flaeche-grau); } .tdlt-page .person-kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: .6rem; } .tdlt-page .entfernen { font: inherit; font-size: .875rem; background: none; border: 0; color: var(--rot); cursor: pointer; text-decoration: underline; } .tdlt-page .dazu { font: inherit; font-weight: 600; padding: .6rem 1.2rem; border: 2px dashed var(--gruen); border-radius: 8px; background: var(--flaeche); color: var(--gruen-text); cursor: pointer; } .tdlt-page .dazu:hover { background: var(--gruen-hell); } .tdlt-page .rechnung-tab { width: 100%; border-collapse: collapse; margin-bottom: 1.2rem; } .tdlt-page .rechnung-tab td { padding: .5rem 0; border-bottom: 1px solid var(--linie); } .tdlt-page .rechnung-tab .zahl { text-align: right; font-variant-numeric: tabular-nums; } .tdlt-page .rechnung-tab .klein td { color: var(--leicht); font-size: .875rem; } .tdlt-page .rechnung-tab .gesamt td { font-weight: 700; font-size: 1.125rem; border-bottom: 0; padding-top: .8rem; color: var(--titel); } .tdlt-page .einwilligung { display: flex; gap: .6rem; align-items: flex-start; margin: 1rem 0; font-size: .875rem; } .tdlt-page .einwilligung.fehlt { color: var(--rot); } .tdlt-page .fehlerkasten { background: var(--fehler-grund); border: 1px solid var(--rot); color: var(--rot); border-radius: 6px; padding: .7rem .9rem; margin-bottom: 1rem; } .tdlt-page .fehlerkasten ul { margin: .4rem 0 0; padding-left: 1.2rem; } .tdlt-page .hinweiskasten { background: var(--hinweis-grund); border: 1px solid var(--gelb); border-radius: 8px; padding: 1rem 1.2rem; margin-bottom: 2rem; } .tdlt-page .absenden { width: 100%; font: inherit; font-weight: 700; font-size: 1rem; padding: .9rem 1.4rem; border: 0; border-radius: 8px; background: var(--gruen); color: #fff; cursor: pointer; } .tdlt-page .absenden:hover:not(:disabled) { filter: brightness(.92); } .tdlt-page .absenden:disabled { background: #9e9e9e; cursor: default; } .tdlt-page .zahlhinweis { color: var(--leicht); font-size: .875rem; margin: .8rem 0 0; text-align: center; } /* Zusatzprogramme im Buchungsformular */ .tdlt-page .zusatz-wahl { gap: .5rem; } .tdlt-page .zusatz { display: flex; align-items: flex-start; gap: .6rem; padding: .55rem .7rem; border: 1px solid var(--linie); border-radius: 8px; cursor: pointer; } .tdlt-page .zusatz:hover { background: var(--gruen-hell); } .tdlt-page .zusatz input { margin-top: .25rem; flex: 0 0 auto; width: 18px; height: 18px; padding: 0; accent-color: var(--gruen); } .tdlt-page .zusatz strong { display: block; font-weight: 600; color: var(--text); } .tdlt-page .zusatz em { font-style: normal; color: var(--leicht); font-size: .875rem; } /* Platzstand je Haekchen: eigene Zeile, gruen hervorgehoben (Wunsch 25.08.2026) – die Zahl entscheidet darueber, ob man den Platz noch bekommt. width: fit-content, damit die Flaeche nur so breit ist wie der Text und nicht ueber die ganze Zeile laeuft. */ .tdlt-page .zusatz em.zusatz-frei { display: block; width: fit-content; margin-top: .3rem; padding: .1rem .45rem; border-radius: 4px; background: var(--gruen-hell); color: var(--gruen-text); font-weight: 700; font-size: .875rem; } .tdlt-page .zusatz em.zusatz-frei-voll { background: var(--fehler-grund); color: var(--rot); } .tdlt-page .zusatz-voll { opacity: .6; cursor: default; } .tdlt-page .zusatz-voll:hover { background: none; } /* --- Ticketblatt ---------------------------------------------------------- */ .tdlt-page .ticket-blatt { max-width: 420px; margin: 2rem auto; border: 2px solid var(--gruen); border-radius: 12px; overflow: hidden; background: var(--flaeche); } .tdlt-page .ticket-kopf { background: var(--gruen); color: #fff; padding: 1rem 1.4rem; } .tdlt-page .ticket-kopf p { margin: 0; } .tdlt-page .ticket-koerper { padding: 1.4rem; text-align: center; } /* Der QR muss weissen Grund haben, auch im Dunkelmodus – Scanner erwarten dunkle Module auf hellem Feld. */ .tdlt-page .ticket-qr { width: 240px; height: 240px; margin: 0 auto 1rem; display: block; background: #fff; border-radius: 6px; } .tdlt-page .ticket-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.125rem; font-weight: 700; letter-spacing: .08em; background: var(--flaeche-code); border-radius: 6px; padding: .5rem; } .tdlt-page .ticket-name { font-size: 1.25rem; font-weight: 700; margin: .6rem 0 .2rem; color: var(--titel); } .tdlt-page .ticket-zeile { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-top: 1px solid var(--linie); font-size: .875rem; text-align: left; } .tdlt-page .ticket-zeile span:first-child { color: var(--leicht); } .tdlt-page .ticket-knoepfe { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin: 1.2rem 0 .4rem; } .tdlt-page .ticket-knoepfe .knopf { border: 2px solid var(--gruen-text); background: var(--flaeche); color: var(--gruen-text); font: inherit; font-weight: 700; cursor: pointer; } .tdlt-page .ticket-knoepfe .knopf:hover { background: var(--gruen-hell); } /* --- Druck ---------------------------------------------------------------- Beim Ausdrucken eines Tickets gilt immer die helle Fassung: auf Papier ergeben dunkle Flaechen keinen Sinn und der QR muss lesbar bleiben. */ @media print { .tdlt-page .keindruck, .tdlt-page .lupe { display: none !important; } .tdlt-page, html.dark .tdlt-page { --text: #000; --titel: #000; --leicht: #333; --linie: #999; --flaeche: #fff; --flaeche-grau: #fff; --flaeche-code: #fff; font-size: 11pt; } .tdlt-page .ticket-blatt { border-color: #000; margin: 0; } .tdlt-page .ticket-kopf { background: #fff; color: #000; border-bottom: 2px solid #000; } html.dark .tdlt-page .kopf-logo, html.dark .tdlt-page .veranstalter-inhalt img, html.dark .tdlt-page .logo-reihe img { padding: 0; background: none; } }