/*
Theme Name: Landingpage
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Template: twentytwentyfive
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Five emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
Tags: one-column,custom-colors,custom-menu,custom-logo,editor-style,featured-images,full-site-editing,block-patterns,rtl-language-support,sticky-post,threaded-comments,translation-ready,wide-blocks,block-styles,style-variations,accessibility-ready,blog,portfolio,news
Version: 1.0.1738767647
Updated: 2025-02-05 16:00:47

*/

/* FONTS */


/* roboto-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/roboto-v47-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('/fonts/roboto-v47-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 600;
  src: url('/fonts/roboto-v47-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('/fonts/roboto-v47-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-slab-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/roboto-slab-v34-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-slab-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 500;
  src: url('/fonts/roboto-slab-v34-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}



/* Fonts Ende */

/* Variablen aka Tokens */
:root {
    --color-brand:#addb08;
    --color-text-light:#ffffff;
    --color-text-medium:rgb(201, 201, 201);
    --color-text-contrast:#000000;
    --currentColor:#addb08;
    --highlight-color:#f5f5f5;
    --lightbg:#f5f5f5;
    --darkbg:#161616;
    --boxbg:#f0f0f0;
    --sloganbg:#f0f0f0;
    
    --width-half:28rem;
    --width-third:45rem;
    --width-full:85rem;

    --space-s: 1em;
    --space: 2em;
    --space-m: 3em;
    --space-l: 7em;
    --space-xl: 10em;
    
}

::selection {
    background-color: var(--color-brand);
    color:var(--color-text-contrast);
}

body {
  font-size: clamp(1em, 2.5vw,1.2em);
  font-family:"Roboto", sans-serif;
  margin: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
  color:var(--color-text-contrast);
}

html {
    scroll-behavior: smooth;
  }

 h1.hero-title,
 h2.hero-title {
  font-size:30px;
  font-family: "Roboto Slab", serif;
 } 

h1.hero-title {
  color:var(--color-text-light);
}

h2.hero-subtitle {
  font-size:25px;
  color:var(--color-text-light);
}

h3, h4, h5, h6 {
  font-family: "Roboto Slab", serif;
}

.wp-site-blocks > * {
    margin-block-start: 0;
    margin-block-end: 0;
}

.highlight-container, .highlight {
    position: relative;
    color:var(--color-text-contrast);
  }
  
  .highlight-container {
    display: inline-block;
  }
  .highlight-container:before {
    content: " ";
    display: block;
    height: 90%;
    width: 100%;
    margin-left: -3px;
    margin-right: -3px;
    position: absolute;
    background: var(--color-brand);
    transform: rotate(2deg);
    top: -5px;
    left: -4px;
    border-radius: 20% 25% 20% 24%;
    padding: 10px 3px 3px 10px;
  }

  
/* font-scaling */


.container {
    max-inline-size: var(--width-full);
    margin-inline: auto;
    
  }

  .content { 
    margin-block:var(--space-l);
}

.contact-columns {
    margin-block-start: -60px;
}



@media screen and (min-width:768px) 
{
    .container {
        padding-inline:0;
    }
   
}

@media screen and (min-width:768px) {

  h1.hero-title {
    font-size:60px;
   } 
  
  h2.hero-title {
    font-size:45px;
   } 

  h2.hero-subtitle {
    font-size: 33px;
  }

  .intro-box {
        max-inline-size: var(--width-full);
        margin-inline:auto;
        padding-block:var(--space-s);
        padding-inline:var(--space-s);
        display:grid;
        grid-template-columns: 1fr 1fr;
        background-color: var(--lightbg);
    }

  .content { 
        margin-block:var(--space-s);
    }
    
    
  .intro-text {
        
    font-size: 1.2em;
        
    }
    
  .intro-img img {
        margin-block-start: -3em;
    }
    }
    
  .intro-img img {
        max-width: 100%;
        height:auto;
        padding-inline: 0;
    }
    
    @media screen and (max-width:768px) {
    .intro-text { 
        margin-block-end: var(--space);
        padding-block:1em;
        padding-inline: 0;
    }
    
}

.content-box {
    padding-block-start: 0.5em;
    padding-block-end: var(--space);
}

.contact {
    max-inline-size: var(--width-full);
    margin-inline: auto;
    border:1px solid #e7e7e7;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

@media screen and (max-width:660px) {
    .contact {
        border:none;
        grid-template-columns: 1fr;
    }

    .address {
        border:1px solid #e7e7e7;
    }
}

.address {
    padding-inline:var(--space);
    padding-block:var(--space);
    line-height:1.9em;
    
}

.maps {
  padding-inline:var(--space);
    padding-block:var(--space-s);
    line-height:1.9em;
}

@media screen and (min-width:768px) {
    .content {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap:2em;
        max-inline-size: var(--width-full);
        margin-inline:auto;
        padding-block:var(--space-m);
    }

    .wp-block-buttons > .wp-block-button {
        margin: 0;
      }
    }
    
    .sidebar {
        background-color:var(--currentColor);
        color:var(--color-text-light);
        margin-block-start: 0;
        border-radius: 5px;
    }
    
    .sidebar p {
        padding-inline: 1em;
        line-height: 1.9em;
    }
    
    .sidebar h3
    {
        padding-inline: 1em;
    }
    
    .sidebar a {
        color:var(--color-text-contrast);
        text-decoration: none;
    }
    
    .sidebar img {
        margin-block-end: -2em;
        width:100%;
        height:auto;
    }

    .icon-img img {
        margin-block-start: -60px;
    }