/* ==========================================================================
   terminsuche.ch – Design für Joomla (Cassiopeia + SP Page Builder)
   Übernommen aus terminsuche.ch/index.html. Diese Datei (css/user.css)
   bleibt bei Joomla-Updates erhalten. Farben unten zentral anpassbar.
   ========================================================================== */

/* Schriften (selbst gehostet, kein CDN) */
@font-face{font-family:'Atkinson Hyperlegible';src:url('/t/fonts/atkinson-400.woff2') format('woff2'),url('../atkinson-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Atkinson Hyperlegible';src:url('/t/fonts/atkinson-700.woff2') format('woff2'),url('../atkinson-700.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --ts-ink:#172033; --ts-ink-soft:#596179;
  --ts-accent:#6F5CFF; --ts-accent-2:#FF7A59; --ts-accent-3:#25C2A0;
  --ts-paper:#F6F5FF; --ts-line:#DCD9F4;
  --ts-font:'Atkinson Hyperlegible','Gill Sans',Seravek,Verdana,sans-serif;
  --ts-mono:'IBM Plex Mono','Courier New',monospace;
  /* Cassiopeia-Variablen auf terminsuche umstellen */
  --cassiopeia-color-primary:var(--ts-ink);
  --cassiopeia-color-link:var(--ts-accent);
  --cassiopeia-color-hover:#5847e6;
  --cassiopeia-font-family-body:var(--ts-font);
  --cassiopeia-font-family-headings:var(--ts-font);
  --cassiopeia-font-weight-headings:700;
  --body-font-family:var(--ts-font);
  --body-color:var(--ts-ink);
  --link-color:var(--ts-accent);
}

/* Grundlayout */
body.site{
  font-family:var(--ts-font);color:var(--ts-ink);line-height:1.58;
  background:linear-gradient(180deg,#fbfaff 0%,var(--ts-paper) 52%,#f2efff 100%) fixed;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
body.site h1,body.site h2,body.site h3,body.site h4{font-family:var(--ts-font);font-weight:700;color:var(--ts-ink);letter-spacing:-.02em}
body.site a{color:var(--ts-accent)}
body.site a:hover,body.site a:focus{color:#5847e6}

/* Kopfzeile wie terminsuche.ch: hell, transparent, klebend */
.container-header{
  background:rgba(246,245,255,.82)!important;background-image:none!important;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:none;border-bottom:1px solid rgba(111,92,255,.10);
  position:sticky;top:0;z-index:50;
}
.container-header .grid-child{max-width:1040px;padding-block:14px}
.container-header .navbar-brand{padding:0;margin:0}
.container-header .navbar-brand a,.container-header .brand-logo{color:var(--ts-ink)!important;text-decoration:none}
.container-header .brand-logo span{font:700 1.4rem var(--ts-font);letter-spacing:-.04em;color:var(--ts-ink)}
/* «termin» + farbiges «suche» (Site-Titel im Template-Stil = «termin») */
.container-header .brand-logo span::after{content:"suche";color:var(--ts-accent)}
.container-header .site-description{
  display:inline-block;margin-left:10px;padding:3px 10px;border-radius:99px;
  font:400 .75rem var(--ts-mono);color:var(--ts-accent);background:#fff;border:1px solid rgba(111,92,255,.28)
}
.container-header .mod-menu a,.container-header nav a{color:var(--ts-ink-soft)!important}

/* Inhaltsbreite */
.site-grid{max-width:1040px;margin-inline:auto}
.container-component{padding-inline:clamp(16px,4vw,36px)}

/* Seitentitel von SP Page Builder ausblenden (die Seite hat eigene Überschriften) */
.com_sppagebuilder .page-header{display:none}

/* ---------- SP Page Builder: allgemeine Anpassungen ---------- */
#sp-page-builder .sppb-section{background:transparent}
#sp-page-builder .sppb-addon-text-block{color:var(--ts-ink)}

/* Hero */
.ts-hero h1{font:700 clamp(2.2rem,7vw,4.5rem)/1.05 var(--ts-font);letter-spacing:-.02em;max-width:12ch;text-wrap:balance;margin:0}
.ts-hero .ts-lede{font-size:clamp(1.05rem,2vw,1.25rem);color:var(--ts-ink-soft);max-width:34em;margin:24px 0 8px}
.ts-badge{
  display:inline-block;margin-bottom:18px;padding:4px 12px;border-radius:99px;
  font:400 .75rem var(--ts-mono);color:var(--ts-accent);background:#fff;
  border:1px solid rgba(111,92,255,.28);box-shadow:0 8px 30px rgba(40,31,94,.08)
}

/* Buttons */
#sp-page-builder .sppb-btn,#sp-page-builder .sppb-btn-custom{
  min-height:48px;padding:12px 24px;border:0;border-radius:15px!important;
  font:700 1rem var(--ts-font);color:#fff!important;
  background:linear-gradient(135deg,var(--ts-accent),#8E7CFF)!important;
  box-shadow:0 10px 22px rgba(23,32,51,.13);
  transition:transform .18s ease,box-shadow .18s ease;text-decoration:none
}
#sp-page-builder .sppb-btn:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(23,32,51,.17)}
#sp-page-builder .sppb-btn:focus-visible{outline:3px solid rgba(111,92,255,.32);outline-offset:3px}

/* Abschnittstitel */
.ts-section-head{text-align:center;max-width:720px;margin:0 auto}
.ts-section-head h2{font:700 clamp(1.65rem,4vw,3rem)/1.12 var(--ts-font);letter-spacing:-.025em;margin-bottom:8px}
.ts-section-head p{color:var(--ts-ink-soft);margin:0}

/* Karten (Feature Box mit Klasse ts-card) – wie .feature-card auf terminsuche.ch */
.ts-card{
  --card-tone:var(--ts-accent);position:relative;isolation:isolate;overflow:hidden;height:100%;
  padding:28px 26px 25px;text-align:left!important;
  border:1px solid rgba(65,55,122,.16);border-radius:12px 30px 12px 12px;
  background:rgba(255,255,255,.86);
  transition:transform .34s cubic-bezier(.2,.75,.25,1),border-color .25s ease,background-color .25s ease
}
.ts-card.ts-tone-2{--card-tone:var(--ts-accent-2)}
.ts-card.ts-tone-3{--card-tone:var(--ts-accent-3)}
.ts-card::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:var(--card-tone);
  transform:scaleX(.22);transform-origin:left;transition:transform .38s cubic-bezier(.2,.75,.25,1)
}
.ts-card::after{
  content:"";position:absolute;right:-34px;bottom:-44px;width:118px;height:118px;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--card-tone) 24%,transparent);z-index:-1;
  transition:transform .48s cubic-bezier(.2,.75,.25,1)
}
.ts-card .sppb-addon-content{text-align:left}
.ts-card .sppb-icon,.ts-card .sppb-icon-container{
  display:grid!important;place-items:center;width:52px;height:52px;margin:0 0 26px!important;
  border:1px solid color-mix(in srgb,var(--card-tone) 32%,transparent);border-radius:14px 14px 14px 4px;
  background:color-mix(in srgb,var(--card-tone) 10%,white)!important;color:var(--card-tone)!important;
  transition:transform .34s cubic-bezier(.2,.75,.25,1),background-color .25s ease,color .25s ease
}
.ts-card .sppb-icon *{color:inherit!important;font-size:24px!important;line-height:1}
.ts-card .sppb-icon-container span,.ts-card .sppb-icon span{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important;color:inherit!important}
.ts-card .sppb-addon-title,.ts-card .sppb-feature-box-title{font:700 1.22rem var(--ts-font)!important;letter-spacing:-.015em;margin:0 0 11px!important;color:var(--ts-ink)!important;text-align:left!important}
.ts-card .sppb-addon-text{color:var(--ts-ink-soft);line-height:1.55;text-align:left!important}
@media(hover:hover) and (pointer:fine){
  .ts-card:hover{transform:translateY(-8px);border-color:color-mix(in srgb,var(--card-tone) 42%,transparent);background:#fff}
  .ts-card:hover::before{transform:scaleX(1)}
  .ts-card:hover::after{transform:translate(-14px,-10px) scale(1.12)}
  .ts-card:hover .sppb-icon,.ts-card:hover .sppb-icon-container{transform:translateY(-3px) rotate(-3deg);background:var(--card-tone)!important;color:#fff!important}
}

/* Umfrage-Karte (Aktuelle Umfragen) */
.ts-poll{
  background:#fff;border:1px solid rgba(111,92,255,.16);border-radius:24px;
  box-shadow:0 18px 55px rgba(45,35,95,.10);padding:clamp(20px,5vw,38px);max-width:640px;margin:0 auto
}
.ts-poll h3{margin:10px 0 6px}
.ts-poll p{color:var(--ts-ink-soft);margin:0 0 18px}
.ts-tag{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:#F4F2FF;color:var(--ts-accent);font-size:.8rem;font-weight:700}
.ts-poll .ts-btn{
  display:inline-block;min-height:48px;padding:12px 24px;border-radius:15px;font:700 1rem var(--ts-font);
  color:#fff!important;text-decoration:none;background:linear-gradient(135deg,var(--ts-accent),#8E7CFF);
  box-shadow:0 10px 22px rgba(23,32,51,.13);transition:transform .18s ease,box-shadow .18s ease
}
.ts-poll .ts-btn:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(23,32,51,.17)}

/* Server-Hinweis (grüne Pille) */
.ts-server-note{
  display:flex;align-items:center;justify-content:center;gap:9px;margin:20px auto 0;padding:11px 15px;
  width:max-content;max-width:100%;border:1px solid rgba(12,166,120,.2);border-radius:999px;
  background:rgba(232,250,244,.82);color:#087f5b;font-size:.84rem;font-weight:700;text-align:center
}

/* Fusszeile */
.ts-footer{color:var(--ts-ink-soft);font-size:.8rem;text-align:center}
.ts-footer a{color:var(--ts-ink-soft)!important;text-decoration:underline;text-underline-offset:3px}
.container-footer{background:transparent!important;background-image:none!important;color:var(--ts-ink-soft)}

@media(max-width:820px){.ts-card{min-height:0}}
@media(max-width:600px){
  #sp-page-builder .sppb-btn,.ts-poll .ts-btn{width:100%;text-align:center}
  .container-header .site-description{display:none}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Zentrierung erzwingen (Text-Block-Ausrichtung überschreiben) */
.ts-section-head,.ts-section-head .sppb-addon-content,.ts-section-head h2,.ts-section-head p{text-align:center!important}
.ts-section-head .sppb-addon-content{max-width:720px;margin-inline:auto}
.ts-footer,.ts-footer .sppb-addon-content,.ts-footer p{text-align:center!important}
.ts-hero + .sppb-addon-button,.ts-hero ~ .sppb-addon-wrapper{margin-top:8px}
/* Kartenabstand mobil */
@media(max-width:767px){.ts-card{margin-bottom:12px}}

/* ==========================================================================
   Tippflächen für Handy und Tablet: mind. 44×44 px und mind. 8 px Abstand
   ========================================================================== */
.navbar-brand .brand-logo{display:inline-flex;align-items:center;min-height:44px}
body.site .sppb-btn{min-height:48px;display:inline-flex;align-items:center;justify-content:center}
body.site .sppb-button-wrapper{margin:8px 0}
body.site .ts-footer{padding-top:6px}
body.site .ts-footer a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px}
@media (max-width:575px){body.site .sppb-btn{width:100%}}

/* Beta-Hinweis (wie terminsuche.ch) */
body.site .ts-beta{display:flex;align-items:flex-start;gap:12px;margin:8px 0 22px;padding:13px 16px;border:1px solid rgba(245,158,11,.28);border-radius:16px;background:rgba(255,251,235,.78);color:#6b5a28;font-size:.94rem;line-height:1.5;box-shadow:0 8px 24px rgba(86,67,20,.05)}
body.site .ts-beta .beta-icon{font-size:1.15rem;line-height:1.35;flex:0 0 auto}
body.site .ts-beta a{color:inherit;font-weight:750;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;display:inline-block;padding:12px 0;margin:-12px 0}
body.site .ts-beta a:hover,body.site .ts-beta a:focus-visible{color:#8a5b00}
@media(max-width:620px){body.site .ts-beta{margin-top:4px;padding:12px 14px;font-size:.9rem}}


/* terminsuche 27.09.2026 – Startseite auf dem Smartphone:
   nur ein Seitenrand von 16 px statt drei gestapelter Abstände (Cassiopeia-Inhaltsbereich
   16 px + Page-Builder-Zeile 15 px + Seitenraster 16 px = 47 px). Desktop unverändert. */
@media (max-width:575px){
  .site-grid .container-component{padding-left:0;padding-right:0}
  .sp-page-builder .sppb-row-container{padding-left:0;padding-right:0}
  .sp-page-builder .sppb-row{margin-left:0;margin-right:0}
  .sp-page-builder .sppb-row-column{padding-left:0;padding-right:0}
}
 
/* terminsuche 27.09.2026 – Startseite: «Anmelden» in der Kopfzeile und Konto-Feld
   (gleiche Gestaltung wie die Schaltfläche «Anmelden» und die Hinweisboxen der Werkzeuge) */
 
/* Kopfzeile: Logo links, Anmelden rechts (Modul «Anmelden» auf Position «menu») */
.container-header .container-nav{
  position:absolute;top:0;bottom:0;right:max(16px,calc((100% - 1040px)/2 + 16px));
  display:flex!important;align-items:center;width:auto!important;max-width:none!important;margin:0!important;padding:0!important
}
.container-header .container-nav .moduletable,.container-header .container-nav .mod-custom{margin:0}
.ts-login{
  display:inline-flex;align-items:center;min-height:44px;padding:6px 14px;border-radius:12px;
  border:1px solid var(--ts-line);background:#fff;color:var(--ts-ink)!important;
  font:700 .85rem var(--ts-font);text-decoration:none!important;white-space:nowrap;
  transition:transform .18s ease,border-color .18s ease
}
.ts-login:hover,.ts-login:focus-visible{border-color:var(--ts-accent);color:var(--ts-accent)!important}
.ts-login:active{transform:scale(.97)}
 
/* Konto-Feld unter «So funktioniert’s» */
.ts-account{
  position:relative;isolation:isolate;overflow:hidden;display:flex;gap:22px;align-items:flex-start;
  max-width:880px;margin:clamp(26px,5vw,46px) auto 0;padding:clamp(22px,4vw,36px);
  border:1px solid rgba(111,92,255,.28);border-radius:14px 32px 14px 14px;
  background:linear-gradient(135deg,#fff 0%,#F4F2FF 100%);box-shadow:0 18px 45px rgba(45,35,95,.10)
}
.ts-account::before{content:"";position:absolute;left:0;top:0;width:100%;height:5px;background:linear-gradient(90deg,var(--ts-accent),var(--ts-accent-3))}
.ts-account::after{content:"";position:absolute;right:-50px;bottom:-60px;width:180px;height:180px;border-radius:50%;border:1px solid rgba(111,92,255,.18);z-index:-1}
.ts-account-icon{
  flex:0 0 auto;display:grid;place-items:center;width:60px;height:60px;border-radius:18px 18px 18px 6px;
  background:linear-gradient(135deg,var(--ts-accent),#9a88ff);color:#fff;font-size:1.6rem;box-shadow:0 12px 26px rgba(111,92,255,.24)
}
.ts-account-body{flex:1 1 auto;min-width:0}
.ts-account .ts-account-pill{display:inline-block;margin-bottom:10px;padding:4px 12px;border-radius:99px;border:1px solid rgba(111,92,255,.28);background:#fff;color:var(--ts-accent);font:400 .75rem var(--ts-mono)}
.ts-account h2{font:700 clamp(1.35rem,3.2vw,1.8rem)/1.2 var(--ts-font)!important;letter-spacing:-.02em;margin:0 0 10px!important;color:var(--ts-ink)!important}
.ts-account p{color:var(--ts-ink-soft);margin:0 0 14px;line-height:1.6}
.ts-account ul{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:9px}
.ts-account li{position:relative;padding-left:30px;color:var(--ts-ink);line-height:1.5}
.ts-account li::before{content:"✓";position:absolute;left:0;top:1px;display:grid;place-items:center;width:20px;height:20px;border-radius:7px;background:rgba(37,194,160,.14);color:#0c8f72;font-weight:700;font-size:.8rem}
.ts-account-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin:0!important}
.ts-account .ts-btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 26px;border-radius:15px;
  font:700 1rem var(--ts-font);color:#fff!important;text-decoration:none!important;
  background:linear-gradient(135deg,var(--ts-accent),#8E7CFF);box-shadow:0 10px 22px rgba(23,32,51,.13);
  transition:transform .18s ease,box-shadow .18s ease
}
.ts-account .ts-btn:active{transform:scale(.97)}
.ts-account .ts-link{display:inline-flex;align-items:center;min-height:44px;color:var(--ts-accent)!important;font-weight:700;text-decoration:none!important}
@media(hover:hover) and (pointer:fine){.ts-account .ts-btn:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(23,32,51,.17)}.ts-account .ts-link:hover{text-decoration:underline!important}}
@media(max-width:620px){
  .ts-account{flex-direction:column;gap:14px;border-radius:12px 26px 12px 12px}
  .ts-account-icon{width:52px;height:52px;font-size:1.4rem}
  .ts-account .ts-btn{width:100%}
  .ts-login{padding:6px 12px}
}
/* terminsuche 05.10.2026 - Kopfzeile: Anmelden und Sprachmenue nebeneinander in einer Zeile */
.container-header .container-nav{flex-direction:row!important;flex-wrap:nowrap!important;justify-content:flex-end;gap:10px;white-space:nowrap}
.container-header .container-nav p{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:10px;margin:0}
.container-header .container-nav .ts-lang,.container-header .container-nav .ts-login{flex:0 0 auto;margin:0}
.container-header .container-nav .mod-custom{display:flex!important;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:10px;white-space:nowrap}
.container-header .container-nav .mod-custom>p{margin:0}
.container-header .container-nav .mod-custom>.ts-lang{margin:0}