/*
 Theme Name: ausderliebe
 Template: jivatma
*/
/* Grundfläche */
/* inria-serif-300 - latin */

@font-face {
  font-family: 'Inria Serif';
  src: url('fonts/inria-serif-v18-latin-300.woff2') format('woff2'),
  font-style: normal;
  font-display: swap;
}
body, input, select, textarea {
  font-family: 'Inria Serif', 'Helvetica Neue', Arial, serif;
  font-weight: 300;
  line-height: 1.6; /* <- hier etwas mehr Durchschuss */
  letter-spacing: 0.05em;
}
h1, h2, h3, h4, h5, h6, button {
  font-family: 'Source Sans', sans-serif;
  font-weight: 900;
  letter-spacing: 0.01em;
}

.hero-section {
  position: relative;
  background: rgba(0, 0, 0, 0.2);   /* leicht transparentes Weiß */;
  color: #fff;
}

/* Weiche Bänder */
.hero-section .band {
  background: rgba(0, 0, 0, 0.25);   /* leicht transparentes Schwarz */
  backdrop-filter: blur(1px);        /* sanfter Weichzeichner (modern browsers) */
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}

/* Akzentfläche in Ocker */
.hero-section .band-accent {
  background: rgba(255, 150, 0, 0.5);  /* dein Ocker mit Transparenz */
  color: #fff;
}

/* Letzter Satz – als stiller Ausklang */
.hero-section .band-end {
  background: rgba(0, 0, 0, 0.25);   /* leicht transparentes Schwarz */
  backdrop-filter: blur(1px);        /* sanfter Weichzeichner (modern browsers) */
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  color: #e88a3a;                      /* reine Akzentfarbe ohne Fläche */
  font-style: italic;
}

/* ===== Mobile-Verfeinerung (nur Ergänzung) ===== */
@media (max-width: 960px){
  .hero-section{ position: relative; }
  /* leicht stärkerer Overlay fürs Steinbild auf kleineren Screens */
  .hero-section::before{
    content:""; position:absolute; inset:0;
    background: rgba(0,0,0,.35);
  }
  .hero-section > *{ position: relative; } /* Text über Overlay halten */

  /* Container & Typo */
  .hero-container{ max-width: 68ch; margin:0 auto; padding: 2.2rem 1rem; }
  .hero-section h1{ font-size: clamp(26px, 8vw, 34px); line-height: 1.15; margin-bottom:.35rem; }
  .hero-section .subhead{ font-size: clamp(16px, 4.4vw, 18px); opacity:.9; margin: 0 0 1rem; letter-spacing:.01em; }

  /* Bänder */
  .band{ 
    background: rgba(0,0,0,.20);
    border-radius: 18px;
    padding: .9rem 1rem;
    margin: 1.1rem 0;
    text-wrap: balance;
    hyphens: auto;
    line-height: 1.6;
  }
  .band-accent{
    background: rgba(166,107,0,.78); /* dein Ocker, etwas kräftiger mobil */
    color:#fff;
    border-radius: 20px;
    padding: 1rem 1.1rem;
    margin-top: 1.2rem;
  }
  .band-end{
    background: transparent;
    color: #e88a3a;
    font-style: italic;
    padding: 0;
    margin-top: 1.35rem;
  }
}

@media (max-width: 480px){
  .hero-section h1{ font-size: clamp(24px, 9vw, 30px); }
  .band{ border-radius: 16px; padding: .8rem .9rem; }
  .band-accent{ border-radius: 18px; padding: .9rem 1rem; }
}

/* Optionale Zugänglichkeit */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior: auto !important; }
}

/* Eingekreister Button als Klasse */
.cta { 
	display:inline-block; 
	margin-top:.6rem; 
	padding:.5rem .9rem; 
	border: 1px solid currentColor; 
	border-radius :999px; 
	text-decoration: inherit; 
	font-size:15px; 
	font-family: Source Sans;      
	font-weight: bold;    
	letter-spacing: none;   /* übernimmt Laufweite */
}

/* Zentrierte Inhaltsbreite für spezielle Seiten */
.page-half {
  width: 50%;
  max-width: 68ch;
  margin: 0 auto;
  padding: 2rem 1rem;
  box-sizing: border-box;
}

/* Mobile bis Tablet */
@media (max-width: 960px) {
  .page-half {
    width: 100%;
    max-width: none;
  }
}

/* Desktop normal */
@media (min-width: 961px) and (max-width: 1599px) {
  .page-half {
    width: 70%;
    max-width: 80ch;
  }
}

/* Große Bildschirme */
@media (min-width: 1600px) {
  .page-half {
    width: 50%;
    max-width: 68ch;
  }
}

/* Dual Layout für Essays */
.dual-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}
.column {
  max-width: 40rem;
}
@media (max-width: 900px) {
  .dual-layout {
    grid-template-columns: 1fr;
  }
}

/* Einbindung von Hintergrund-Bildern in Seiten */
.page-id-11 {
  background: url('/wp-content/uploads/2025/10/menschunddesign_de_1.jpg') center/cover no-repeat fixed;
}
.page-id-43 {
  background: url('/wp-content/uploads/2025/10/menschunddesign_de_1.jpg') center/cover no-repeat fixed;
}
.page-id-14 {
  background: url('/wp-content/uploads/2025/10/menschunddesign_de_3.jpg') center/cover no-repeat fixed;
}
.page-id-47 {
  background: url('/wp-content/uploads/2025/10/menschunddesign_de_3.jpg') center/cover no-repeat fixed;
}
.page-id-58 {
  background: url('/wp-content/uploads/2025/10/menschunddesign_de_3.jpg') center/cover no-repeat fixed;
}
.page-id-60 {
  background: url('/wp-content/uploads/2025/10/menschunddesign_de_3.jpg') center/cover no-repeat fixed;
}
.page-id-62 {
  background: url('/wp-content/uploads/2025/10/menschunddesign_de_3.jpg ') center/cover no-repeat fixed;
}
.page-id-64 {
  background: url('/wp-content/uploads/2025/10/menschunddesign_de_3.jpg ') center/cover no-repeat fixed;
}
.page-id-66 {
  background: url('/wp-content/uploads/2025/10/menschunddesign_de_3.jpg ') center/cover no-repeat fixed;
}
.page-id-68 {
  background: url('/wp-content/uploads/2025/10/menschunddesign_de_3.jpg ') center/cover no-repeat fixed;
}
.page-id-16 {
  background: url('/wp-content/uploads/2025/10/menschunddesign_de_2.jpg ') center/cover no-repeat fixed; rgba(0,0,155,.55);
}
.page-id-41 {
  background: url('/wp-content/uploads/2025/10/menschunddesign_de_2.jpg ') center/cover no-repeat fixed; rgba(0,0,155,.55);
}
.page-id-70 {
  background: url('/wp-content/uploads/2025/10/menschunddesign_de_2.jpg ') center/cover no-repeat fixed; rgba(0,0,155,.55);
}
.page-id-76 {
  background: url('/wp-content/uploads/2025/10/menschunddesign_de_2.jpg ') center/cover no-repeat fixed; rgba(0,0,155,.55);
}
.page-id-72 {
  background: url('/wp-content/uploads/2025/10/menschunddesign_de_2.jpg ') center/cover no-repeat fixed; rgba(0,0,155,.55);
}
.page-id-74 {
  background: url('/wp-content/uploads/2025/10/menschunddesign_de_2.jpg ') center/cover no-repeat fixed; rgba(0,0,155,.55);
}
.page-id-18 {
  background: url('/wp-content/uploads/2025/10/menschunddesign_de_4_b.jpg') center/cover no-repeat fixed;
}
.page-id-45 {
  background: url('/wp-content/uploads/2025/10/menschunddesign_de_4_b.jpg') center/cover no-repeat fixed;
}
.page-id-39 {
  background: url('/wp-content/uploads/2025/10/menschunddesign_de_6.jpg') center/cover no-repeat fixed;
}
.page-id-20 {
  background: url('/wp-content/uploads/2025/10/menschunddesign_de_6.jpg') center/cover no-repeat fixed;
}
.page-id-767 {
  background: url('/wp-content/uploads/2025/10/menschunddesign_de_0.jpg') center/cover no-repeat fixed;
}