/* Nobelhof – Softwarelösungen für Landwirte: Markenseite (gleiche Farbwelt wie der Beispiel-Nobelhof) */
:root {
  --gruen-dunkel: #2f5d1e; --gruen: #4f8a1f; --gruen-hell: #8bbf2c; --creme: #faf7f0; --sand: #efe8d8;
  --tinte: #2b2b26; --grau: #5f5e54; --linie: #e2dccd; --gold: #b7791f; --weiss: #fff;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --creme: #171a14; --sand: #22271c; --tinte: #ecedde; --grau: #b2b4a2; --linie: #383d30; --weiss: #21251c; --gruen-dunkel: #a8d47a; --gruen: #8bc34a; color-scheme: dark; }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--tinte); background: var(--creme); }
h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; color: var(--gruen-dunkel); line-height: 1.2; }
h1 { font-size: clamp(2rem, 4.5vw, 3.1rem); margin: .2em 0 .4em; }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin: 1.6em 0 .5em; }
h3 { font-size: 1.15rem; margin: 0 0 .3em; }
a { color: var(--gruen); }
img { max-width: 100%; height: auto; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.lead { font-size: 1.15rem; color: var(--grau); max-width: 46rem; }
.klein { font-size: .9rem; color: var(--grau); }

.kopf { background: var(--weiss); border-bottom: 1px solid var(--linie); position: sticky; top: 0; z-index: 10; }
.kopf .wrap { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
.marke img { height: 66px; width: auto; display: block; }
.kopf nav { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.kopf nav a { text-decoration: none; color: var(--tinte); padding: 6px 12px; border-radius: 8px; font-size: .95rem; }
.kopf nav a:hover, .kopf nav a.aktiv { background: var(--sand); color: var(--gruen-dunkel); }

.held { position: relative; overflow: hidden; color: #fff; background: #2f5d1e; }
.held .bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.held .wrap { position: relative; padding-top: 70px; padding-bottom: 80px; }
.held h1, .held .lead { color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.held .lead { color: #f2f6ea; }
.knoepfe { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.btn { display: inline-block; padding: 12px 22px; border-radius: 12px; font-weight: 600; text-decoration: none; background: var(--gold); color: #fff; }
.btn.hell { background: rgba(255,255,255,.92); color: var(--gruen-dunkel); }
.btn.gruen { background: var(--gruen); }
.siegel { display: inline-block; background: var(--gruen-hell); color: #1d3311; font-weight: 700; font-size: .85rem; padding: 4px 12px; border-radius: 999px; }

.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; margin: 18px 0; }
.karte { background: var(--weiss); border: 1px solid var(--linie); border-radius: 16px; padding: 18px 20px; box-shadow: 0 1px 6px rgba(40,40,20,.06); }
.karte .ico { font-size: 1.7rem; }
.karte p { margin: .3em 0 0; color: var(--grau); font-size: .97rem; }
.karte.bild { padding: 0; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.karte.bild img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; background: var(--sand); }
.karte.bild div { padding: 14px 18px 18px; }
.karte .marke-tag { display: inline-block; font-size: .78rem; font-weight: 700; color: var(--gold); text-transform: uppercase; letter-spacing: .06em; }
.zweispaltig { display: grid; grid-template-columns: 1.1fr .9fr; gap: 34px; align-items: center; }
.zweispaltig img { border-radius: 16px; }
.liste { padding-left: 1.2em; } .liste li { margin: .35em 0; }
.band { background: var(--sand); padding: 30px 0 40px; margin-top: 40px; }
.krumen { font-size: .88rem; color: var(--grau); margin: 18px 0 0; } .krumen a { color: var(--grau); }
.faq details { background: var(--weiss); border: 1px solid var(--linie); border-radius: 12px; padding: 12px 16px; margin: 10px 0; }
.faq summary { font-weight: 600; cursor: pointer; }

.fuss { background: #22381a; color: #e6eedb; margin-top: 60px; padding: 34px 0; }
.fuss .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 26px; }
.fuss h2 { color: #fff; font-size: 1rem; margin: 0 0 .4em; font-family: system-ui, sans-serif; }
.fuss a { color: #cfe6b3; }
.fuss p { margin: .3em 0; font-size: .92rem; }

@media (max-width: 800px) {
  .zweispaltig, .fuss .wrap { grid-template-columns: 1fr; }
  .marke img { height: 46px; }
  .kopf nav { margin-left: 0; }
}

/* Motto */
.motto { border-left: 6px solid var(--gold); background: var(--weiss); padding: 18px 24px; border-radius: 0 16px 16px 0; margin: 34px 0 10px; box-shadow: 0 1px 6px rgba(40,40,20,.06); }
.motto p { margin: .3em 0; } .motto .gross { font: 700 1.3rem/1.35 Georgia, serif; color: var(--gruen-dunkel); }
.geraete { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; } .geraete span { background: var(--sand); border-radius: 999px; padding: 3px 12px; font-size: .9rem; }

/* Bestellformular */
.bestellen form { max-width: 920px; }
.schritt { background: var(--weiss); border: 1px solid var(--linie); border-radius: 18px; padding: 8px 24px 22px; margin: 22px 0; }
.schritt h2 { margin-top: .8em; }
.produkt { border: 2px solid var(--linie); border-radius: 14px; margin: 14px 0; overflow: hidden; }
.produkt.an { border-color: var(--gruen); }
.produkt-kopf { display: flex; gap: 14px; align-items: center; padding: 14px 16px; cursor: pointer; background: var(--creme); }
.produkt-kopf input { width: 22px; height: 22px; flex: none; }
.produkt-kopf span:nth-child(2) { flex: 1; } .produkt-kopf small { display: block; color: var(--grau); }
.produkt-kopf .preis { font-weight: 700; color: var(--gold); white-space: nowrap; }
.produkt-inhalt { display: none; padding: 4px 18px 14px; } .produkt.an .produkt-inhalt { display: block; }
.optionen { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 18px; }
.optionen label, .zweige label, .haken { display: flex; gap: 8px; align-items: flex-start; font-size: .95rem; margin: 4px 0; }
.bestellen input[type=checkbox] { width: auto; margin-top: .3em; }
.bestellen label { display: block; margin: 8px 0; font-size: .95rem; }
.bestellen input:not([type=checkbox]), .bestellen select, .bestellen textarea { width: 100%; font: inherit; padding: 9px 11px; border: 1px solid var(--linie); border-radius: 9px; background: var(--weiss); color: var(--tinte); margin-top: 3px; }
.zeile { display: flex; gap: 14px; flex-wrap: wrap; } .zeile > label { flex: 1 1 180px; } .zeile > label.breit { flex: 2 1 280px; }
.zweige { border: 0; padding: 0; margin: 10px 0; display: flex; flex-wrap: wrap; gap: 4px 20px; } .zweige legend { font-size: .95rem; margin-bottom: 4px; }
.ueb { width: 100%; border-collapse: collapse; } .ueb td { padding: 6px 4px; border-bottom: 1px solid var(--linie); vertical-align: top; } .ueb .r { text-align: right; white-space: nowrap; }
.ueb .summe td { font-weight: 700; border-bottom: 0; }
.btn.gross { font-size: 1.1rem; padding: 14px 28px; border: 0; cursor: pointer; }
.hinweis-fehler { background: #fbe9e6; color: #8a2a1d; border-radius: 12px; padding: 12px 18px; }
.falle { position: absolute; left: -9999px; }
.bestellen label.produkt-kopf { display: flex; margin: 0; }
.bestellen .optionen label, .bestellen .zweige label, .bestellen label.haken { display: flex; }
.schritt h3.unter { margin: 1.4em 0 .2em; font-size: 1.1rem; }
a.karte { text-decoration: none; color: inherit; } a.karte:hover { border-color: var(--gruen); }

/* Rassentabelle */
.tabelle-scroll { overflow-x: auto; }
table.rassen { width: 100%; border-collapse: collapse; background: var(--weiss); border-radius: 12px; overflow: hidden; font-size: .95rem; }
table.rassen th, table.rassen td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--linie); vertical-align: top; }
table.rassen th { background: var(--sand); font-weight: 600; }