:root {
color-scheme: light;
--gruen: #2e5d34;
--gruen-hell: #3c6b42;
--gruen-blass: #dcebd8;
--rinde: #5d4a3a;
--kartengrund: #161a15;
--grund: #ebeee8;
--papier: #ffffff;
--linie: #b0baab;
--rand: #76816f;
--schrift: #1c2119;
--schrift-still: #4a5346;
--rot: #b3261e;
--rot-blass: #fdecea;
--gelb: #9a5b00;
--gelb-blass: #fdf3e3;
--gruen-ok: #276b2b;
--gruen-ok-blass: #edf6ed;
--grau-fertig: #5a6472;
--orange: #b34700;
--orange-blass: #fff0e5;
--blau: #1c5fa8;
--blau-blass: #e8f1fb;
--auf-rot: #ffffff;
--signal-rot: #e53935;
--signal-orange: #f57c00;
--signal-orange-blass: #ffe9d6;
--signal-orange-fuell: #fcd8b3;
--signal-gelb: #fdd835;
--signal-gelb-blass: #fff8cc;
--signal-gelb-fuell: #feefae;
--signal-blau: #1e88e5;
--skala: 1;
--leiste-breite: 380px;
--rund: 10px;
--rund-knopf: 7px;
--schatten: 0 1px 3px rgba(28, 33, 25, .16), 0 2px 8px rgba(28, 33, 25, .10);
--schatten-hoch: 0 6px 24px rgba(28, 33, 25, .28);
--kartenfilter: none;
--auf-gruen: #ffffff;
--kopf-grund: var(--gruen);
--kopf-schrift: #ffffff;
--meldung-grund: #1c2119;
--meldung-schrift: #ffffff;
--ebene-aktiv-grund: #ffffff;
--ebene-aktiv-schrift: var(--gruen);
}
:root[data-schrift="mittel"] {
--skala: 1.15;
--leiste-breite: 420px;
}
:root[data-schrift="gross"] {
--skala: 1.35;
--leiste-breite: 470px;
}
:root[data-theme="dark"] {
--gruen: #6aa06f;
--gruen-hell: #86b98a;
--gruen-blass: #1f2a20;
--rinde: #a08a72;
--grund: #161a15;
--papier: #1d221c;
--linie: #333b31;
--rand: #333b31;
--schrift: #e6ece2;
--schrift-still: #9aa694;
--rot: #f2837a;
--rot-blass: #331d1b;
--gelb: #e0a44a;
--gelb-blass: #332a18;
--gruen-ok: #7cc281;
--gruen-ok-blass: #1b2a1c;
--grau-fertig: #8b95a3;
--orange: #f0a060;
--orange-blass: #33241a;
--blau: #7fb3ee;
--blau-blass: #1a2533;
--auf-rot: #1a0f0e;
--signal-rot: #ef5350;
--signal-orange: #fb8c00;
--signal-orange-blass: #3a2414;
--signal-orange-fuell: #604214;
--signal-gelb: #fdd835;
--signal-gelb-blass: #2f2b12;
--signal-gelb-fuell: #605924;
--signal-blau: #42a5f5;
--schatten: 0 2px 10px rgba(0, 0, 0, .5);
--schatten-hoch: 0 6px 26px rgba(0, 0, 0, .62);
--kartenfilter: brightness(0.76) saturate(0.88) contrast(1.06);
--auf-gruen: #10180f;
--kopf-grund: #1b2519;
--kopf-schrift: #e6ece2;
--meldung-grund: #e6ece2;
--meldung-schrift: #161a15;
--ebene-aktiv-grund: var(--gruen);
--ebene-aktiv-schrift: var(--auf-gruen);
color-scheme: dark;
}
* { box-sizing: border-box; }
.startpruefung {
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
z-index: 10000;
overflow: auto;
padding: 28px 22px;
background: #f7f8f5;
background: var(--grund);
color: #1c2119;
color: var(--schrift);
font-size: calc(17px * var(--skala));
line-height: 1.5;
}
.startpruefung h1 { margin: 0 0 12px; font-size: calc(21px * var(--skala)); color: #2e5d34; color: var(--gruen); }
.startpruefung p { margin: 0; max-width: 36em; }
[hidden] { display: none !important; }
html, body {
margin: 0;
height: 100%;
overflow: hidden;
}
body {
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
font-size: calc(15px * var(--skala));
line-height: 1.5;
color: var(--schrift);
background: var(--grund);
display: flex;
flex-direction: column;
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.kopf {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 8px 14px;
background: var(--kopf-grund);
color: var(--kopf-schrift);
box-shadow: var(--schatten);
z-index: 1150;
}
.marke {
margin: 0;
font-size: calc(19px * var(--skala));
font-weight: 650;
letter-spacing: .2px;
white-space: nowrap;
}
.marke-zeichen { font-size: calc(20px * var(--skala)); }
.kopf-werkzeuge {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
justify-content: flex-end;
flex: 0 0 auto;
}
.buehne {
flex: 1 1 auto;
display: flex;
min-height: 0;
}
.kartenfeld {
position: relative;
flex: 1 1 auto;
min-width: 0;
container-type: inline-size;
container-name: karte;
}
.karte {
position: absolute;
inset: 0;
background: var(--kartengrund);
}
.karte.tw-zeichnet { cursor: crosshair; }
.karte.tw-zeichnet .leaflet-interactive { cursor: crosshair; }
.leaflet-tile-pane { filter: var(--kartenfilter); }
.leaflet-container { font: inherit; background: var(--kartengrund); }
.leaflet-container .leaflet-control-attribution {
font-size: calc(9.5px * min(var(--skala), 1.15));
line-height: 1.3;
padding: 1px 5px;
}
:root[data-theme="dark"] .leaflet-control-attribution,
:root[data-theme="dark"] .leaflet-bar a {
background: var(--papier);
color: var(--schrift);
}
:root[data-theme="dark"] .leaflet-bar a { border-bottom-color: var(--linie); }
:root[data-theme="dark"] .leaflet-control-attribution a { color: var(--gruen-hell); }
:root[data-theme="dark"] .leaflet-popup-content-wrapper,
:root[data-theme="dark"] .leaflet-popup-tip,
:root[data-theme="dark"] .leaflet-tooltip {
background: var(--papier);
color: var(--schrift);
border-color: var(--linie);
}
.tw-punktnummer {
background: transparent;
border: 0;
box-shadow: none;
color: #0d47a1;
font-weight: 700;
font-size: calc(11px * var(--skala));
padding: 0;
}
.tw-punktnummer::before { display: none; }
:root[data-theme="dark"] .tw-punktnummer { color: #0d47a1; }
.tw-zeigermass {
position: absolute;
z-index: 650;
transform: translate(-50%, -100%);
pointer-events: none;
background: #0d47a1;
color: #fff;
font-size: calc(12.5px * var(--skala));
font-weight: 700;
font-variant-numeric: tabular-nums;
padding: 4px 9px;
border-radius: 6px;
white-space: nowrap;
box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
.tw-zeigermass::after {
content: "";
position: absolute;
left: 50%;
top: 100%;
margin-left: -4px;
border: 4px solid transparent;
border-top-color: #0d47a1;
}
.tw-kantenmass {
background: rgba(255, 255, 255, .92);
color: #0d47a1;
border: 1px solid #0d47a1;
border-radius: 5px;
box-shadow: none;
font-size: calc(11px * var(--skala));
font-weight: 700;
font-variant-numeric: tabular-nums;
padding: 1px 5px;
white-space: nowrap;
}
.tw-kantenmass::before { display: none; }
:root[data-theme="dark"] .tw-kantenmass {
background: rgba(20, 26, 20, .92);
color: #8ab4f8;
border-color: #8ab4f8;
}
.massstab {
position: absolute;
left: 10px;
bottom: 10px;
z-index: 620;
pointer-events: none;
background: rgba(255, 255, 255, .86);
border: 1px solid var(--linie);
border-top: 0;
border-radius: 0 0 4px 4px;
box-shadow: 0 0 0 1px rgba(255, 255, 255, .5);
color: #1c2119;
font-size: calc(11px * var(--skala));
font-weight: 700;
font-variant-numeric: tabular-nums;
text-align: center;
padding: 1px 4px 2px;
border-top: 3px solid #1c2119;
min-width: 40px;
}
:root[data-theme="dark"] .massstab {
background: rgba(20, 26, 20, .86);
color: var(--schrift);
border-top-color: var(--schrift);
box-shadow: 0 0 0 1px rgba(0, 0, 0, .5);
}
.erfassleiste, .zeichenleiste {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: calc(var(--quellenhoehe, 16px) + 6px);
z-index: 800;
max-width: calc(100% - 24px);
box-shadow: var(--schatten-hoch);
}
.erfassleiste {
display: flex;
align-items: stretch;
gap: 4px;
background: var(--grund);
border: 1px solid var(--linie);
border-radius: var(--rund);
padding: 3px;
}
.erfassknopf {
appearance: none;
border: 0;
border-radius: var(--rund-knopf);
background: transparent;
font: inherit;
font-weight: 600;
font-size: calc(14px * var(--skala));
color: var(--gruen);
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 12px 18px;
min-height: 48px;
cursor: pointer;
white-space: nowrap;
}
.erfassknopf:hover { background: var(--gruen-blass); }
.erfassknopf:active { background: var(--gruen); color: var(--auf-gruen); }
.erfassknopf:focus-visible { outline: 2px solid var(--gruen); outline-offset: -3px; }
.erfasszeichen { font-size: calc(16px * var(--skala)); line-height: 1; }
.zeichenleiste {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 8px;
padding: 10px;
min-width: 280px;
background: var(--papier);
border: 1px solid var(--linie);
border-radius: 14px;
}
.zeichenstand {
font-size: calc(14px * var(--skala));
font-weight: 600;
text-align: center;
padding: 2px 4px 6px;
color: var(--gruen);
}
.zeichenknoepfe { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.knopf-ecke {
width: 100%;
margin-bottom: 8px;
min-height: 52px;
font-size: calc(16px * var(--skala));
}
.knopf {
appearance: none;
font: inherit;
font-weight: 600;
border-radius: var(--rund-knopf);
border: 1.5px solid var(--gruen);
background: var(--gruen);
color: var(--auf-gruen);
padding: 11px 16px;
min-height: 44px;
cursor: pointer;
white-space: nowrap;
}
.knopf:hover { background: var(--gruen-hell); border-color: var(--gruen-hell); }
.knopf:active { transform: translateY(1px); }
.knopf:disabled { opacity: .45; cursor: default; transform: none; }
.knopf-still {
background: var(--papier);
color: var(--gruen);
border-color: var(--rand);
}
.knopf-still:hover { background: var(--gruen-blass); border-color: var(--gruen-hell); }
.knopf-gefahr { background: var(--papier); color: var(--rot); border-color: var(--rot); }
.knopf-gefahr:hover { background: var(--rot); color: var(--auf-gruen); }
.knopf-klein { padding: 7px 12px; min-height: 36px; font-size: calc(13px * var(--skala)); }
.knopf-schliessen { min-height: 36px; padding: 6px 11px; font-size: calc(15px * var(--skala)); }
.knopfreihe { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.leiste {
flex: 0 0 var(--leiste-breite);
display: flex;
flex-direction: column;
background: var(--papier);
border-left: 1px solid var(--linie);
min-height: 0;
}
.leiste-griff { display: none; }
.reiter {
flex: 0 0 auto;
display: flex;
border-bottom: 1px solid var(--linie);
background: var(--grund);
}
.reiter-knopf {
appearance: none;
flex: 1;
border: 0;
border-bottom: 3px solid transparent;
background: transparent;
font: inherit;
font-weight: 600;
color: var(--schrift-still);
padding: 12px 8px;
cursor: pointer;
min-height: 46px;
}
.reiter-knopf:hover { background: var(--gruen-blass); }
.reiter-aktiv { color: var(--gruen); border-bottom-color: var(--gruen); background: var(--papier); }
.blatt {
flex: 1 1 auto;
overflow-y: auto;
padding: 12px;
-webkit-overflow-scrolling: touch;
}
.zusammenzug {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 14px;
}
.zusammenzug > .zusammenzug-kachel { flex: 1 1 130px; }
.kalenderreihe { margin: -6px 0 12px; justify-content: flex-end; }
.zusammenzug-kachel {
background: var(--grund);
border: 1px solid var(--linie);
border-radius: var(--rund);
padding: 9px 6px;
text-align: center;
line-height: 1.25;
}
.zusammenzug-kachel b { display: block; font-size: calc(21px * var(--skala)); font-weight: 700; }
.zusammenzug-kachel span { display: block; font-size: calc(11.5px * var(--skala)); color: var(--schrift-still); }
.zusammenzug-knopf {
appearance: none;
font: inherit;
color: inherit;
cursor: pointer;
width: 100%;
}
.zusammenzug-knopf:hover:not(:disabled) { border-color: var(--gruen); }
.zusammenzug-knopf:disabled { cursor: default; opacity: .7; }
.zusammenzug > .zusammenzug-breit { flex-basis: 100%; }
.zusammenzug-unter {
display: block;
font-size: calc(11px * var(--skala));
color: var(--schrift-still);
margin-top: 2px;
}
.listengruppe {
display: flex;
align-items: baseline;
gap: 8px;
margin: 6px 0 0;
padding: 4px 6px;
border-radius: var(--rund);
font-size: calc(13px * var(--skala));
color: var(--schrift-still);
text-transform: uppercase;
letter-spacing: .04em;
}
.listengruppe:first-child { margin-top: 0; }
.listengruppe-zahl {
font-weight: 650;
color: var(--schrift);
text-transform: none;
letter-spacing: 0;
}
.listengruppe-hin {
background: var(--gruen-blass);
color: var(--gruen);
}
.rand-rot { border-color: var(--signal-rot); }
.rand-orange { border-color: var(--signal-orange); }
.rand-gelb { border-color: var(--signal-gelb); }
.knopfreihe-voll { display: flex; }
.einsammelknopf {
--stand: var(--rand);
--stand-fuell: var(--grund);
--anteil: 0%;
flex: 1 1 auto;
width: 100%;
min-height: 48px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 2px 12px;
padding: 10px 14px;
border: 2px solid var(--stand);
background: linear-gradient(to right, var(--stand-fuell) var(--anteil), var(--papier) var(--anteil));
color: var(--schrift);
font-weight: 650;
text-align: left;
}
.einsammelknopf-stand { font-weight: 500; font-size: calc(12.5px * var(--skala)); font-variant-numeric: tabular-nums; }
.einsammel-faellig { --stand: var(--rot); background: var(--rot); color: var(--auf-rot); }
.einsammel-begonnen { --stand: var(--signal-orange); --stand-fuell: var(--signal-orange-fuell); }
.einsammel-fast { --stand: var(--signal-gelb); --stand-fuell: var(--signal-gelb-fuell); }
.einsammel-fertig { --stand: var(--gruen-ok); --stand-fuell: color-mix(in srgb, var(--gruen-ok) 26%, var(--papier)); }
.einsammel-anteil-0 { --anteil: 0%; }
.einsammel-anteil-1 { --anteil: 10%; }
.einsammel-anteil-2 { --anteil: 20%; }
.einsammel-anteil-3 { --anteil: 30%; }
.einsammel-anteil-4 { --anteil: 40%; }
.einsammel-anteil-5 { --anteil: 50%; }
.einsammel-anteil-6 { --anteil: 60%; }
.einsammel-anteil-7 { --anteil: 70%; }
.einsammel-anteil-8 { --anteil: 80%; }
.einsammel-anteil-9 { --anteil: 90%; }
.einsammel-anteil-10 { --anteil: 100%; }
.warn-gruen { background: var(--gruen-ok-blass); border-color: var(--gruen-ok); }
.warn-gruen b { color: var(--gruen-ok); }
.warn-grau b { color: var(--grau-fertig); }
.liste { display: flex; flex-direction: column; gap: 8px; }
.eintrag {
border: 1px solid var(--linie);
border-left: 5px solid var(--linie);
border-radius: var(--rund);
padding: 10px 12px;
background: var(--papier);
}
.eintrag-ueberfaellig, .termin-ueberfaellig { --zustand: var(--signal-orange); }
.eintrag-anstehend, .termin-anstehend { --zustand: var(--signal-gelb); }
.arbeit-einsammlung.eintrag-ueberfaellig, .arbeit-einsammlung.eintrag-anstehend,
.arbeit-entfernen.eintrag-ueberfaellig, .arbeit-entfernen.eintrag-anstehend,
.arbeit-einsammlung.termin-ueberfaellig, .arbeit-einsammlung.termin-anstehend,
.arbeit-entfernen.termin-ueberfaellig, .arbeit-entfernen.termin-anstehend { --zustand: var(--signal-rot); }
.eintrag-ueberfaellig, .eintrag-anstehend { border-color: var(--zustand); }
.eintrag-ruhig { border-left-color: var(--gruen-ok); }
.eintrag-fertig { border-left-color: var(--grau-fertig); background: var(--grund); }
.eintrag-kopf {
display: flex;
align-items: baseline;
gap: 7px;
margin-bottom: 3px;
}
.eintrag-zeichen { font-size: calc(15px * var(--skala)); }
.eintrag-titel {
font-weight: 650;
flex: 1 1 auto;
overflow-wrap: anywhere;
}
.eintrag-frist {
font-size: calc(12px * var(--skala));
font-weight: 600;
color: var(--schrift-still);
white-space: nowrap;
}
.eintrag-zeile { font-size: calc(13px * var(--skala)); color: var(--schrift-still); }
.eintrag-schutz > span { display: block; }
.eintrag-arten { font-style: italic; }
.eintrag-knoepfe { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.eintrag-schmal { border-left-width: 1px; }
.liste-schmal .eintrag { padding: 8px 10px; }
.leerhinweis {
color: var(--schrift-still);
font-size: calc(14px * var(--skala));
text-align: center;
padding: 26px 14px;
background: var(--grund);
border-radius: var(--rund);
margin: 0;
}
.infobox {
position: fixed;
top: var(--kopfhoehe, 52px);
right: 0;
bottom: 0;
width: var(--leiste-breite);
background: var(--papier);
border-left: 1px solid var(--linie);
box-shadow: var(--schatten-hoch);
overflow-y: auto;
z-index: 1000;
-webkit-overflow-scrolling: touch;
}
.infobox-inhalt { padding: 12px; }
.infobox-titel {
position: sticky;
top: 0;
z-index: 5;
margin: -12px -12px 10px;
padding: 12px 12px 8px;
background: var(--papier);
border-bottom: 1px solid var(--linie);
}
.infobox-kopf { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.infobox-titel .infobox-kopf { margin-bottom: 6px; }
.infobox-titel .projektmarke { margin: 0; }
.feld-titel {
flex: 1 1 auto;
font-size: calc(17px * var(--skala));
font-weight: 650;
min-width: 0;
}
.masszeile {
display: flex;
flex-wrap: wrap;
gap: 4px 12px;
font-size: calc(13px * var(--skala));
color: var(--schrift-still);
padding: 8px 10px;
background: var(--grund);
border-radius: var(--rund);
margin-bottom: 12px;
}
.masszeile b { color: var(--schrift); font-size: calc(15px * var(--skala)); }
.quellmarke {
background: var(--gruen-blass);
color: var(--gruen);
border-radius: 20px;
padding: 1px 9px;
font-weight: 600;
font-size: calc(11.5px * var(--skala));
}
.artzeile {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 10px;
margin-bottom: 12px;
}
.artmarke {
background: var(--gruen-blass);
color: var(--gruen);
border-radius: 20px;
padding: 2px 10px;
font-weight: 650;
font-size: calc(12px * var(--skala));
}
.artmarke-was {
font-size: calc(12px * var(--skala));
color: var(--schrift-still);
}
.termine { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.termin {
border: 1px solid var(--linie);
border-left: 5px solid var(--linie);
border-radius: var(--rund);
padding: 10px;
}
.termin-ueberfaellig, .termin-anstehend { border-color: var(--zustand); }
.termin-ruhig { border-left-color: var(--gruen-ok); }
.termin-fertig { border-left-color: var(--grau-fertig); background: var(--grund); }
.termin-kopf { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.termin-zeichen { font-size: calc(15px * var(--skala)); }
.termin-frist { font-size: calc(12px * var(--skala)); color: var(--schrift-still); margin-left: auto; font-weight: 600; }
.termin-felder {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 8px;
margin: 8px 0 6px;
}
.termin-feld { font-size: calc(12px * var(--skala)); color: var(--schrift-still); display: block; min-width: 0; }
.termin-feld .feld-mit-einheit { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.termin-feld .feld-mit-einheit .feld { width: 100%; }
.termin-knoepfe { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.feld-mit-einheit { display: flex; align-items: center; gap: 6px; }
.feld-mit-einheit .feld { width: calc(68px * var(--skala)); }
.einheit { font-size: calc(12px * var(--skala)); color: var(--schrift-still); }
.schalter { font-size: calc(12px * var(--skala)); color: var(--schrift-still); display: flex; align-items: center; gap: 5px; }
.schalter input { width: 17px; height: 17px; }
.feld {
font: inherit;
width: 100%;
padding: 9px 10px;
border: 1.5px solid var(--rand);
border-radius: 8px;
background: var(--papier);
color: var(--schrift);
min-height: 42px;
}
.feld:focus {
outline: 2px solid var(--gruen-hell);
outline-offset: 1px;
border-color: var(--gruen-hell);
}
textarea.feld { min-height: 68px; resize: vertical; }
.feld-zahl { width: calc(82px * var(--skala)); }
.feld-voll { display: block; font-size: calc(12px * var(--skala)); color: var(--schrift-still); margin: 8px 0; }
.feld-breit { grid-column: 1 / -1; }
.feldgitter {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin: 8px 0;
}
.feldgitter label { font-size: calc(12px * var(--skala)); color: var(--schrift-still); }
.artenliste { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.artenzeile { display: flex; gap: 6px; align-items: center; }
.klapp {
border: 1px solid var(--linie);
border-radius: var(--rund);
padding: 8px 10px;
margin-bottom: 8px;
background: var(--papier);
}
.klapp > summary {
font-weight: 650;
cursor: pointer;
padding: 4px 0;
min-height: 32px;
list-style-position: inside;
}
.klapp > summary:hover { color: var(--gruen); }
.suchzeile { margin-bottom: 10px; }
.projektzeile {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 4px 8px;
margin-bottom: 8px;
padding: 6px 6px 6px 10px;
background: var(--grund);
border-radius: var(--rund);
font-size: calc(13px * var(--skala));
color: var(--schrift-still);
}
.projektzeile b { color: var(--schrift); overflow-wrap: anywhere; }
.projektzeile-text { min-width: 0; }
.projektzeile-zahl { white-space: nowrap; }
.projektmarke {
margin: -4px 0 10px;
font-size: calc(12.5px * var(--skala));
color: var(--schrift-still);
overflow-wrap: anywhere;
}
.projektmarke b { color: var(--schrift); font-weight: 600; }
.namensherkunft {
margin: 0 0 10px;
font-size: calc(12px * var(--skala));
line-height: 1.4;
color: var(--schrift-still);
}
.feldgruppe {
border: 1px solid var(--linie);
border-radius: var(--rund);
padding: 12px;
margin-bottom: 12px;
}
.feldgruppe h2 { margin: 0 0 8px; font-size: calc(15px * var(--skala)); color: var(--gruen); }
.hinweis {
font-size: calc(12.5px * var(--skala));
color: var(--schrift-still);
line-height: 1.5;
margin: 8px 0;
}
.hinweis-warn {
background: var(--gelb-blass);
border-left: 3px solid var(--gelb);
padding: 8px 10px;
border-radius: 0 6px 6px 0;
color: var(--schrift);
}
.datenhinweis {
background: var(--gelb-blass);
border-left: 3px solid var(--gelb);
border-radius: 0 var(--rund) var(--rund) 0;
padding: 10px 12px;
margin-bottom: 14px;
font-size: calc(13px * var(--skala));
line-height: 1.45;
color: var(--schrift);
}
.datenhinweis p { margin: 4px 0 8px; }
.datenhinweis .knopfreihe { margin: 0; }
.hinweis-gut {
background: var(--gruen-ok-blass);
border-left: 3px solid var(--gruen-ok);
padding: 8px 10px;
border-radius: 0 6px 6px 0;
color: var(--schrift);
}
.hinweis-gefahr {
background: var(--rot-blass);
border-left: 3px solid var(--rot);
padding: 8px 10px;
border-radius: 0 6px 6px 0;
color: var(--schrift);
}
.hinweis-gefahr p { margin: 4px 0; }
.hinweis-titel { font-weight: 700; color: var(--rot); }
.wink-knopf {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
min-height: 32px;
padding: 0 4px;
margin-left: 2px;
vertical-align: middle;
border: 0;
background: none;
color: var(--schrift-still);
cursor: pointer;
border-radius: 6px;
}
.wink-knopf:hover { color: var(--gruen); background: var(--gruen-blass); }
.wink-knopf:focus-visible { outline: 2px solid var(--gruen); outline-offset: 2px; }
.wink-knopf[aria-expanded="true"] { color: var(--gruen); background: var(--gruen-blass); }
.wink {
font-size: calc(12.5px * var(--skala));
color: var(--schrift-still);
line-height: 1.5;
margin: 2px 0 10px;
padding: 8px 10px;
background: var(--gruen-blass);
border-left: 3px solid var(--linie);
border-radius: 0 6px 6px 0;
}
.wink p { margin: 0 0 6px; }
.wink p:last-child { margin-bottom: 0; }
.wink a { color: var(--gruen); }
.verlauf { list-style: none; margin: 6px 0 0; padding: 0; font-size: calc(13px * var(--skala)); }
.verlauf li { padding: 6px 0; border-bottom: 1px solid var(--linie); }
.verlauf li:last-child { border-bottom: 0; }
.verlauf-datum { color: var(--schrift-still); font-size: calc(12px * var(--skala)); margin-left: 6px; }
.verlauf-notiz { color: var(--schrift-still); font-size: calc(12.5px * var(--skala)); margin-top: 2px; }
.suchfeld {
position: relative;
z-index: 950;
display: flex;
flex: 1 1 auto;
min-width: 150px;
max-width: 420px;
border-radius: var(--rund);
}
.suchfeld .feld {
flex: 1 1 auto;
min-width: 0;
border-radius: var(--rund) 0 0 var(--rund);
border-right: 0;
min-height: 38px;
padding: 7px 12px;
font-size: calc(14px * var(--skala));
}
.suchfeld .knopf {
border-radius: 0 var(--rund) var(--rund) 0;
min-height: 38px;
min-width: 40px;
padding: 7px 11px;
}
.suchtreffer {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
z-index: 1100;
background: var(--papier);
border: 1px solid var(--linie);
border-radius: var(--rund);
box-shadow: var(--schatten-hoch);
overflow: hidden;
max-height: 260px;
overflow-y: auto;
}
.suchtreffer button {
display: block;
width: 100%;
text-align: left;
border: 0;
border-bottom: 1px solid var(--linie);
background: transparent;
color: var(--schrift);
font: inherit;
font-size: calc(13px * var(--skala));
padding: 10px 12px;
cursor: pointer;
min-height: 42px;
}
.suchtreffer button:last-child { border-bottom: 0; }
.suchtreffer button:hover,
.suchtreffer button.treffer-aktiv { background: var(--gruen-blass); color: var(--gruen); }
.menuefeld { position: relative; }
.knopf-symbol {
padding: 9px 12px;
min-width: 42px;
font-size: calc(15px * var(--skala));
text-align: center;
}
.menue {
position: absolute;
top: calc(100% + 6px);
right: 0;
z-index: 1100;
background: var(--papier);
border: 1px solid var(--linie);
border-radius: var(--rund);
box-shadow: var(--schatten-hoch);
min-width: 210px;
overflow: hidden;
max-height: calc(100vh - 80px);
max-height: calc(100dvh - 80px);
overflow-y: auto;
}
.menue button, .menue a {
display: block;
width: 100%;
text-align: left;
border: 0;
border-bottom: 1px solid var(--linie);
background: transparent;
color: var(--schrift);
text-decoration: none;
font: inherit;
font-size: calc(14px * var(--skala));
padding: 12px 14px;
cursor: pointer;
min-height: 46px;
}
.menue button:last-child, .menue a:last-child { border-bottom: 0; }
.menue button:hover, .menue a:hover { background: var(--gruen-blass); color: var(--gruen); }
.menue-fassung {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 9px 12px;
border-top: 1px solid var(--linie);
font-size: calc(11.5px * var(--skala));
color: var(--schrift-still);
white-space: nowrap;
}
.menue .menue-fassung .knopf {
width: auto;
min-height: 34px;
padding: 6px 10px;
border: 1px solid var(--rand);
border-radius: var(--rund-knopf);
font-size: calc(12px * var(--skala));
}
.menue-gruppe {
padding: 10px 12px 12px;
border-bottom: 1px solid var(--linie);
}
.menue-gruppe-bez {
display: block;
font-size: calc(11.5px * var(--skala));
color: var(--schrift-still);
margin-bottom: 6px;
}
.schriftwahl {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4px;
background: var(--grund);
border: 1px solid var(--rand);
border-radius: var(--rund);
padding: 3px;
}
.menue .schriftwahl button,
.schriftwahl-dialog button {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1px;
width: auto;
min-height: 52px;
padding: 6px 4px;
border: 0;
border-radius: 7px;
text-align: center;
font-size: calc(11.5px * var(--skala));
color: var(--schrift-still);
background: transparent;
font-family: inherit;
cursor: pointer;
}
.menue .schriftwahl button:hover,
.schriftwahl-dialog button:hover { background: var(--gruen-blass); color: var(--gruen); }
.menue .schriftwahl button[aria-pressed="true"],
.schriftwahl-dialog button[aria-pressed="true"] {
background: var(--gruen);
color: var(--auf-gruen);
font-weight: 650;
box-shadow: var(--schatten);
}
.sprachwahl {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
gap: 4px;
background: var(--grund);
border: 1px solid var(--rand);
border-radius: var(--rund);
padding: 3px;
}
.menue .sprachwahl a {
display: flex;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 6px 4px;
border-radius: 7px;
text-align: center;
text-decoration: none;
font-size: calc(12px * var(--skala));
color: var(--schrift-still);
}
.menue .sprachwahl a:hover { background: var(--gruen-blass); color: var(--gruen); }
.menue .sprachwahl a[aria-current="true"] {
background: var(--gruen);
color: var(--auf-gruen);
font-weight: 650;
box-shadow: var(--schatten);
}
.sprachwahl-kurz {
grid-template-columns: none;
grid-auto-flow: column;
grid-auto-columns: minmax(36px, auto);
align-self: center;
}
.sprachwahl-kurz a {
display: flex;
align-items: center;
justify-content: center;
min-height: 30px;
padding: 4px 8px;
border-radius: 7px;
text-decoration: none;
font-size: calc(12px * var(--skala));
font-weight: 600;
letter-spacing: .04em;
color: var(--schrift-still);
}
.sprachwahl-kurz a:hover { background: var(--gruen-blass); color: var(--gruen); }
.sprachwahl-kurz a[aria-current="true"] {
background: var(--gruen);
color: var(--auf-gruen);
box-shadow: var(--schatten);
}
#hilfeDialog .dialog-kopf {
display: grid;
grid-template-columns: 1fr auto auto;
align-items: center;
}
@media (max-width: 520px) {
#hilfeDialog .dialog-kopf { grid-template-columns: 1fr auto; }
#hilfeDialog .sprachwahl-kurz { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
}
#hilfeDialog .dialog-body:focus { outline: none; }
.hilfe-schrift { margin-bottom: 14px; }
.schriftprobe { line-height: 1; font-weight: 700; }
.schriftprobe-klein { font-size: 13px; }
.schriftprobe-mittel { font-size: 16px; }
.schriftprobe-gross { font-size: 19px; }
.menue-breit { min-width: min(330px, calc(100vw - 24px)); }
.menue .menue-eintrag {
display: flex;
align-items: flex-start;
gap: 8px;
}
.menue-haken {
flex: 0 0 auto;
width: 14px;
color: var(--gruen);
visibility: hidden;
line-height: 1.35;
}
.menue-eintrag-aktiv .menue-haken { visibility: visible; }
.menue-eintrag-aktiv { background: var(--gruen-blass); }
.menue-eintrag-aktiv .menue-name { color: var(--gruen); font-weight: 650; }
.menue-text { display: block; min-width: 0; }
.menue-name { display: block; line-height: 1.35; }
.menue-neben {
display: block;
font-size: calc(12px * var(--skala));
line-height: 1.4;
color: var(--schrift-still);
margin-top: 2px;
white-space: normal;
}
.menue-eintrag:hover .menue-neben { color: inherit; }
.menue-link > .zeichen { margin-top: 0.15em; flex: 0 0 auto; }
.artengruppe { margin: 22px 0 6px; }
.artengruppe-kopf {
display: flex;
align-items: baseline;
gap: 8px;
margin: 0 0 2px;
font-size: calc(14px * var(--skala));
font-weight: 650;
color: var(--gruen);
}
.artengruppe-zahl {
font-size: calc(11.5px * var(--skala));
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--schrift-still);
background: var(--grund);
border-radius: 999px;
padding: 1px 7px;
}
.artengruppe-was { margin: 0 0 8px; }
.artengruppe-fernkopf {
display: flex;
align-items: baseline;
gap: 8px;
margin: 14px 0 2px;
font-size: calc(13px * var(--skala));
font-weight: 650;
color: var(--schrift);
}
.artkarte-strauch {
font-size: calc(10.5px * var(--skala));
line-height: 1.45;
color: var(--schrift-still);
border-top: 1px dotted var(--linie);
padding-top: 3px;
margin-top: 1px;
}
.artkarte-naehe { font-size: calc(11px * var(--skala)); color: var(--gruen-ok); }
.artkarte-fern { color: var(--gelb); }
.bluehkalender {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 3px;
align-items: end;
height: 92px;
margin: 10px 0 14px;
}
.bluehmonat {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
height: 100%;
gap: 3px;
cursor: help;
}
.bluehbalken {
display: block;
width: 100%;
min-height: 2px;
background: var(--gruen);
border-radius: 3px 3px 0 0;
}
.bluehbalken-0 { height: 0; }
.bluehbalken-1 { height: 10%; }
.bluehbalken-2 { height: 20%; }
.bluehbalken-3 { height: 30%; }
.bluehbalken-4 { height: 40%; }
.bluehbalken-5 { height: 50%; }
.bluehbalken-6 { height: 60%; }
.bluehbalken-7 { height: 70%; }
.bluehbalken-8 { height: 80%; }
.bluehbalken-9 { height: 90%; }
.bluehbalken-10 { height: 100%; }
.bluehmonat-leer .bluehbalken { background: var(--rot); min-height: 3px; }
.bluehmonat-name { font-size: calc(10px * var(--skala)); color: var(--schrift-still); }
.matmarke {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 8px;
margin: 8px 0 6px;
padding: 8px 11px;
border-radius: 8px;
border-left: 4px solid var(--linie);
background: var(--grund);
font-size: calc(12.5px * var(--skala));
line-height: 1.5;
cursor: help;
}
.matmarke-was { color: var(--schrift-still); }
.matmarke-verrottet { border-left-color: var(--gruen-ok); background: var(--gruen-blass); }
.matmarke-rueckstand { border-left-color: var(--gelb); background: var(--gelb-blass); }
.matmarke-zurueck { border-left-color: var(--gelb); background: var(--gelb-blass); }
.matmarke-kunststoff { border-left-color: var(--rot); background: var(--rot-blass); }
.feld-material { border-left-width: 4px; }
.feld-material-verrottet { border-left-color: var(--gruen-ok); }
.feld-material-rueckstand,
.feld-material-zurueck { border-left-color: var(--gelb); }
.feld-material-kunststoff { border-left-color: var(--rot); }
.matzeichen { cursor: help; font-size: calc(11px * var(--skala)); }
.dialog {
border: 0;
border-radius: 14px;
padding: 0;
box-shadow: var(--schatten-hoch);
max-width: min(440px, calc(100vw - 24px));
width: 100%;
color: var(--schrift);
background: var(--papier);
overflow: hidden;
}
.dialog-breit { max-width: min(620px, calc(100vw - 24px)); }
.dialog::backdrop { background: rgba(10, 14, 9, .55); }
.dialog form {
display: flex;
flex-direction: column;
max-height: min(80vh, 720px);
}
.dialog-kopf {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 14px 14px 14px 18px;
border-bottom: 1px solid var(--linie);
flex: 0 0 auto;
}
.dialog-body {
padding: 14px 18px 18px;
overflow-y: auto;
flex: 1 1 auto;
min-height: 0;
}
.dialog h2 { margin: 0; font-size: calc(17px * var(--skala)); color: var(--gruen); }
.dialog-kopf h2 { flex: 1 1 auto; }
.dialog .hinweis:first-of-type { margin-top: 0; }
.dialog #buchflaeche { font-weight: 600; color: var(--schrift); }
.dialog details {
border: 1px solid var(--linie);
border-radius: var(--rund);
padding: 8px 12px;
margin-bottom: 8px;
}
.dialog details > summary {
font-weight: 650;
cursor: pointer;
padding: 4px 0;
min-height: 32px;
}
.dialog details > summary:hover { color: var(--gruen); }
.freiwillig { font-weight: 400; color: var(--schrift-still); }
.knopfreihe-rechts { justify-content: flex-end; margin-top: 14px; margin-bottom: 0; }
.namenswahl {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
margin: 12px 0;
}
.namenskarte {
appearance: none;
text-align: left;
font: inherit;
cursor: pointer;
border: 1.5px solid var(--rand);
border-radius: var(--rund-knopf);
background: var(--papier);
color: var(--schrift);
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 5px;
min-height: 96px;
}
.namenskarte:hover:not(:disabled) {
border-color: var(--gruen);
background: var(--gruen-blass);
}
.namenskarte:disabled { opacity: .55; cursor: default; }
.namenskarte-titel { font-weight: 650; font-size: calc(14px * var(--skala)); }
.namenskarte-text { font-size: calc(12.5px * var(--skala)); color: var(--schrift-still); line-height: 1.45; }
.dialog-planung { max-width: min(760px, calc(100vw - 24px)); }
.planschritt {
border-top: 1px solid var(--linie);
padding-top: 12px;
margin-top: 14px;
}
.planschritt h3 {
margin: 0 0 8px;
font-size: calc(15px * var(--skala));
color: var(--gruen);
display: flex;
align-items: center;
gap: 8px;
}
.planschritt-nr {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--gruen);
color: var(--auf-gruen);
font-size: calc(12px * var(--skala));
font-weight: 700;
flex: 0 0 auto;
}
.planunter { margin: 14px 0 6px; font-size: calc(14px * var(--skala)); color: var(--gruen); }
.plangitter {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(300px * var(--skala))), 1fr));
gap: 8px 14px;
margin: 10px 0;
}
.planzeile {
display: grid;
grid-template-columns: minmax(min-content, 1fr) calc(92px * var(--skala)) calc(52px * var(--skala));
align-items: center;
gap: 4px 8px;
min-height: 40px;
}
.planzeile-bez { font-size: calc(12.5px * var(--skala)); color: var(--schrift-still); line-height: 1.35; }
.planzeile .feld-mit-einheit { display: contents; }
.planzeile .feld { width: 100%; min-width: 0; }
.planzeile .feld-zahl { width: 100%; }
.planzeile .einheit { font-size: calc(12px * var(--skala)); white-space: nowrap; }
.planzeile-hinweis {
margin: -2px 0 6px;
font-size: calc(11.5px * var(--skala));
line-height: 1.45;
color: var(--schrift-still);
}
.planzeile select.feld { grid-column: 2 / -1; }
.plangitter-weit { grid-template-columns: 1fr; }
.plangitter-weit .planzeile { grid-template-columns: minmax(0, calc(230px * var(--skala))) calc(92px * var(--skala)) minmax(max-content, 1fr); }
.plangitter-weit .planzeile .einheit { justify-self: start; }
.planstatus { font-size: calc(12.5px * var(--skala)); color: var(--schrift-still); align-self: center; }
.planquelle { font-size: calc(11.5px * var(--skala)); color: var(--schrift-still); margin: 6px 0 0; }
.planlage { border-left-width: 4px; }
.planlage .klapp { margin-top: 6px; }
.planlage .hinweis { margin: 6px 0 0; }
.planfazit {
background: var(--grund);
border-left: 3px solid var(--gruen);
border-radius: 0 6px 6px 0;
padding: 9px 12px;
margin: 10px 0;
font-size: calc(13px * var(--skala));
line-height: 1.55;
}
.wahlgruppe { margin: 10px 0 20px; }
.wahlgruppe-bez {
display: block;
font-size: calc(12.5px * var(--skala));
font-weight: 650;
margin-bottom: 5px;
}
.wahlkarten {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(150px * var(--skala))), 1fr));
gap: 8px;
}
.wahlgruppe .planzeile-hinweis { margin: 8px 0 0; }
.planeinleitung { margin: 0 0 10px; }
.wahlkarte {
appearance: none;
text-align: left;
font: inherit;
cursor: pointer;
border: 1.5px solid var(--rand);
border-radius: var(--rund-knopf);
background: var(--papier);
color: var(--schrift);
padding: 8px 10px;
display: flex;
flex-direction: column;
gap: 2px;
min-height: 44px;
}
.wahlkarte:hover { border-color: var(--gruen-hell); background: var(--gruen-blass); }
.wahlkarte-gewaehlt {
border-color: var(--gruen);
background: var(--gruen-blass);
box-shadow: inset 0 0 0 1px var(--gruen);
}
.wahlkarte-name { font-weight: 650; font-size: calc(13px * var(--skala)); }
.wahlkarte-was {
font-size: calc(11px * var(--skala));
line-height: 1.35;
color: var(--schrift-still);
}
.artenwahl {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
gap: 8px;
margin: 10px 0;
}
.artkarte {
appearance: none;
text-align: left;
font: inherit;
cursor: pointer;
border: 1.5px solid var(--rand);
border-left-width: 5px;
border-radius: var(--rund-knopf);
background: var(--papier);
color: var(--schrift);
padding: 9px 11px;
display: flex;
flex-direction: column;
gap: 2px;
min-height: 74px;
}
.artkarte:hover { border-color: var(--gruen-hell); background: var(--gruen-blass); }
.artkarte-gut { border-left-color: var(--gruen-ok); }
.artkarte-bedingt { border-left-color: var(--gelb); }
.artkarte-ungeeignet { border-left-color: var(--rot); background: var(--grund); }
.artkarte-gewaehlt {
border-color: var(--gruen);
background: var(--gruen-blass);
box-shadow: inset 0 0 0 1px var(--gruen);
}
.artkarte-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.artkarte-name { font-weight: 650; font-size: calc(13.5px * var(--skala)); }
.artkarte-name .zweitname { font-weight: 400; }
.artkarte-punkte {
font-size: calc(12px * var(--skala));
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--schrift-still);
white-space: nowrap;
}
.artkarte-gut .artkarte-punkte { color: var(--gruen-ok); }
.artkarte-bedingt .artkarte-punkte { color: var(--gelb); }
.artkarte-ungeeignet .artkarte-punkte { color: var(--rot); }
.artkarte-ausblick { font-size: calc(14px * var(--skala)); font-weight: 700; margin-left: 2px; }
.artkarte-ausblick-auf { color: var(--gruen-ok); }
.artkarte-ausblick-ab { color: var(--orange); }
.artkarte-lat { font-size: calc(11px * var(--skala)); font-style: italic; color: var(--schrift-still); }
.artkarte-kuenftig {
display: inline-block;
font-size: calc(10px * var(--skala));
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--auf-gruen);
background: var(--gruen);
border-radius: 999px;
padding: 1px 6px;
margin-left: 4px;
vertical-align: 1px;
}
.artkarte-grund { font-size: calc(11.5px * var(--skala)); color: var(--schrift-still); line-height: 1.4; }
.artkarte-gemessen { display: block; font-size: calc(11.5px * var(--skala)); color: var(--gruen); line-height: 1.4; margin-top: 2px; }
.artkarte-gemessen-schwach { color: var(--orange); }
.anwuchs-arten { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.anwuchs-art { border: 1px solid var(--linie); border-radius: var(--rund); padding: 6px 10px 2px; margin: 0; }
.anwuchs-art legend { font-weight: 650; font-size: calc(13.5px * var(--skala)); padding: 0 4px; }
.anwuchs-gepflanzt { font-weight: 400; color: var(--schrift-still); font-size: calc(12px * var(--skala)); margin-left: 6px; }
.feldgitter-drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 420px) { .feldgitter-drei { grid-template-columns: 1fr 1fr; } }
.anwuchs-schwach { color: var(--orange); font-weight: 650; }
.anwuchs-zuwachs { color: var(--schrift-still); white-space: nowrap; }
.ampel { font-size: calc(11px * var(--skala)); }
.ampel-gut { color: var(--gruen-ok); }
.ampel-bedingt { color: var(--gelb); }
.ampel-ungeeignet { color: var(--rot); }
.mischung { display: flex; flex-direction: column; }
.mischzeile {
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: 8px;
padding: 4px 0 4px 10px;
}
.mischzeile + .mischzeile { border-top: 1px solid var(--linie); }
.mischname { flex: 1 1 10em; min-width: 0; font-size: calc(13.5px * var(--skala)); overflow-wrap: anywhere; }
.mischregler { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; }
.mischung .einheit { white-space: nowrap; }
.mischanzahl {
min-width: 8.5em;
font-size: calc(12.5px * var(--skala));
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.mischknoepfe { display: flex; align-items: center; gap: 8px; }
.mischfest {
display: flex;
align-items: center;
gap: 4px;
min-height: 44px;
padding: 0 4px;
font-size: calc(12.5px * var(--skala));
color: var(--schrift-still);
cursor: pointer;
white-space: nowrap;
}
.mischfest input { width: 17px; height: 17px; }
.mischzeile-fest { box-shadow: inset 3px 0 0 var(--gruen-hell); }
.planzahlen {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(calc(92px * var(--skala)), 1fr));
gap: 8px;
margin: 10px 0 14px;
}
.planzahl {
background: var(--gruen-blass);
border: 1px solid var(--gruen-hell);
border-radius: var(--rund);
padding: 9px 6px;
text-align: center;
}
.planzahl b { display: block; font-size: calc(20px * var(--skala)); color: var(--gruen); font-variant-numeric: tabular-nums; }
.planzahl span { display: block; font-size: calc(11.5px * var(--skala)); color: var(--schrift-still); }
.plantabelle {
width: 100%;
border-collapse: collapse;
font-size: calc(13px * var(--skala));
margin: 10px 0;
}
.tabellenrahmen { overflow-x: auto; container-type: inline-size; }
.tabellenrahmen .plantabelle th, .tabellenrahmen .plantabelle td { white-space: normal; }
.tabellenrahmen .plantabelle .zahl { white-space: nowrap; }
.tabellenrahmen .plantabelle td:first-child { min-width: 7em; }
@container (max-width: 34em) {
.plantabelle-stapel, .plantabelle-stapel tbody, .plantabelle-stapel tr { display: block; }
.plantabelle-stapel thead { display: none; }
.plantabelle-stapel tr { padding: 7px 0; border-bottom: 1px solid var(--linie); }
.tabellenrahmen .plantabelle-stapel td {
display: inline-block;
min-width: 0;
padding: 1px 14px 1px 0;
border: 0;
text-align: left;
white-space: normal;
}
.tabellenrahmen .plantabelle-stapel td:first-child { display: block; min-width: 0; padding-bottom: 3px; font-weight: 600; }
.plantabelle-stapel td[data-titel]::before {
content: attr(data-titel) " ";
font-size: calc(11.5px * var(--skala));
font-weight: 400;
color: var(--schrift-still);
}
}
.plantabelle th, .plantabelle td {
text-align: left;
padding: 6px 8px;
border-bottom: 1px solid var(--linie);
}
.plantabelle th { font-size: calc(11.5px * var(--skala)); color: var(--schrift-still); font-weight: 600; }
.plantabelle .zahl { text-align: right; font-variant-numeric: tabular-nums; }
.hinweis-vorbehalt {
background: var(--grund);
border: 1px dashed var(--linie);
border-radius: 6px;
padding: 9px 11px;
color: var(--schrift-still);
}
.eintrag-offen { border-left-color: var(--gruen); background: var(--gruen-blass); }
.meldung {
position: fixed;
left: 50%;
transform: translateX(-50%);
top: calc(var(--kopfhoehe, 52px) + 8px);
z-index: 1200;
background: var(--meldung-grund);
color: var(--meldung-schrift);
padding: 11px 18px;
border-radius: var(--rund);
box-shadow: var(--schatten-hoch);
font-size: calc(14px * var(--skala));
font-weight: 500;
max-width: min(560px, calc(100% - 28px));
text-align: center;
}
.meldung-gut { background: var(--gruen); color: var(--auf-gruen); }
.meldung-fehler { background: var(--rot); color: var(--auf-gruen); }
.meldung-knopf {
appearance: none;
margin-left: 12px;
padding: 6px 12px;
min-height: 34px;
border: 1.5px solid currentColor;
border-radius: var(--rund-knopf);
background: transparent;
color: inherit;
font: inherit;
font-size: calc(13px * var(--skala));
font-weight: 700;
cursor: pointer;
white-space: nowrap;
}
.meldung-knopf:hover {
background: var(--meldung-schrift);
color: var(--meldung-grund);
}
.meldung-zu {
appearance: none;
display: inline-grid;
place-items: center;
width: 34px;
height: 34px;
margin-left: 4px;
padding: 0;
border: 0;
border-radius: var(--rund-knopf);
background: transparent;
color: inherit;
vertical-align: middle;
cursor: pointer;
}
.meldung-zu .zeichen { width: 18px; height: 18px; }
.knopfreihe-abschluss {
border-top: 1px solid var(--linie);
padding-top: 10px;
margin-top: 4px;
}
.knopf-weg { color: var(--schrift-still); padding-left: 10px; padding-right: 10px; }
.knopf-weg:hover { background: var(--rot); border-color: var(--rot); color: #fff; }
@media (max-width: 820px) and (min-height: 501px), (max-width: 560px) {
.buehne { flex-direction: column; }
.kartenfeld { flex: 1 1 0; min-height: 140px; }
.leiste {
flex: 0 0 var(--leiste-hoehe, 55%);
overflow: hidden;
border-left: 0;
border-top: 1px solid var(--linie);
box-shadow: 0 -3px 14px rgba(28, 33, 25, .12);
}
.leiste-griff {
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 100%;
height: 32px;
padding: 0;
border: 0;
background: var(--grund);
cursor: ns-resize;
touch-action: none;
}
.leiste-griff span { width: 44px; height: 5px; border-radius: 3px; background: var(--rand); }
.leiste-griff:focus-visible { outline: 2px solid var(--gruen); outline-offset: -3px; }
.leiste-klein .blatt { visibility: hidden; }
.zusammenzug-leer { display: none; }
.infobox {
top: auto;
left: 0;
right: 0;
bottom: 0;
width: auto;
height: 72%;
border-left: 0;
border-top: 1px solid var(--linie);
border-radius: 16px 16px 0 0;
}
}
@media (max-width: 820px) and (max-height: 500px) and (min-width: 561px) {
:root, :root[data-schrift="mittel"], :root[data-schrift="gross"] { --leiste-breite: min(360px, 45vw); }
}
@media (max-width: 820px) {
body.tw-erfasst .massstab { top: auto; bottom: calc(var(--quellenhoehe, 16px) + var(--leistenhoehe, 100px) + 12px); }
.zeichenleiste { width: calc(100% - 16px); min-width: 0; }
.zeichenknoepfe { flex-wrap: nowrap; }
.zeichenknoepfe .knopf { flex: 1 1 0; min-width: 0; padding: 12px 4px; font-size: calc(13.5px * var(--skala)); }
:root[data-schrift="gross"] .zeichenknoepfe .knopf { padding-left: 1px; padding-right: 1px; }
body.tw-erfasst .leiste { display: none; }
body.tw-erfasst .kartenfeld { flex: 1 1 100%; }
body.tw-erfasst .kartenlegende { display: none; }
.marke { font-size: calc(17px * var(--skala)); }
.kopf { padding: 6px 10px; }
}
@media (max-width: 600px) {
.planzeile select.feld { grid-column: 1 / -1; }
.planzeile,
.plangitter-weit .planzeile {
grid-template-columns:
minmax(min-content, 1fr)
minmax(calc(48px * var(--skala)), calc(92px * var(--skala)))
minmax(max-content, calc(52px * var(--skala)));
}
}
@container karte (max-width: 520px) {
.erfassleiste { width: calc(100% - 16px); }
.erfassknopf { flex: 1 1 0; min-width: 0; padding: 7px 6px; gap: 6px; white-space: normal; }
.erfasstext { width: min-content; text-align: left; line-height: 1.15; }
}
@container karte (max-width: 600px) {
:root[data-schrift="mittel"] .erfassleiste,
:root[data-schrift="gross"] .erfassleiste { width: calc(100% - 16px); }
:root[data-schrift="mittel"] .erfassknopf,
:root[data-schrift="gross"] .erfassknopf { flex: 1 1 0; min-width: 0; padding: 7px 6px; gap: 6px; white-space: normal; }
:root[data-schrift="mittel"] .erfasstext,
:root[data-schrift="gross"] .erfasstext { width: min-content; text-align: left; line-height: 1.15; }
}
@container karte (max-width: 690px) {
:root[data-schrift="gross"] .erfassleiste { width: calc(100% - 16px); }
:root[data-schrift="gross"] .erfassknopf { flex: 1 1 0; min-width: 0; padding: 7px 6px; gap: 6px; white-space: normal; }
:root[data-schrift="gross"] .erfasstext { width: min-content; text-align: left; line-height: 1.15; }
}
@container karte (max-width: 720px) {
.massstab { top: 10px; bottom: auto; left: 62px; }
}
@container karte (max-width: 800px) {
:root[data-schrift="mittel"] .massstab,
:root[data-schrift="gross"] .massstab { top: 10px; bottom: auto; left: 62px; }
}
@container karte (max-width: 900px) {
:root[data-schrift="gross"] .massstab { top: 10px; bottom: auto; left: 62px; }
}
.kurz { display: none; }
@container karte (max-width: 330px) {
.erfasszeichen { display: none; }
.erfasstext { text-align: center; }
}
@container karte (max-width: 360px) {
:root[data-schrift="mittel"] .erfasszeichen { display: none; }
:root[data-schrift="mittel"] .erfasstext { text-align: center; }
}
@container karte (max-width: 400px) {
:root[data-schrift="gross"] .erfasszeichen { display: none; }
:root[data-schrift="gross"] .erfasstext { text-align: center; }
}
@media (max-width: 600px) {
.kopf { flex-wrap: wrap; }
.marke { order: 1; }
.kopf-werkzeuge { order: 2; margin-left: auto; }
.suchfeld { order: 3; flex-basis: 100%; max-width: none; }
.kopf { position: relative; }
.menuefeld { position: static; }
.kopf .menue {
top: calc(100% + 6px);
left: 50%;
right: auto;
transform: translateX(-50%);
width: min(380px, calc(100vw - 24px));
min-width: 0;
max-height: calc(100vh - 130px);
max-height: calc(100dvh - 130px);
overflow-y: auto;
overscroll-behavior: contain;
}
}
@media (max-width: 630px) {
.kopf { flex-wrap: wrap; }
.marke { order: 1; }
.kopf-werkzeuge { order: 2; margin-left: auto; }
.suchfeld { order: 3; flex-basis: 100%; max-width: none; }
}
@media (max-width: 670px) {
:root[data-schrift="mittel"] .kopf { flex-wrap: wrap; }
:root[data-schrift="mittel"] .marke { order: 1; }
:root[data-schrift="mittel"] .kopf-werkzeuge { order: 2; margin-left: auto; }
:root[data-schrift="mittel"] .suchfeld { order: 3; flex-basis: 100%; max-width: none; }
}
@media (max-width: 720px) {
:root[data-schrift="gross"] .kopf { flex-wrap: wrap; }
:root[data-schrift="gross"] .marke { order: 1; }
:root[data-schrift="gross"] .kopf-werkzeuge { order: 2; margin-left: auto; }
:root[data-schrift="gross"] .suchfeld { order: 3; flex-basis: 100%; max-width: none; }
}
@media (max-width: 480px) {
.lang { display: none; }
.kurz { display: inline; }
.erfassknopf { font-size: calc(13.5px * var(--skala)); }
.kopf { gap: 8px; }
.kopf-werkzeuge { gap: 6px; flex-wrap: nowrap; }
.marke { font-size: calc(15px * var(--skala)); }
.knopf-symbol { padding: 9px 10px; min-width: 38px; }
.suchfeld { max-width: none; }
.suchfeld .feld { padding: 7px 9px; }
.feldgitter { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
:root[data-schrift="gross"] .marke { font-size: 0; }
:root[data-schrift="gross"] .marke-zeichen { font-size: calc(20px * var(--skala)); }
}
@media (max-width: 380px) {
:root[data-schrift="mittel"] .marke { font-size: 0; }
:root[data-schrift="mittel"] .marke-zeichen { font-size: calc(20px * var(--skala)); }
}
@media (max-width: 360px) {
.marke { font-size: 0; }
.marke-zeichen { font-size: calc(20px * var(--skala)); }
}
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; }
.knopf:active { transform: none; }
}
.artkarte-nahrung {
font-size: calc(11px * var(--skala));
color: var(--gruen-ok);
margin-top: 2px;
}
.artkarte-giftig { color: var(--rot); font-weight: 600; }
.konkurrenzwahl {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
gap: 6px;
margin: 10px 0;
}
.konkurrenzkarte {
appearance: none;
text-align: left;
font: inherit;
cursor: pointer;
border: 1.5px solid var(--rand);
border-radius: var(--rund-knopf);
background: var(--papier);
color: var(--schrift);
padding: 7px 10px;
display: flex;
flex-direction: column;
gap: 1px;
min-height: 46px;
}
.konkurrenzkarte:hover { border-color: var(--gruen-hell); background: var(--gruen-blass); }
.konkurrenzkarte-gewaehlt {
border-color: var(--gelb);
background: var(--gelb-blass);
box-shadow: inset 0 0 0 1px var(--gelb);
}
.konkurrenzkarte-invasiv { border-left: 4px solid var(--rot); }
.konkurrenzkarte-name { font-weight: 650; font-size: calc(13px * var(--skala)); }
.konkurrenzkarte-lat { font-size: calc(10.5px * var(--skala)); font-style: italic; color: var(--schrift-still); }
.konkurrenzrat { border-color: var(--gelb); }
.konkurrenzrat > summary { color: var(--gelb); }
.massnahmen {
margin: 4px 0 8px;
padding-left: 20px;
font-size: calc(12.5px * var(--skala));
color: var(--schrift-still);
line-height: 1.55;
}
.massnahmen li { margin-bottom: 5px; }
.zaehlerstand {
display: flex;
align-items: baseline;
justify-content: center;
gap: 8px;
margin: 6px 0 4px;
}
.zaehlerstand b {
font-size: calc(44px * var(--skala));
font-weight: 700;
line-height: 1.1;
color: var(--gruen);
font-variant-numeric: tabular-nums;
}
.zaehlerstand span { font-size: calc(14px * var(--skala)); color: var(--schrift-still); }
.zaehlerbalken {
height: 8px;
border-radius: 999px;
background: var(--grund);
border: 1px solid var(--linie);
overflow: hidden;
margin-bottom: 8px;
}
.zaehlerbalken span {
display: block;
height: 100%;
width: 0;
background: var(--gruen);
transition: width .15s;
}
.schrittwahl {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4px;
background: var(--grund);
border: 1px solid var(--rand);
border-radius: var(--rund);
padding: 3px;
margin-bottom: 12px;
}
.zaehlerart .schrittwahl { grid-template-columns: repeat(2, 1fr); }
.schrittwahl button {
appearance: none;
border: 0;
border-radius: var(--rund-knopf);
background: transparent;
font: inherit;
font-size: calc(15px * var(--skala));
font-weight: 650;
color: var(--schrift-still);
min-height: 46px;
cursor: pointer;
}
.schrittwahl button:hover { background: var(--gruen-blass); color: var(--gruen); }
.schrittwahl button[aria-pressed="true"] {
background: var(--gruen);
color: var(--auf-gruen);
box-shadow: var(--schatten);
}
.zaehlknopf {
width: 100%;
min-height: 72px;
font-size: calc(19px * var(--skala));
margin-bottom: 10px;
}
.zaehlerposten { margin-bottom: 10px; }
.zaehlerposten .wahlkarten { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.zaehlerstaende-mehrere .zaehlerstand { justify-content: flex-start; margin: 2px 0; }
.zaehlerstaende-mehrere .zaehlerstand b { font-size: calc(28px * var(--skala)); }
.zaehlerstaende-mehrere .zaehlerbalken { margin-bottom: 6px; }
body.textseite {
overflow-y: auto;
overscroll-behavior-y: contain;
}
.rechtsseite-kopf {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 14px;
background: var(--kopf-grund);
color: var(--kopf-schrift);
box-shadow: var(--schatten);
}
body.textseite .rechtsseite-kopf {
position: sticky;
top: 0;
z-index: 10;
}
.rechtsseite h2 { scroll-margin-top: calc(56px + 12px); }
.rechtsseite-zurueck {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 6px;
color: inherit;
text-decoration: none;
border: 1px solid rgba(255, 255, 255, .38);
border-radius: var(--rund-knopf);
padding: 7px 12px;
min-height: 36px;
font-size: calc(13px * var(--skala));
font-weight: 600;
white-space: nowrap;
}
.rechtsseite-zurueck:hover,
.rechtsseite-zurueck:focus-visible { background: rgba(255, 255, 255, .14); text-decoration: none; }
.rechtsseite-fuss {
margin-top: 36px;
padding-top: 18px;
border-top: 1px solid var(--linie);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 18px;
}
.rechtsseite-fuss .hinweis { margin: 0; }
.rechtsseite-kopf a {
color: inherit;
text-decoration: none;
display: flex;
align-items: center;
gap: 8px;
font-weight: 650;
font-size: calc(16px * var(--skala));
}
.rechtsseite-kopf a:hover { text-decoration: underline; }
@media (max-width: 420px) {
.rechtsseite-kopf a:first-child { font-size: 0; gap: 0; }
.rechtsseite-kopf a:first-child span,
.rechtsseite-kopf a:first-child .zeichen { font-size: calc(20px * var(--skala)); }
}
.rechtsseite {
max-width: 640px;
margin: 0 auto;
padding: 28px 20px 60px;
color: var(--schrift);
line-height: 1.6;
font-size: calc(14px * var(--skala));
}
.rechtsseite h1 {
font-size: calc(22px * var(--skala));
color: var(--gruen);
margin: 0 0 4px;
}
.rechtsseite .rechtsseite-stand {
font-size: calc(12px * var(--skala));
color: var(--schrift-still);
margin: 0 0 28px;
}
.rechtsseite h2 {
font-size: calc(17px * var(--skala));
color: var(--gruen);
margin: 34px 0 10px;
padding-top: 14px;
border-top: 1px solid var(--linie);
}
.rechtsseite h2:first-of-type { padding-top: 0; border-top: 0; margin-top: 0; }
.rechtsseite h3 {
font-size: calc(14.5px * var(--skala));
margin: 18px 0 6px;
}
.rechtsseite p { margin: 0 0 12px; }
.rechtsseite ul { margin: 0 0 12px; padding-left: 22px; }
.rechtsseite li { margin-bottom: 6px; }
.rechtsseite a { color: var(--gruen); }
.rechtsseite a.knopf-haupt { color: var(--auf-gruen); }
.rechtsseite-betreiber {
background: var(--papier);
border: 1px solid var(--linie);
border-radius: var(--rund);
padding: 14px 16px;
margin: 0 0 20px;
}
.rechtsseite-betreiber p { margin: 0 0 4px; }
.rechtsseite.kartenseite { max-width: 1100px; }
.rechtsseite ol { margin: 0 0 12px; padding-left: 22px; }
.methode-inhalt {
background: var(--papier);
border: 1px solid var(--linie);
border-radius: var(--rund);
padding: 10px 14px;
margin: 0 0 24px;
}
.methode-inhalt ol { margin: 0; columns: 2 14em; column-gap: 24px; }
.methode-inhalt li { margin-bottom: 2px; break-inside: avoid; }
.methode-tabelle { overflow-x: auto; margin: 0 0 14px; }
.methodenseite { width: 100%; }
.methodenseite td { hyphens: auto; overflow-wrap: break-word; }
.rechtsseite table {
border-collapse: collapse;
width: 100%;
font-size: calc(13px * var(--skala));
line-height: 1.45;
}
.rechtsseite th,
.rechtsseite td {
text-align: left;
vertical-align: top;
padding: 6px 8px;
border-bottom: 1px solid var(--linie);
}
.rechtsseite th { color: var(--schrift-still); font-weight: 600; }
.rechtsseite th.zahl,
.rechtsseite td.zahl { text-align: right; }
.rechtsseite td.zahl { white-space: nowrap; }
.kartenseite-zahlen { font-weight: 600; }
.kartenseite-karte {
height: min(70vh, 640px);
min-height: 320px;
border: 1px solid var(--linie);
border-radius: var(--rund);
overflow: hidden;
margin: 4px 0 10px;
}
.kartenseite .leaflet-bar a { color: var(--schrift); }
.kartenseite-legende {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 6px 22px;
margin: 0 0 10px;
font-size: calc(13px * var(--skala));
}
.rechtsseite .kartenseite-legende { padding-left: 0; }
.kartenseite-legende li { display: flex; align-items: center; gap: 8px; margin: 0; }
.kartenseite-farbe {
display: inline-block;
flex: 0 0 auto;
width: 22px;
height: 14px;
border-radius: 3px;
}
.kartenseite-farbe-wald { background: rgba(229, 57, 53, 0.3); border: 3px solid #e53935; }
.kartenseite-farbe-leer { background: rgba(76, 175, 80, 0.2); border: 2px dashed #2e7d32; }
.kartenseite-angaben {
display: grid;
grid-template-columns: auto 1fr;
gap: 2px 10px;
margin: 0;
font-size: calc(13px * var(--skala));
line-height: 1.4;
}
.kartenseite-angaben dt { color: var(--schrift-still); }
.kartenseite-angaben dd { margin: 0; }
.platzhalter {
background: var(--gelb-blass);
color: var(--gelb);
font-weight: 650;
padding: 1px 5px;
border-radius: 4px;
}
.schalter-zeile { margin: 10px 0; align-items: flex-start; line-height: 1.4; }
.schalter-zeile input { flex: 0 0 auto; margin-top: 1px; }
.schalter-zeile:has(input:disabled) { opacity: .6; }
.sendengruppe { border: 0; padding: 0; margin: 12px 0 4px; min-width: 0; }
.sendengruppe legend {
padding: 0;
margin-bottom: 6px;
font-weight: 650;
font-size: calc(13.5px * var(--skala));
color: var(--schrift);
}
.wahlzeile {
display: flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 4px 2px;
font-size: calc(14px * var(--skala));
border-bottom: 1px solid var(--linie);
}
.wahlzeile:last-child { border-bottom: 0; }
.wahlzeile input { width: 18px; height: 18px; flex: 0 0 auto; }
.wahlzahl { color: var(--schrift-still); }
.empfaengerliste { display: flex; flex-direction: column; gap: 2px; }
.empfaenger { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.empfaenger-adresse { flex: 1 1 auto; min-width: 0; font-size: calc(14px * var(--skala)); color: var(--schrift); }
.empfaenger-adresse span { overflow-wrap: anywhere; }
.empfaenger-neu { display: flex; gap: 8px; margin-top: 8px; }
.empfaenger-neu .feld { flex: 1 1 auto; min-width: 0; }
.sendenwege { display: grid; gap: 8px; margin: 2px 0 6px; }
.wahlkarte.sendenweg { width: 100%; padding: 10px 12px; gap: 3px; }
.sendenweg-name { font-size: calc(14.5px * var(--skala)); }
.sendenweg-neben { font-size: calc(12.5px * var(--skala)); }
.wahlkarte.sendenweg:disabled,
.wahlkarte.sendenweg:disabled:hover {
cursor: default;
border-style: dashed;
border-color: var(--rand);
background: var(--grund);
}
.wahlkarte.sendenweg:disabled .sendenweg-name { color: var(--schrift-still); }
.sendenweg-hinweis { margin: 4px 0 0; }
.sendenkarte { margin-top: 10px; }
.uebernahmeliste { margin: 6px 0 0; padding-left: 20px; font-size: calc(13px * var(--skala)); }
.uebernahmeliste li { margin: 2px 0; overflow-wrap: anywhere; }
.uebernahme-art { color: var(--schrift-still); font-size: calc(12px * var(--skala)); }
body.tw-ablegen::after {
content: '';
position: fixed;
top: 10px; right: 10px; bottom: 10px; left: 10px;
border: 3px dashed var(--gruen-hell);
border-radius: var(--rund);
background: rgba(46, 93, 52, .08);
pointer-events: none;
z-index: 9000;
}
.vorlage { border-left: 3px solid var(--gelb); padding-left: 10px; }
.berichtansicht {
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
z-index: 8000;
display: flex;
flex-direction: column;
background: #d9ded5;
background: color-mix(in srgb, var(--schrift) 14%, var(--grund));
}
.bericht-werkzeug {
flex: 0 0 auto;
background: var(--papier);
border-bottom: 1px solid var(--linie);
padding: 8px 16px 6px;
padding-top: calc(8px + env(safe-area-inset-top));
box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}
.bericht-werkzeug-kopf { display: flex; align-items: center; gap: 8px; }
.bericht-werkzeug-kopf h2 { margin: 0; font-size: calc(17px * var(--skala)); color: var(--gruen); }
.bericht-seitenangabe {
margin-right: auto;
font-size: calc(12.5px * var(--skala));
color: var(--schrift-still);
white-space: nowrap;
}
.bericht-umfang { display: flex; flex-wrap: wrap; gap: 2px 16px; margin-top: 4px; }
.bericht-reserve { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; }
.bericht-reserve .schalter-zeile { margin: 6px 0; align-items: center; }
.bericht-reserve-wahl { width: auto; min-width: calc(82px * var(--skala)); }
.bericht-reserve-quelle { font-size: calc(12.5px * var(--skala)); color: var(--schrift-still); }
.bericht-werkzeug .knopfreihe { margin: 4px 0; }
.bericht-werkzeug .hinweis { margin: 2px 0 0; }
.bericht-rollbereich {
flex: 1 1 auto;
overflow: auto;
padding: 18px 16px 48px;
-webkit-overflow-scrolling: touch;
}
@media (max-width: 700px), (max-height: 560px) {
.berichtansicht { display: block; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.bericht-werkzeug { display: contents; }
.bericht-werkzeug-kopf {
position: sticky;
top: 0;
z-index: 2;
padding: 6px 12px;
padding-top: calc(6px + env(safe-area-inset-top));
background: var(--papier);
border-bottom: 1px solid var(--linie);
box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}
.bericht-werkzeug-kopf h2 { font-size: calc(15px * var(--skala)); }
.bericht-werkzeug-mehr { padding: 4px 12px 8px; background: var(--papier); border-bottom: 1px solid var(--linie); }
.bericht-rollbereich { overflow: visible; padding: 12px 8px 40px; }
}
@media (max-width: 400px) {
.bericht-seitenangabe { display: none; }
.bericht-werkzeug-kopf h2 {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap;
}
.bericht-werkzeug-kopf .knopf { padding-left: 10px; padding-right: 10px; }
#berichtSpeichern { margin-right: auto; min-width: 0; white-space: normal; line-height: 1.2; }
}
.bericht-papier { position: relative; width: 210mm; max-width: 100%; margin: 0 auto; }
.bericht-seiten { position: absolute; top: 0; left: 0; right: 0; }
.bericht-seite {
position: absolute;
left: 0;
right: 0;
height: 297mm;
background: #ffffff;
box-shadow: 0 2px 14px rgba(0, 0, 0, .28);
}
.bericht-seitenzahl {
position: absolute;
right: 14mm;
bottom: 6mm;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
font-size: 8pt;
color: #56614f;
}
.bericht-blatt {
position: relative;
box-sizing: border-box;
width: 100%;
margin: 0;
padding: 15mm 14mm 16mm;
background: #ffffff;
color: #1b1f1a;
box-shadow: 0 2px 14px rgba(0, 0, 0, .28);
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
font-size: 10pt;
line-height: 1.45;
overflow-wrap: break-word;
}
.bericht-seitenweise .bericht-blatt { background: transparent; box-shadow: none; }
.bericht-blatt.bericht-messen { width: 210mm; max-width: none; padding: 15mm 14mm 16mm; }
.bericht-umbruch { display: block; box-sizing: border-box; padding-top: 1px; }
.bericht-tabelle .bericht-umbruch td { padding: 0; border: 0; }
.bericht-umbruch-hoehe { height: 0; }
.bericht-tabelle .bericht-kopf-kopie th { font-weight: 600; border-bottom: 1.5px solid #7b8876; }
.bericht-blatt h1 { font-size: 16pt; line-height: 1.25; margin: 0 0 8pt; color: #1b1f1a; }
.bericht-blatt h2 {
font-size: 12.5pt;
margin: 16pt 0 6pt;
padding-bottom: 2pt;
border-bottom: 1px solid #aab6a5;
color: #22451f;
}
.bericht-blatt h3 { font-size: 10.5pt; margin: 10pt 0 4pt; color: #1b1f1a; }
.bericht-blatt p { margin: 0 0 6pt; }
.bericht-marke {
font-size: 8pt;
letter-spacing: .06em;
text-transform: uppercase;
color: #56614f;
}
.bericht-angaben {
display: grid;
grid-template-columns: max-content minmax(0, 1fr);
gap: 2pt 12pt;
margin: 0 0 6pt;
}
.bericht-angaben dt { color: #4b5646; }
.bericht-angaben dd { margin: 0; min-width: 0; }
.bericht-tabelle { width: 100%; border-collapse: collapse; margin: 4pt 0 8pt; font-size: 9.5pt; }
.bericht-tabelle th, .bericht-tabelle td {
text-align: left;
vertical-align: top;
padding: 3pt 5pt;
border-bottom: 1px solid #d3dacf;
}
.bericht-tabelle thead th { font-weight: 600; border-bottom: 1.5px solid #7b8876; }
.bericht-tabelle tfoot th, .bericht-tabelle tfoot td { font-weight: 600; border-top: 1.5px solid #7b8876; border-bottom: none; }
.bericht-tabelle .zahl { text-align: right; font-variant-numeric: tabular-nums; }
.bericht-lage { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12pt; align-items: start; }
.bericht-leer { color: #56614f; font-style: italic; }
.bericht-unterschrift { display: grid; grid-template-columns: 1fr 1fr; gap: 28pt; margin-top: 26pt; }
.bericht-linie { display: block; height: 26pt; margin-bottom: 3pt; border-bottom: 1px solid #1b1f1a; }
.bericht-unterschrift [data-text] { font-size: 8.5pt; color: #4b5646; }
.bericht-fuss { margin-top: 18pt; font-size: 8pt; color: #56614f; }
.bericht-kartenbild { margin: 0; }
.bericht-kartenbild-nah { width: 86mm; }
.bericht-kartenbild-gross { margin: 2pt 0 6pt; }
.bericht-karte { display: block; width: 100%; height: auto; }
.bericht-kartenbild figcaption {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 0 10pt;
margin-top: 2pt;
font-size: 8pt;
color: #56614f;
}
.bericht-kartenquelle { font-size: 7pt; color: #6b7666; }
.bericht-blatt [contenteditable="true"] { border-radius: 3px; outline: none; cursor: text; }
.bericht-blatt [contenteditable="true"]:hover { background: #eff5ec; }
.bericht-blatt [contenteditable="true"]:focus { background: #fff8e1; box-shadow: 0 0 0 2px #d9a53b; }
.bericht-blatt [data-leer]:empty::before { content: attr(data-leer); color: #7c8778; font-style: italic; }
.bericht-blatt p[data-leer]:empty { min-height: 64pt; }
.bericht-blatt [data-teil] { position: relative; }
.bericht-weg {
position: absolute;
top: 0;
right: -12mm;
width: 30px;
height: 30px;
margin: 0;
padding: 0;
border: 1px solid #c7cfc3;
border-radius: var(--rund-knopf);
background: #ffffff;
color: #a1352a;
font-size: calc(13px * var(--skala));
line-height: 1;
cursor: pointer;
}
.bericht-weg:hover, .bericht-weg:focus-visible { background: #fbe9e5; border-color: #a1352a; }
.bericht-tabelle .bericht-zeile-weg { position: relative; width: 0; padding: 0; border: 0; }
.bericht-zeile-weg button {
position: absolute;
top: 50%;
left: 6px;
width: 24px;
height: 24px;
margin-top: -12px;
padding: 0;
border: 1px solid #c7cfc3;
border-radius: var(--rund-knopf);
background: #ffffff;
color: #a1352a;
font-size: calc(11px * var(--skala));
line-height: 1;
cursor: pointer;
opacity: .35;
}
.bericht-tabelle tr:hover .bericht-zeile-weg button,
.bericht-zeile-weg button:focus-visible { opacity: 1; background: #fbe9e5; }
@media (hover: none) {
.bericht-zeile-weg button { opacity: .8; }
}
@media screen {
.bericht-schmal .bericht-blatt:not(.bericht-messen) { padding: 18px 14px; }
.bericht-schmal .bericht-blatt:not(.bericht-messen) .bericht-lage { grid-template-columns: minmax(0, 1fr); }
.bericht-schmal .bericht-blatt:not(.bericht-messen) .bericht-kartenbild-nah { width: auto; }
.bericht-schmal .bericht-blatt:not(.bericht-messen) .bericht-tabelle { display: block; overflow-x: auto; }
.bericht-schmal .bericht-blatt:not(.bericht-messen) .bericht-weg { position: static; float: right; margin: 0 0 4px 10px; }
.bericht-schmal .bericht-blatt:not(.bericht-messen) .bericht-zeile-weg { position: static; width: auto; padding: 1pt 0 1pt 4pt; }
.bericht-schmal .bericht-blatt:not(.bericht-messen) .bericht-zeile-weg button { position: static; margin-top: 0; }
.bericht-schmal .bericht-blatt:not(.bericht-messen) div.bericht-umbruch {
height: auto !important;
margin: 18px -14px;
padding: 0;
border-top: 1px dashed #8f988b;
line-height: 0;
text-align: center;
}
.bericht-schmal .bericht-blatt:not(.bericht-messen) div.bericht-umbruch::after {
content: "Page " attr(data-seite);
display: inline-block;
padding: 0 8px;
background: #ffffff;
font-size: 8pt;
line-height: 1.4;
color: #56614f;
transform: translateY(-50%);
}
.bericht-schmal .bericht-blatt:not(.bericht-messen) .bericht-umbruch-hoehe {
height: 12px !important;
border-top: 1px dashed #8f988b;
}
}
@media print {
@page {
size: A4;
margin: 15mm 14mm 16mm;
@bottom-right {
content: "Page " counter(page) " sur " counter(pages);
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
font-size: 8pt;
color: #56614f;
}
}
html.bericht-offen, html.bericht-offen body {
height: auto !important;
overflow: visible !important;
display: block !important;
padding: 0 !important;
background: #ffffff !important;
}
html.bericht-offen body > :not(#berichtAnsicht) { display: none !important; }
html.bericht-offen #berichtAnsicht { position: static; display: block; overflow: visible; background: none; }
html.bericht-offen .bericht-werkzeug,
html.bericht-offen .bericht-weg,
html.bericht-offen .bericht-zeile-weg { display: none !important; }
html.bericht-offen .bericht-seiten,
html.bericht-offen .bericht-umbruch,
html.bericht-offen .bericht-kopf-kopie { display: none !important; }
html.bericht-offen .bericht-rollbereich { overflow: visible; padding: 0; }
html.bericht-offen .bericht-papier { width: auto; max-width: none; margin: 0; }
html.bericht-offen .bericht-blatt {
width: auto;
max-width: none;
min-height: 0 !important;
margin: 0;
padding: 0;
background: none;
box-shadow: none;
}
.bericht-neue-seite { break-before: page; }
.bericht-tabelle tfoot { display: table-row-group; }
.bericht-blatt [contenteditable="true"] { background: none !important; box-shadow: none !important; }
.bericht-blatt [data-leer]:empty::before { content: none; }
.bericht-blatt dd[data-leer]:empty { min-height: 12pt; border-bottom: 1px solid #8f988b; }
.bericht-blatt p[data-leer]:empty {
min-height: 64pt;
background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 20pt, #8f988b 20pt, #8f988b 21pt);
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.bericht-block, .bericht-lage, .bericht-unterschrift, .bericht-kopf, .bericht-tabelle tr,
.bericht-kartenbild { break-inside: avoid; }
.bericht-blatt h2, .bericht-blatt h3 { break-after: avoid; }
}
.wildwahl {
display: flex;
flex-wrap: wrap;
gap: 2px 16px;
margin: 8px 0 4px;
padding: 8px 10px;
border: 1px solid var(--linie);
border-radius: var(--rund);
}
.wildwahl legend { padding: 0 4px; font-weight: 600; font-size: calc(13.5px * var(--skala)); }
.schutzzelle { min-width: 8em; }
.schutzkarten { display: grid; gap: 8px; margin: 10px 0; }
.schutzkarte {
padding: 8px 12px;
border: 1px solid var(--linie);
border-left: 4px solid var(--gruen-hell);
border-radius: var(--rund);
}
.schutzkarte p { margin: 0; overflow-wrap: break-word; }
.schutzkarte-titel { font-size: calc(13.5px * var(--skala)); }
.schutzkarte-dauer {
display: inline-block;
margin-left: 4px;
padding: 1px 8px;
border-radius: 999px;
background: var(--gruen-blass);
color: var(--gruen);
font-size: calc(12px * var(--skala));
font-weight: 600;
white-space: nowrap;
}
.schutzkarte-klein { margin-top: 2px; font-size: calc(12px * var(--skala)); color: var(--schrift-still); line-height: 1.45; }
.schutzkarte p.schutzkarte-grund { margin-top: 6px; font-size: calc(12.5px * var(--skala)); line-height: 1.5; }
.dialog-body .knopf, .infobox .knopf, .blatt .knopf { max-width: 100%; white-space: normal; }
.schutzgruppe { margin: 4px 0 10px; }
.schutzgruppe-mehrere {
padding: 8px 10px;
border: 1px solid var(--linie);
border-left: 4px solid var(--gruen-hell);
border-radius: var(--rund);
}
.schutzgruppe-kopf {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
gap: 2px 8px;
margin-bottom: 6px;
font-size: calc(13.5px * var(--skala));
}
.schutzgruppe-kopf > b, .schutzgruppe-kopf > .schutzgruppe-arten { grid-column: 1; }
.schutzgruppe-kopf .knopf-weg { grid-column: 2; grid-row: 1 / span 2; }
.schutzgruppe-arten { color: var(--schrift-still); font-size: calc(12.5px * var(--skala)); }
.schluesselblock {
border-top: 1px solid var(--linie);
padding-top: 12px;
margin-top: 14px;
}
.schluesseltitel {
margin: 0 0 4px;
font-size: calc(15px * var(--skala));
color: var(--gruen);
}
.schluesselblock .feld {
width: 100%;
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: calc(12px * var(--skala));
}
.schluesselwoher { align-self: center; }
.menue-eintrag-fuss {
border-top: 1px solid var(--linie);
margin-top: 4px;
padding-top: 8px;
}
.dialog-plan { max-width: min(980px, calc(100vw - 20px)); }
.plankarte {
height: min(46vh, 430px);
min-height: 260px;
border-radius: var(--rund);
border: 1px solid var(--linie);
background: var(--kartengrund);
margin: 8px 0;
overflow: hidden;
}
.planwerkzeuge {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 8px;
}
@media (max-width: 600px) {
.planwerkzeuge {
grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(96px * var(--skala))), 1fr));
gap: 6px;
}
.planwerkzeuge .wahlkarte { padding: 8px 6px; justify-content: center; text-align: center; }
.planwerkzeuge .wahlkarte-was { display: none; }
.planwerkzeuge .wahlkarte-name {
font-size: calc(12.5px * var(--skala));
hyphens: auto;
overflow-wrap: break-word;
}
.dialog form { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
.dialog { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
}
.plangriff {
display: flex;
align-items: center;
justify-content: center;
font-size: calc(17px * var(--skala));
line-height: 1;
color: #1b2a1b;
background: #ffd54f;
border: 2px solid #ffffff;
border-radius: 50%;
box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
cursor: move;
}
.planlegende {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 8px 0;
}
@media (max-width: 700px) {
#sendenWas {
max-height: calc(200px * var(--skala));
overflow-y: auto;
overscroll-behavior: contain;
}
.planlegende {
max-height: calc(132px * var(--skala));
overflow-y: auto;
overscroll-behavior: contain;
padding-right: 2px;
}
}
.dialog-fuss {
position: sticky;
bottom: calc(-18px - env(safe-area-inset-bottom, 0px));
margin: 10px -18px -18px;
padding: 10px 18px calc(18px + env(safe-area-inset-bottom, 0px));
background: var(--papier);
border-top: 1px solid var(--linie);
z-index: 2;
}
@media (max-width: 700px) {
.dialog-fuss {
gap: 8px;
padding-left: 12px;
padding-right: 12px;
margin-left: -12px;
margin-right: -12px;
}
.dialog-fuss { flex-wrap: nowrap; }
.dialog-fuss:has(> .knopf:not([hidden]) ~ .knopf:not([hidden]) ~ .knopf:not([hidden])) { flex-wrap: wrap; }
.dialog-fuss .knopf { flex: 0 1 auto; min-width: min-content; padding-left: 12px; padding-right: 12px; }
.plankarte { height: min(38vh, 430px); min-height: 220px; }
}
.artmarke-plan {
appearance: none;
font: inherit;
cursor: grab;
display: flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
border: 1.5px solid var(--linie);
border-radius: 20px;
background: var(--papier);
color: var(--schrift);
font-size: calc(12.5px * var(--skala));
}
.artmarke-plan:hover { border-color: var(--gruen-hell); }
.artmarke-plan-aktiv {
border-color: var(--gruen);
background: var(--gruen-blass);
box-shadow: inset 0 0 0 1px var(--gruen);
}
.artpunkt {
width: 12px;
height: 12px;
border-radius: 50%;
border: 1px solid rgba(0, 0, 0, .35);
flex: 0 0 auto;
}
.artzahl { color: var(--schrift-still); font-variant-numeric: tabular-nums; }
.bericht-legende {
list-style: none;
margin: 6px 0 10px;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 4px 18px;
font-size: 10.5pt;
}
.bericht-legende li { display: flex; align-items: center; gap: 6px; }
.bericht-zeichen { flex: 0 0 auto; }
.bericht-hinweis {
font-size: 9.5pt;
color: #4a5348;
margin-top: 8px;
}
.bericht-warnung {
font-weight: 700;
color: #7f1d17;
border-left: 3pt solid #b3261e;
padding-left: 6pt;
margin: 6px 0;
}
#berichtReserveZeile { gap: 8px; }
#berichtReserve { width: auto; min-width: 84px; }
.twmuster {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}
.twzeichen {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}
.zeichen {
width: 1.15em;
height: 1.15em;
flex: 0 0 auto;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
vertical-align: -0.2em;
}
.zeichen-gross { width: 1.45em; height: 1.45em; vertical-align: -0.28em; }
.planblock-marke {
background: rgba(20, 26, 20, .72);
border: none;
box-shadow: none;
color: #fff;
font-size: calc(11px * var(--skala));
font-weight: 650;
text-align: center;
line-height: 1.25;
padding: 3px 7px;
border-radius: var(--rund);
white-space: nowrap;
}
.planblock-marke::before { display: none; }
.nutzungszeile {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-bottom: 12px;
}
.nutzungsmarke {
appearance: none;
font: inherit;
cursor: pointer;
display: flex;
align-items: center;
gap: 5px;
padding: 4px 9px;
border: 1.5px solid var(--linie);
border-radius: 20px;
background: var(--papier);
color: var(--schrift-still);
font-size: calc(11.5px * var(--skala));
}
.nutzungsmarke:hover { border-color: var(--gruen-hell); color: var(--schrift); }
.nutzungsmarke-aktiv {
border-color: var(--gruen);
background: var(--gruen-blass);
color: var(--gruen);
font-weight: 650;
}
.kartenlegende {
position: absolute;
left: 10px;
top: 84px;
z-index: 640;
background: var(--papier);
border: 1px solid var(--linie);
border-radius: var(--rund);
box-shadow: var(--schatten);
padding: 5px 8px;
font-size: calc(11px * var(--skala));
line-height: 1.35;
max-width: 190px;
max-height: calc(100% - 140px);
overflow-y: auto;
overscroll-behavior: contain;
}
@media (max-width: 820px) {
.kartenlegende {
left: auto;
right: 10px;
top: 10px;
max-height: max(60px, calc(100% - 120px));
}
}
.kartenlegende-kopf {
appearance: none;
border: none;
background: none;
font: inherit;
font-weight: 650;
color: var(--schrift);
cursor: pointer;
padding: 0 0 2px;
}
@media (pointer: coarse) {
.kartenlegende-kopf { min-width: 96px; padding: 4px 0; text-align: left; }
}
.kartenlegende-zeile { display: flex; align-items: center; gap: 6px; }
.kartenlegende-unterkopf { margin-top: 3px; color: var(--schrift-still); font-weight: 600; }
.kartenlegende-klein { color: var(--schrift-still); font-size: calc(10px * var(--skala)); }
.kartenlegende-strich {
width: 16px;
height: 0;
flex: 0 0 auto;
border-top: 3px solid;
}
.kartenlegende-fleck {
width: 12px;
height: 12px;
flex: 0 0 auto;
border-radius: 3px;
border: 1px solid rgba(0, 0, 0, .3);
opacity: .8;
}
.knopfreihe-mitte { justify-content: center; }
@media (pointer: coarse) {
.knopf-klein, .knopf-schliessen { min-height: 44px; }
.knopf-weg { min-width: 44px; }
.menue .menue-fassung .knopf { min-height: 40px; }
.klapp > summary, .dialog details > summary { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
.wink-knopf { min-width: 40px; min-height: 40px; }
.nutzungsmarke { min-height: 40px; padding: 6px 11px; }
.artmarke-plan { min-height: 40px; }
.schalter { min-height: 40px; }
.schalter input { width: 20px; height: 20px; }
.kartenlegende-kopf { min-height: 40px; }
.sprachwahl-kurz a { min-width: 40px; min-height: 40px; }
.leaflet-touch .leaflet-bar a { width: 40px; height: 40px; line-height: 40px; }
.kartenlegende { top: 104px; }
}
@media (pointer: coarse) and (max-width: 820px) {
.kartenlegende { top: 10px; }
}