/* =============================================================================
   mein-medicum.css
   Gültig für: Patientenportal mein.medicum
   Scope:      body.is-mein-medicum (Page-IDs 97, 98, 99 + alle weiteren
               mein.medicum-Unterseiten)

   WICHTIG: Alle Regeln MÜSSEN unter .is-mein-medicum gescoped sein.
            Ausnahmen: :root (CSS-Variablen), @font-face (immer global).

   Perspektivisch portierbar in eine eigenständige Web-App.
   Keine Abhängigkeiten zu medicum-relaunch.css.

   Ladereihenfolge: main.css → temp.css → newsletter.css
                    → medicum-custom.css → medicum-relaunch.css → mein-medicum.css

   Erstellt: 2026-03-14
   ============================================================================= */


/* ── @font-face: Inter 300 (Light) ──────────────────────────────────────────
   Nur für mein.medicum — hero--compact H1 zweite Zeile
   DSGVO-konform: self-hosted
   --------------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fileadmin/templates/assets/fonts/inter-v20-latin-300.woff2') format('woff2');
}


/* ── Design Tokens (:root — global) ─────────────────────────────────────────
   Vollständige Kopie — unabhängig von medicum-relaunch.css und
   medicum-custom.css. Portierbar in standalone Web-App.
   --------------------------------------------------------------------------- */
:root {
  --green-900: #0F2620;
  --green-800: #1B3C34;
  --green-700: #245C4F;
  --green-600: #2D7A68;
  --green-500: #38997F;
  --green-400: #5CB89E;
  --green-300: #8AD4BC;
  --green-200: #B8E8D8;
  --green-100: #E8F5F0;
  --green-50:  #F3FAF7;

  --gray-950: #0A0A0B;
  --gray-800: #1F2937;
  --gray-600: #4B5563;
  --gray-400: #9CA3AF;
  --gray-200: #E5E7EB;
  --gray-100: #F3F4F6;
  --gray-50:  #F9FAFB;
  --white:    #FFFFFF;

  --accent:       #E8735A;
  --accent-light: #FDE8E2;
  --accent-dark:  #9E3A22;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.04);

  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease-out;
}


/* ── Base-Overrides ──────────────────────────────────────────────────────────*/
.is-mein-medicum h1,
.is-mein-medicum h2,
.is-mein-medicum h3 {
  text-transform: none;
}

.is-mein-medicum .frame-default,
.is-mein-medicum .frame-type-html {
  background-color: transparent !important;
}

.is-mein-medicum .text-primary {
  color: var(--green-600);
}


/* ── App Chrome: App Bar ─────────────────────────────────────────────────────
   Fixierte Kopfzeile mit iOS-Notch-Support.
   Logo links, Benachrichtigungs-Icon rechts.
   --------------------------------------------------------------------------- */
.is-mein-medicum .mm-appbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: calc(56px + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 16px 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--white);
  box-shadow: 0 1px 8px rgba(0,0,0,0.06);
  /* Kein border-bottom — bewusst */
}

.is-mein-medicum .mm-appbar-logo {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--green-800);
  text-decoration: none;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.is-mein-medicum .mm-appbar-logo span {
  display: block;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gray-400);
  margin-top: 1px;
}

.is-mein-medicum .mm-appbar-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.is-mein-medicum .mm-appbar-icon:hover {
  background: var(--gray-200);
}

.is-mein-medicum .mm-appbar-icon svg {
  width: 18px;
  height: 18px;
  stroke: var(--gray-600);
  fill: none;
  stroke-width: 1.5;
}


/* ── App Chrome: Bottom Navigation ──────────────────────────────────────────
   7 Tabs, fixiert am unteren Bildschirmrand.
   Aktiver Tab: pill-Hintergrund + weißes Icon.
   iOS Home-Bar via env(safe-area-inset-bottom).
   --------------------------------------------------------------------------- */
.is-mein-medicum .mm-bottomnav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--green-800);
  z-index: 500;
  display: flex;
  align-items: flex-end;
  padding: 8px 4px calc(8px + env(safe-area-inset-bottom, 0px));
}

.is-mein-medicum .mm-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-decoration: none;
  padding: 4px 2px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.is-mein-medicum .mm-tab__pill {
  width: 40px;
  height: 28px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-base), transform var(--transition-fast);
}

.is-mein-medicum .mm-tab__pill svg {
  width: 20px;
  height: 20px;
  stroke: rgba(255,255,255,0.5);
  fill: none;
  stroke-width: 2;
  transition: stroke var(--transition-base);
}

.is-mein-medicum .mm-tab__label {
  font-size: 9px;
  font-weight: 500;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.02em;
  transition: color var(--transition-base);
  white-space: nowrap;
}

/* Aktiver Tab */
.is-mein-medicum .mm-tab.active .mm-tab__pill {
  background: rgba(255,255,255,0.25);
  transform: translateY(-1px);
}

.is-mein-medicum .mm-tab.active .mm-tab__pill svg {
  stroke: var(--white);
}

.is-mein-medicum .mm-tab.active .mm-tab__label {
  color: var(--white);
}

.is-mein-medicum .mm-tab:hover .mm-tab__pill {
  background: rgba(255,255,255,0.12);
}


/* ── Hero Compact ────────────────────────────────────────────────────────────
   Alle mein.medicum-Seiten: kompakter Header ohne Hintergrundbild.
   Kein hero-badge, H1 zweizeilig mit .text-primary.
   --------------------------------------------------------------------------- */
.is-mein-medicum .hero.hero--compact {
  background: var(--white) !important;
  min-height: auto !important;
  height: auto !important;
  padding: 110px 0 24px !important;
  align-items: flex-start !important;
}

.is-mein-medicum .hero.hero--compact > .container {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 clamp(24px, 5vw, 80px) !important;
}

.is-mein-medicum .hero.hero--compact .hero-content {
  padding: 0 !important;
  max-width: 560px;
}

.is-mein-medicum .hero--compact h1 {
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.8px;
  margin-bottom: 0.75rem;
}

.is-mein-medicum .hero--compact .hero-content > p {
  font-size: 17px;
  color: var(--gray-600);
  line-height: 1.6;
}

/* Section direkt nach Compact-Hero: reduzierter Abstand */
.is-mein-medicum section.section.section--compact {
  padding: 32px 0 40px !important;
}

.is-mein-medicum .hero.hero--compact + section.section.section--compact {
  padding-top: 16px !important;
  padding-bottom: 40px !important;
}

/* Compact CTA (dunkelgrün) */
.is-mein-medicum .cta-section--compact {
  background: linear-gradient(135deg, var(--green-800) 0%, #0F251F 100%);
  padding: 56px 0;
}

.is-mein-medicum .cta-section--compact .cta-banner h2 {
  font-size: 26px;
}

.is-mein-medicum .cta-section--compact .cta-banner p {
  font-size: 15px;
  margin-bottom: 1.5rem;
}


/* ── CTA Banner ──────────────────────────────────────────────────────────────*/
.is-mein-medicum .cta-banner {
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}

.is-mein-medicum .cta-banner h2 {
  font-size: 32px;
  font-weight: 700;
  color: var(--white);
  margin: 0 0 12px;
  letter-spacing: -0.5px;
}

.is-mein-medicum .cta-banner p {
  font-size: 17px;
  color: rgba(255,255,255,0.8);
  margin: 0 0 2rem;
  line-height: 1.6;
}

.is-mein-medicum .cta-banner-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

@media (min-width: 640px) {
  .is-mein-medicum .cta-banner-actions {
    flex-direction: row;
    justify-content: center;
  }
}

/* Buttons auf dunklem Hintergrund */
.is-mein-medicum .btn-primary--on-dark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  font-size: 0.9375rem;
  font-weight: 600;
  border-radius: 12px;
  background: var(--white);
  color: var(--green-800);
  text-decoration: none;
  transition: all var(--transition-base);
}

.is-mein-medicum .btn-primary--on-dark:hover {
  background: rgba(255,255,255,0.9);
  color: var(--green-800);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.is-mein-medicum .btn-secondary--on-dark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  font-size: 0.9375rem;
  font-weight: 600;
  border-radius: 12px;
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,0.3);
  text-decoration: none;
  transition: all var(--transition-base);
}

.is-mein-medicum .btn-secondary--on-dark:hover {
  border-color: var(--white);
  background: rgba(255,255,255,0.1);
  transform: translateY(-2px);
}


/* ── Service Hub Grid ────────────────────────────────────────────────────────
   Hub-Übersicht (CE 2064): 6 klickbare Service-Cards.
   --------------------------------------------------------------------------- */
.is-mein-medicum .service-hub-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 640px) {
  .is-mein-medicum .service-hub-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (min-width: 1024px) {
  .is-mein-medicum .service-hub-cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}


/* ── Service Hub Card ────────────────────────────────────────────────────────*/
.is-mein-medicum .service-hub-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
  cursor: pointer;
  animation: service-card-in 0.45s ease both;
}

.is-mein-medicum .service-hub-card:hover {
  border-color: var(--green-600);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  text-decoration: none;
  color: inherit;
}

.is-mein-medicum .service-hub-card:focus-visible {
  outline: 2px solid var(--green-600);
  outline-offset: 4px;
  border-radius: var(--radius-lg);
}

/* Stagger-Animation */
@keyframes service-card-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.is-mein-medicum .service-hub-card:nth-child(1) { animation-delay: 0.04s; }
.is-mein-medicum .service-hub-card:nth-child(2) { animation-delay: 0.09s; }
.is-mein-medicum .service-hub-card:nth-child(3) { animation-delay: 0.14s; }
.is-mein-medicum .service-hub-card:nth-child(4) { animation-delay: 0.19s; }
.is-mein-medicum .service-hub-card:nth-child(5) { animation-delay: 0.24s; }
.is-mein-medicum .service-hub-card:nth-child(6) { animation-delay: 0.29s; }

@media (prefers-reduced-motion: reduce) {
  .is-mein-medicum .service-hub-card { animation: none; }
}


/* ── Icon Container ──────────────────────────────────────────────────────────*/
.is-mein-medicum .service-hub-card-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: var(--radius-md);   /* Rounded Rectangle — nicht Circle */
  background: var(--green-100);
  display: flex;
  align-items: center;
  justify-content: center;
}

.is-mein-medicum .service-hub-card-icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--green-600);
  fill: none;
  stroke-width: 1.5;
}

/* Akzent-Variante (z. B. "Patient werden") */
.is-mein-medicum .service-hub-card-icon--accent {
  background: var(--accent-light);
}

.is-mein-medicum .service-hub-card-icon--accent svg {
  stroke: var(--accent);
}


/* ── Card Content ────────────────────────────────────────────────────────────*/
.is-mein-medicum .service-hub-card-content {
  flex: 1;
  min-width: 0;
}

.is-mein-medicum .service-hub-card-content h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--gray-950);
  margin: 0 0 4px;
  line-height: 1.3;
}

.is-mein-medicum .service-hub-card-content p {
  font-size: 14px;
  font-weight: 400;
  color: var(--gray-600);
  margin: 0;
  line-height: 1.5;
}


/* ── Arrow: Naked Chevron (v3) ───────────────────────────────────────────────
   Entscheidung 2026-03-13: Kein Box-Container.
   Reines naked ›-Icon (iOS 17+ Healthcare-App-Standard).
   Gilt für alle mein.medicum-Seiten.
   --------------------------------------------------------------------------- */
.is-mein-medicum .service-hub-card-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  flex-shrink: 0;
  background: transparent;
  border-radius: 0;
  opacity: 1;
  transform: none;
  transition: transform var(--transition-base);
}

.is-mein-medicum .service-hub-card-arrow svg {
  width: 16px;
  height: 16px;
  stroke: var(--green-600);
  fill: none;
  stroke-width: 2;
}

.is-mein-medicum .service-hub-card:hover .service-hub-card-arrow {
  background: transparent;
  transform: translateX(3px);
}

.is-mein-medicum .service-hub-card:hover .service-hub-card-arrow svg {
  stroke: var(--green-700);
}


/* ── Highlight Card (Featured — dunkelgrün) ──────────────────────────────────*/
.is-mein-medicum .service-hub-card--highlight {
  background: var(--green-800);
  border-color: var(--green-800);
}

.is-mein-medicum .service-hub-card--highlight:hover {
  background: var(--green-700);
  border-color: var(--green-700);
  box-shadow: 0 12px 32px rgba(27, 60, 52, 0.3);
}

.is-mein-medicum .service-hub-card--highlight .service-hub-card-content h3 {
  color: var(--white);
}

.is-mein-medicum .service-hub-card--highlight .service-hub-card-content p {
  color: rgba(255,255,255,0.6);
}

.is-mein-medicum .service-hub-card--highlight .service-hub-card-icon--accent {
  background: rgba(255,255,255,0.12);
}

.is-mein-medicum .service-hub-card--highlight .service-hub-card-icon--accent svg {
  stroke: rgba(255,255,255,0.9);
}

.is-mein-medicum .service-hub-card--highlight .service-hub-card-arrow svg {
  stroke: rgba(255,255,255,0.65);
}

.is-mein-medicum .service-hub-card--highlight:hover .service-hub-card-arrow svg {
  stroke: var(--white);
}


/* ── Responsive ──────────────────────────────────────────────────────────────*/
@media (max-width: 480px) {
  .is-mein-medicum .service-hub-card {
    padding: 16px;
    gap: 12px;
  }

  .is-mein-medicum .service-hub-card-content p {
    display: none;
  }

  .is-mein-medicum .hero.hero--compact {
    padding: 40px 0 16px !important;
  }

  .is-mein-medicum .hero--compact h1 {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }
}