/* ========================================================================== 
   Carl Carsharing – Premium medatsu.css Overrides
   Toujou / TYPO3
   Design goals:
   - recurring asymmetrical shape language (top-right / bottom-left rounding)
   - stronger readability and spacing rhythm
   - bootstrap-inspired responsiveness, focus states and content width handling
   - accessible hover/focus behavior
   ========================================================================== */

:root {
  --cs-color-primary: #74b95b;
  --cs-color-primary-hover: #69ad51;
  --cs-color-primary-dark: #5a9745;
  --cs-color-primary-light: #edf5e8;

  --cs-color-secondary: #226053;
  --cs-color-secondary-hover: #1d5448;
  --cs-color-secondary-dark: #153a33;
  --cs-color-secondary-soft: #2d7767;
  --cs-color-secondary-tint: #e8f0ee;

  --cs-color-text: #24312e;
  --cs-color-text-soft: #465754;
  --cs-color-text-on-dark: #ffffff;
  --cs-color-surface: #ffffff;
  --cs-color-surface-alt: #f7f8f7;
  --cs-color-surface-muted: #ffffff;
  --cs-color-border: #d7dfdb;
  --cs-color-border-strong: #bad1c8;
  --cs-color-login: #76aba0;

  --cs-shadow-xs: 0 0.25rem 0.75rem -0.75rem rgba(17, 37, 33, 0.5);
  --cs-shadow-sm: 0 0.75rem 1.5rem -1rem rgba(17, 37, 33, 0.5);
  --cs-shadow-md: 0 1rem 2.25rem -1.25rem rgba(17, 37, 33, 0.5);
  --cs-shadow-lg: 0 1.5rem 3rem -1.50rem rgba(17, 37, 33, 0.5);

  --cs-radius-button: 0 1rem 0 1rem;
  --cs-radius-surface-sm: 0 1.5rem 0 1.5rem;
  --cs-radius-surface: 0 2rem 0 2rem;
  --cs-radius-surface-lg: 0 2.5rem 0 2.5rem;
  --cs-radius-pill: 999px;

  --cs-space-2xs: 0.375rem;
  --cs-space-xs: 0.5rem;
  --cs-space-sm: 0.75rem;
  --cs-space-md: 1rem;
  --cs-space-lg: 1.5rem;
  --cs-space-xl: 2rem;
  --cs-space-2xl: 3rem;
  --cs-space-3xl: 4rem;

  --cs-content-max: 100rem;
  --cs-reading-max: 70ch;
  --cs-top-bar-height: 100px;
  --cs-logo-height: 4.75rem;
  --cs-pattern-size: 20%;

  --cs-gradient-primary: linear-gradient(135deg, #80c861 0%, #74b95b 45%, #649f4d 100%);
  --cs-gradient-secondary: linear-gradient(135deg, #2d7767 0%, #226053 100%);
  --cs-gradient-surface: linear-gradient(180deg, rgba(255,255,255,0.97) 0%, rgba(246,248,246,0.97) 100%);
  --cs-gradient-panel: linear-gradient(180deg, rgba(116, 185, 91, 0.08) 0%, rgba(34, 96, 83, 0.05) 100%);
  --cs-gradient-login: linear-gradient(180deg, #76aba0 0%, #5f968b 100%);
  --cs-gradient-keyfact: linear-gradient(180deg, #74b95b 0%, #226053 100%);

  --cs-transition-fast: 0.2s ease;
  --cs-transition-base: 0.3s ease;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--cs-color-surface-muted);
}

body {
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

main {
  margin: 0 auto;
}

/*
main p,
main li,
main td,
main th,
main .text,
main .bodytext {
  max-width: var(--cs-reading-max);
}
*/

main p:last-child {
  margin-bottom: 0;
}

.header + main,
.top-bar--small ~ .wrap--content header + main,
.wrap--content header + main {
  padding-top: var(--cs-space-lg);
}

:root:has(.top-bar.top-bar--medium),
:root:has(.top-bar.top-bar--medium.top-bar--fixed) {
  --top-bar-height: var(--cs-top-bar-height);
  --top-bar-height-fixed: var(--cs-top-bar-height);
}

.divider, hr {
  height: 2px!important;
}

/* -------------------------------------------------------------------------- */
/* Focus / accessibility                                                        */
/* -------------------------------------------------------------------------- */

a,
button,
input,
select,
textarea,
summary,
[tabindex] {
  outline-offset: 3px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid rgba(116, 185, 91, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Reusable asymmetrical surfaces                                               */
/* -------------------------------------------------------------------------- */
.header-content .content-card__title,
.header-content .content-card__text.font--align-right,
.cs-login-wrapper,
.blockquotes,
.cs-infobox, 
.table-container,
.location-finder,
.teaser,
.textpic__image img,
.image-row__image img,
.image-row__image picture,
.toujou-card,
.frame-type-textmedia .ce-gallery img,
.frame-type-image img {
  border-radius: var(--cs-radius-surface-lg);
  overflow: hidden;
}

.top-bar__toggle--menu {
  border-radius: var(--cs-radius-button);
}

/* -------------------------------------------------------------------------- */
/* Header / navigation                                                          */
/* -------------------------------------------------------------------------- */
.top-bar {
  background: rgba(255, 255, 255, 0.95) !important;
  border-bottom: 0 !important;
  box-shadow: 0 0 60px -30px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
}

.top-bar.top-bar--scroll-hidden {
  transform: none;
}

.top-bar__logo-container {
  height: var(--cs-top-bar-height);
  padding: 0.5rem 0 !important;
  background: none !important;
}

.top-bar--medium .top-bar__logo {
  height: var(--cs-logo-height) !important;
}

.top-bar.top-bar--light .top-bar__logo {
  background: none;
}

.top-bar__toggle--menu {
  width: 3.35rem;
  height: 2.85rem;
  padding: 0.65rem;
  background: var(--secondary-color);
  box-shadow: var(--cs-shadow-sm);
  transition: transform var(--cs-transition-fast), box-shadow var(--cs-transition-fast);
}

.top-bar__toggle--menu:hover,
.top-bar__toggle--menu:focus-visible {
  box-shadow: var(--cs-shadow-md);
}

.burger__line {
  border-radius: 0;
}

.top-bar.top-bar--light .burger__line,
.top-bar.top-bar--with-background .burger__line {
  background: var(--cs-color-text-on-dark) !important;
}

#navigation-trigger::after {
  content: 'Menü';
  position: relative;
  top: 14px;
  left: -2px;
  display: inline-block;
  width: auto;
  height: auto;
  margin: 0;
  color: var(--cs-color-secondary);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.navigation-contact__icon {
  fill: var(--cs-color-secondary) !important;
}

.wrap--service {
  display: none;
}

#navigation-state:checked ~ .wrap--service {
  right: 5rem;
}

@media screen and (min-width: 840px) {
  #navigation-state:checked ~ .wrap--service {
    right: 8rem;
  }
}

@media screen and (min-width: 1280px) {
  #navigation-state:checked ~ .wrap--service {
    right: 11rem;
  }
}

.header {
  border: 0;
}

/* -------------------------------------------------------------------------- */
/* Layout / content rhythm                                                      */
/* -------------------------------------------------------------------------- */
.accordion {
  display: block;
}

.video,
.location-finder,
.toujou-card {
  overflow: hidden;
}

.location-finder {
  background: var(--cs-gradient-surface);
  box-shadow: var(--cs-shadow-md);
}

.header-content--right {
  right: 0;
}

.header-content--left {
  left: 0;
}

.text-columns, 
.cs-keyfact-wrapper {
  margin-bottom: 2rem;
}

/* -------------------------------------------------------------------------- */
/* Typography                                                                   */
/* -------------------------------------------------------------------------- */
h1,
.h1,
.header-content .content-card__title {
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

h2,
.h2,
h3,
.h3 {
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.lead,
.intro,
.text--lead,
.ce-bodytext .lead {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.4rem);
  line-height: 1.6;
  color: var(--cs-color-text-soft);
}

/* -------------------------------------------------------------------------- */
/* Hero / content cards                                                         */
/* -------------------------------------------------------------------------- */
.header-content .content-card__content {
  margin-bottom: -1.5rem;
  padding: 0;
}

.header-content .content-card__title,
.header-content .content-card__text.font--align-right {
  padding: 1rem 1.5rem;
  box-shadow: var(--cs-shadow-md);
}

.header-content .content-card__title {
  margin: 0 var(--cs-space-lg) 0 auto !important;
  background: linear-gradient(180deg, rgba(116, 185, 91, 0.96) 0%, rgba(105, 173, 81, 0.96) 100%);
  color: var(--cs-color-secondary);
  font-size: clamp(1.35rem, 1rem + 1.2vw, 2.35rem);
}

.header-content .content-card__text.font--align-right {
  margin: 0 0 0 auto;
  background: linear-gradient(180deg, rgba(34, 96, 83, 0.98) 0%, rgba(27, 74, 64, 0.98) 100%);
  color: var(--cs-color-text-on-dark);
}

.header-content .content-card__text .content-card__text-inner {
  padding: 0;
  background: transparent;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.5rem);
  font-weight: 700;
  line-height: 1.4;
}

@media screen and (min-width: 840px) {
  .location-finder {
    max-width: 100rem;
    max-height: 60vh;
    margin: 0 auto;
    border-radius: var(--cs-radius-surface-lg);
  }

  .header-content .content-card__title,
  .header-content .content-card__text.font--align-right {
    padding: 1.1rem 1.75rem;
  }
}


/* -------------------------------------------------------------------------- */
/* Hero / content boxes                                                         */
/* -------------------------------------------------------------------------- */

.teaser, .blockquotes {
  width: var(--medatsu-content-max-width);
  max-width: 100rem;
  margin: 0 auto 3rem auto;
  box-shadow: var(--cs-shadow-soft, 0 0.5rem 1.5rem rgba(0, 0, 0, 0.05));
}

.cs-infobox {
  margin-bottom: 1rem!important;
  padding: 2rem;
  box-shadow: var(--cs-shadow-soft, 0 0.5rem 1.5rem rgba(0, 0, 0, 0.05));
}

.cs-infobox-small {
  zoom: 80%;
  width: 80%;
  height: 80%;
  margin: 0!important;
}

.cs-infobox .text-columns__text {
  padding: 0;
}

.cs-infobox-lightgreen {
  background-color: color-mix(in srgb, var(--primary-color--light) 70%, white 30%);
}

.cs-infobox-lightblue {
  background-color: #d5deef;
}

.cs-infobox-lightgray {
  background-color: var(--font-color--light);
}

@media (max-width: 990px) {
  .cs-infobox {
    border-radius: var(--cs-radius-surface-md, 0 1.5rem 0 1.5rem);
  }
}

@media (max-width: 575px) {
  .cs-infobox {
    border-radius: var(--cs-radius-surface-sm, 0 1rem 0 1rem);
  }
}

/* -------------------------------------------------------------------------- */
/* Premium panels / cards                                                       */
/* -------------------------------------------------------------------------- */
.cs-c-shield {
  display: block;
  width: 100%;
  margin: 0 auto;
  padding-top: 35px;
}

.cs-login-wrapper,
.toujou-card,
.table-container {
  box-shadow: var(--cs-shadow-md);
}

.cs-login-wrapper {
  background: var(--cs-gradient-login);
}

.cs-login-wrapper,
.cs-login-wrapper * {
  color: var(--cs-color-text-on-dark);
}

.cs-keyfact-wrapper {
  width: 100%;
  padding: 0;
  background: var(--cs-gradient-panel);
}

.cs-keyfact {
  width: 150px;
  height: 150px;
  margin: 0 auto 1rem;
  border: 4px solid transparent;
  border-radius: 50%;
  background:
    linear-gradient(180deg, #ffffff 0%, #ffffff 100%) padding-box,
    var(--cs-gradient-keyfact) border-box;
  box-shadow: var(--cs-shadow-xs);
}

.cs-keyfact p {
  padding-top: 2.3rem;
  font-size: 3rem;
  font-weight: 700;
  background: var(--cs-gradient-keyfact);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.toujou-card {
  background: var(--cs-gradient-surface);
  border: 1px solid rgba(34, 96, 83, 0.08);
  transition: transform var(--cs-transition-base), box-shadow var(--cs-transition-base), border-color var(--cs-transition-base);
}

.toujou-card:hover,
.toujou-card:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--cs-shadow-lg);
  border-color: rgba(34, 96, 83, 0.16);
}

/* -------------------------------------------------------------------------- */
/* Buttons / CTA                                                                */
/* -------------------------------------------------------------------------- */
.button,
button,
input[type='submit'],
input[type='button'],
input[type='reset'] {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  overflow: hidden;
  border-radius: var(--cs-radius-button);
  box-shadow: var(--cs-shadow-sm);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition:
    transform var(--cs-transition-fast),
    box-shadow var(--cs-transition-fast),
    background-color var(--cs-transition-fast),
    border-color var(--cs-transition-fast),
    color var(--cs-transition-fast);
}

.button::before,
button::before,
input[type='submit']::before,
input[type='button']::before,
input[type='reset']::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.22) 48%, rgba(255, 255, 255, 0) 78%);
  transform: translateX(-100%);
  transition: transform 0.55s ease;
  pointer-events: none;
}

.button:hover,
.button:focus-visible,
button:hover,
button:focus-visible,
input[type='submit']:hover,
input[type='submit']:focus-visible,
input[type='button']:hover,
input[type='button']:focus-visible,
input[type='reset']:hover,
input[type='reset']:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--cs-shadow-md);
}

.button:hover::before,
.button:focus-visible::before,
button:hover::before,
button:focus-visible::before,
input[type='submit']:hover::before,
input[type='submit']:focus-visible::before,
input[type='button']:hover::before,
input[type='button']:focus-visible::before,
input[type='reset']:hover::before,
input[type='reset']:focus-visible::before {
  transform: translateX(140%);
}

.button:active,
button:active,
input[type='submit']:active,
input[type='button']:active,
input[type='reset']:active {
  transform: translateY(0);
  box-shadow: var(--cs-shadow-xs);
}

.button .fa,
.button .icon,
.button [class*='arrow'],
.button svg,
button .fa,
button .icon,
button [class*='arrow'],
button svg {
  transition: transform var(--cs-transition-fast);
}

.button:hover .fa,
.button:hover .icon,
.button:hover [class*='arrow'],
.button:hover svg,
.button:focus-visible .fa,
.button:focus-visible .icon,
.button:focus-visible [class*='arrow'],
.button:focus-visible svg,
button:hover .fa,
button:hover .icon,
button:hover [class*='arrow'],
button:hover svg,
button:focus-visible .fa,
button:focus-visible .icon,
button:focus-visible [class*='arrow'],
button:focus-visible svg {
  transform: translateX(0.2rem);
}

.button.third-party-content__button {
  padding: 0.8rem 3rem 0.8rem 1.15rem;
}

/* -------------------------------------------------------------------------- */
/* Text / rich content                                                          */
/* -------------------------------------------------------------------------- */
.html-text__text {
  padding: 0 0 1rem 0 !important;
}

.html-text__text > * + * {
  margin-top: 0.9rem;
}

@media only screen and (min-width: 840px) {
  .html-text.html-text--left.html-text--half .html-text__text {
    padding: 0 2rem !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Tables                                                                       */
/* -------------------------------------------------------------------------- */
.table-container {
  border: 1px solid var(--cs-color-border);
}

.contenttable {
  width: 100%;
  padding: 1rem;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  background: rgba(255, 255, 255, 0.94);
}

.contenttable table,
.contenttable tbody,
.contenttable thead,
.contenttable tr {
  width: 100%;
}

td,
th {
  text-align: left;
  vertical-align: top;
}

th {
  color: var(--cs-color-secondary);
  font-weight: 700;
}

tr + tr td,
tr + tr th {
  border-top: 1px solid rgba(34, 96, 83, 0.08);
}

/* -------------------------------------------------------------------------- */
/* Images / sliders / media                                                     */
/* -------------------------------------------------------------------------- */

.teaser__image {
  height: auto !important;
}

.teaser__image::after {
  border-width: 40px !important;
}

.textpic__image img,
.image-row__image img,
.image-row__image picture,
.frame-type-textmedia .ce-gallery img,
.frame-type-image img {
  border-radius: var(--cs-radius-surface);
  box-shadow: var(--cs-shadow-sm);
}

.image-row__image {
  margin-bottom: 0.5rem;
}

.slider--logo,
.slider--logo .slider__frame {
  height: 10rem;
}

.slider--logo {
  max-height: 10rem;
}

.maplibregl-ctrl-geocoder {
  box-shadow: none !important;
}

/* -------------------------------------------------------------------------- */
/* Lists / utility content                                                      */
/* -------------------------------------------------------------------------- */
.cs-pricelist-notes {
  margin: 0 0 20px;
  padding-left: 45px;
  list-style: none;
  font-size: 1rem;
}

.cs-pricelist-notes li {
  margin: 0;
  padding: 0.15rem 0;
}

.cs-pricelist-notes li::before {
  display: inline-block;
  margin-left: -29px;
  padding-right: 10px;
  color: var(--cs-color-secondary);
  font-weight: 700;
}

.cs-pricelist-notes li.num-1::before { content: '1) '; }
.cs-pricelist-notes li.num-2::before { content: '2) '; }
.cs-pricelist-notes li.num-a::before { content: 'a) '; }
.cs-pricelist-notes li.num-b::before { content: 'b) '; }
.cs-pricelist-notes li.num-c::before { content: 'c) '; }
.cs-pricelist-notes li.num-d::before { content: 'd) '; }
.cs-pricelist-notes li.num-e::before { content: 'e) '; }

/* -------------------------------------------------------------------------- */
/* Form controls                                                                */
/* -------------------------------------------------------------------------- */
input[type='text'],
input[type='email'],
input[type='password'],
input[type='tel'],
input[type='search'],
input[type='number'],
select,
textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--cs-color-border-strong);
  border-radius: var(--cs-radius-surface-sm);
  background: var(--cs-color-surface);
  color: var(--cs-color-text);
  transition: border-color var(--cs-transition-fast), box-shadow var(--cs-transition-fast), background-color var(--cs-transition-fast);
}

input[type='text']:hover,
input[type='email']:hover,
input[type='password']:hover,
input[type='tel']:hover,
input[type='search']:hover,
input[type='number']:hover,
select:hover,
textarea:hover {
  border-color: var(--cs-color-secondary-soft);
}

input[type='text']:focus,
input[type='email']:focus,
input[type='password']:focus,
input[type='tel']:focus,
input[type='search']:focus,
input[type='number']:focus,
select:focus,
textarea:focus {
  border-color: var(--cs-color-primary);
  box-shadow: 0 0 0 0.25rem rgba(116, 185, 91, 0.16);
  outline: 0;
}

/* -------------------------------------------------------------------------- */
/* Small screen tuning                                                          */
/* -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  :root {
    --cs-pattern-size: 28%;
    --cs-radius-button: 0 1rem 0 1rem;
    --cs-radius-surface: 0 1.5rem 0 1.5rem;
  }

  .header-content .content-card__title,
  .header-content .content-card__text.font--align-right,
  .cs-login-wrapper,
  .cs-keyfact-wrapper,
  .contenttable {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .button,
  button,
  input[type='submit'],
  input[type='button'],
  input[type='reset'] {
    width: 100%;
    min-height: 3.15rem;
  }

  .button.third-party-content__button {
    width: auto;
  }

  td,
  th {
    padding: 0.75rem;
  }
}

/* -------------------------------------------------------------------------- */
/* Footer                                                                       */
/* -------------------------------------------------------------------------- */
.footer {
  background-color: var(--cs-color-secondary-dark);
  border: 0;
}