/* =======================================================================
   RESET & BASE TYPOGRAPHY
   ======================================================================= */
html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,embed,
figure,figcaption,footer,header,hgroup,
menu,nav,output,ruby,section,summary,
time,mark,audio,video {
  margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline; box-sizing:border-box;
}
body {
  line-height:1.5;
  background:#F4F7FA;
  color:#222;
  font-family:'Georgia', 'Times New Roman', Times, serif;
  font-size:16px;
  font-weight:400;
  min-height:100vh;
}
*,*:before,*:after { box-sizing: inherit; }
img {max-width:100%; height:auto; display:block;}
ul,ol {padding-left: 1.5em;}
a {text-decoration: none; color: #18408B; transition: color .2s;}
a:hover, a:focus {color: #EB9605;}


/* =======================================================================
   BRAND TYPOGRAPHY & COLORS – Elegant Classic Style
   ======================================================================= */
:root {
  --color-primary: #18408B;
  --color-secondary: #EB9605;
  --color-accent: #F4F7FA;
  --color-title: #1D2540;
  --color-text: #232323;
  --color-muted: #5D6470;
  --color-border: #D8DDE6;
  --color-bg-section: #FFF;
  --color-footer-bg: #222944;
  --color-footer-text: #F5F7FB;
  --color-btn-shadow: rgba(24,64,139,.14);
}

body {
  background: var(--color-accent);
  color: var(--color-text);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Georgia', 'Times New Roman', Times, serif;
  color: var(--color-title);
  font-weight: 700;
  margin-bottom: 16px;
  letter-spacing: 0.01em;
}
h1 {font-size:2.5rem; line-height:1.15; margin-bottom:24px;}
h2 {font-size:2rem; line-height:1.22; margin-bottom:18px;}
h3 {font-size:1.33rem; line-height:1.25; margin-bottom:15px;}
h4 {font-size:1.125rem; margin-bottom:12px;}

@media(max-width:768px){
  h1{font-size:2rem;}
  h2{font-size:1.5rem;}
}
p, ul, ol, li {
  font-family: 'Georgia', 'Times New Roman', Times, serif;
  line-height:1.7;
  color: #898181;
  font-size:1rem;
  margin-bottom: 18px;
}
p:last-child, ul:last-child, ol:last-child {margin-bottom:0;}
strong {font-weight:700;}

/* Text hierarchy for subtle, classic look */
.section h1, .section h2, .section h3 {
  margin-bottom: 16px;
  color: var(--color-title);
}

/* -----------------------------------------------------------------------
   LAYOUT & SPACING – FLEXBOX ONLY
   ----------------------------------------------------------------------- */
.container {
  max-width:1140px;
  margin:0 auto;
  padding:0 20px;
  width:100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.content-wrapper {
  width:100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 0;
}

.section {
  background: var(--color-bg-section);
  border-radius: 18px;
  margin-bottom: 60px;
  padding: 40px 20px;
  box-shadow: 0 2px 12px 0 rgba(29,37,64, .06);
  display: flex;
  flex-direction:column;
  align-items:stretch;
}
@media(max-width:768px){
  .section{padding:28px 6px; margin-bottom:38px; border-radius:10px;}
}


/* Card & Flexbox Containers */
.card-container {
  display:flex;
  flex-wrap:wrap;
  gap:24px;
}
.card {
  background:#FFF;
  box-shadow:0 2px 8px 0 rgba(24,64,139,.09);
  border-radius:14px;
  margin-bottom:20px;
  position:relative;
  padding:24px 20px;
  min-width:260px;
  flex: 1 1 280px;
  transition:box-shadow .22s, transform .22s;
  border: 1px solid var(--color-border);
}
.card:hover,
.card:focus {
  box-shadow:0 8px 28px 0 rgba(24,64,139,.20);
  transform: translateY(-2px) scale(1.012);
  z-index:1;
}

.features,
.feature-grid,
.service-list,
.short-faq-list,
.testimonial-slider,
.next-steps ul,
.contact-details, .team-section .text-section {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.features { flex-direction: row; }
.feature-grid, .service-list {justify-content: flex-start;}

.feature-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap:15px;
  background: #FFF;
  border-radius:12px;
  padding:20px 14px;
  border:1px solid var(--color-border);
  box-shadow:0 2px 8px rgba(29,37,64,0.06);
  min-width:220px; flex: 1 1 250px;
  transition:box-shadow .19s;
}
.feature-item:hover {
  box-shadow:0 6px 24px 0 rgba(24,64,139,.13);
}

@media(max-width:900px){
  .feature-grid, .service-list {gap:14px;}
  .feature-item, .service-item {min-width:170px;}
}
@media(max-width:600px){
  .feature-grid, .service-list, .testimonial-slider {flex-direction:column; gap:14px;}
  .feature-item, .service-item {width:100%; min-width:0;}
}

.text-image-section {
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  .text-image-section {flex-direction:column; align-items:flex-start; gap: 18px;}
}

.card-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap:10px;
}

.content-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; }

/* Testimonial Section ------------------------------------------ */
.testimonial-slider {
  display: flex;
  flex-wrap: wrap;
  gap:24px;
  margin-top:16px;
}
.testimonial-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  background: #FBFBFD;
  color:#182044;
  border-radius:14px;
  padding: 20px 24px;
  min-width: 245px; max-width:360px;
  box-shadow: 0 1px 10px 0 rgba(24,64,139,.09);
  border:1px solid #EDEEEE;
  margin-bottom:20px;
  flex:1 1 265px;
  position:relative;
  transition:box-shadow .21s, border-color .23s;
}
.testimonial-card:hover {
  box-shadow:0 8px 36px 0 rgba(24,64,139,.14);
  border-color:var(--color-secondary);
}
.star-rating {
  font-family:'Georgia',serif;
  letter-spacing:.13em;
  color:var(--color-secondary);
  font-size:1.25rem;
}
.client-name {
  font-size:1rem;
  font-style: italic;
  color:var(--color-muted);
  margin-top:8px;
}

/* Table/Price Section ------------------------ */
.pricing-table {
  margin-bottom:24px;
  background:#FFF;
  border-radius:14px;
  overflow-x:auto;
  box-shadow:0 2px 8px 0 rgba(29,37,64,0.06);
  padding:20px 12px;
  border:1px solid var(--color-border);
}
.pricing-table table {
  width:100%; border-collapse:collapse; font-size:1rem;
}
.pricing-table th, .pricing-table td {
  padding:14px 10px; border-bottom:1px solid #EBECEF;
}
.pricing-table th {
  color:var(--color-primary); background: #F7F8FA;
  text-align:left; font-weight:700; font-size:1.09rem;
}
.pricing-table td {color:var(--color-muted);}
.pricing-table tr:last-child td {
  border-bottom:none;
}
@media(max-width:600px) {
  .pricing-table th, .pricing-table td {padding:10px 6px;}
}

/* Accordion FAQ ----------------------------- */
.faq-accordion {
  display: flex; flex-direction: column; gap: 20px; margin-bottom:24px;
}
.faq-item {
  background: #FFF;
  border-radius:10px;
  border:1px solid #EDEEEE;
  box-shadow:0 1px 6px 0 rgba(24,64,139,0.08);
  padding:18px 18px 16px 16px;
  transition: box-shadow .22s;
}
.faq-item h3 {font-size:1.2rem; margin:0 0 10px 0;}
.faq-item p {margin-bottom:0;}
.faq-item:hover {box-shadow:0 4px 18px 0 rgba(24,64,139,.13);}

.short-faq-list {gap:20px;}
.short-faq-list > div {
  background: #FFF;
  border-radius: 10px;
  border:1px solid #EDEEEE;
  padding:14px 18px;
  min-width:180px;
  flex:1 1 280px;
  box-shadow:0 1px 4px 0 rgba(24,64,139,.05);
}
@media(max-width:600px){
  .short-faq-list{flex-direction:column;}
}

/* -----------------------------------------------------------------------
   BUTTONS – Classic, Muted, Elegant
   ----------------------------------------------------------------------- */
.btn-primary, .btn-secondary {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:30px;
  font-family:'Georgia',serif;
  font-size:1.13rem;
  font-weight:700;
  letter-spacing:0.01em;
  line-height:1.2;
  padding:13px 32px;
  border:none;
  transition:background .20s, color .20s, box-shadow .18s, transform .17s;
  cursor:pointer;
  box-shadow:0 1px 10px 0 var(--color-btn-shadow);
  margin-top:10px;
  margin-bottom:10px;
}
.btn-primary {
  background: var(--color-primary);
  color: #FFF;
}
.btn-primary:hover, .btn-primary:focus {
  background: #152D56;
  color:#FFF;
  box-shadow:0 4px 16px 0 rgba(24,64,139,.18);
  transform: translateY(-1px) scale(1.01);
}
.btn-secondary {
  background: #FFF;
  color: var(--color-primary);
  border:1px solid var(--color-primary);
}
.btn-secondary:hover, .btn-secondary:focus {
  background: var(--color-primary);
  color: #FFF;
}


/* -----------------------------------------------------------------------
   HEADER / MAIN NAVIGATION
   ----------------------------------------------------------------------- */
header {
  background: #FFF;
  box-shadow:0 1px 10px 0 rgba(24,64,139,.07);
  border-bottom: 1px solid var(--color-border);
  padding:0;
  margin-bottom:24px;
  z-index:30;
  position:relative;
}
header .container {
  flex-direction: row;
  align-items:center;
  justify-content:space-between;
  min-height:80px;
  gap:18px;
  padding-top: 12px;
  padding-bottom: 12px;
}
header nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
}
header nav a {
  font-family: 'Georgia',serif;
  font-size: 1rem;
  color: var(--color-title);
  padding: 4px 8px;
  border-radius:7px;
  transition: color .14s, background .12s;
  font-weight:500;
}
header nav a:hover, header nav a.active {
  color: var(--color-secondary);
  background:#F7F2EA;
}
header a.btn-primary {
  margin-left:20px;
  font-size:1rem;
}

/* Hide mobile menu toggle on desktop */
.mobile-menu-toggle {
  display: none;
  font-size:2rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-primary);
  padding: 6px 16px;
  transition: color .2s;
  z-index:120;
}
.mobile-menu-toggle:hover,
.mobile-menu-toggle:focus { color: var(--color-secondary); }

@media (max-width: 900px) {
  header nav, header a.btn-primary {
    display:none;
  }
  .mobile-menu-toggle {
    display: inline-flex;
    align-items:center;
    background: #FFF;
    border-radius:9px;
    box-shadow: 0 2px 6px 0 rgba(24,64,139,.10);
  }
}

/* MOBILE FULLSCREEN SLIDE MENU ----------------------------- */
.mobile-menu {
  position:fixed;
  top:0; left:0;
  width:100vw; height:100vh;
  background:rgba(24, 64, 139, .96);
  color:#FFF;
  z-index:300;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  transform: translateX(-100%);
  opacity:0;
  transition:transform .44s cubic-bezier(.8,.18,.25,1), opacity .28s;
  pointer-events:none;
}
.mobile-menu.open {
  transform: translateX(0);
  opacity:1;
  pointer-events:all;
}
.mobile-menu-close {
  align-self: flex-end;
  margin:28px 30px 0 0;
  background: none;
  border:none;
  color: #FFF;
  font-size:2.2rem;
  cursor:pointer;
  z-index:400;
  line-height:1;
  transition: color .18s;
}
.mobile-menu-close:hover,
.mobile-menu-close:focus {
  color:var(--color-secondary);
}
.mobile-nav {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:24px;
  margin-top:40px;
}
.mobile-nav a {
  font-family:'Georgia',serif;
  font-size:1.25rem;
  font-weight:600;
  color:#FFF;
  margin:0;
  border-radius:8px;
  padding:10px 26px;
  text-align:center;
  transition:background .16s, color .11s;
  line-height:1.35;
  letter-spacing:.008em;
  min-width:160px;
  background: none;
}
.mobile-nav a:focus, .mobile-nav a:hover{
  background:var(--color-secondary);
  color:var(--color-primary);
}

@media (min-width: 901px) {
  .mobile-menu {display:none !important;}
}


/* -----------------------------------------------------------------------
   FOOTER
   ----------------------------------------------------------------------- */
footer {
  background:var(--color-footer-bg);
  color:var(--color-footer-text);
  padding:38px 0 10px 0;
  font-family:'Georgia',serif;
  font-size:1rem;
  border-top: 1px solid #263158;
  margin-top:60px;
}
footer .container {
  flex-direction:row;
  align-items:flex-start;
  justify-content: space-between;
  gap:22px;
}
footer nav {
  display:flex;
  flex-direction:column;
  gap:9px;
}
footer nav a {
  color:var(--color-footer-text);
  font-size:1rem;
  margin-bottom:1px;
  font-weight:500;
  transition: color .17s;
}
footer nav a:hover,
footer nav a:focus {
  color: var(--color-secondary);
}
.footer-contact {
  font-size:.95rem;
  color:rgba(245,247,251,.93);
  margin-top:4px;
  line-height:1.6;
}
.footer-contact a { color:var(--color-secondary); }
@media(max-width: 900px){
  footer .container{flex-direction:column; align-items:flex-start; gap: 18px;}
  footer{padding-left:0; padding-right:0; margin-top:36px;}
}


/* -----------------------------------------------------------------------
   SPECIAL ELEMENTS -- MAP EMBED, TRUST CARD, ETC.
   ----------------------------------------------------------------------- */
.map-embed {
  min-height: 60px;
  background: #F4F7FA;
  border-radius: 8px;
  border: 1px solid #E0E4EB;
  font-style: italic;
  font-size:.99rem;
}
.team-section .trust-card {
  background: #F7F4EA;
  border: 1px solid #E3D6B6;
  border-radius:12px;
  padding:18px 22px;
  display:flex; align-items:center; gap:18px;
  margin-top:18px;
}
.team-section .trust-card img {height:44px; min-width:36px;}

/* Contact Details (Kontakt) section --------------------------------- */
.contact-details {
  display:flex;
  flex-direction:column;
  gap: 16px;
  margin-bottom:24px;
  font-size:1.03rem;
}
.contact-details img {
  vertical-align: middle;
  margin-right:7px; width:20px; height:20px;
  opacity:.80;
}
.contact-details a {color:var(--color-primary);}
.contact-details h3 {margin-bottom:8px; margin-top:20px; font-size:1.15rem;}

/* Next Steps, Thank You --------------------------------------------- */
.next-steps {
  margin-top:10px;
  background: #F8F4EE;
  border-radius:10px;
  padding:20px 18px;
  border:1px solid #F2DDB7;
}
.next-steps h2{
  font-size:1.15rem; margin-bottom:8px;
}
.next-steps ul {gap:12px; margin-bottom:0;}

.thankyou-message{font-size:1.13rem; color:var(--color-title); margin-bottom:18px;}

/* ----------------------------------------------------------------------
   CTA SECTION
   ---------------------------------------------------------------------- */
.cta, .outro-cta, .contact-cta {
  background: #FFF;
  border-radius:14px;
  margin-bottom: 60px;
  padding: 42px 20px;
  box-shadow: 0 3px 18px 0 rgba(24,64,139, .04);
  text-align: left;
}
.cta h2, .outro-cta h2, .contact-cta h2 { color: var(--color-primary); margin-bottom:14px; }
.cta p, .outro-cta p, .contact-cta p {font-size:1.07rem; margin-bottom:18px;}
.cta a.btn-primary, .outro-cta a.btn-primary, .contact-cta a.btn-primary {margin-top:12px;}

@media(max-width: 768px){
  .cta, .outro-cta, .contact-cta {padding:22px 6px; margin-bottom:34px; border-radius:8px; text-align:left;}
}

/* ----------------------------------------------------------------------
   LEGAL SECTION STYLE
   ---------------------------------------------------------------------- */
.legal-section {
  background: #FFF;
  border-radius:14px;
  padding: 40px 20px;
  box-shadow: 0 2px 14px 0 rgba(29,37,64,0.06);
  margin-bottom:40px;
}
.legal-section h1 { margin-bottom:30px; color:var(--color-title); }
.legal-section h2 { margin-top:22px; color: var(--color-primary);}
.text-section {margin-top:0; margin-bottom:0;}
.text-section ul {margin-left:22px; margin-bottom:18px;}
.text-section li {margin-bottom:8px;}


/* ----------------------------------------------------------------------
   MOBILE-RESPONSIVE ADJUSTMENTS
   ---------------------------------------------------------------------- */
@media(max-width:600px){
  body {font-size:15px;}
  h1{font-size:1.45rem;}
  h2{font-size:1.07rem;}
  .btn-primary, .btn-secondary{font-size:.96rem; padding:12px 17px;}
  .container{padding:0 8px;}
}

/* ----------------------------------------------------------------------
   COOKIE CONSENT BANNER & PREFERENCES MODAL
   ---------------------------------------------------------------------- */
#cookie-consent-banner {
  position:fixed; left:0; right:0; bottom:0;
  width:100vw; z-index:9999;
  background:#FFF;
  color:var(--color-title);
  box-shadow:0 -2px 24px 0 rgba(24,64,139,0.09);
  border-top:1px solid #ECECEC;
  padding:22px 16px 16px 16px;
  display: flex;
  flex-direction:row;
  align-items:center;
  justify-content: space-between;
  gap:30px;
  transition:transform .35s cubic-bezier(.8,.18,.25,1), opacity .3s;
  opacity: 1;
  transform: translateY(0);
}
#cookie-consent-banner.hide {
  opacity:0; pointer-events:none;
  transform: translateY(110%);
}
#cookie-consent-banner .cookie-message {
  font-size:1rem;
  max-width:400px;
  color: var(--color-muted);
}
#cookie-consent-banner .cookie-btn-group {
  display: flex; gap:14px;
}
#cookie-consent-banner button {
  font-family:'Georgia',serif;
  font-size:.98rem;
  border-radius:24px;
  padding:8px 22px;
  border:none;
  cursor:pointer;
  background:var(--color-primary);
  color:#FFF;
  transition:background .18s, color .17s, box-shadow .15s;
  box-shadow: 0 1px 6px 0 rgba(24,64,139,.09);
}
#cookie-consent-banner button.cookie-settings {
  background: #FFF;
  color: var(--color-primary);
  border:1px solid var(--color-primary);
}
#cookie-consent-banner button:hover:not(.cookie-settings),
#cookie-consent-banner button:focus:not(.cookie-settings) {
  background: var(--color-secondary);
  color:#FFF;
}
#cookie-consent-banner button.cookie-settings:hover,
#cookie-consent-banner button.cookie-settings:focus {
  background:var(--color-primary);
  color:#FFF;
}
@media (max-width: 768px) {
  #cookie-consent-banner {flex-direction:column; align-items:flex-start; gap:16px; padding:20px 6px 12px 6px;}
  #cookie-consent-banner .cookie-message{font-size:.96rem;}
}

#cookie-preference-modal {
  position: fixed;
  z-index: 10000;
  left: 0; top:0;
  width:100vw; height:100vh;
  background-color:rgba(29,37,64,.29);
  display:flex; align-items:center; justify-content:center;
  opacity:1; transition:opacity .3s;
}
#cookie-preference-modal.hide { opacity:0; pointer-events:none; }
.cookie-modal-dialog {
  background:#FFF;
  color:var(--color-title);
  border-radius:18px;
  box-shadow:0 2px 30px 0 rgba(24,64,139,0.14);
  width: 98%;
  max-width:420px;
  padding:36px 28px 24px 28px;
  position:relative;
  text-align:left;
  animation: cookie-modal-in .3s cubic-bezier(.72,.12,.20,1);
}
@keyframes cookie-modal-in {
  from {transform: translateY(70px) scale(.93); opacity:0;}
  to {transform:none; opacity:1;}
}
#cookie-preference-modal h2 {
  margin-top:0; font-size:1.2rem; color:var(--color-primary);
  margin-bottom:18px;
}
#cookie-preference-modal .modal-close-btn {
  position:absolute; top:15px; right:16px;
  background:none; border:none; color:var(--color-title); font-size:1.45rem; cursor:pointer;
}
.cookie-category {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;
  padding:10px 0;
  border-bottom:1px solid #ECECEC;
}
.cookie-category:last-child{border-bottom:none;}
.cookie-category label{font-weight:500;}
.cookie-category input[type=checkbox]{width:22px; height:22px; accent-color: var(--color-primary);}
.cookie-category input[disabled]{opacity:.6;}

.cookie-modal-actions {margin-top:18px; display:flex; justify-content: flex-end; gap:14px;}
.cookie-modal-actions button {
  font-family:'Georgia',serif;
  border-radius:20px;
  padding:6px 18px;
  border:none;
  font-size:.99rem;
  cursor:pointer;
  background:var(--color-primary);
  color:#FFF;
  transition:background .19s; margin-left:6px;
}
.cookie-modal-actions button.cancel {
  background: #FFF; color:var(--color-primary);
  border:1px solid var(--color-primary);
}
.cookie-modal-actions button.cancel:hover,
.cookie-modal-actions button.cancel:focus {
  background:var(--color-primary); color:#fff;
}
.cookie-modal-actions button.accept {
  background: var(--color-secondary); color:#FFF;
}
.cookie-modal-actions button.accept:hover,
.cookie-modal-actions button.accept:focus {
  background: var(--color-primary); color:#FFF;
}

/* =======================================================================
   MISCELLANEOUS
   ======================================================================= */
::-webkit-input-placeholder {color: #848484;}
::-moz-placeholder {color: #848484;}
:-ms-input-placeholder {color: #848484;}
::placeholder {color: #848484;}


/* Utility classes ------------------------------------- */
.mt-0{margin-top: 0 !important;}
.mb-0{margin-bottom: 0 !important;}
.mt-2{margin-top: 2px;}
.mt-16{margin-top: 16px;}

/* Hide visually but keep in accessibility tree */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Easy modal overlay fade */
.fade-in {
  animation: fade-in .35s cubic-bezier(.7,.15,.27,1);
}
@keyframes fade-in {
  0% {opacity:0;}
  100% {opacity:1;}
}


/* =======================================================================
   END OF STYLE.CSS
   ======================================================================= */