/*
Theme Name: Kitten Salbei
Theme URI: https://wordpress.org/
Author: Individuelles Theme
Description: Ruhiges, responsives WordPress Block-Theme in den Farben des Kitten-Flyers. Ohne Demo-Texte oder fremde Inhalte, mit leeren Designvorlagen für eigene Inhalte.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kitten-salbei
Tags: full-site-editing, block-patterns, custom-colors, custom-logo, wide-blocks, one-column
*/

/* === Farbwerte passend zum Flyer ===
   Creme #F8F3EF  Papierweiß #FFFCFA  Salbei #A6A98B
   Oliv #7F896C  Schokobraun #563729  Rosé #D6A89A
   Apricot #EED6C8  Kontur #E9DED5
*/
:root {
  --ks-cream: #F8F3EF;
  --ks-paper: #FFFCFA;
  --ks-sage: #A6A98B;
  --ks-sage-dark: #788368;
  --ks-brown: #563729;
  --ks-rose: #D6A89A;
  --ks-apricot: #EED6C8;
  --ks-stroke: #E9DED5;
  --ks-shadow: 0 18px 45px rgba(86, 55, 41, .075);
  --ks-radius: 28px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-height: 100vh; margin: 0; overflow-x: hidden; }
body, button, input, textarea, select { -webkit-font-smoothing: antialiased; }
body { background: var(--ks-cream); color: var(--ks-brown); }
::selection { background: var(--ks-apricot); color: var(--ks-brown); }
:focus-visible { outline: 3px solid var(--ks-sage-dark); outline-offset: 4px; }

/* Rahmen / Layout */
.ks-site-shell { overflow: clip; min-height: 100vh; }
.ks-header-bar { position: relative; z-index: 3; border-bottom: 1px solid rgba(86,55,41,.07); background: var(--ks-paper); }
.ks-header-bar::before { content: ''; position: absolute; z-index: -1; top: -140px; left: -90px; width: 320px; height: 260px; background: var(--ks-sage); opacity: .15; border-radius: 38% 62% 65% 35% / 50% 45% 55% 50%; transform: rotate(-20deg); pointer-events: none; }
.ks-header-inner { min-height: 103px; padding-top: 18px; padding-bottom: 18px; gap: 16px 30px; }
.ks-brand-wrap { gap: 12px; }
.ks-brand-title, .ks-brand-title a { color: var(--ks-brown); font-weight: 800; text-decoration: none; }
.ks-brand-title { font-size: clamp(1.15rem, 1vw + .85rem, 1.6rem); letter-spacing: -.025em; }
.ks-header-bar .wp-block-site-logo img { border-radius: 18px; }
.ks-header-bar .wp-block-navigation { font-weight: 600; }
.ks-header-bar .wp-block-navigation a { text-decoration: none; color: var(--ks-brown); border-radius: 16px; padding: 9px 12px; transition: background .2s ease, color .2s ease; }
.ks-header-bar .wp-block-navigation a:hover, .ks-header-bar .wp-block-navigation a:focus-visible { color: var(--ks-brown); background: rgba(166,169,139,.2); }
.ks-header-bar .wp-block-navigation__responsive-container.is-menu-open { background: var(--ks-paper); color: var(--ks-brown); padding: 2rem; }
.ks-header-bar .wp-block-navigation__responsive-container.is-menu-open a { color: var(--ks-brown); }

.ks-main { padding-block: clamp(28px, 4vw, 68px) clamp(72px, 8vw, 130px); }
.ks-main > .wp-block-post-content { min-height: 45vh; }
.ks-front-main { padding-top: clamp(10px, 2vw, 36px); }
.ks-front-main .wp-block-post-content { min-height: 50vh; }
.ks-full-main { padding-block: 0; }
.ks-narrow-main { padding-inline: 20px; }
.wp-block-post-content > :first-child { margin-block-start: 0; }

/* Sanftes Footer-Motiv wie im Flyer */
.ks-footer { position: relative; isolation: isolate; padding-block: 58px 42px; min-height: 170px; background: var(--ks-paper); border-top: 1px solid rgba(86,55,41,.08); overflow: hidden; }
.ks-footer::before { content: ''; position: absolute; z-index: -1; left: -100px; bottom: -115px; width: 480px; height: 235px; border-radius: 52% 48% 0 0; background: rgba(166,169,139,.42); transform: rotate(11deg); pointer-events: none; }
.ks-footer::after { content: ''; position: absolute; z-index: -1; right: -90px; bottom: -135px; width: 460px; height: 220px; border-radius: 56% 44% 0 0; background: rgba(238,214,200,.65); transform: rotate(-13deg); pointer-events: none; }
.ks-footer-inner { gap: 24px; min-height: 55px; }
.ks-footer .wp-block-site-title, .ks-footer .wp-block-site-title a { color: var(--ks-brown); font-weight: 700; text-decoration: none; }
.ks-footer .wp-block-navigation { font-size: .875rem; }

/* Block-Optik */
:where(.wp-site-blocks) h1, :where(.wp-site-blocks) h2, :where(.wp-site-blocks) h3 { text-wrap: balance; letter-spacing: -.035em; }
.wp-block-heading { line-height: 1.16; }
.wp-block-heading strong { color: var(--ks-sage-dark); }
a { text-underline-offset: 3px; }
.wp-block-button__link, button, input[type='submit'], input[type='button'] { transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.wp-block-button__link:hover, button:hover, input[type='submit']:hover, input[type='button']:hover { transform: translateY(-1px); }
.wp-block-button.is-style-outline .wp-block-button__link { background: transparent; border: 2px solid var(--ks-sage-dark); color: var(--ks-brown); }
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: rgba(166,169,139,.14); }
.wp-block-image img, .wp-block-post-featured-image img { border-radius: 24px; }
.wp-block-cover { border-radius: 28px; overflow: hidden; }
.wp-block-separator { opacity: 1; border: none; background: var(--ks-sage); height: 2px; }
.wp-block-quote { border-left: 4px solid var(--ks-sage); background: var(--ks-paper); border-radius: 0 20px 20px 0; padding: 22px 28px; }
.wp-block-table th, .wp-block-table td { border-color: var(--ks-stroke); }
.wp-block-pullquote { border-color: var(--ks-sage); }
.wp-block-search__input { max-width: 100%; }
.wp-block-search__button { border-radius: 14px; }
.wp-block-post-template { gap: 24px; }
.wp-block-post-template > li { background: var(--ks-paper); border: 1px solid var(--ks-stroke); border-radius: 25px; padding: 24px; box-shadow: var(--ks-shadow); }
.wp-block-post-date, .wp-block-post-terms, .wp-block-post-author-name { color: var(--ks-sage-dark); }
.wp-block-post-title a { text-decoration: none; }
.wp-block-post-title a:hover { text-decoration: underline; }

/* Dekorative, leere Bausteine – Texte und Bilder kommen aus dem Editor */
.ks-soft-card { background: var(--ks-paper); border: 1px solid var(--ks-stroke); border-radius: var(--ks-radius); padding: clamp(20px, 3vw, 38px); box-shadow: var(--ks-shadow); }
.ks-soft-card .wp-block-image img { border-radius: 20px; }
.ks-kitten-card { background: var(--ks-paper); border: 3px solid white; border-radius: 30px; padding: 10px; box-shadow: 0 15px 38px rgba(86,55,41,.085); }
.ks-kitten-card > .wp-block-cover, .ks-kitten-card > .wp-block-image { border-radius: 22px; overflow: hidden; }
.ks-kitten-card .wp-block-heading { margin: 15px 10px 7px; }
.ks-kitten-card p { margin-inline: 10px; }
.ks-photo-space { background: linear-gradient(135deg,#e9dfd6 0%,#f5ede8 60%,#e0d1c5 100%); min-height: 260px; border-radius: 24px; overflow: hidden; }
.ks-photo-space::before { content: ''; display: block; width: 88px; height: 88px; margin: 70px auto 0; opacity: .18; background: url('./assets/ornaments/paw.svg') center/contain no-repeat; }
.ks-photo-space.has-background img { display: block; }
.ks-hero { position: relative; background: var(--ks-paper); border-radius: 38px; padding: clamp(38px,6vw,92px) clamp(28px,6vw,82px); isolation: isolate; overflow: hidden; box-shadow: var(--ks-shadow); }
.ks-hero::before { content: ''; position: absolute; z-index:-1; right:-100px; top:-185px; width:430px; height:395px; border-radius:40% 60% 65% 35%; transform:rotate(-15deg); background:rgba(166,169,139,.30); pointer-events:none; }
.ks-hero::after { content: ''; position: absolute; z-index:-1; left:-125px; bottom:-245px; width:540px; height:340px; border-radius:54% 46% 60% 40%; transform:rotate(14deg); background:rgba(238,214,200,.58); pointer-events:none; }
.ks-hero .wp-block-cover { min-height: 320px; }
.ks-hero .wp-block-heading { max-width: 620px; }
.ks-bubble { border-radius: 999px; background: var(--ks-sage); padding: 15px 30px; }
.ks-bubble p { margin:0; }
.ks-rose-bubble { border-radius:999px; background:var(--ks-apricot); padding:16px 30px; }
.ks-wave-section { background: linear-gradient(115deg,rgba(166,169,139,.22),rgba(238,214,200,.28)); padding: clamp(24px,4vw,56px); border-radius: 40px; }
.ks-qr-space { background: var(--ks-paper); border: 5px solid var(--ks-sage-dark); border-radius: 25px; width: min(100%,280px); aspect-ratio: 1; display: grid; place-items: center; padding: 25px; }
.ks-qr-space::after { content: ''; width: 65%; aspect-ratio: 1; border: 8px dashed rgba(86,55,41,.22); border-radius: 10px; }
.ks-paw-divider { background:url('./assets/ornaments/paw-divider.svg') center/contain no-repeat; height: 36px; min-height:36px; max-width:300px; margin: 22px auto; }
.ks-heart-decoration { background:url('./assets/ornaments/heart-line.svg') center/contain no-repeat; height: 55px; min-height:55px; max-width:370px; margin: 0 auto; }
.ks-feature-list li { margin-bottom: .6em; }
.ks-feature-list li::marker { color: var(--ks-sage-dark); }

/* Formularbereiche: native WP, Contact Form 7 und viele Block-Formulare */
:where(.wp-site-blocks) input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']),
:where(.wp-site-blocks) textarea,
:where(.wp-site-blocks) select { width: 100%; max-width: 100%; min-height: 48px; border: 1px solid #d2c7bd; background:var(--ks-paper); color:var(--ks-brown); border-radius: 14px; padding: 11px 15px; font: inherit; }
:where(.wp-site-blocks) textarea { min-height: 130px; }
:where(.wp-site-blocks) input[type='checkbox'], :where(.wp-site-blocks) input[type='radio'] { accent-color:var(--ks-sage-dark); }
:where(.wp-site-blocks) input[type='submit'], :where(.wp-site-blocks) button:not(.wp-block-navigation__responsive-container-open):not(.wp-block-navigation__responsive-container-close) { background:var(--ks-sage); border:0; border-radius:18px; color:var(--ks-brown); font:inherit; font-weight:700; padding:12px 22px; cursor:pointer; }
:where(.wp-site-blocks) label { font-weight:600; }
:where(.wp-site-blocks) fieldset { border: 1px solid var(--ks-stroke); border-radius:18px; }

/* Gutenberg-Editor: leere Vorlage-Flächen erkennbar halten */
.editor-styles-wrapper .ks-photo-space { min-height: 260px; }
.editor-styles-wrapper .ks-qr-space { min-height: 245px; }
.editor-styles-wrapper .ks-hero { min-height: 220px; }

@media(max-width:782px) {
  .ks-header-inner { min-height: 78px; }
  .ks-header-bar::before { width:230px;height:200px; }
  .ks-hero { border-radius:26px; }
  .ks-soft-card { border-radius:22px; }
  .ks-main { padding-block:25px 65px; }
  .ks-kitten-grid { gap: 18px !important; }
  .ks-kitten-grid > .wp-block-column { flex-basis: 100% !important; }
  .ks-footer-inner { justify-content:center !important; text-align:center; }
  .ks-footer-inner .wp-block-navigation { justify-content:center; }
}
@media(max-width:480px) {
  .ks-header-inner { padding-inline:18px; }
  .ks-main { padding-inline:16px; }
  .ks-hero { padding: 32px 22px; }
  .ks-hero .wp-block-cover { min-height:230px !important; }
  .ks-photo-space { min-height:225px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition:none !important; animation:none !important; }
}
/* Eigene Bilder ersetzen die grafischen Platzhalter vollständig. */
.ks-photo-space:has(img) { min-height:0; background:transparent; }
.ks-photo-space:has(img)::before { display:none; }
.ks-photo-space .wp-block-image { margin:0; }
.ks-photo-space .wp-block-image img { display:block; width:100%; height:auto; min-height:220px; max-height:460px; object-fit:cover; border-radius:22px; }
.ks-qr-space:has(img)::after { display:none; }
.ks-qr-space:has(img) { background:white; }
.ks-qr-space .wp-block-image { margin:0; }
.ks-qr-space .wp-block-image img { width:100%; height:auto; border-radius:0; }