/* Startseite rechenhof.de: Farben und Schriften wie die Ansicht "Pferdehof" der App. Kein JavaScript, keine fremden Quellen. */
:root{--bg:#eadcc0;--ink:#3b2414;--card:#f8efdc;--holz:#8b5a2b;--holz2:#6e4520;--hay:#e2b24a;--gr:#4f8a4a;--rot:#b0412f;--line:#d9c49d;--weich:#6b5440;color-scheme:light}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 "Trebuchet MS","Segoe UI",system-ui,sans-serif}
/* Links dunkelgrün (Kontrast über 4,5:1 auf Hintergrund und Karten), Fokusrahmen in der Schriftfarbe */
a{color:#2f5e2b;text-underline-offset:2px}
a:focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-radius:4px}
h1,h2,h3{font-family:"Palatino Linotype",Palatino,Georgia,serif;line-height:1.2;margin:0 0 .5em}
h1{font-size:clamp(34px,7vw,52px)}
h2{font-size:clamp(25px,4.5vw,32px);margin-top:0}
h3{font-size:20px}
p{margin:0 0 1em}
.breit{max-width:1000px;margin:0 auto;padding:0 20px}

/* Kopf mit Symbol, Name und Spruch */
.kopf{display:flex;align-items:center;gap:16px;padding:22px 0 18px}
.kopf img{width:72px;height:72px;border-radius:18px;box-shadow:0 3px 10px rgba(59,36,20,.25)}
.kopf h1{margin:0}
.spruch{display:block;margin:2px 0 0;font:italic 700 clamp(17px,3vw,21px) Georgia,serif;color:var(--holz2)}
/* Unterseiten: Symbol, Name und Spruch als ein einziger Link zur Startseite.
   Der Name sieht aus wie eine Überschrift, ist aber keine h1 (die h1 ist dort der Seitentitel). */
.heim{display:flex;align-items:center;gap:16px;color:inherit;text-decoration:none}
.kopf .h1{display:block;margin:0;font:700 clamp(30px,6vw,40px)/1.2 "Palatino Linotype",Palatino,Georgia,serif}

/* Titelbild: der Hof aus der App */
.szene{display:block;width:100%;height:auto;aspect-ratio:1414/346;object-fit:cover;object-position:center;border-radius:18px;box-shadow:0 4px 16px rgba(59,36,20,.2)}
/* Auf schmalen Bildschirmen höher zuschneiden (Mitte mit Figur, Unterstand und Pferd), sonst wird es ein dünner Streifen */
@media (max-width:600px){.szene{aspect-ratio:2.2/1}}

/* Abschnitte als Blätter wie in der App */
section{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px 24px;margin:22px 0;box-shadow:0 2px 0 var(--line)}
.lead{font-size:clamp(18px,2.6vw,20px)}
.start{margin:12px 0 0}
.knopf{display:inline-block;min-height:48px;padding:12px 28px;border-radius:999px;background:var(--hay);color:#3b2414;font-size:20px;font-weight:700;line-height:24px;text-decoration:none;box-shadow:0 3px 0 #b8892c}
.knopf:hover{background:#ebc063}
.knopf:focus-visible{border-radius:999px}
.knopf:active{transform:translateY(2px);box-shadow:0 1px 0 #b8892c}
.lite{margin:12px 0 0;color:var(--weich)}

/* Bildschirmfotos im Handy-Rahmen */
.fotos{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:6px 0 0;padding:0;list-style:none}
@media (min-width:820px){.fotos{grid-template-columns:repeat(4,1fr)}}
.fotos figure{margin:0}
.fotos img{display:block;width:100%;height:auto;aspect-ratio:5/8;border-radius:16px;border:5px solid var(--ink);background:#fff;box-shadow:0 4px 12px rgba(59,36,20,.25)}
.fotos figcaption{font-size:15px;line-height:1.4;margin-top:8px;color:var(--weich)}

/* Voll ausgebauter Hof als Panorama. Auf schmalen Bildschirmen bleibt das Bild hoch genug und lässt sich seitlich wischen. */
.panorama{overflow-x:auto;border-radius:16px;box-shadow:0 4px 14px rgba(59,36,20,.22)}
.panorama img{display:block;width:100%;height:auto}
.panorama:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.hinweis-wischen{display:none;margin:8px 0 0;font-size:15px;color:var(--weich)}
@media (max-width:990px){.panorama img{width:auto;max-width:none;height:190px}.hinweis-wischen{display:block}}

/* Drei Karten nebeneinander */
.karten{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:820px){.karten{grid-template-columns:repeat(3,1fr)}}
.karte{background:#fffaf0;border:1px solid var(--line);border-radius:14px;padding:18px}
.karte h3{color:var(--holz2)}
.karte p:last-child{margin-bottom:0}

/* Listen mit Hufeisen statt Punkten */
ul.huf{list-style:none;padding:0;margin:0}
ul.huf li{position:relative;padding-left:32px;margin:0 0 .7em}
ul.huf li::before{content:"";position:absolute;left:2px;top:.3em;width:20px;height:18px;
 background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 18'%3E%3Cpath d='M3 17V8a7 7 0 0 1 14 0v9h-4V8a3 3 0 0 0-6 0v9z' fill='%23c08a10'/%3E%3C/svg%3E")}

/* Fuß */
footer{padding:10px 0 36px;font-size:15px;color:var(--weich);text-align:center}
footer nav{margin-top:6px}
footer nav a{margin:0 10px;color:var(--weich)}

/* Unterseiten (Impressum, Datenschutz) */
.text h2{font-size:22px;margin-top:1.4em}
.text h2:first-of-type{margin-top:.6em}
.zurueck{display:inline-block;margin:0 0 6px}

/* Sehr schmale Bildschirme (unter 420 px): weniger Rand, damit Fotos und Text Platz haben */
@media (max-width:420px){.breit{padding:0 10px}section{padding:20px 14px}.fotos{gap:12px}.kopf{gap:12px}.kopf img{width:60px;height:60px}}