/* Dodolino Regular */
@font-face {
  font-family: 'Dodolino';
  src: url('Dodolino.woff2') format('woff2'),
       url('Dodolino.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-feature-settings: "liga" 1;
  font-display: swap;
}

/* Dodolino Bold */
@font-face {
  font-family: 'Dodolino';
  src: url('Dodolino_bold.woff2') format('woff2'),
       url('Dodolino_bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-feature-settings: "liga" 1;
  font-display: swap;
}

/* Dodolino Italic */
@font-face {
  font-family: 'Dodolino';
  src: url('Dodolino_italic.woff2') format('woff2'),
       url('Dodolino_italic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-feature-settings: "liga" 1;
  font-display: swap;
}

/* DodolinoLS Regular */
@font-face {
  font-family: 'DodolinoLS';
  src: url('DodolinoLS.woff2') format('woff2'),
       url('DodolinoLS.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-feature-settings: "liga" 1;
  font-display: swap;
}

/* DodolinoLS Bold */
@font-face {
  font-family: 'DodolinoLS';
  src: url('DodolinoLS_bold.woff2') format('woff2'),
       url('DodolinoLS_bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-feature-settings: "liga" 1;
  font-display: swap;
}

/* DodolinoLS Italic */
@font-face {
  font-family: 'DodolinoLS';
  src: url('DodolinoLS_italic.woff2') format('woff2'),
       url('DodolinoLS_italic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-feature-settings: "liga" 1;
  font-display: swap;
}

/* DodolinoSS Regular */
@font-face {
  font-family: 'DodolinoSS';
  src: url('DodolinoSS.woff2') format('woff2'),
       url('DodolinoSS.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-feature-settings: "liga" 1;
  font-display: swap;
}

/* DodolinoSS Bold */
@font-face {
  font-family: 'DodolinoSS';
  src: url('DodolinoSS_bold.woff2') format('woff2'),
       url('DodolinoSS_bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-feature-settings: "liga" 1;
  font-display: swap;
}

/* DodolinoSS Italic */
@font-face {
  font-family: 'DodolinoSS';
  src: url('DodolinoSS_italic.woff2') format('woff2'),
       url('DodolinoSS_italic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-feature-settings: "liga" 1;
  font-display: swap;
}

.container {
    max-width: 915px;  
    width: 100%;   /* Container darf auch auf kleinen Screens schrumpfen */     
    margin: 0 auto;
    border-left: 2px solid #dfdddd;
    border-right: 2px solid #dfdddd;
    border-bottom: 2px solid #dfdddd;
    background-color: white;
    padding: 0 20px 20px 20px;
    color:#005457
}

.container img {
    max-width: 100%;    /* füllt die verfügbare Breite des Containers */
    height: auto;      /* behält Seitenverhältnis bei */
    display: block;
    margin: 0 auto 40px auto;
    box-shadow: 0px 1px 2px 2px rgba(0,0,0,0.15);
    border: 5px solid white;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

body {
    background-image: url('GreenSky2.jpg');
    background-repeat: repeat;
    background-size: auto;
    background-position: top left;
    margin: 0;
}

textarea {
    width: 100%;
    height: 46vh;         /* 46% der Viewport-Höhe */
    min-height: 250px;    /* nicht kleiner als 250px */
    max-height: 600px;    /* nicht größer als 600px */
    resize: none;
    padding: 15px;
    box-sizing: border-box;
}

textarea:focus {
    outline: none;
}

h1 {
    font-family: Arial, sans-serif;
    font-size: 20px;
    color: #005457;
}

.font-controls {
    margin-bottom: 15px;
}

.font-controls label {
    font-family: Arial, sans-serif;
    font-size: 15px;
    margin-right: 10px;
}

#font-select {
    font-family: Arial, sans-serif;
    font-size: 15px;
    padding: 2px 6px;
}

.font-controls .buttons {
    display: inline-flex;
    gap: 10px;
    margin-left: 20px;
}

.font-controls .buttons button {
    font-family: Arial, sans-serif;
    font-size: 15px;
    padding: 5px 10px;
    border: 1px solid #005457;
    border-radius: 4px;
    background-color: #ffffff;
    color: #005457;
    cursor: pointer;
}

.font-controls .buttons button:active,
.font-controls .buttons button.active {
    background-color: #005457;
    color: #ffffff;
}

#sample-text {
    font-feature-settings: "liga" 1, "ss01" 0, "ss03" 0; /* Ligaturen an, alles andere aus */
    font-size: 80px;
}