/*
 * Dateiname: style.css
 * Autorin: Jacqueline Rohde
 * Datum: 21.09.2026
 * Beschreibung:
 * Responsive Gestaltung der fiktiven Tierschutz-Demo „Das kleine Fellnest“
 * in Salbei, Creme, warmem Braun und Gold – bewusst ohne KoBuero-Lila.
 */
:root{--tinte:#263129;--wald:#315846;--wald-dunkel:#1d3d30;--salbei:#9db9a1;--creme:#f6f0e3;--papier:#fffdf8;--gold:#c59a52;--rost:#b86646;--grau:#69716b;--linie:#dcd8cc;--weiss:#fff}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--tinte);background:var(--creme);font-family:Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}p,h1,h2,h3{margin-top:0}button,input,select,textarea{font:inherit}
.seitenkopf{min-height:82px;padding:0 max(5vw,calc((100vw - 1180px)/2));display:flex;align-items:center;justify-content:space-between;gap:35px;background:rgba(255,253,248,.95);border-bottom:1px solid var(--linie)}.marke{display:grid;grid-template-columns:43px auto;column-gap:11px;align-items:center}.marke>span{grid-row:span 2;width:43px;height:43px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--salbei),var(--wald));border-radius:50% 50% 50% 18%;font:italic 29px Georgia,serif}.marke strong{align-self:end;font:700 19px Georgia,serif}.marke small{align-self:start;color:var(--grau);font-size:9px;letter-spacing:1.3px;text-transform:uppercase}.seitenkopf nav{display:flex;gap:27px;font-size:12px;font-weight:800}.seitenkopf nav a{padding:32px 0 28px;border-bottom:2px solid transparent}.seitenkopf nav a:hover,.seitenkopf nav a.aktiv{color:var(--wald);border-color:var(--gold)}
.demo-leiste{padding:9px 20px;color:#fff;background:var(--wald-dunkel);text-align:center;font-size:10px;letter-spacing:.2px}.demo-leiste strong{color:#efd194}
.hero{min-height:650px;padding:75px max(5vw,calc((100vw - 1180px)/2));display:grid;grid-template-columns:1.03fr .97fr;gap:8vw;align-items:center;background:radial-gradient(circle at 88% 16%,rgba(197,154,82,.23),transparent 25%),radial-gradient(circle at 12% 88%,rgba(157,185,161,.28),transparent 28%),linear-gradient(135deg,#f9f4e9,#e8eee5)}.kicker{margin-bottom:15px;color:var(--rost);font-size:10px;font-weight:900;letter-spacing:1.8px;text-transform:uppercase}.hero h1,.unterseite-kopf h1,.tier-detail h1,.admin-kopf h1,.rechtstext h1{margin-bottom:24px;font:700 clamp(48px,6vw,78px)/.98 Georgia,serif;letter-spacing:-3px}.hero h1 em{color:var(--wald);font-weight:400}.hero-text>p:not(.kicker){max-width:650px;color:var(--grau);font-size:17px;line-height:1.75}.aktionen{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:31px}.knopf{display:inline-flex;padding:14px 20px;color:#fff;background:var(--wald);border:0;border-radius:6px;box-shadow:0 12px 28px rgba(49,88,70,.2);font-size:12px;font-weight:900;cursor:pointer}.knopf:hover{background:var(--wald-dunkel)}.knopf:disabled{opacity:.55;cursor:not-allowed}.textlink,.mehr-link{color:var(--wald);border-bottom:1px solid rgba(49,88,70,.35);font-size:12px;font-weight:900}.hero-bild{position:relative;min-height:430px;display:flex;align-items:center;justify-content:center;gap:5px;background:linear-gradient(145deg,#dbe7db,#fff8e8);border:1px solid rgba(49,88,70,.14);border-radius:48% 48% 18px 18px;box-shadow:0 28px 70px rgba(49,72,57,.18),18px 18px 0 rgba(197,154,82,.12);overflow:hidden}.hero-bild:before,.hero-bild:after{content:'';position:absolute;border-radius:50%}.hero-bild:before{width:290px;height:290px;background:rgba(255,255,255,.48)}.hero-bild:after{right:-50px;bottom:-60px;width:190px;height:190px;background:rgba(197,154,82,.18)}.hero-bild span{position:relative;z-index:2;font-size:82px;filter:drop-shadow(0 14px 16px rgba(40,58,47,.18))}.hero-bild span:nth-child(2){transform:translateY(-35px) scale(1.12)}.hero-bild small{position:absolute;z-index:3;left:30px;bottom:26px;color:var(--wald);font:700 15px Georgia,serif}
.bereich{padding:75px max(5vw,calc((100vw - 1180px)/2))}.intro{display:grid;grid-template-columns:1fr .9fr;gap:8vw;align-items:end;background:var(--papier)}.intro h2,.bereich-kopf h2,.helfen-kurz h2,.anfrage h2{margin-bottom:0;font:700 clamp(32px,4vw,49px)/1.08 Georgia,serif;letter-spacing:-1.7px}.intro>p{margin:0;color:var(--grau);line-height:1.75}.hell{background:var(--creme)}.bereich-kopf{max-width:720px;margin-bottom:37px}.tier-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.tier-karte{overflow:hidden;background:var(--papier);border:1px solid var(--linie);border-radius:13px;box-shadow:0 14px 34px rgba(49,72,57,.07);transition:transform .2s ease}.tier-karte:hover{transform:translateY(-4px)}.tier-foto{position:relative;height:235px;display:grid;place-items:center;overflow:hidden}.tier-foto:after,.tier-grossbild:after{content:'';position:absolute;width:190px;height:190px;background:rgba(255,255,255,.27);border-radius:50%}.tier-foto span,.tier-grossbild span{position:relative;z-index:2;font-size:83px;filter:drop-shadow(0 12px 14px rgba(40,58,47,.17))}.tier-foto b,.tier-grossbild b{position:absolute;z-index:3;left:15px;top:15px;padding:7px 9px;color:#fff;background:var(--wald);border-radius:5px;font-size:9px}.katze{background:linear-gradient(145deg,#dfc9b4,#f4e9d8)}.katze-zwei{background:linear-gradient(145deg,#b8c9ba,#e9efe5)}.kaninchen{background:linear-gradient(145deg,#c9dabb,#f3eed1)}.kaninchen-zwei{background:linear-gradient(145deg,#d6c6b6,#edf0dc)}.meeri{background:linear-gradient(145deg,#e7cfad,#f6e7d1)}.meeri-zwei{background:linear-gradient(145deg,#c9d8c8,#f1e5cb)}.tier-inhalt{padding:24px}.tier-inhalt small{color:var(--rost);font-size:9px;font-weight:900;letter-spacing:1.1px;text-transform:uppercase}.tier-inhalt h2,.tier-inhalt h3{margin:9px 0 12px;font:700 26px Georgia,serif}.tier-inhalt p{min-height:66px;color:var(--grau);font-size:13px;line-height:1.65}.tier-inhalt a{color:var(--wald);font-size:11px;font-weight:900}.mehr-link{display:inline-block;margin-top:29px}
.helfen-kurz{display:flex;align-items:center;justify-content:space-between;gap:60px;color:#fff;background:radial-gradient(circle at 90% 15%,rgba(197,154,82,.28),transparent 25%),linear-gradient(130deg,var(--wald-dunkel),var(--wald))}.helfen-kurz>div{max-width:730px}.helfen-kurz .kicker{color:#f1d69c}.helfen-kurz p:not(.kicker){color:rgba(255,255,255,.73);line-height:1.7}.hell-knopf{color:var(--wald-dunkel);background:#fff}
.unterseite-kopf{padding:70px max(5vw,calc((100vw - 900px)/2));text-align:center;background:linear-gradient(145deg,#e7eee4,#f8f1e3)}.unterseite-kopf h1{font-size:clamp(46px,6vw,70px)}.unterseite-kopf>p:not(.kicker){max-width:700px;margin:0 auto;color:var(--grau);line-height:1.7}.filter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:30px}.filter button{padding:10px 13px;color:var(--wald);background:var(--papier);border:1px solid var(--linie);border-radius:6px;font-size:11px;font-weight:800}.filter button.aktiv{color:#fff;background:var(--wald);border-color:var(--wald)}
.tier-detail{padding:70px max(5vw,calc((100vw - 1180px)/2));display:grid;grid-template-columns:.9fr 1.1fr;gap:8vw;align-items:center;background:var(--papier)}.tier-grossbild{position:relative;min-height:520px;display:grid;place-items:center;border-radius:18px;box-shadow:18px 18px 0 rgba(157,185,161,.15),0 25px 60px rgba(49,72,57,.16);overflow:hidden}.tier-grossbild span{font-size:135px}.tier-detailtext dl{margin:26px 0}.tier-detailtext dl>div{display:grid;grid-template-columns:110px 1fr;padding:12px 0;border-top:1px solid var(--linie)}.tier-detailtext dt{color:var(--grau);font-size:12px}.tier-detailtext dd{margin:0;font-size:13px;font-weight:800}.tier-detailtext>p:not(.kicker){color:var(--grau);line-height:1.75}.anfrage{display:grid;grid-template-columns:.8fr 1.2fr;gap:8vw;background:#e9eee6}.anfrage form,.admin-form{padding:28px;background:var(--papier);border:1px solid var(--linie);border-radius:13px}.anfrage label,.form-raster label{display:grid;gap:7px;margin-bottom:15px;color:var(--tinte);font-size:11px;font-weight:800}.anfrage input,.anfrage textarea,.form-raster input,.form-raster select,.form-raster textarea{width:100%;padding:12px;border:1px solid var(--linie);border-radius:6px;background:#fff}.anfrage form small{display:block;margin-top:12px;color:var(--grau)}
.hilfe-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.hilfe-raster article{padding:28px;background:var(--papier);border:1px solid var(--linie);border-radius:12px}.hilfe-raster span{color:var(--rost);font-size:10px;font-weight:900}.hilfe-raster h2{margin:28px 0 12px;font:700 24px Georgia,serif}.hilfe-raster p{color:var(--grau);font-size:13px;line-height:1.65}
.admin-kopf{padding:55px max(5vw,calc((100vw - 1180px)/2));display:flex;align-items:center;justify-content:space-between;gap:35px;background:linear-gradient(145deg,#e8eee5,#f8f1e4)}.admin-kopf h1{font-size:clamp(43px,5vw,62px)}.admin-kopf p:not(.kicker){color:var(--grau)}.admin-bereich{padding:45px max(5vw,calc((100vw - 1180px)/2));background:#eef0eb}.admin-status{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}.admin-status article{padding:20px;background:#fff;border-radius:10px}.admin-status strong,.admin-status span{display:block}.admin-status strong{font:700 30px Georgia,serif}.admin-status span{margin-top:5px;color:var(--grau);font-size:10px}.admin-liste{overflow:auto;background:#fff;border:1px solid var(--linie);border-radius:11px}.admin-zeile{min-width:730px;display:grid;grid-template-columns:1.4fr .8fr .8fr 1fr;gap:15px;align-items:center;padding:14px 18px;border-top:1px solid var(--linie);font-size:11px}.admin-zeile>span:first-child{display:flex;align-items:center;gap:10px}.admin-titel{color:var(--grau);background:#f5f4ef;border-top:0;font-size:9px;font-weight:900;text-transform:uppercase}.mini-symbol{width:34px;height:34px;display:grid;place-items:center;background:var(--creme);border-radius:50%;font-size:20px;font-style:normal}.admin-zeile mark{padding:6px 8px;color:var(--wald);background:#e5efe7;border-radius:5px;font-size:9px;font-weight:800}.admin-zeile button{margin-right:5px;padding:6px 8px;border:1px solid var(--linie);background:#fff;border-radius:4px;font-size:9px}.admin-form{margin-top:25px}.admin-form h2{font:700 30px Georgia,serif}.form-raster{display:grid;grid-template-columns:1fr 1fr;gap:0 15px}.form-raster .breit{grid-column:1/-1}
.rechtstext{max-width:820px;margin:0 auto;padding:70px 25px}.rechtstext h1{font-size:clamp(45px,6vw,65px)}.rechtstext h2{margin-top:37px;font:700 25px Georgia,serif}.rechtstext p{color:var(--grau);line-height:1.75}.hinweisbox{margin:30px 0;padding:22px;background:#e8eee5;border-left:4px solid var(--gold)}.hinweisbox p{margin:8px 0 0}
.fuss{padding:35px max(5vw,calc((100vw - 1180px)/2));display:flex;justify-content:space-between;gap:35px;color:#fff;background:#192b23}.fuss strong{font:700 19px Georgia,serif}.fuss p{margin:7px 0 0;color:rgba(255,255,255,.58);font-size:10px}.fuss>div:last-child{display:flex;align-items:center;gap:18px;flex-wrap:wrap;font-size:10px;font-weight:800}.fuss a:hover{color:#efd194}
@media(max-width:850px){.seitenkopf{align-items:flex-start;flex-direction:column;padding-top:18px;padding-bottom:14px}.seitenkopf nav{width:100%;gap:18px;overflow:auto}.seitenkopf nav a{padding:10px 0}.hero,.intro,.tier-detail,.anfrage{grid-template-columns:1fr}.hero{gap:45px}.hero-bild{max-width:650px}.tier-raster,.hilfe-raster{grid-template-columns:1fr 1fr}.admin-status{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.seitenkopf{padding-left:20px;padding-right:20px}.marke strong{font-size:17px}.demo-leiste{font-size:9px;line-height:1.45}.hero{min-height:auto;padding:55px 20px}.hero h1,.unterseite-kopf h1,.tier-detail h1,.admin-kopf h1,.rechtstext h1{font-size:43px;letter-spacing:-1.8px}.hero-bild{min-height:320px}.hero-bild span{font-size:58px}.hero-bild small{left:20px;bottom:18px}.bereich{padding:55px 20px}.intro{gap:25px}.tier-raster,.hilfe-raster{grid-template-columns:1fr}.helfen-kurz,.admin-kopf,.fuss{align-items:flex-start;flex-direction:column}.unterseite-kopf{padding:55px 20px}.tier-detail{padding:55px 20px}.tier-grossbild{min-height:340px}.anfrage{gap:30px}.admin-kopf{padding:45px 20px}.admin-bereich{padding:35px 20px}.admin-status{grid-template-columns:1fr 1fr}.form-raster{grid-template-columns:1fr}.form-raster .breit{grid-column:auto}.fuss{padding:32px 20px}}

.fellnest-verein{background:var(--papier)}