/* shinpo IT GmbH - Custom Ghost Theme Styles
   Redesign A4 (2026-08-20): neue Palette (tokens.css, Schema Dunkel),
   P12 scroll-behavior gated, P1/2/3/9/20 Motion- und Fokus-Muster. */

* { box-sizing: border-box; }

/* P12: Smooth Scroll nur wenn Motion erwuenscht */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Navigation */
.nav-blur { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }

/* Typography (P21: kein Gradient-Text mehr, Klasse bleibt fuer Alt-Inhalte) */
.gradient-text { color: var(--color-primary, #D9598C); }
h1, .text-4xl, .text-5xl, .text-6xl { letter-spacing: var(--tracking-display, -0.02em); }

/* Card hover effects (P2: Motion nur fuer echte Pointer) */
.card-hover { transition: transform var(--dur-base, 200ms) var(--ease-out, ease-out), border-color var(--dur-base, 200ms) var(--ease-out, ease-out), box-shadow var(--dur-base, 200ms) var(--ease-out, ease-out); }
.card-hover:hover { border-color: #6BAF9C; box-shadow: 0 8px 32px rgba(107, 175, 156, 0.15); }

/* Partner badges */
.partner-badge { transition: color var(--dur-base, 200ms) var(--ease-out, ease-out), border-color var(--dur-base, 200ms) var(--ease-out, ease-out); }
.partner-badge:hover { color: #F2EFE9; border-color: #6BAF9C; }

/* Section backgrounds */
.sec-hero { background: radial-gradient(ellipse 80% 60% at 60% 40%, rgba(107,175,156,0.07) 0%, rgba(235,176,61,0.04) 50%, transparent 100%); }
.sec-bloghead { background: linear-gradient(180deg, rgba(107,175,156,0.05) 0%, transparent 100%); }
.sec-services { background: linear-gradient(180deg, rgba(107,175,156,0.04) 0%, transparent 100%); }
.sec-about { background: linear-gradient(180deg, transparent 0%, rgba(235,176,61,0.04) 50%, transparent 100%); }
.sec-cta { background: radial-gradient(ellipse 70% 80% at 50% 50%, rgba(217,89,140,0.06) 0%, transparent 70%); }
.sec-newsletter { background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(107,175,156,0.05) 0%, transparent 70%); }

/* Hero animations */
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes pulse-ring { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.7; } }
.hero-float { animation: float 4s ease-in-out infinite; }
.pulse-ring { animation: pulse-ring 2.5s ease-in-out infinite; }

/* Persona accordion */
.persona-body { max-height: 0; overflow: hidden; transition: max-height var(--dur-slow, 250ms) var(--ease-out, ease-out); }
.persona-card.open .persona-body { max-height: 600px; }
.persona-chevron { transition: transform var(--dur-base, 200ms) var(--ease-out, ease-out); }
.persona-card.open .persona-chevron { transform: rotate(180deg); }

/* Avatar accent (P21: Flaeche statt Gradient) */
.avatar-gradient { background: var(--color-primary, #D9598C); }

/* Timeline */
.timeline-line::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 40px;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, #2A2D34, transparent);
}

/* Case cards */
.case-card { transition: transform var(--dur-base, 200ms) var(--ease-out, ease-out), box-shadow var(--dur-base, 200ms) var(--ease-out, ease-out); }
.case-card:hover { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4); }

/* Partner cards */
.partner-card { transition: border-color var(--dur-base, 200ms) var(--ease-out, ease-out), transform var(--dur-base, 200ms) var(--ease-out, ease-out); }
.partner-card:hover { border-color: #EBB03D; }

/* Contact items */
.contact-item { transition: color var(--dur-base, 200ms) var(--ease-out, ease-out); }
.contact-item:hover { color: #F2EFE9; }

/* Impressum */
.section-divider { border-top: 1px solid #2A2D34; margin: 2.5rem 0; }

/* Calendly widget */
.calendly-inline-widget { border-radius: 12px; overflow: hidden; }

/* Ghost content styles (Lesetypografie, Referenz 3190: Mass <=70ch) */
.gh-content { color: var(--text-muted, #A8ACB3); line-height: 1.75; max-width: 70ch; margin-left: auto; margin-right: auto; }
.gh-content h1, .gh-content h2, .gh-content h3 { color: #F2EFE9; }
.gh-content h2 { font-size: 1.728rem; margin-top: 2.5rem; margin-bottom: 0.75rem; }
.gh-content h3 { font-size: 1.44rem; margin-top: 2rem; margin-bottom: 0.5rem; }
.gh-content a { color: #6BAF9C; }
.gh-content a:hover { text-decoration: underline; }
.gh-content strong { color: #F2EFE9; }
.gh-content blockquote {
  border-left: 4px solid #EBB03D;
  padding-left: 1.5rem;
  color: #F2EFE9;
  font-style: italic;
}
.gh-content code {
  background: #1B1D22;
  border: 1px solid #2A2D34;
  border-radius: 4px;
  padding: 0.2em 0.4em;
  font-size: 0.875em;
}
.gh-content pre {
  background: #14161A;
  border: 1px solid #2A2D34;
  border-radius: 8px;
  padding: 1.5rem;
  overflow-x: auto;
}
.gh-content pre code { background: transparent; border: 0; padding: 0; }
.gh-content img { border-radius: 12px; max-width: 100%; }
.gh-content figcaption { text-align: center; font-size: 0.833rem; color: #A8ACB3; margin-top: 0.5rem; }
.gh-content ul li { list-style: disc; margin-left: 1.5rem; }
.gh-content ol li { list-style: decimal; margin-left: 1.5rem; }
.gh-content hr { border: 0; border-top: 1px solid #2A2D34; margin: 2.5rem 0; }

/* Ghost Koenig cards (GS050-Fix): breite/volle Bilder aus dem 70ch-Mass ausbrechen lassen */
.gh-content .kg-width-wide { max-width: 85vw; width: 100%; margin-left: 50%; transform: translateX(-50%); }
.gh-content .kg-width-full { max-width: 100vw; width: 100vw; margin-left: 50%; transform: translateX(-50%); }
@media (min-width: 1024px) {
  .gh-content .kg-width-wide { max-width: 900px; }
}

/* Post cards (blog listing) */
.post-card { transition: transform var(--dur-base, 200ms) var(--ease-out, ease-out), border-color var(--dur-base, 200ms) var(--ease-out, ease-out); }
.post-card:hover { border-color: #6BAF9C; }

/* Impressum content */
.imp-content h2 { font-size: 1.25rem; font-weight: 700; color: #F2EFE9; margin-top: 2rem; margin-bottom: 0.75rem; }
.imp-content h3 { font-size: 1rem; font-weight: 600; color: #F2EFE9; margin-top: 1.5rem; margin-bottom: 0.5rem; }
.imp-content p, .imp-content li { color: #A8ACB3; line-height: 1.75; font-size: 0.9rem; }
.imp-content li { margin-left: 1.25rem; list-style: disc; }
.imp-content a { color: #6BAF9C; }
.imp-content a:hover { text-decoration: underline; }
.imp-content strong { color: #F2EFE9; }

/* P3: Press-Feedback */
a[href].rounded-lg:active, button:active { transform: scale(0.97); transition: transform var(--dur-quick, 160ms) var(--ease-out, ease-out); }

/* P2: Hover-Bewegung nur fuer echte Pointer */
@media (hover: hover) and (pointer: fine) {
  .card-hover:hover, .post-card:hover, .case-card:hover { transform: translateY(-4px); }
  .partner-card:hover { transform: translateY(-2px); }
}

/* P1/P9: Reduced-Motion-Feinschliff (tokens.css bringt die globale Notbremse) */
@media (prefers-reduced-motion: reduce) {
  .hero-float, .pulse-ring { animation: none !important; }
  .card-hover:hover, .post-card:hover, .case-card:hover, .partner-card:hover { transform: none !important; }
  a[href].rounded-lg:active, button:active { transform: none; }
}