/* Happy Hoot Verlag — freundlicher HTML-Entwurf v2.0
   Ohne externe Schriften, Javascript, Tracking oder Cookies.
   Ausschließlich Systemschriften und lokale Grafiken. */
:root {
  color-scheme: light;
  --ink: #30201e;
  --coral: #dd4841;
  --coral-hover: #be342e;
  --peach: #ffe7d4;
  --peach-soft: #fff0e4;
  --cream: #fff9f1;
  --paper: #fffdfa;
  --muted: #54443d;
  --gold: #f4a641;
  --font-rounded: 'Arial Rounded MT Bold', 'Trebuchet MS', 'Comic Sans MS', 'Comic Neue', sans-serif;
  --font-regular: 'Trebuchet MS', 'Segoe UI', Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #fff8f0; font-family: var(--font-regular); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
a { color: inherit; }
a:focus-visible { outline: 3px solid #136c73; outline-offset: 5px; }
.container { width: min(100% - 70px, 1170px); margin-inline: auto; }
.skip-link { position: absolute; transform: translateY(-200%); top: 8px; left: 14px; z-index: 99; background: #fff; color: #000; padding: 12px; }
.skip-link:focus { transform: translateY(0); }
.site-shell { overflow: hidden; background: linear-gradient(#fffaf5 0%, #fff7f0 27%, #fffdf9 43%, #fffaf5 100%); min-height: 100vh; }

/* Header */
.site-header { position: relative; z-index: 2; min-height: 96px; }
.header-inner { height: 96px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-icon { display: block; width: 76px; max-height: 76px; object-fit: contain; }
.brand-name { white-space: nowrap; font-family: var(--font-rounded); font-size: clamp(21px, 2.3vw, 29px); letter-spacing: -.055em; font-weight: 900; line-height: 1; text-shadow: .35px 0 currentColor; }
.brand-suffix { display: inline; }
.header-flourish { width: 270px; height: 60px; opacity: .78; margin-right: 35px; }

/* Hero */
.hero { position: relative; isolation: isolate; background: linear-gradient(95deg, #fffaf6 4%, #fff0e6 62%, #ffe5d1 100%); }
.hero::before { content:""; position:absolute; z-index:-1; top:-68px; left:-9%; width:69%; height:100px; background: #fffaf6; border-radius:0 0 57% 42%; transform:rotate(1deg); }
.hero::after { content:""; position:absolute; z-index:-1; bottom:-4px; left:-10%; width:120%; height:36px; background:#fffdfa; border-radius: 54% 52% 0 0; }
.hero-blob { position: absolute; z-index:-1; left:-50px; top:32px; width:62%; height:310px; background:#fff2e7; border-radius: 48% 53% 42% 58% / 40% 45% 56% 48%; transform:rotate(-7deg); opacity:.88; }
.hero-grid { min-height: 422px; display:grid; grid-template-columns: 51% 49%; align-items:center; gap:0; }
.hero-copy { position:relative; z-index:1; padding: 13px 0 40px 30px; }
.hero h1 { position:relative; z-index:1; max-width: 620px; margin:0 0 14px; font-family:var(--font-rounded); font-size: clamp(51px,5.8vw,77px); font-weight:900; line-height:.99; letter-spacing:-.062em; text-wrap: balance; text-shadow:.9px 0 currentColor; }
.hero h1 span { color:var(--coral); white-space: nowrap; }
.hero-copy p { max-width: 455px; margin: 12px 0 23px 5px; color: #483a35; font-size: clamp(18px,1.7vw,23px); line-height:1.38; }
.hero-radiance { position:absolute; left:-2px; top:96px; width:30px; height:39px; }
.hero-radiance span { display:block; position:absolute; width:4px; height:16px; border-radius:3px; background:#ee9852; transform-origin:center; }
.hero-radiance span:nth-child(1) { transform:rotate(-48deg); top:3px; left:0; }
.hero-radiance span:nth-child(2) { transform:rotate(-70deg); top:21px; left:3px; }
.hero-radiance span:nth-child(3) { transform:rotate(-21deg); top:-10px; left:15px; }
.hero-heart { position:absolute; top:111px; right:42px; color:#e35049; font-size:49px; transform:rotate(-16deg); }
.button { display:inline-flex; align-items:center; justify-content:center; gap:14px; text-decoration:none; color:#fff; background:var(--coral); border-radius:999px; transition: background .2s ease, transform .2s ease, box-shadow .2s ease; }
.button:hover { background:var(--coral-hover); transform:translateY(-2px); box-shadow:0 8px 17px #cc55422b; }
.button-primary { min-width: 291px; margin-left:5px; padding:15px 26px; font-family:var(--font-rounded); font-size:22px; font-weight:800; }
.button-arrow { font-family: Arial, sans-serif; font-weight:700; font-size:31px; line-height:.8; }
.hero-star { position:absolute; z-index:1; color:var(--gold); filter:drop-shadow(0 1px #f8c16c70); }
.hero-star-left { bottom:-6px; left:-9px; font-size:34px; }
.hero-art { height:100%; position:relative; display:flex; align-items:center; justify-content:center; padding-top:0; margin-right:-25px; }
.hero-art img { width:min(100%, 590px); position:relative; z-index:2; display:block; object-fit:contain; filter:drop-shadow(0 9px 5px #b88a5b16); transform:translate(9px,-9px) scale(1.045); }
.hero-star-top { font-size:43px; top:14px; left:6%; }
.hero-star-right { font-size:32px; right:-12px; top:126px; }
.hero-art-dot { position:absolute; width:11px; height:11px; background:#f6a16e; border-radius:50%; }
.hero-art-dot-one { top:54px; left:-6%; }
.hero-art-dot-two { top:82px; right:0; width:18px; height:18px; }

/* Buchauswahl */
.books-section { position:relative; background: #fffdfa; padding: 31px 0 35px; border-radius:65px 65px 0 0; }
.books-section::before { content:""; position:absolute; pointer-events:none; top:110px; left:2%; width:96%; height:350px; background:radial-gradient(ellipse at 8% 28%, #ffebdfad 0%, transparent 35%),radial-gradient(ellipse at 99% 58%, #ffeada8b 0%, transparent 35%); }
.section-heading { position:relative; display:flex; justify-content:center; align-items:center; gap:18px; margin-bottom:24px; }
.section-heading h2 { margin:0; font-family:var(--font-rounded); font-weight:900; font-size: clamp(30px,3.65vw,47px); letter-spacing:-.058em; line-height:1.1; text-shadow:.5px 0 currentColor; text-align:center; }
.section-heading h2 span { color:var(--coral); }
.heading-lines { position:relative; display:inline-flex; width:55px; height:42px; transform:rotate(-23deg); }
.heading-lines i { position:absolute; height:4px; width:20px; border-radius:6px; background:#df4c45; }
.heading-lines i:nth-child(1){left:3px;top:6px;transform:rotate(54deg)}
.heading-lines i:nth-child(2){left:9px;top:21px;transform:rotate(12deg)}
.heading-lines i:nth-child(3){left:15px;top:36px;transform:rotate(-28deg)}
.heading-lines-right { transform:scaleX(-1) rotate(-23deg); }
.section-tiny-star { position:absolute; right:6%; font-size:28px; color:var(--gold); }
.book-grid { position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:25px; padding:0 12px; }
.book-card { min-width:0; display:flex; flex-direction:column; align-items:center; text-align:center; background:linear-gradient(156deg,#fffefe 0%,#fffaf4 100%); border:1px solid #fff1e8; border-radius:25px; padding:17px 14px 18px; box-shadow:0 10px 25px #8d605212; }
.cover-link { display:flex; justify-content:center; align-items:center; width:100%; height:339px; border-radius:15px; text-decoration:none; }
.cover-link img { display:block; width:auto; max-width: 100%; height:100%; object-fit:contain; filter:drop-shadow(3px 5px 5px #33231f30); transition: transform .22s ease; }
.cover-link:hover img { transform:translateY(-5px) rotate(-.35deg); }
.book-card h3 { margin:14px 0 4px; font-family:var(--font-rounded); font-weight:900; letter-spacing:-.025em; font-size:clamp(18px,1.65vw,21px); line-height:1.25; }
.book-card p { margin:0 0 16px; max-width:95%; font-size:clamp(14px,1.18vw,16px); line-height:1.27; color:#554842; min-height: 39px; }
.button-book { margin-top:auto; min-width:190px; padding:9px 18px 10px; font-size:15px; line-height:1; }
.button-book span { font-size:21px; line-height:.7; }

/* Über Happy Hoot */
.about-section { background:#fffdfa; padding:0 0 12px; }
.about-panel { position:relative; min-height:213px; display:grid; grid-template-columns: 28% minmax(0,1fr) 21%; gap:8px; align-items:center; background:linear-gradient(100deg,#fff0e7 0%,#fff1e7 42%,#ffecde 100%); border-radius:82px 68px 80px 75px / 52px 72px 54px 69px; overflow:hidden; padding:14px 28px 15px 10px; }
.about-panel::before { content:""; position:absolute; top:-40px; right:9%; width:200px; height:80px; background:#fffdfa; border-radius:50%; opacity:.35; }
.about-owl { position:relative; height:185px; align-self:center; }
.about-owl img { display:block; position:relative; z-index:2; width:225px; max-width:95%; height:205px; object-fit:contain; margin:auto; transform:translateY(-11px) rotate(-5deg); }
.about-heart { position:absolute; z-index:1; color:var(--coral); font-size:20px; }
.about-heart-one { top:5px; right:8%; transform:rotate(-15deg); }
.about-heart-two { top:30px; left:8%; font-size:15px; }
.about-sparkle { position:absolute; right:8%; bottom:25px; color:var(--gold); font-size:19px; }
.about-copy { min-width:0; padding:4px 0; }
.about-copy h2 { margin:0 0 10px; font-size:clamp(27px,2.8vw,36px); font-family:var(--font-rounded); font-weight:900; line-height:1.1; letter-spacing:-.04em; text-shadow:.5px 0 currentColor; }
.about-copy h2 span { color:var(--coral); }
.about-copy p { max-width:605px; margin:0; font-size:clamp(14px,1.2vw,17px); color:#4c403c; line-height:1.45; }
.about-quote { margin:0 8px 0 2px; align-self:center; text-align:center; font-family:'Comic Sans MS','Comic Neue',cursive; font-style:italic; font-weight:700; color:var(--coral); font-size:clamp(23px,2.65vw,35px); line-height:1.09; letter-spacing:-.055em; transform:rotate(-8deg); }
.about-quote span { display:inline-block; font-size:.9em; transform:rotate(13deg); }

/* Footer */
.site-footer { padding:11px 0 28px; background:#fffdfa; }
.footer-line { display:flex; gap:20px; align-items:center; justify-content:center; }
.footer-line span { width:100%; height:1px; background:#b9aba2; }
.footer-line img { object-fit:contain; width:30px; height:30px; }
.footer-links { display:flex; gap:14px; justify-content:center; align-items:center; margin-top:8px; font-size:13px; color:#8c8078; }
.footer-links a { text-decoration:none; }
.footer-links a:hover { color:var(--coral); text-decoration:underline; }

/* Tablet */
@media (max-width: 1070px) {
  .container { width:min(100% - 48px, 1170px); }
  .hero h1 { font-size:clamp(47px,5.5vw,62px); }
  .hero-heart { right:0; top:105px; }
  .hero-grid { min-height:400px; }
  .hero-art { margin-right:-9px; }
  .cover-link { height:295px; }
  .book-grid { gap:15px; padding:0; }
  .about-panel { grid-template-columns:24% 1fr 21%; }
  .about-owl img { width:190px; }
  .about-copy p { font-size:14px; }
}
@media (max-width: 820px) {
  .header-flourish { margin:0; width:160px; }
  .brand-icon { width:64px; height:66px; }
  .brand-name { font-size:23px; }
  .hero-grid { grid-template-columns:54% 46%; min-height:350px; }
  .hero-copy { padding-left:5px; }
  .hero h1 { font-size:clamp(38px,5.4vw,50px); }
  .hero-copy p { font-size:17px; }
  .hero-heart { font-size:29px; right:-4px; top:79px; }
  .button-primary { min-width:0; font-size:18px; padding:14px 20px; }
  .book-card { padding:14px 9px 16px; }
  .cover-link { height:252px; }
  .book-card h3 { font-size:17px; }
  .book-card p { font-size:13px; }
  .button-book { min-width:0; padding:10px 18px; }
  .about-panel { grid-template-columns:23% 1fr; gap:15px; }
  .about-quote { display:none; }
}
/* Mobile */
@media (max-width: 630px) {
  .container { width:min(100% - 28px, 480px); }
  .site-header, .header-inner { min-height:75px; height:75px; }
  .brand { gap:7px; }
  .brand-icon { width:52px; height:55px; }
  .brand-name { font-size:22px; }
  .brand-suffix { display:block; margin-top:4px; font-size:13px; letter-spacing:.21em; }
  .header-flourish { width:84px; height:44px; margin-right:-12px; }
  .hero { padding-top:15px; }
  .hero-blob { top:8px; width:100%; height:340px; left:-20%; }
  .hero-grid { display:flex; flex-direction:column; min-height:0; }
  .hero-copy { width:100%; text-align:center; padding:25px 0 5px; }
  .hero h1 { font-size:clamp(40px,10.3vw,57px); margin-bottom:12px; }
  .hero-copy p { max-width:400px; margin:0 auto 19px; font-size:17px; line-height:1.4; }
  .hero-heart { font-size:32px; top:17px; right:1%; }
  .hero-radiance { left:1%; top:80px; transform:scale(.7); }
  .button-primary { font-size:18px; padding:13px 23px; min-width:240px; }
  .hero-art { width:100%; max-width:440px; height:auto; margin:0 auto; padding:0; }
  .hero-art img { width:100%; transform:translateY(-5px) scale(1.03); }
  .hero-star-top { left:2%; top:10%; font-size:28px; }
  .hero-star-right { right:1%; top:25%; font-size:21px; }
  .hero-art-dot { display:none; }
  .books-section { padding:28px 0 22px; border-radius:35px 35px 0 0; }
  .section-heading { gap:2px; margin:0 0 22px; }
  .section-heading h2 { font-size:clamp(29px,7.4vw,39px); }
  .heading-lines, .heading-lines-right { display:none; }
  .section-heading h2 span { display:block; }
  .section-tiny-star { display:none; }
  .book-grid { display:grid; grid-template-columns:1fr; max-width:410px; margin:0 auto; gap:18px; }
  .book-card { padding:20px 18px 22px; border-radius:24px; }
  .cover-link { height:340px; }
  .book-card h3 { font-size:23px; margin:15px 0 5px; }
  .book-card p { font-size:16px; min-height:0; margin-bottom:15px; }
  .button-book { min-width:188px; padding:12px 20px; }
  .about-section { padding-top:8px; }
  .about-panel { display:flex; flex-direction:column; padding:14px 23px 26px; gap:0; border-radius:45px; text-align:center; }
  .about-owl { width:100%; height:180px; }
  .about-owl img { width:190px; height:190px; transform:translateY(-8px) rotate(-3deg); }
  .about-heart-one { right:23%; }
  .about-heart-two { left:24%; }
  .about-sparkle { right:24%; }
  .about-copy h2 { font-size:32px; }
  .about-copy p { font-size:15px; line-height:1.48; }
  .about-quote { display:block; margin:22px auto 2px; transform:rotate(-5deg); font-size:27px; line-height:1.15; }
  .site-footer { padding:15px 0 27px; }
}
@media (max-width: 375px) {
  .brand-name { font-size:19px; }
  .header-flourish { width:62px; }
  .hero h1 { font-size:39px; }
  .section-heading h2 { font-size:27px; }
  .cover-link { height:310px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } .button, .cover-link img { transition:none; } }