/* speranza.de Interimsseite · Stylesheet · Stand 22.09.2026, v2 (Faro, gekürzte Texte)
   Alle Gestaltungswerte sind Vorschlag für die Interimsseite, kein Designsystem (Phase 3). */

@font-face { font-family: 'Faro'; font-weight: 300; font-style: normal; font-display: swap; src: url('../fonts/faro-light.woff2') format('woff2'), url('../fonts/faro-light.woff') format('woff'); }
@font-face { font-family: 'Faro'; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/faro-bold.woff2') format('woff2'), url('../fonts/faro-bold.woff') format('woff'); }
@font-face { font-family: 'Faro'; font-weight: 800; font-style: normal; font-display: swap; src: url('../fonts/faro-display.woff2') format('woff2'), url('../fonts/faro-display.woff') format('woff'); }

:root {
  color-scheme: light;
  /* Farben */
  --paper: #F3F0EA;        /* warmes Beige, Wechselfläche */
  --white: #FFFFFF;        /* Weiß, Wechselfläche */
  --paper-deep: #E9E4DB;   /* Trennflächen, Formularfelder */
  --ink: #1B1916;          /* Text, Buttons */
  --ink-2: #4E4942;        /* Nebentext */
  --ink-3: #66605A;        /* Hinweise, Quellen (Kontrast 5,6:1 auf Beige) */
  --sage: #D6EAE1;         /* pastellige Akzentfläche, Tint aus dem Logo-Mint #8BE3D1 (drei Anlässe, Leiste) */
  --brand: #009A83;        /* Logo-Petrol, nur für Flächen und Symbole */
  --sage-deep: #0B6F5E;    /* Links, Fokus: Logo-Petrol #009A83 abgedunkelt für Kontrast 5,3:1 */
  --line: #D8D2C8;         /* Hairlines */
  /* Schrift */
  --sans: 'Faro', 'Helvetica Neue', Arial, sans-serif;
  --serif: var(--sans); /* eine Familie: Faro (Corporate Font), Light 300, Bold 700, Display 800 */
  /* Maße */
  --measure: 62ch;
  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --section: clamp(3.5rem, 8vw, 7rem);
  --max: 76rem;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-sizing: border-box;
}
*, *::before, *::after { box-sizing: inherit; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: 1rem; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.2rem;
  line-height: 1.55;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Typografie */
h1, h2, h3 { font-family: var(--sans); font-weight: 700; margin: 0; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.2rem, 5.2vw, 4.1rem); line-height: 1.05; font-weight: 800; letter-spacing: -0.025em; }
h2 { font-size: clamp(1.85rem, 4vw, 2.75rem); line-height: 1.1; }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.6rem); line-height: 1.2; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: var(--sage-deep); text-decoration: underline; text-underline-offset: 0.14em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--sage-deep); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--sage); }
.measure { max-width: var(--measure); }
.lead { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem); line-height: 1.45; color: var(--ink); }
.small { font-size: 1rem; color: var(--ink-3); }
.kicker { font-size: 1.05rem; font-weight: 700; color: var(--ink-2); margin: 0 0 1rem; }

/* Layout */
.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
section { padding-top: var(--section); padding-bottom: var(--section); }
.bg-white { background: var(--white); }
.bg-paper { background: var(--paper); }
.section-head { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.section-head p { margin-top: 1rem; }

/* Buttons */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  color: var(--paper);
  background: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 6px;
  padding: 1rem 1.5rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.btn:hover { background: #2B2723; border-color: #2B2723; }
.btn:active { transform: translateY(1px); }
.btn-ghost { color: var(--ink); background: transparent; }
.btn-ghost:hover { background: var(--paper-deep); border-color: var(--ink); }

/* OMT-Leiste (Modul 0, temporär bis 22.10.2026) */
.omt-bar { display: none; background: var(--sage); color: var(--ink); font-size: 1rem; line-height: 1.4; }
body.omt-live .omt-bar { display: block; }
.omt-bar .wrap { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; justify-content: space-between; padding-top: .8rem; padding-bottom: .8rem; }
.omt-bar a { color: var(--ink); font-weight: 700; white-space: nowrap; }

/* Header */
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; padding-top: .9rem; padding-bottom: .9rem; }
.brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--ink); }
.brand img { height: 3.5rem; width: auto; display: block; }
@media (min-width: 40em) { .brand img { height: 3.9rem; } }
.wordmark { font-family: var(--serif); font-size: 1.75rem; line-height: 1; letter-spacing: -0.01em; }
.wordmark sup { font-family: var(--sans); font-size: .55em; vertical-align: super; margin-left: .05em; }
.head-link { font-weight: 700; color: var(--ink); text-decoration: none; padding: .5rem 0; }
.head-link:hover { text-decoration: underline; }

/* Modul 1 · Einstieg */
.hero { padding-top: clamp(1.5rem, 3vw, 2.75rem); }
.hero-grid { display: grid; gap: 2.5rem; align-items: center; }
.hero h1 { max-width: 15em; }
.hero .line { display: block; }
.hero .lead { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); max-width: 56ch; }
.hero .btn { margin-top: clamp(1.5rem, 2.5vw, 2rem); }
.hero figure { margin: 0; }
.hero figure { align-self: center; }
.hero figure img { width: 100%; height: auto; display: block; border-radius: 8px; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 18%; }
@media (min-width: 60em) { .hero figure img { aspect-ratio: 4 / 5; object-position: 50% 30%; } }
@media (min-width: 60em) {
  .hero-grid:has(figure) { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 5rem); }
  .hero-grid:has(figure) h1 { font-size: clamp(2.2rem, 4.2vw, 3.4rem); }
}

/* Modul 2 · Drei Anlässe */
.anlaesse { display: grid; gap: 1rem; }
.anlass {
  background: var(--sage);
  border-radius: 8px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex; flex-direction: column;
}
.anlass h3 { margin-bottom: 1rem; }
.anlass p { flex: 1 0 auto; }
.anlass a { display: inline-block; margin-top: 1.5rem; font-weight: 700; color: var(--ink); }
@media (min-width: 52em) { .anlaesse { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }

/* Modul 3 · Wie ich arbeite */
.prinzipien { display: grid; gap: clamp(1.75rem, 3vw, 2.5rem) clamp(2rem, 4vw, 4rem); margin: 0; padding: 0; list-style: none; }
.prinzipien li { max-width: 48ch; }
.prinzipien b { display: block; font-weight: 700; font-size: 1.25rem; line-height: 1.25; margin-bottom: .3rem; }
@media (min-width: 46em) { .prinzipien { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.arbeit-grid { display: grid; gap: 2.5rem; }
.arbeit-grid figure { margin: 0; }
.arbeit-grid figure img { width: 100%; height: auto; display: block; border-radius: 8px; }
@media (min-width: 60em) { .arbeit-grid:has(figure) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); align-items: start; } }

/* Modul 4 · Was Kunden sagen */
.stimmen { display: grid; gap: clamp(1.75rem, 3vw, 2.5rem) clamp(2rem, 4vw, 4rem); margin: 0; padding: 0; list-style: none; }
.stimmen li { max-width: 52ch; }
.stimmen blockquote { margin: 0; font-size: 1.35rem; line-height: 1.4; }
.stimmen blockquote p { margin: 0; }
.stimmen figcaption, .stimmen cite { display: block; font-style: normal; font-size: 1rem; font-weight: 700; color: var(--ink-3); margin-top: .8rem; }
.stimmen li.gross { max-width: 44rem; }
.stimmen li.gross blockquote { font-size: clamp(1.6rem, 2.8vw, 2.2rem); line-height: 1.25; font-weight: 700; letter-spacing: -0.02em; }
@media (min-width: 46em) {
  .stimmen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stimmen li.gross { grid-column: 1 / -1; }
}
@media (min-width: 60em) {
  .stimmen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.quelle { margin-top: 1rem; }

.proof-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.5rem; }
.stars { display: inline-flex; gap: .15rem; }
.stars svg { width: 2rem; height: 2rem; fill: var(--brand); }
.stars svg.part { fill: url(#star-part); }
.proof-label { font-weight: 700; font-size: 1.25rem; }
.siegel { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 1.75rem; }
.siegel img { width: 7.5rem; height: auto; display: block; }
.siegel:empty { display: none; }
.proof .quelle { margin-top: 1.25rem; }

/* Modul 5 · Wer da spricht */
.ueber-grid { display: grid; gap: 2.5rem; }
.ueber-grid p { font-size: 1.25rem; line-height: 1.5; }
.ueber-grid figure { margin: 0; }
.ueber-grid figure { max-width: 26rem; }
.ueber-grid figure img { width: 100%; height: auto; display: block; border-radius: 8px; }
@media (min-width: 60em) { .ueber-grid:has(figure) { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; } .ueber-grid figure { justify-self: end; } }

/* Modul 6 · Kontakt */
.kontakt-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 60em) { .kontakt-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; } }
form { display: grid; gap: 1.25rem; }
.field { display: grid; gap: .4rem; }
label { font-weight: 700; font-size: 1.05rem; }
label .opt { font-weight: 300; color: var(--ink-3); }
input, select, textarea {
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: .85rem 1rem;
  width: 100%;
}
input:focus, select:focus, textarea:focus { border-color: var(--sage-deep); outline: 2px solid var(--sage-deep); outline-offset: 0; }
textarea { min-height: 7rem; resize: vertical; }
select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%231B1916' stroke-width='1.6' d='M3 6l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.75rem; }
.field-row { display: grid; gap: 1.25rem; }
@media (min-width: 40em) { .field-row { grid-template-columns: 1fr 1fr; } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: .9375rem; color: var(--ink-3); }
.form-error { display: none; background: #F6E3DE; color: #6B2A1E; border-radius: 6px; padding: .85rem 1rem; font-size: 1rem; }
.form-error.show { display: block; }
.kontakt-alt { margin-top: 2rem; margin-bottom: 1rem; }

/* Footer */
.site-foot { padding-top: 2rem; padding-bottom: 2.5rem; font-size: 1rem; color: var(--ink-3); }
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: .75rem 1.75rem; align-items: center; justify-content: space-between; }
.site-foot ul { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; list-style: none; margin: 0; padding: 0; }
.site-foot a { color: var(--ink-2); }

/* Unterseiten (Impressum, Datenschutz, Angekommen) */
.page { padding-top: clamp(2.5rem, 7vw, 5rem); padding-bottom: var(--section); }
.page h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); margin-bottom: 1.5rem; }
.page h2 { font-size: 1.6rem; margin: 2.5rem 0 .75rem; }
.page h3 { font-size: 1.2rem; font-family: var(--sans); font-weight: 600; margin: 1.75rem 0 .5rem; }
.page ul { padding-left: 1.2rem; }
.page li { margin-bottom: .35rem; }
.page address { font-style: normal; }