/* ============================================================
   RanchOne – Marketing Site
   ============================================================ */

:root {
  --cream:        #f4eee3;
  --cream-2:      #ece2d1;
  --cream-card:   #fbf8f1;
  --ink:          #241d18;
  --ink-2:        #2e251e;
  --ink-3:        #38291d;
  --wood:         #5c4a39;
  --wood-light:   #7a6450;
  --accent:       #c0692a;
  --accent-hover: #a8581f;
  --accent-soft:  #d98a4f;
  --sage:         #8a8b6f;
  --text:         #2c2521;
  --muted:        #756758;
  --muted-light:  #b7a896;
  --line:         #e0d4c1;
  --radius:       14px;
  --radius-sm:    9px;
  --shadow:       0 18px 50px -18px rgba(36, 29, 24, .35);
  --shadow-sm:    0 8px 24px -10px rgba(36, 29, 24, .28);
  --container:    1180px;
  --header-h:     134px;
  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-script:  'Sacramento', cursive;
  --font-serif:   'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.05; letter-spacing: .01em; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 14px;
  text-decoration: none;
  border: none;
  border-radius: var(--radius-sm);
  padding: 13px 24px;
  cursor: pointer;
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-sm  { padding: 9px 18px; font-size: 13px; }
.btn-lg  { padding: 16px 30px; font-size: 15px; }
.btn-block { width: 100%; }

.btn-accent { background: var(--accent); color: #fff; box-shadow: 0 10px 24px -10px rgba(192,105,42,.7); }
.btn-accent:hover { background: var(--accent-hover); transform: translateY(-2px); }

.btn-ghost { background: rgba(255,255,255,.08); color: #fff; border: 1.5px solid rgba(255,255,255,.4); }
.btn-ghost:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); }

.btn-outline { background: transparent; color: var(--ink); border: 1.5px solid var(--wood); }
.btn-outline:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Unwiderrufliche Aktionen (Konto löschen) – Farbe wie .pp-msg-err */
.btn-danger { background: #b0453c; color: #fff; box-shadow: 0 10px 24px -10px rgba(176, 69, 60, .6); }
.btn-danger:hover { background: #98392f; transform: translateY(-2px); }

/* ============================ HEADER ============================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(244, 238, 227, .9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s ease, background .25s ease;
}
.site-header.scrolled { box-shadow: 0 6px 24px -14px rgba(36,29,24,.5); }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  gap: 24px;
}

.brand { display: flex; align-items: center; text-decoration: none; }
.brand-logo { height: 120px; width: auto; display: block; min-width: 120px; }

.main-nav { display: flex; gap: 30px; }
.main-nav > a {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  position: relative;
  padding: 4px 0;
}
.main-nav > a::after {
  content: ''; position: absolute; left: 0; bottom: -2px;
  width: 0; height: 2px; background: var(--accent); transition: width .22s ease;
}
.main-nav > a:hover { color: var(--accent); }
.main-nav > a:hover::after { width: 100%; }

/* Auth-Buttons & Sprachumschalter im Burger – nur Mobile sichtbar (siehe Media-Query) */
.nav-cta { display: none; }
.nav-lang { display: none; }

.header-actions { display: flex; align-items: center; gap: 14px; }
/* hidden-Attribut auch für display:flex/inline-flex-Elemente erzwingen */
[hidden] { display: none !important; }
.profile-btn .js-profile-name { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; }
.nav-toggle span { width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transition: .25s; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================ HERO ============================ */
.hero {
  position: relative;
  color: #fff;
  overflow: hidden;
  max-width: 1400px;
  height: 600px;
  margin: 0 auto;
}
/* Slider: alle Slides im selben Grid-Feld gestapelt, aktiver wird eingeblendet */
.hero-slides { display: grid; height: 100%; }
.hero-slide {
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  opacity: 0;
  transform: translateX(28px);
  transition: opacity .7s ease, transform .7s ease;
  pointer-events: none;
}
.hero-slide.is-active { opacity: 1; transform: none; z-index: 2; pointer-events: auto; }
.hero-slide--wood   { background: linear-gradient(105deg, #241a12 0%, #4a3627 55%, #6a4a30 100%); }
.hero-slide--sunset { background: linear-gradient(105deg, #241812 0%, #6e3c1e 55%, #a85a26 100%); }
/* Punkte-Navigation */
.hero-dots { position: absolute; left: 0; right: 0; bottom: 24px; z-index: 5; display: flex; justify-content: center; gap: 10px; }
.hero-dot { width: 10px; height: 10px; padding: 0; border: none; border-radius: 999px; background: rgba(255,255,255,.5); cursor: pointer; transition: width .25s ease, background .25s ease; }
.hero-dot:hover { background: rgba(255,255,255,.85); }
.hero-dot.is-active { width: 28px; background: var(--accent); }
/* Unter 700px: kein Slider -> Punkte-Navigation ausblenden (statischer Hero) */
@media (max-width: 699px) {
  .hero-dots { display: none; }
  .hero { height: auto; }                                /* Höhe wächst mit Text + Bild */
  .hero-slides { display: block; }                       /* kein Grid-Stacking mehr */
  .hero-slide:not(.is-active) { display: none; }         /* nur der aktive Slide */
  .hero-slide { flex-direction: column; align-items: stretch; }  /* Text oben, Bild darunter */
}

.hero-bg { position: absolute; inset: 0; z-index: 0; background-color: #211A13; }
.hero-photo { width: 100%; height: 100%; object-fit: cover; object-position: 75% center; }
.hero-mobile-mockup { display: none; }   /* nur < 700px sichtbar (siehe Media-Query) */
@media (max-width: 699px) {
  .hero-mobile-mockup {
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 1;
    width: 100%;
    margin: 12px 0 40px;   /* unten Platz für den überstehenden Phone-Screen */
  }
}
/* Hero-Mockup: Ad etwas kleiner, Phone mit 10px Abstand zum rechten Rand */
.hero-mobile-mockup .showcase-ad { width: 76%; }
.hero-mobile-mockup .showcase-phone { right: 10px; }
/* Unter 700px Breite: Hero-Foto ausblenden (dunkler Hintergrund bleibt) */
@media (max-width: 700px) { .hero-photo { display: none; } }
.hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(20,15,11,.72) 0%, rgba(20,15,11,.45) 32%, rgba(20,15,11,.12) 58%, rgba(20,15,11,0) 78%);
}
.hero-content {
  position: relative; z-index: 1;
  width: 100%;
  padding: 48px 24px;
  max-width: var(--container);
}
.hero-title { font-size: clamp(40px, 6vw, 78px); text-transform: uppercase; }
.hero-title .line { display: block; margin-bottom: 5px; }
.hero-title .script {
  display: block;
  font-family: var(--font-script);
  text-transform: none;
  color: var(--accent-soft);
  font-size: 48px;
  font-weight: 400;
  letter-spacing: .01em;
  margin-top: 4px;
}
.hero-lead { max-width: 480px; font-size: 17px; color: #e9dfd2; margin: 28px 0 36px; }
@media (max-width: 699px) { .hero-lead { margin: 10px 0 10px; } }
.hero-cta { display: flex; flex-wrap: wrap; gap: 16px; }

/* ============================ FEATURES ============================ */
.features {
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%);
  padding: 64px 0;
  border-bottom: 1px solid var(--line);
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.feature {
  text-align: center;
  padding: 26px 14px;
  background: var(--cream-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.feature:hover { transform: translateY(-6px); box-shadow: var(--shadow-sm); border-color: var(--accent-soft); }
.feature-icon {
  display: grid; place-items: center;
  width: 52px; height: 52px; margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--ink); color: var(--accent-soft);
}
.feature h3 { font-size: 15px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink); margin-bottom: 7px; }
.feature p { font-size: 13px; color: var(--muted); line-height: 1.45; }
.features-more { text-align: center; margin-top: 42px; }

/* ============================ SHOWCASE ============================ */
.showcase {
  background: radial-gradient(120% 100% at 80% 0%, var(--ink-3) 0%, var(--ink) 60%);
  color: #fff;
  padding: 96px 0;
}
.showcase-inner {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 60px;
  align-items: center;
}
.eyebrow {
  font-family: var(--font-display);
  text-transform: uppercase; letter-spacing: .25em; font-size: 12px;
  color: var(--accent-soft);
}
.showcase-text h2 { font-size: clamp(34px, 4.4vw, 52px); margin: 14px 0 20px; text-transform: uppercase; }
.showcase-text > p { color: #d8cdbf; font-size: 16px; max-width: 440px; }
.check-list { list-style: none; margin: 28px 0; display: grid; gap: 13px; }
.check-list li { position: relative; padding-left: 32px; color: #ece3d6; font-size: 15px; }
.check-list li::before {
  content: ''; position: absolute; left: 0; top: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/14px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/14px no-repeat;
}
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .08em;
  font-size: 14px; color: var(--accent-soft); text-decoration: none;
}
.link-arrow svg { transition: transform .2s ease; }
.link-arrow:hover svg { transform: translateX(5px); }

/* ---- Mockup ---- */
.showcase-mockup { position: relative; display: flex; justify-content: center; align-items: flex-end; min-height: 340px; }

.device.laptop { width: 86%; }
.showcase-ad { width: 86%; height: auto; display: block; border-radius: 16px; box-shadow: var(--shadow); }
.laptop-screen {
  background: #11100e;
  border: 8px solid #1c1916;
  border-bottom: none;
  border-radius: 14px 14px 0 0;
  padding: 0;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.laptop-base {
  height: 16px;
  background: linear-gradient(180deg, #2a2622, #18130f);
  border-radius: 0 0 12px 12px;
  position: relative;
}
.laptop-base::after {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 70px; height: 5px; background: #0c0a08; border-radius: 0 0 6px 6px;
}

.app-shell { display: grid; grid-template-columns: 78px 1fr; background: #f5f1ea; height: 240px; font-family: var(--font-body); }
.app-side { background: #211b16; padding: 14px 10px; display: flex; flex-direction: column; gap: 10px; }
.app-logo { font-family: var(--font-display); font-size: 12px; color: #fff; letter-spacing: .06em; margin-bottom: 8px; }
.app-logo b { color: var(--accent-soft); }
.nav-item { height: 9px; border-radius: 4px; background: #3a322b; }
.nav-item.active { background: var(--accent); }
.app-main { padding: 16px 18px; }
.app-head { display: flex; flex-direction: column; margin-bottom: 14px; }
.app-head strong { font-family: var(--font-display); font-size: 16px; color: var(--ink); }
.app-sub { font-size: 11px; color: var(--muted); }
.stat-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 14px; }
.stat { background: #fff; border: 1px solid #e7ddcd; border-radius: 9px; padding: 10px 8px; text-align: center; }
.stat .num { display: block; font-family: var(--font-display); font-size: 22px; color: var(--accent); font-weight: 600; }
.stat .lbl { font-size: 9px; color: var(--muted); }
.app-list { display: grid; gap: 8px; }
.app-list .row { height: 12px; background: #fff; border: 1px solid #e7ddcd; border-radius: 5px; }
.app-list .row.short { width: 60%; }

.device.phone { position: absolute; right: -6px; bottom: -10px; width: 116px; }
.showcase-phone { position: absolute; right: -6px; bottom: -30px; width: 132px; height: auto; filter: drop-shadow(0 18px 30px rgba(0,0,0,.35)); }
.phone-screen {
  background: #f5f1ea;
  border: 6px solid #1c1916;
  border-radius: 20px;
  padding: 12px 10px;
  box-shadow: var(--shadow);
}
.phone-head { font-family: var(--font-display); font-size: 11px; color: var(--ink); text-align: center; margin-bottom: 8px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-bottom: 10px; }
.cal-grid span { aspect-ratio: 1; background: #fff; border-radius: 3px; }
.cal-grid .hl { background: var(--accent); }
.cal-grid .hl2 { background: var(--sage); }
.phone-list { display: grid; gap: 5px; }
.phone-list span { height: 10px; background: #fff; border-radius: 4px; }

/* ============================ LEISTUNGSUMFANG ============================ */
.capabilities { background: linear-gradient(180deg, var(--cream), var(--cream-2)); padding: 90px 0; border-top: 1px solid var(--line); }
.cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cap {
  background: var(--cream-card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 24px 24px 22px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.cap:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); }
.cap h3 { font-size: 17px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink); margin-bottom: 9px; }
.cap p { font-size: 14px; color: var(--muted); line-height: 1.55; }

/* ============================ UNTERSEITE FUNKTIONEN ============================ */
/* --- Hero --- */
.subpage-hero { position: relative; background: var(--cream); overflow: hidden; border-bottom: 1px solid var(--line); }
.subpage-hero .container { position: relative; z-index: 2; }
.subpage-hero-inner { max-width: 560px; padding: 78px 0 88px; }
.subpage-hero-photo {
  position: absolute; top: 0; right: 0; bottom: 0; width: 54%;
  background: url('../img/hero-bg.jpg') center right / cover no-repeat;
  z-index: 1;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 36%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 36%);
}
.breadcrumb { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .18em; font-size: 12px; color: var(--muted); margin-bottom: 20px; }
.breadcrumb a { color: var(--accent); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.subpage-hero h1 {
  font-family: var(--font-serif);
  font-weight: 700; text-transform: none; letter-spacing: 0;
  font-size: clamp(40px, 6vw, 72px); line-height: 1.03; color: var(--ink);
}
.brush { display: block; width: 230px; max-width: 60%; height: auto; color: var(--accent); margin: 10px 0 0 2px; }
.subpage-hero p { color: var(--muted); font-size: 17px; max-width: 430px; margin-top: 20px; }

/* --- Detail-Sektionen --- */
.detail-section { padding: 58px 0; }
.detail-section:nth-child(even) { background: var(--cream-card); }
.detail { display: grid; grid-template-columns: 1fr 1.08fr; gap: 52px; align-items: center; }
.detail.flip .detail-info { order: 2; }
.detail.flip .detail-ui   { order: 1; }

.detail-badge-row { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.detail-num {
  width: 44px; height: 44px; border-radius: 10px;
  background: var(--accent); color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: 18px;
  display: grid; place-items: center; flex: none;
}
.detail-icon { color: var(--wood); }
.detail-info h2 { font-family: var(--font-serif); font-weight: 700; text-transform: none; font-size: clamp(24px, 2.6vw, 34px); color: var(--ink); }
.detail-lead { color: var(--accent); font-size: 15px; margin: 7px 0 20px; }
.detail-list { list-style: none; display: grid; gap: 12px; }
.detail-list li { position: relative; padding-left: 30px; font-size: 15px; color: var(--text); line-height: 1.5; }
.detail-list li strong { color: var(--ink); }
.detail-list li::before {
  content: ''; position: absolute; left: 0; top: 3px;
  width: 19px; height: 19px; border-radius: 50%; background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/13px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/13px no-repeat;
}

/* --- UI-Mockup-Baukasten --- */
.ui-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; font-size: 12px; color: var(--text); }
.detail-shot { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); cursor: zoom-in; }
/* Zusätzliches Bild über den Screenshot legen (z. B. mobile Ansicht, wie showcase-mockup) */
.detail-ui--stacked { position: relative; }
.detail-shot-mobile { position: absolute; right: -10px; bottom: -20px; width: 30%; max-width: 150px; height: auto; border: 2px solid dimgray; border-radius: 14px; box-shadow: 0 20px 44px -16px rgba(36, 29, 24, .5); pointer-events: none; }

/* Bild-Lightbox (features.php: Screenshot per Klick groß anzeigen) */
.lightbox { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(20, 15, 11, .82); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); cursor: zoom-out; }
.lightbox__img { max-width: 96vw; max-height: 92vh; width: auto; height: auto; border-radius: 10px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6); cursor: default; }
.lightbox__close { position: absolute; top: 16px; right: 20px; width: 42px; height: 42px; z-index: 2; border: none; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; }
.lightbox__close:hover { background: rgba(255, 255, 255, .26); }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 46px; height: 46px; border: none; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.lightbox__nav:hover { background: rgba(255, 255, 255, .26); }
.lightbox__nav--prev { left: 16px; }
.lightbox__nav--next { right: 16px; }
.lightbox__count { position: absolute; bottom: 16px; left: 0; right: 0; z-index: 2; text-align: center; color: rgba(255, 255, 255, .85); font-size: 14px; font-family: var(--font-body); }
@media (max-width: 560px) { .lightbox__nav { width: 40px; height: 40px; font-size: 26px; } .lightbox__nav--prev { left: 8px; } .lightbox__nav--next { right: 8px; } }
body.lightbox-open { overflow: hidden; }
.ui-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.ui-title { font-family: var(--font-display); font-size: 14px; color: var(--ink); font-weight: 600; }
.ui-pad { padding: 16px; }
.ui-btn { font-family: var(--font-display); font-size: 11px; padding: 6px 11px; border-radius: 7px; background: var(--ink); color: #fff; white-space: nowrap; }
.ui-btn.accent { background: var(--accent); }
.ui-btn.ghost { background: transparent; border: 1px solid var(--line); color: var(--muted); }
.ui-row-btns { display: flex; gap: 8px; }
.ui-tabs { display: flex; gap: 18px; padding: 0 16px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.ui-tab { padding: 11px 0; font-size: 12px; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; }
.ui-tab.active { color: var(--ink); border-color: var(--accent); font-weight: 600; }
.ui-chip { display: inline-block; padding: 3px 9px; border-radius: 20px; font-size: 10px; font-weight: 600; }
.ui-chip.ok { background: #e3efdd; color: #3f6b32; }
.ui-chip.warn { background: #f6ddd6; color: #b0453c; }
.ui-chip.soft { background: #f0e7d7; color: #8a6531; }
.ui-chip.info { background: #dde7f1; color: #3a5f88; }
.ui-table { width: 100%; border-collapse: collapse; }
.ui-table th { text-align: left; font-weight: 500; color: var(--muted); font-size: 10px; padding: 9px 10px; border-bottom: 1px solid var(--line); text-transform: uppercase; letter-spacing: .04em; }
.ui-table td { padding: 10px; border-bottom: 1px solid var(--line); font-size: 11px; }
.ui-table tr:last-child td { border-bottom: none; }
.ui-table td b { color: var(--ink); }
.ui-link { color: var(--accent); font-size: 11px; padding: 10px 12px; display: inline-block; }
.ui-sub { color: var(--muted); }

/* Kalender-Mockup */
.ui-cal-toolbar { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.ui-seg { display: flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.ui-seg span { padding: 5px 10px; font-size: 11px; color: var(--muted); }
.ui-seg span.active { background: var(--ink); color: #fff; }
.ui-cal-nav { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: 11px; color: var(--ink); }
.ui-cal { display: grid; grid-template-columns: 30px repeat(7, 1fr); }
.ui-cal .ch { padding: 6px 2px; text-align: center; font-size: 9px; color: var(--muted); border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ui-cal .ct { font-size: 8px; color: var(--muted); text-align: right; padding: 3px 4px; border-bottom: 1px solid var(--line); }
.ui-cal .cc { border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); min-height: 22px; padding: 2px; }
.ui-ev { border-radius: 4px; padding: 2px 4px; font-size: 8px; line-height: 1.15; }
.ev-green { background: #dfeecf; color: #45631f; }
.ev-olive { background: #e6e6cf; color: #6a6a2f; }
.ev-amber { background: #f7e6c8; color: #8a5a1f; }
.ev-pink  { background: #f6dbe0; color: #a03a52; }
.ev-blue  { background: #d9e5f2; color: #345a86; }
.ev-red   { background: #f3d3d0; color: #a53a34; }
.ui-legend { display: flex; gap: 12px; flex-wrap: wrap; padding: 10px 14px; }
.ui-legend span { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--muted); }
.ui-legend .dot { width: 9px; height: 9px; border-radius: 50%; }

/* Pferde-Profil-Mockup */
.ui-profile { display: grid; grid-template-columns: 128px 1fr; gap: 18px; padding: 16px; }
.ui-photo { border-radius: 9px; overflow: hidden; background: #ece2d1; }
.ui-photo img { width: 100%; height: 120px; object-fit: cover; display: block; }
.ui-photo-btn { text-align: center; font-size: 10px; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 5px; margin-top: 8px; }
.ui-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 18px; }
.ui-field label { display: block; font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
.ui-field b { font-size: 13px; color: var(--ink); font-weight: 600; }

/* Listen-Mockup (Aufgaben, Warnungen, Dokumente …) */
.ui-list { display: grid; }
.ui-li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.ui-li:last-child { border-bottom: none; }
.ui-li .ui-ico { width: 30px; height: 30px; border-radius: 8px; background: var(--cream-2); color: var(--wood); display: grid; place-items: center; flex: none; }
.ui-li .grow { flex: 1; min-width: 0; }
.ui-li .t { color: var(--ink); font-weight: 600; font-size: 12px; }
.ui-li .s { color: var(--muted); font-size: 10px; }
.ui-check { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--line); flex: none; }
.ui-check.done { background: var(--accent); border-color: var(--accent); }
.ui-avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--sage); color: #fff; display: grid; place-items: center; font-size: 10px; flex: none; }

/* Grid-/Plan-Mockup (Weide, Führanlage) */
.ui-grid { display: grid; gap: 5px; padding: 14px; }
.ui-cellrow { display: grid; grid-template-columns: 62px repeat(4, 1fr); gap: 5px; align-items: center; }
.ui-rowlabel { font-size: 10px; color: var(--muted); font-weight: 600; }
.ui-plot { border: 1px dashed var(--line); border-radius: 6px; min-height: 30px; background: #faf6ee; padding: 3px; display: flex; flex-wrap: wrap; gap: 3px; align-content: flex-start; }
.ui-tag { background: var(--sage); color: #fff; border-radius: 4px; padding: 2px 6px; font-size: 9px; }
.ui-tag.a2 { background: #9a8452; }
.ui-tag.a3 { background: var(--accent); }

/* Rechte-Matrix */
.ui-matrix { width: 100%; border-collapse: collapse; }
.ui-matrix th { font-size: 10px; color: var(--muted); font-weight: 500; padding: 9px 8px; border-bottom: 1px solid var(--line); text-align: center; }
.ui-matrix th:first-child { text-align: left; }
.ui-matrix td { padding: 9px 8px; border-bottom: 1px solid var(--line); font-size: 11px; text-align: center; }
.ui-matrix td:first-child { text-align: left; color: var(--ink); font-weight: 500; }
.ui-radio { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--line); display: inline-block; }
.ui-radio.on { border-color: var(--accent); background: radial-gradient(var(--accent) 45%, #fff 50%); }

/* Chat-Mockup */
.ui-chat { padding: 14px 16px; display: grid; gap: 10px; }
.ui-msg { max-width: 78%; padding: 8px 11px; border-radius: 12px; font-size: 11px; line-height: 1.35; }
.ui-msg .who { display: block; font-size: 9px; color: var(--muted); margin-bottom: 2px; }
.ui-msg.them { background: var(--cream-2); border-bottom-left-radius: 3px; justify-self: start; }
.ui-msg.me { background: var(--accent); color: #fff; border-bottom-right-radius: 3px; justify-self: end; }

/* Toggle-/Einstellungs-Mockup */
.ui-toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 16px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--ink); }
.ui-toggle-row:last-child { border-bottom: none; }
.ui-toggle { width: 34px; height: 19px; border-radius: 20px; background: var(--line); position: relative; flex: none; }
.ui-toggle.on { background: var(--accent); }
.ui-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; transition: .2s; }
.ui-toggle.on::after { left: 17px; }
.ui-flags { display: flex; gap: 10px; padding: 14px 16px; flex-wrap: wrap; }
.ui-flag { font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 7px; padding: 6px 10px; }
.ui-flag.active { border-color: var(--accent); color: var(--ink); font-weight: 600; }
.ui-swatches { display: flex; gap: 8px; padding: 0 16px 14px; }
.ui-sw { width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--line); }

@media (max-width: 900px) {
  .detail { grid-template-columns: 1fr; gap: 26px; }
  .detail.flip .detail-info { order: 1; }
  .detail.flip .detail-ui   { order: 2; }
  .subpage-hero-inner { max-width: none; padding: 56px 0 62px; }
  .subpage-hero-photo { width: 100%; opacity: .16; -webkit-mask-image: none; mask-image: none; }
}

/* ============================ TESTIMONIALS ============================ */
.testimonials { background: var(--cream); padding: 90px 0; }
.section-kicker {
  text-align: center;
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .22em;
  font-size: 13px; color: var(--accent); margin-bottom: 44px;
}
.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.quote {
  background: var(--cream-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 28px;
  position: relative;
  box-shadow: var(--shadow-sm);
}
.quote-mark { font-family: var(--font-display); font-size: 56px; line-height: .5; color: var(--accent-soft); margin-bottom: 14px; height: 28px; }
.quote blockquote { font-size: 15px; color: var(--text); margin-bottom: 22px; }
.quote figcaption { display: flex; flex-direction: column; border-top: 1px solid var(--line); padding-top: 16px; }
.quote figcaption strong { color: var(--ink); font-size: 15px; }
.quote figcaption span { font-size: 13px; color: var(--muted); }

/* ============================ ABOUT US ============================ */
.aboutus { background: var(--cream); padding: 90px 0; }
.aboutus-inner { max-width: 860px; margin: 0 auto; text-align: center; }
.aboutus-title { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(30px, 4vw, 46px); color: var(--ink); margin: 0 0 24px; }
.aboutus-lead { margin: 0 auto; max-width: 700px; }
.aboutus-lead p { color: var(--muted); font-size: 17px; line-height: 1.85; margin: 0 0 18px; }
.aboutus-lead p:last-child { margin-bottom: 0; }
.aboutus-lead strong { color: var(--ink); }
.aboutus-facts { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 48px 0 0; padding: 0; }
.aboutus-fact { background: var(--cream-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 20px; box-shadow: var(--shadow-sm); }
.aboutus-fact b { display: block; font-family: var(--font-display); font-size: 26px; color: var(--accent); margin-bottom: 8px; }
.aboutus-fact span { display: block; color: var(--muted); font-size: 14px; line-height: 1.55; }
@media (max-width: 760px) { .aboutus-facts { grid-template-columns: 1fr; } }

/* ============================ PRICING ============================ */
.pricing { background: linear-gradient(180deg, var(--cream-2), var(--cream)); padding: 90px 0; }
.section-title { text-align: center; font-size: clamp(30px, 4vw, 46px); text-transform: uppercase; color: var(--ink); margin-bottom: 50px; }
.section-kicker + .section-title { margin-top: -30px; }
.price-note { text-align: center; max-width: 640px; margin: -34px auto 42px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.price-note strong { color: var(--ink); }
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.price-card {
  background: var(--cream-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 28px;
  display: flex; flex-direction: column;
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
}
.price-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.price-card.featured { background: var(--ink); color: #fff; border-color: var(--ink); }
.price-card.featured h3, .price-card.featured .price-amount span { color: #fff; }
.price-card.featured .price-desc, .price-card.featured ul li { color: #d8cdbf; }
.price-card.featured .price-year { color: #d8cdbf; }
.price-card.featured .price-year strong { color: #fff; }
.price-card.featured ul li::before { background: var(--accent-soft); }
.price-badge {
  position: absolute; top: -12px; right: 24px;
  background: var(--accent); color: #fff;
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .08em;
  font-size: 11px; padding: 5px 14px; border-radius: 20px;
}
.price-card h3 { font-size: 20px; text-transform: uppercase; color: var(--ink); margin-bottom: 12px; }
.price-amount { font-family: var(--font-display); font-size: 16px; color: var(--muted); margin-bottom: 6px; }
.price-amount span { font-size: 42px; font-weight: 700; color: var(--ink); }
.price-desc { font-size: 14px; color: var(--muted); margin-bottom: 22px; }
.price-year { font-size: 13px; color: var(--muted); margin: -2px 0 12px; }
.price-year strong { color: var(--ink); }
/* Umschalter monatlich/jährlich über den Tarifkarten (index.php) */
.billing-toggle-wrap { position: relative; display: flex; justify-content: center; margin: 6px 0 34px; }
.billing-toggle {
  display: inline-flex; gap: 4px; padding: 5px; border-radius: 40px;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.billing-toggle__btn {
  border: 0; background: none; cursor: pointer; border-radius: 40px;
  padding: 11px 22px; font-family: var(--font-body); font-size: 14px; font-weight: 600;
  color: var(--muted); transition: background .15s ease, color .15s ease;
}
.billing-toggle__btn:hover { color: var(--ink); }
.billing-toggle__btn.is-active { background: var(--accent); color: #fff; }
.billing-toggle__badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(30px);
  background: #3f6b32; color: #fff; font-family: var(--font-display);
  text-transform: uppercase; letter-spacing: .07em; font-size: 10px; font-weight: 600;
  padding: 4px 12px; border-radius: 20px; white-space: nowrap; z-index: 1;
}
/* Preis-Zusätze in den Karten */
.price-amount .price-unit { font-family: var(--font-display); font-size: 16px; font-weight: 400; color: var(--muted); margin-left: 4px; }
.price-permonth { font-size: 13px; font-weight: 600; color: #3f6b32; margin: -2px 0 12px; }
.price-gift {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px;
  background: #e3efdd; color: #3f6b32; border-radius: 8px; padding: 8px 14px;
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em;
  font-size: 12px; font-weight: 600; align-self: stretch; justify-content: center;
}
.price-card.featured .price-permonth { color: #a8c79c; }
.price-card.featured .price-gift { background: rgba(255, 255, 255, .08); color: #cfe3c6; }
.price-card.featured .price-amount .price-unit { color: #b7a896; }
/* Zusicherung unter den Karten */
.price-assure {
  display: flex; align-items: center; gap: 16px; margin-top: 26px;
  background: var(--cream-card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 22px;
}
.price-assure__ic { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1.5px solid var(--line); color: var(--accent); }
.price-assure__t { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .05em; font-size: 14px; color: var(--ink); }
.price-assure__s { font-size: 14px; color: var(--muted); margin-top: 2px; }
/* Im Wizard folgt darunter der „Weiter"-Button – der braucht Luft. Auf index.php
   ist die Leiste das letzte Element der Sektion und bleibt unverändert. */
.pp-form .price-assure { margin-bottom: 26px; }
@media (max-width: 600px) {
  .billing-toggle__btn { padding: 10px 14px; font-size: 13px; }
  .billing-toggle__badge { transform: translateX(-50%); }
}
.price-card ul { list-style: none; display: grid; gap: 11px; margin-bottom: 28px; flex: 1; }
.price-card ul li { position: relative; padding-left: 28px; font-size: 14px; color: var(--text); }
.price-card ul li::before {
  content: ''; position: absolute; left: 0; top: 3px;
  width: 18px; height: 18px; border-radius: 50%; background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/12px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/12px no-repeat;
}

/* ============================ CTA-BAND ============================ */
.cta-band {
  background:
    linear-gradient(rgba(20,15,11,.86), rgba(20,15,11,.86)),
    repeating-linear-gradient(90deg, #3a2c20 0 38px, #34281d 38px 76px);
  color: #fff;
  padding: 80px 0;
  text-align: center;
}
.cta-inner { max-width: 660px; }
.cta-icon { color: var(--accent-soft); display: flex; justify-content: center; margin-bottom: 18px; }
.cta-band h2 { font-size: clamp(28px, 4vw, 44px); text-transform: uppercase; margin-bottom: 12px; }
.cta-band p { color: #ddd2c4; font-size: 17px; margin-bottom: 30px; }

/* ============================ FOOTER ============================ */
.site-footer { background: var(--ink); color: #c9bdae; padding: 64px 0 28px; }
.footer-inner {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr 1.6fr;
  gap: 36px;
}
.footer-logo { display: inline-block; background: var(--cream-card); border-radius: 14px; padding: 14px 20px; }
.footer-logo img { height: 96px; width: auto; display: block; }
.footer-brand p { font-size: 14px; max-width: 280px; margin-top: 18px; }
.social { display: flex; gap: 10px; margin-top: 18px; }
.social a {
  display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 50%; background: #2f2620; color: #c9bdae;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.social a:hover { background: var(--accent); color: #fff; transform: translateY(-3px); }

.footer-col h4 { font-size: 14px; text-transform: uppercase; letter-spacing: .1em; color: #fff; margin-bottom: 16px; }
.footer-col a { display: block; color: #c9bdae; text-decoration: none; font-size: 14px; margin-bottom: 10px; transition: color .2s ease; }
.footer-col a:hover { color: var(--accent-soft); }
.footer-newsletter p { font-size: 13px; margin-bottom: 14px; }
.newsletter-form { display: flex; gap: 8px; }
.newsletter-form input {
  flex: 1; min-width: 0;
  background: #2f2620; border: 1px solid #423529; color: #fff;
  border-radius: var(--radius-sm); padding: 10px 14px; font-family: var(--font-body); font-size: 14px;
}
.newsletter-form input::placeholder { color: #8c7d6d; }
.newsletter-form input:focus { outline: none; border-color: var(--accent); }
.form-msg { font-size: 13px; color: var(--accent-soft); margin-top: 10px; min-height: 18px; }

.footer-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  margin-top: 48px; padding-top: 24px;
  border-top: 1px solid #34291f;
  font-size: 13px; color: #8c7d6d;
}

/* ============================ MODAL ============================ */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(15,11,8,.8); backdrop-filter: blur(3px); }
.modal-box { position: relative; width: min(820px, 100%); }
.modal-close {
  position: absolute; top: -42px; right: 0;
  background: none; border: none; color: #fff; font-size: 34px; cursor: pointer; line-height: 1;
}
.modal-video { aspect-ratio: 16/9; background: #1c1712; border-radius: 14px; overflow: hidden; }
.video-placeholder { height: 100%; display: grid; place-items: center; align-content: center; gap: 14px; color: var(--accent-soft); }
.video-placeholder p { color: #d8cdbf; font-size: 15px; }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 900px) {
  .price-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
  .feature-grid { grid-template-columns: repeat(3, 1fr); }
  .cap-grid { grid-template-columns: repeat(2, 1fr); }
  .showcase-inner { grid-template-columns: 1fr; gap: 50px; }
  .showcase-mockup { min-height: 300px; }
  .footer-inner { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-newsletter { grid-column: 1 / -1; }
}

/* Burger-Menü: erscheint ab <= 1020px (Navigation, Auth-Buttons und
   Sprachumschalter wandern ins Menü). Die reinen Layout-Grids bleiben
   bewusst beim engeren 760er-Breakpoint darunter. */
@media (max-width: 1020px) {
  :root { --header-h: 74px; }
  .main-nav {
    position: fixed; top: var(--header-h); right: 0;
    width: min(300px, 84%); max-width: calc(100vw - 32px);
    height: calc(100vh - var(--header-h)); overflow-y: auto;
    flex-direction: column; gap: 0;
    background: var(--cream-card);
    border-left: 1px solid var(--line);
    padding: 18px 24px;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-6px);
    transition: opacity .24s ease, transform .24s ease, visibility .24s ease;
    box-shadow: -10px 0 40px -20px rgba(0,0,0,.5);
  }
  .main-nav.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
  .main-nav > a { padding: 14px 0; border-bottom: 1px solid var(--line); width: 100%; }
  .nav-toggle { display: flex; }

  /* Anmelden / Mein Stall / Profil + Sprache wandern ins Burger-Menü */
  .header-actions .hdr-auth-move { display: none !important; }
  .nav-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
  .nav-cta .btn { width: 100%; justify-content: center; }
  .nav-lang { display: flex; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
  .nav-lang .lang-combo__btn { width: 100%; justify-content: center; }
}

@media (max-width: 760px) {
  .brand-logo { height: 52px; min-width: 0; }
  .header-actions { gap: 8px; }
  .header-actions .btn-sm { padding: 8px 13px; font-size: 12px; letter-spacing: .04em; }
  .profile-btn .js-profile-name { max-width: 90px; }

  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .cap-grid { grid-template-columns: 1fr; }
  .quote-grid { grid-template-columns: 1fr; }
  .hero-content { padding: 40px 24px; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-bottom { justify-content: center; text-align: center; }
}

@media (max-width: 440px) {
  .feature-grid { grid-template-columns: 1fr; }
  .container { padding: 24px 24px; }
  .brand-logo { height: 74px; min-width: 0; }
  .header-actions { gap: 6px; }
  .header-actions .btn-sm { padding: 7px 10px; font-size: 11px; }
  .profile-btn .js-profile-name { max-width: 72px; }
  .nav-toggle { padding: 6px 2px; }
}

/* ============================ PROFILSEITE (userprofile.php) ============================ */
.profile { padding: 40px 0 64px; }
.pp-card { background: var(--cream-card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 28px 30px; margin-bottom: 22px; }
.pp-head { display: flex; align-items: center; gap: 20px; }
.pp-avatar { width: 76px; height: 76px; border-radius: 50%; background: var(--ink); color: var(--accent-soft); display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: 32px; flex: none; object-fit: cover; }
.pp-id { flex: 1; min-width: 0; }
.pp-id h1 { font-family: var(--font-serif); font-weight: 700; text-transform: none; font-size: 28px; color: var(--ink); }
.pp-id .pp-email { color: var(--muted); font-size: 15px; margin-top: 2px; }
.pp-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 40px; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); }
.pp-field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.pp-field .v { font-size: 16px; color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }

.pp-section-title { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em; font-size: 15px; color: var(--ink); margin-bottom: 18px; }

/* Abo-Karte */
.pp-sub-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.pp-crown { width: 64px; height: 64px; border-radius: 50%; background: var(--cream-2); color: var(--accent); display: grid; place-items: center; flex: none; }
.pp-sub-info { flex: 1; min-width: 180px; }
.pp-sub-info .lbl { font-size: 12px; color: var(--muted); }
.pp-plan { display: flex; align-items: center; gap: 10px; margin: 2px 0 3px; }
.pp-plan .name { font-family: var(--font-display); font-weight: 600; font-size: 26px; color: var(--ink); text-transform: uppercase; }
.pp-plan .badge { background: var(--accent); color: #fff; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em; font-size: 11px; padding: 3px 10px; border-radius: 20px; }
.pp-plan .badge.ok { background: #3f6b32; }
.pp-plan .badge.trial { background: var(--sage); }
.pp-plan .badge.due { background: #b0453c; }
.pp-sub-meta { font-size: 13px; color: var(--muted); }
.pp-sub-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.pp-limits { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.pp-limit { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); }
.pp-limit svg { color: var(--wood); flex: none; }

/* Zwei-Spalten */
.pp-grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }
.pp-grid2 > * { min-width: 0; }
.pp-list { display: grid; }
.pp-link { display: flex; align-items: center; gap: 14px; padding: 15px 0; border-top: 1px solid var(--line); text-decoration: none; }
.pp-list .pp-link:first-of-type { border-top: none; }
.pp-link .ic { width: 40px; height: 40px; border-radius: 10px; background: var(--cream-2); color: var(--wood); display: grid; place-items: center; flex: none; }
.pp-link .grow { flex: 1; min-width: 0; }
.pp-link .t { color: var(--ink); font-weight: 600; font-size: 14px; }
.pp-link .s { color: var(--muted); font-size: 12px; }
.pp-link .chev { color: var(--muted-light); flex: none; }
.pp-link:hover .t { color: var(--accent); }

.pp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 0; border-top: 1px solid var(--line); font-size: 14px; }
.pp-list .pp-row:first-of-type { border-top: none; }
.pp-row .k { color: var(--ink); font-weight: 600; }
.pp-row .val { color: var(--muted); }
.pp-row.danger a { color: #b0453c; text-decoration: none; font-weight: 600; }

.pp-support { display: flex; align-items: center; gap: 18px; }
.pp-support .qic { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--wood); color: var(--wood); display: grid; place-items: center; flex: none; }
.pp-support .grow { flex: 1; min-width: 0; }
.pp-support .t { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .03em; color: var(--ink); font-size: 15px; }
.pp-support .s { color: var(--muted); font-size: 14px; }

/* Profil bearbeiten – Formular */
.pp-back { display: inline-block; color: var(--accent); text-decoration: none; font-size: 14px; margin-bottom: 14px; }
.pp-h1 { font-family: var(--font-serif); font-weight: 700; text-transform: none; font-size: 30px; color: var(--ink); margin: 4px 0 20px; }
.pp-form .fld { margin-bottom: 16px; max-width: 460px; }
.pp-form label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.pp-form input[type=text], .pp-form input[type=tel], .pp-form input[type=email], .pp-form input[type=password], .pp-form select, .pp-form textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 11px 13px;
  font-family: var(--font-body); font-size: 14px; background: #fff; color: var(--text);
}
.pp-form input:focus, .pp-form select:focus, .pp-form textarea:focus { outline: none; border-color: var(--accent); }
.pp-form textarea { min-height: 130px; resize: vertical; }

/* Schritt-Kopf im Checkout (subscription.php) – NICHT der Stepper (.steps) */
.co-step { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin: 26px 0 14px; }
.co-step__t { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .05em; font-size: 16px; color: var(--ink); }
.co-step__s { flex: 1 1 100%; font-size: 13px; color: var(--muted); margin-top: -6px; }
/* Onboarding-Wizard (subscribe.php) ------------------------------------- */
/* Kopf eines Wizard-Schritts: runde Ikone, Serif-Titel, Unterzeile */
.wiz-head { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 22px; }
.wiz-head__ic {
  flex: none; width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center; background: var(--cream-2); color: var(--wood);
}
.wiz-head__t { font-family: var(--font-serif); font-weight: 700; font-size: 30px; color: var(--ink); margin: 6px 0 4px; }
.wiz-head__s { font-size: 15px; color: var(--muted); margin: 0; max-width: 620px; line-height: 1.55; }

/* Stallauswahl: breite Zeilen mit Radio, Ikone, Text und Statuschip */
.stable-picks { display: grid; gap: 14px; }
.stable-picks .spick {
  display: grid; grid-template-columns: 22px 48px 1fr auto; align-items: center; gap: 4px 18px;
  border: 1.5px solid var(--line); border-radius: 12px; background: #fff;
  padding: 16px 20px; margin: 0; cursor: pointer; font-weight: 400; color: var(--ink);
  transition: border-color .15s ease, background-color .15s ease;
}
.stable-picks .spick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stable-picks .spick__radio {
  width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff;
}
.stable-picks .spick__av {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: var(--cream-2); color: var(--wood);
}
.stable-picks .spick__av--new { background: transparent; border: 1.5px dashed var(--accent); color: var(--accent); }
.stable-picks .spick__body { display: grid; gap: 3px; min-width: 0; }
.stable-picks .spick__t { font-size: 16px; font-weight: 600; color: var(--ink); }
.stable-picks .spick__s { font-size: 14px; color: var(--muted); }
.stable-picks .spick__chip {
  justify-self: end; padding: 5px 12px; border-radius: 20px;
  background: #e7f0e2; color: #3f6b32; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.stable-picks .spick__chip--mut { background: var(--cream-2); color: var(--muted); }
.stable-picks .spick:has(input:checked),
.stable-picks .spick.is-selected { border-color: var(--accent); background: var(--cream-card); }
.stable-picks .spick:has(input:checked) .spick__radio,
.stable-picks .spick.is-selected .spick__radio { border-color: var(--accent); box-shadow: inset 0 0 0 4px var(--accent); }
.stable-picks .spick:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(192, 105, 42, .25); }
.stable-picks .spick.is-disabled { opacity: .6; cursor: default; }

/* Schritt-Navigation: Zurück links, Weiter rechts */
.wiz-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
/* a.btn erbt die Zeilenhöhe des Body und hat als btn-outline zusätzlich einen
   Rahmen – nebeneinander wären beide Knöpfe sonst unterschiedlich hoch. */
.wiz-nav .btn { line-height: 1.25; min-height: 46px; }

/* Hinweiskasten unter dem Schritt */
.wiz-note {
  display: flex; align-items: flex-start; gap: 14px; margin-top: 26px;
  background: var(--cream-2); border-radius: var(--radius); padding: 16px 20px;
}
.wiz-note__ic { flex: none; color: var(--wood); margin-top: 1px; }
.wiz-note__t { font-size: 15px; font-weight: 600; color: var(--ink); }
.wiz-note__s { font-size: 14px; color: var(--muted); margin-top: 2px; line-height: 1.5; }

@media (max-width: 600px) {
  .wiz-head { gap: 14px; }
  .wiz-head__ic { width: 48px; height: 48px; }
  .wiz-head__t { font-size: 24px; }
  .stable-picks .spick { grid-template-columns: 22px 1fr; }
  .stable-picks .spick__av { display: none; }
  .stable-picks .spick__chip { grid-column: 2; justify-self: start; }
}

/* „Wie möchtest du starten?" – zwei gleichwertige Karten */
.start-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 18px; }
.start-opt {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  border: 1.5px solid var(--line); border-radius: 12px; background: var(--cream-card); padding: 20px 20px 18px;
}
.start-opt--trial { border-color: #cfe3c6; background: #f2f8ef; }
.start-opt__cal {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px;
  background: #fff; border: 1.5px solid #cfe3c6; color: #3f6b32;
  font-family: var(--font-display); font-size: 17px; font-weight: 700;
}
.start-opt__cal--pay { border-color: var(--line); color: var(--ink); }
.start-opt__t { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em; font-size: 17px; color: var(--ink); }
.start-opt__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.start-opt__list li { position: relative; padding-left: 16px; }
.start-opt__list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.start-opt__list strong { color: var(--ink); }
.start-opt .btn { margin-top: auto; }

/* Zusammenfassung */
.sum-list { display: grid; gap: 0; max-width: 620px; margin: 0 0 22px; border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.sum-list > div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 16px; background: var(--cream-card); }
.sum-list > div + div { border-top: 1px solid var(--line); }
.sum-list dt { font-size: 13px; color: var(--muted); margin: 0; }
.sum-list dd { font-size: 14px; color: var(--ink); margin: 0; text-align: right; }

.sr-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Hinweiskarte zur Testphase */
.trial-box {
  display: grid; grid-template-columns: minmax(240px, 1fr) auto; gap: 18px 26px;
  border: 1.5px solid #cfe3c6; border-radius: 12px; background: #f2f8ef;
  padding: 20px 22px; margin: 22px 0 18px;
}
.trial-box__main { display: flex; align-items: flex-start; gap: 14px; }
.trial-box__cal {
  flex: none; width: 42px; height: 42px; border-radius: 10px; background: #fff; border: 1.5px solid #cfe3c6;
  color: #3f6b32; font-family: var(--font-display); font-size: 17px; font-weight: 700;
  display: grid; place-items: center; box-shadow: inset 0 7px 0 #3f6b32;
}
.trial-box__t { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em; font-size: 15px; color: #2f5226; margin-bottom: 8px; }
.trial-box__list { list-style: none; display: grid; gap: 5px; margin: 0; font-size: 13px; color: var(--ink); }
.trial-box__list li { position: relative; padding-left: 20px; line-height: 1.5; }
.trial-box__list li::before { content: '✓'; position: absolute; left: 0; color: #3f6b32; font-weight: 700; }
.trial-box__date { text-align: center; border-left: 1px solid #cfe3c6; padding-left: 24px; max-width: 210px; }
.trial-box__dic { color: #3f6b32; display: block; margin-bottom: 2px; }
.trial-box__dlbl { font-size: 12px; color: var(--muted); }
.trial-box__dval { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--ink); }
.trial-box__dsub { font-size: 11px; color: var(--muted); line-height: 1.45; margin-top: 4px; }
.trial-box__foot {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center;
  background: #e3efdd; border-radius: 9px; padding: 10px 14px; font-size: 12px; font-weight: 600; color: #2f5226;
}
.trial-box__foot span { position: relative; }
.trial-box__foot span + span::before { content: '·'; position: absolute; left: -13px; color: #8fae83; }
.trial-box__cta { grid-column: 1 / -1; }
@media (max-width: 600px) {
  .trial-box { grid-template-columns: 1fr; }
  .trial-box__date { border-left: 0; border-top: 1px solid #cfe3c6; padding: 14px 0 0; max-width: none; }
}
.trial-or { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.trial-or::before, .trial-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* Tarife als auswählbare Kacheln (subscription.php) – Optik wie die Preiskarten
   auf index.php, nur kompakter. Regeln über `.plan-tiles …`, weil `.pp-form label`
   sonst spezifischer wäre (siehe .iv-panels). */
.plan-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 20px; }
.plan-tiles .plan-tile {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  border: 1.5px solid var(--line); border-radius: 12px; background: var(--cream-card);
  padding: 16px 16px 14px; margin: 0; cursor: pointer;
  font-weight: 400; font-size: 14px; color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.plan-tiles .plan-tile:hover { border-color: var(--wood-light); }
.plan-tiles .plan-tile input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.plan-tiles .plan-tile__name {
  display: block; font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .05em; font-size: 15px; font-weight: 600; color: var(--ink);
}
.plan-tiles .plan-tile__price {
  display: block; font-family: var(--font-display); font-size: 24px; font-weight: 700;
  color: var(--ink); line-height: 1.25; white-space: nowrap;
}
.plan-tiles .plan-tile__unit { font-size: 14px; font-weight: 400; color: var(--muted); margin-left: 5px; }
.plan-tiles .plan-tile__per { display: block; font-size: 12px; font-weight: 600; color: #3f6b32; min-height: 15px; }
.plan-tiles .plan-tile__lim { display: block; font-size: 12px; color: var(--muted); margin-top: 8px; }
/* Unterschied zum aktuellen Tarif in der Kachel (subscription.php) */
.plan-tiles .plan-tile__now {
  display: inline-block; margin-left: 7px; padding: 2px 8px; border-radius: 20px;
  background: var(--cream-2); color: var(--muted);
  font-family: var(--font-body); font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: 0;
  vertical-align: middle;
}
.plan-tiles .plan-tile__pdelta { display: block; font-size: 12px; font-weight: 600; color: var(--muted); min-height: 15px; }
/* Anteiliger Betrag beim Upgrade (ersetzt den früheren Vergleichskasten) */
.plan-tiles .plan-tile__prorate { display: block; font-size: 12px; font-weight: 600; color: var(--accent); min-height: 15px; }
.plan-tiles .pt-delta {
  padding: 1px 6px; border-radius: 20px; font-size: 11px; font-weight: 700; white-space: nowrap;
}
.plan-tiles .pt-delta--up { background: #e7f0e2; color: #3f6b32; }
.plan-tiles .pt-delta--down { background: #f6e5df; color: #b0453c; }

/* Alle Tarifgrenzen in der Kachel (Checkout auf subscription.php) */
.plan-tiles .plan-tile__specs { display: grid; gap: 5px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.plan-tiles .plan-tile__specs > span { position: relative; display: flex; align-items: center; gap: 6px; padding-left: 15px; line-height: 1.35; }
.plan-tiles .plan-tile__specs > span::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--line);
}
.plan-tiles .plan-tile:has(input:checked) .plan-tile__specs > span::before,
.plan-tiles .plan-tile.is-selected .plan-tile__specs > span::before { background: #3f6b32; }
.plan-tiles .plan-tile__check {
  position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; border: 1.5px solid var(--line); color: transparent; background: #fff;
}
.plan-tiles .plan-tile--free .plan-tile__price { font-size: 20px; }
.plan-tiles .plan-tile__claim {
  display: flex; align-items: center; gap: 7px; margin: 12px -16px -14px; margin-top: auto; padding: 10px 16px;
  border-top: 1px solid var(--line); font-size: 12px; line-height: 1.4; color: var(--muted);
}
.plan-tiles .plan-tile__claim svg { flex: none; color: var(--wood); }
.plan-tiles .plan-tile:has(input:checked),
.plan-tiles .plan-tile.is-selected { border-color: #3f6b32; box-shadow: 0 0 0 3px rgba(63, 107, 50, .12); }
.plan-tiles .plan-tile:has(input:checked),
.plan-tiles .plan-tile.is-selected { background: #f2f8ef; }
.plan-tiles .plan-tile:has(input:checked) .plan-tile__claim,
.plan-tiles .plan-tile.is-selected .plan-tile__claim { border-top-color: #cfe3c6; color: #2f5226; }
.plan-tiles .plan-tile:has(input:checked) .plan-tile__claim svg,
.plan-tiles .plan-tile.is-selected .plan-tile__claim svg { color: #3f6b32; }
.plan-tiles .plan-tile:has(input:checked) .plan-tile__check,
.plan-tiles .plan-tile.is-selected .plan-tile__check { border-color: #3f6b32; background: #3f6b32; color: #fff; }
.plan-tiles .plan-tile:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(63, 107, 50, .3); }

/* Zahlweise als auswählbare Panels (statt Auswahlfeld) – subscription.php.
   Alle Regeln über `.iv-panels …`, weil `.pp-form label` (Klasse + Typ) sonst
   spezifischer wäre und das Panel als Block mit 13px-Text rendern würde.
   Das Radio bleibt im Markup (Tastatur/Screenreader), ist aber unsichtbar. */
.iv-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(30px, 220px)); gap: 14px; }
.iv-panels .iv-panel {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
  border: 1.5px solid var(--line); border-radius: 12px; background: var(--cream-card);
  padding: 22px 16px 0; margin: 0; overflow: hidden; text-align: center; cursor: pointer;
  font-weight: 400; font-size: 14px; color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.iv-panels .iv-panel:hover { border-color: var(--wood-light); }
.iv-panels .iv-panel input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.iv-panels .iv-panel__kind {
  display: block; font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .08em; font-size: 12px; font-weight: 600; color: var(--ink);
}
.iv-panels .iv-panel__price {
  display: block; font-family: var(--font-display); font-size: 27px; font-weight: 700;
  color: var(--ink); line-height: 1.25; margin-top: 2px; white-space: nowrap;
}
.iv-panels .iv-panel__per { font-size: 15px; font-weight: 400; color: var(--ink); }
.iv-panels .iv-panel__note { display: block; font-size: 12px; color: var(--ink); min-height: 16px; margin: 2px 0 16px; }
.iv-panels .iv-panel__badge {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  background: #3f6b32; color: #fff; font-family: var(--font-display);
  text-transform: uppercase; letter-spacing: .08em; font-size: 10px; font-weight: 600;
  padding: 4px 12px; border-radius: 0 0 8px 8px;
}
.iv-panels .iv-panel--rec { padding-top: 30px; }
.iv-panels .iv-panel__check {
  position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; border: 1.5px solid var(--line); color: transparent; background: #fff;
}
.iv-panels .iv-panel__gift {
  display: block; margin: auto -16px 0; width: calc(100% + 32px);
  background: #e3efdd; color: #3f6b32; font-size: 12px; font-weight: 600;
  line-height: 1.4; padding: 9px 12px;
}
/* Ausgewählt: grüner Rahmen + gefülltes Häkchen (`is-selected` als Rückfall
   für Browser ohne :has()) */
.iv-panels .iv-panel:has(input:checked),
.iv-panels .iv-panel.is-selected { border-color: #3f6b32; box-shadow: 0 0 0 3px rgba(63, 107, 50, .12); }
.iv-panels .iv-panel:has(input:checked) .iv-panel__check,
.iv-panels .iv-panel.is-selected .iv-panel__check { border-color: #3f6b32; background: #3f6b32; color: #fff; }
.iv-panels .iv-panel:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(63, 107, 50, .3); }
.pp-contact-item { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--line); }
.pp-contact-item:first-child { border-top: none; padding-top: 0; }
.pp-contact-item .ic { width: 40px; height: 40px; border-radius: 10px; background: var(--cream-2); color: var(--wood); display: grid; place-items: center; flex: none; }
.pp-contact-item .k { font-size: 12px; color: var(--muted); }
.pp-contact-item .v { font-size: 15px; color: var(--ink); font-weight: 600; }
.pp-contact-item a.v { text-decoration: none; }
.pp-form input[readonly] { background: var(--cream-2); color: var(--muted); }
.pp-photo-edit { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; flex-wrap: wrap; }
.pp-photo-edit .hint { font-size: 12px; color: var(--muted); }
.pp-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin: 6px 0 4px; }
.pp-msg-ok { background: #e3efdd; color: #3f6b32; border: 1px solid #cdd9bd; border-radius: 9px; padding: 11px 13px; margin-bottom: 16px; font-size: 14px; }
.pp-msg-err { background: #f6ddd6; color: #b0453c; border: 1px solid #e6b8ad; border-radius: 9px; padding: 11px 13px; margin-bottom: 16px; font-size: 14px; }

@media (max-width: 800px) {
  .pp-fields { grid-template-columns: 1fr; }
  .pp-grid2 { grid-template-columns: minmax(0, 1fr); }
  .pp-head { flex-wrap: wrap; }
  .pp-support { flex-wrap: wrap; }
}

@media (max-width: 560px) {
  .profile { padding: 24px 0 48px; }
  .pp-card { padding: 22px 18px; }
  .pp-head { gap: 14px; }
  .pp-head > div:last-child { width: 100%; }
  .pp-id h1 { font-size: 22px; overflow-wrap: anywhere; }
  .pp-id .pp-email { font-size: 14px; overflow-wrap: anywhere; }
  .pp-sub-head { gap: 14px; }
  .pp-sub-info { min-width: 0; }
  .pp-plan { flex-wrap: wrap; }
  .pp-plan .name { font-size: 21px; }
  .pp-sub-actions { width: 100%; }
  .pp-sub-actions .btn { width: 100%; }
  .pp-limits { gap: 10px 18px; }
  .pp-support { text-align: left; }
  .pp-support .grow { min-width: 0; }
  .pp-support .btn { width: 100%; }
  .pp-row { flex-wrap: wrap; }
}

/* ---- Scroll reveal ---- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-slide { transform: none; transition: opacity .3s ease; }
  html { scroll-behavior: auto; }
}

/* ============================ SELECTPLAN (Tarif-Auswahl / Onboarding) ============================ */
.steps { display: flex; align-items: center; justify-content: center; padding: 26px 0; flex-wrap: wrap; gap: 8px; }
.step { display: flex; align-items: center; gap: 10px; color: var(--muted); font-family: var(--font-display); text-transform: uppercase; letter-spacing: .05em; font-size: 13px; }
.step-num { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; font-size: 13px; color: var(--muted); background: #fff; }
.step.active { color: var(--ink); }
.step.done { color: var(--ink); }
.step.done .step-num { border-color: var(--accent); color: var(--accent); }
.step.active .step-num { background: var(--accent); border-color: var(--accent); color: #fff; }
.step-line { width: 70px; max-width: 11vw; height: 1.5px; background: var(--line); margin: 0 14px; }

.plan-select { padding: 22px 0 66px; border-top: 1px solid var(--line); }
.sp-title { text-align: center; font-family: var(--font-serif); font-weight: 700; text-transform: none; font-size: clamp(30px, 4.5vw, 50px); color: var(--ink); }
.sp-sub { text-align: center; max-width: 620px; margin: 16px auto 0; color: var(--muted); font-size: 16px; line-height: 1.6; }
.sp-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 18px 0 40px; color: var(--accent); font-size: 14px; text-align: center; }
.sp-note svg { flex: none; }

/* Drei Tarife füllen die Reihe (die vierte „kostenlose" Karte ist entfallen) */
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.plan-grid .price-card { padding: 32px 26px; }
.plan-grid .price-amount span { font-size: 40px; }
.plan-grid .price-amount { font-size: 15px; }
/* Testphase über dem Preis (subscribe.php, solange das Konto sie noch hat):
   „14 Tage kostenlos" trägt die Botschaft, der Preis rückt in den Satz. */
.plan-grid .price-trial {
  display: block; margin: 0 0 2px;
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em;
  font-size: 15px; font-weight: 700; color: #3f6b32;
}
.plan-grid .price-card.featured .price-trial { color: #a8c79c; }
.plan-grid .price-amount--after { font-size: 14px; color: var(--muted); line-height: 1.45; }
.plan-grid .price-amount--after span[data-price-value] { font-size: 26px; }
/* „/ Monat" gehört zum Satz – Schrift, Größe und Farbe wie „buchbar“,
   sonst gewinnen die Regeln der großen Preiszeile (.price-amount .price-unit). */
.plan-grid .price-amount--after .price-unit,
.plan-grid .price-card.featured .price-amount--after .price-unit { font: inherit; color: inherit; margin-left: 4px; }
.plan-grid .price-card.featured .price-amount--after { color: #d8cdbf; }
/* Auswählbare Tarifkarten (selectplan.php) – die ganze Karte ist klickbar,
   der Radio darin bleibt das eigentliche, tastaturbedienbare Bedienelement. */
.price-card--pick { cursor: pointer; }
.price-card--pick:has(input:checked),
.price-card--pick.is-selected { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(192, 105, 42, .16); }
.price-card--pick.featured:has(input:checked),
.price-card--pick.featured.is-selected { box-shadow: 0 0 0 3px rgba(192, 105, 42, .38); }
/* Auswahlzeile: bewusst über .price-card qualifiziert, sonst gewinnt in einem
   Formular die allgemeine Regel `.pp-form label` (Klasse + Typ). */
.price-card .price-card__choose {
  display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 16px; margin-bottom: 0;
  border-top: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer;
}
.price-card .price-card__choose input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.price-card .price-card__dot {
  flex: none; width: 17px; height: 17px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff;
}
.price-card--pick:has(input:checked) .price-card__dot,
.price-card--pick.is-selected .price-card__dot { border-color: var(--accent); box-shadow: inset 0 0 0 3.5px var(--accent); }
.price-card.featured .price-card__dot { border-color: rgba(255, 255, 255, .5); background: transparent; }
.price-card.featured .price-card__choose { border-top-color: rgba(255, 255, 255, .18); color: #fff; }
.plan-cta { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 26px; }
.plan-cta__hint { font-size: 13px; color: var(--muted); }
.plan-foot { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 28px; color: var(--muted); font-size: 13px; text-align: center; }
.plan-foot svg { flex: none; }

/* Vergleichstabelle */
.compare-section { padding: 0 0 80px; }
.compare-card { background: var(--cream-card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.compare-scroll { overflow-x: auto; }
.compare { width: 100%; border-collapse: collapse; min-width: 720px; }
.compare thead th { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em; font-size: 12px; color: var(--ink); padding: 22px 12px; text-align: center; vertical-align: bottom; }
.compare thead th.feature-col { text-align: left; font-size: 17px; width: 34%; }
.compare tbody td { padding: 16px 12px; border-top: 1px solid var(--line); text-align: center; }
.feature-cell { display: flex; gap: 14px; align-items: flex-start; text-align: left; }
.feature-cell .fi { width: 36px; height: 36px; flex: none; border-radius: 9px; background: var(--cream-2); color: var(--wood); display: grid; place-items: center; }
.feature-cell .ft { color: var(--ink); font-weight: 600; font-size: 14px; }
.feature-cell .fd { color: var(--muted); font-size: 12px; line-height: 1.45; }
.compare .chk { color: var(--accent); }
.compare-more { padding: 20px 16px; }
.compare-more a { color: var(--accent); font-family: var(--font-display); text-transform: uppercase; letter-spacing: .05em; font-size: 13px; text-decoration: none; }
.compare-more a:hover { text-decoration: underline; }

/* Konto erstellen */
.account-section { padding: 0 0 90px; }
.account-grid { display: grid; grid-template-columns: .85fr 1.15fr; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); }
.account-photo { position: relative; background: var(--ink); color: #fff; padding: 40px 34px; display: flex; min-height: 340px; }
.account-photo::before { content: ''; position: absolute; inset: 0; background: url('../img/hero-bg.jpg') center/cover no-repeat; opacity: .5; }
.account-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,15,11,.35), rgba(20,15,11,.88)); }
.account-photo-inner { position: relative; z-index: 1; align-self: flex-end; }
.account-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--ink); margin-bottom: 20px; }
.account-photo h3 { font-family: var(--font-serif); font-weight: 700; text-transform: none; font-size: 24px; margin-bottom: 18px; }
.check-list-light { list-style: none; display: grid; gap: 11px; }
.check-list-light li { position: relative; padding-left: 28px; font-size: 14px; color: #ece3d6; }
.check-list-light li::before {
  content: ''; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/12px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/12px no-repeat;
}
.account-form { background: #fff; padding: 36px 38px; }
.account-form-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.account-form-head h3 { font-family: var(--font-serif); font-weight: 700; text-transform: none; font-size: 26px; color: var(--ink); }
.account-form-head .have-account { font-size: 13px; color: var(--muted); }
.account-form-head a { color: var(--accent); text-decoration: none; }
.field { margin-bottom: 16px; }
.field > label { display: block; font-size: 13px; color: var(--ink); font-weight: 600; margin-bottom: 6px; }
.input-wrap { position: relative; }
.account-form input[type=email], .account-form input[type=password], .account-form input[type=text] {
  width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 12px 42px 12px 14px;
  font-family: var(--font-body); font-size: 14px; background: var(--cream-card); color: var(--text);
}
.account-form input:focus { outline: none; border-color: var(--accent); background: #fff; }
/* Auswahlfeld im gleichen Look wie die Eingabefelder (eigener Chevron statt
   System-Pfeil; die Farbe im SVG entspricht var(--muted), CSS-Variablen sind in
   data-URIs nicht möglich). */
.account-form select {
  width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 12px 40px 12px 14px;
  font-family: var(--font-body); font-size: 14px; color: var(--text); cursor: pointer;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-color: var(--cream-card);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23756758' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 14px;
}
.account-form select:hover { border-color: var(--wood-light); }
.account-form select:focus { outline: none; border-color: var(--accent); background-color: #fff; }
.pw-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--muted); cursor: pointer; padding: 6px; display: grid; place-items: center; }
.field-check { display: flex; align-items: flex-start; gap: 10px; margin: 18px 0 20px; font-size: 13px; color: var(--muted); }
.field-check input { margin-top: 2px; }
.field-check a { color: var(--accent); }
.account-msg { font-size: 13px; color: var(--accent); margin-top: 12px; min-height: 16px; }
.sp-error { background: #f6ddd6; color: #b0453c; border: 1px solid #e6b8ad; border-radius: 9px; padding: 12px 14px; font-size: 14px; margin-bottom: 18px; }
.sp-success { color: var(--text); font-size: 15px; line-height: 1.6; margin-bottom: 18px; }
.chosen-plan { font-size: 13px; color: var(--muted); margin: 4px 0 14px; }
.chosen-plan strong { color: var(--ink); }

@media (max-width: 1024px) {
  .plan-grid { grid-template-columns: repeat(2, 1fr); }
  .account-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .plan-grid { grid-template-columns: 1fr; }
  .step-line { width: 30px; }
  .step span.step-label { display: none; }
}

/* ============================ SEITEN-RAHMEN (ab 1200px) ============================ */
/* Ab 1200px liegt die gesamte Seite als abgerundete Karte auf einem Außen-
   Hintergrund. Darunter bleibt alles unverändert (full-bleed wie bisher). */
@media (min-width: 1200px) {
  html { background: #e7ddcb; }               /* Außen-Hintergrund um die Karte */
  body {
    width: calc(100% - 52px);
    max-width: 1400px;
    margin: 26px auto;
    border-radius: 28px;
    box-shadow: 0 40px 90px -40px rgba(36, 29, 24, .40);
  }
  /* Ecken der Karte: oben am Header, unten am Footer */
  .site-header { border-top-left-radius: 28px; border-top-right-radius: 28px; }
  /* Beim Scrollen (angeheftet an der Oberkante) ohne runde Ecken */
  .site-header.scrolled { border-top-left-radius: 0; border-top-right-radius: 0; }
  .site-footer { border-bottom-left-radius: 28px; border-bottom-right-radius: 28px; }
}

/* ============================ APP-DOWNLOAD / STORE-BADGES ============================ */
/* Store-Badges (App Store / Google Play) als offizielle Badge-Grafiken.
   Jedes Badge bringt sein eigenes Aussehen (schwarzes Feld + Kontur) mit,
   daher ist .store-badge nur ein schlanker Link-Wrapper um das SVG. */
.store-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 26px 0 0; }
.store-badge {
  display: inline-flex; align-items: center;
  border-radius: 8px; text-decoration: none;
  transition: transform .15s ease, filter .15s ease;
}
.store-badge svg { height: 44px; width: auto; display: block; }
.store-badge:hover { transform: translateY(-2px); filter: brightness(1.08); }

/* Android: "bald verfuegbar" – nicht klickbar, dezent, mit Fahne */
.store-badge--soon { position: relative; cursor: default; opacity: .55; }
.store-badge--soon:hover { transform: none; filter: none; }
.store-badge__ribbon {
  position: absolute; top: -8px; right: -8px; z-index: 2;
  background: var(--accent); color: #fff;
  font-family: var(--font-display); font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 9px; border-radius: 999px; box-shadow: 0 4px 10px -3px rgba(0,0,0,.5);
}

/* Eigener App-Abschnitt (index.php) */
.app-download {
  background: radial-gradient(120% 100% at 20% 0%, var(--ink-3) 0%, var(--ink) 60%);
  color: #fff; padding: 96px 0;
}
.app-download-inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px; align-items: center; }
.app-download-text h2 { font-size: clamp(32px, 4vw, 48px); margin: 14px 0 18px; text-transform: uppercase; }
.app-download-text > p { color: #d8cdbf; font-size: 16px; max-width: 460px; }
.app-download-note { font-size: 13px; color: var(--muted-light); margin-top: 16px; }
.app-download-visual { display: flex; justify-content: center; align-items: flex-end; }
.app-download-phone { width: 240px; max-width: 70%; height: auto; filter: drop-shadow(0 22px 40px rgba(0,0,0,.45)); }

/* Badges im CTA-Band (features.php) – zentriert unter dem Button */
.cta-app-lead { margin-top: 24px; font-size: 14px; color: var(--muted-light); }
.cta-band .store-badges { justify-content: center; margin-top: 12px; }

/* Badges im Footer – etwas kompakter */
.footer-brand .store-badges { margin-top: 20px; }
.footer-brand .store-badge svg { height: 38px; }

/* Responsive: App-Abschnitt einspaltig, Bild zuerst */
@media (max-width: 860px) {
  .app-download { padding: 72px 0; }
  .app-download-inner { grid-template-columns: 1fr; gap: 36px; text-align: center; }
  .app-download-text > p { margin-inline: auto; }
  .app-download .store-badges { justify-content: center; }
  .app-download-visual { order: -1; }
}

/* Store-Badges im Hero (unter den CTA-Buttons) */
.hero-content .store-badges { margin-top: 20px; }
@media (max-width: 700px) {
  .hero-content .store-badges { justify-content: flex-start; margin-top: 16px; }
}

/* ============================ BENACHRICHTIGUNGEN (editnotifications.php) ============================ */
.notif-intro { color: var(--muted); font-size: 14px; margin: -6px 0 18px; max-width: 520px; }
.notif-wrap { overflow-x: auto; margin-bottom: 22px; }
.notif-list { width: 100%; border-collapse: collapse; }
.notif-list col.notif-ch { width: 92px; }
.notif-list th, .notif-list td { padding: 12px 10px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; }
.notif-list thead th { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em; font-size: 12px; color: var(--muted); }
.notif-list th:first-child, .notif-list td:first-child { text-align: left; }
.notif-list tbody tr:last-child td { border-bottom: none; }
.notif-list__ev { font-size: 15px; color: var(--text); }
.notif-check { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.notif-check input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent); cursor: pointer; }

/* ============================ SPRACHUMSCHALTER (Combobox) ============================ */
.lang-combo { position: relative; display: inline-flex; }
.lang-combo__btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 9px;
  background: var(--cream-card); color: var(--ink);
  border: 1px solid var(--line); cursor: pointer;
  font-family: var(--font-display); font-size: 13px; letter-spacing: .04em; line-height: 1;
  transition: border-color .15s ease, background .15s ease;
}
.lang-combo__btn:hover { border-color: var(--wood-light); }
.lang-combo__btn:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(192,105,42,.18); }
.lang-combo__globe { width: 16px; height: 16px; flex: none; }
.lang-combo__cur { font-weight: 600; }
.lang-combo__chev { width: 12px; height: 12px; flex: none; opacity: .7; transition: transform .18s ease; }
.lang-combo.is-open .lang-combo__chev { transform: rotate(180deg); }

.lang-combo__menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  min-width: 168px; max-width: calc(100vw - 16px); padding: 6px;
  background: var(--cream-card); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 12px 34px rgba(36,29,24,.18);
  display: none; flex-direction: column; gap: 2px;
}
.lang-combo.is-open .lang-combo__menu { display: flex; }
.lang-combo__item {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 9px 12px; border-radius: 8px;
  text-decoration: none; color: var(--ink); font-family: var(--font-body); font-size: 14px;
  transition: background .12s ease;
}
.lang-combo__item:hover { background: var(--cream-2); }
.lang-combo__check { width: 15px; height: 15px; flex: none; color: var(--accent); opacity: 0; }
.lang-combo__item.is-active { font-weight: 600; }
.lang-combo__item.is-active .lang-combo__check { opacity: 1; }

/* Footer (dunkler Grund): Trigger hell/transluzent, Menü öffnet nach oben */
.lang-switch--footer .lang-combo__btn {
  background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); color: inherit;
}
.lang-switch--footer .lang-combo__btn:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.42); }
.lang-switch--footer .lang-combo__menu { top: auto; bottom: calc(100% + 6px); }

/* Burger (Mobile): Trigger volle Breite; Menü öffnet nach oben und panelbreit,
   damit es im Menü-Panel bleibt (das Panel clippt per overflow). */
.lang-switch--burger { width: 120px; margin: 0 auto; }
.lang-switch--burger .lang-combo__menu { top: auto; bottom: calc(100% + 6px); left: 50%; right: auto; margin-left: -84px; }

/* Header: rechts etwas Abstand; auf Phones ausgeblendet (dort via Footer) */
.lang-switch--header { margin-right: 6px; }
/* Im Burger-Bereich (<= 1020px) steckt der Umschalter im Menü (.nav-lang) */
@media (max-width: 1020px) { .lang-switch--header { display: none; } }